コーディングコンテストVol.1にて、長谷川賞を獲得されました、Complexさんのデータを公開します!
受賞者の一覧はコンテストの結果とLP3を終えてを見てください。
追記にて、profile.txtに記載して頂いた情報や、長谷川さんからのコメントを掲載いたします。
profile.txtの内容
お名前
Complex
URI
職業
業務としてはWebを中心としたコンテンツプランニング・制作・運用などを行っています。
会社名
(有)コンプレックス
CSSによるコーディング歴
1~2年
作業環境関連のデータ(OS、オーサリングソフト、エディタ)
- MacOS X
- JEdit
- JChecher
- mi
おおよその作業時間
4日くらい
苦労した点
コーディングの前提となる与件が明確でなかった点
制作時に当該サイトのディレクター、デザイナーとコミュニケーションが取れず、ディレクションやデザインの意図が不明であり、想定のもとに作業を行ったこと。
ディレクターへ提案!(物申す)とその理由
当該案件に関しては、与件としての目的(アクセシビリティやSEOなども含めて)があったうえでなければ、コーダーから提案することはなかなか難しいと思います。
あえて一般論でいえば、与件の整理、主要目的とその優先順位などを整理していただき、さらにコーディング(XHTMLなど)やスタイルシート(CSSなど)に関する技術的知識を持ったうえで、コーダーに適切な指示をいただき、また助言を求めていただきたいと思います。
デザイナーへ提案!(物申す)とその理由
「ディレクターへ提案!」と同様に、デザイン的な目的が明確でなければ、コーダーから提案することはなかなか難しいと思います。
あえて一般論でいえば、スタイルシート(CSS)で再現することを想定してデザインしていただけるとコーディング作業も効率化できます。
たとえば、ヘッダ、フッタ、コンテンツ領域などのブロックごとに必要な画像と不必要(背景など)な画像の違いがわかるようにレイヤー分けされていれば、PSDファイルからの画像の抽出作業が効率化できます。
自由コメント
コーディングにあたっての与件として不明な点が多かったため、基本的に以下の想定のもとに作業を行いました。
===想定=========================
・デザイン(クリエイティブ)は基本的に完成品とする
・SEOやアクセシビリティなどの施策は初期対応(基本的なコーディングまで)とし、具体的な施策は基本コーディング後に打ち合わせるものとする(実務的ではありません)
・スクリプトは使用しない(実務では状況に応じて使用します)
・現状では不明な要件が明確となった時点で、可能な限り修正・改善がやりやすいようにコーディングする
================================
【今回の作業内容】
上記想定を踏まえて今回行った作業内容は以下のとおりです。
================================
▼XHTMl文書をできるだけシンプルにコーディング
XHTMLベースでの更新のしやすさを考慮して、シンプルなコーディングに努めました。
▼デザインをなるべく忠実に再現
クリエイティブは完成品と想定しました(現実的にはディレクションベースでデザインの検討余地ありだと感じます)。
▼本文部分の文字可変に対応
クリエイティブはクライアント与件として優先度が高い部分もあるため、安易にコーダーからの提案は行えません。「アクセシビリティを考えれば文字はもっと大きい方がいい」といった提案は助言を求められれば意見として述べます。当該案件に関しては、クリエイティブは完成品と想定したうえで、文字可変には対応し、可能な限りレイアウト崩れが起きないように努力しました。
▼画像のaltを多少補完
アクセシビリティへの最低限の対応として、alt属性の内容を補完しました。より詳細な施策はディレクターとの打ち合わせのもとに、最適なコピーワークが必要です。
▼印刷時のCSSを用意
実務的なワークフローを考えれば、この時点で印刷用CSSを作成するかどうかは疑問ですが、一応作成しました。
【懸案事項およびコメント】
上記想定を踏まえて、今後の作業として考えられる懸案事項およびコメントは以下のとおりです。
================================
▼想定外への対応
想定外の事例がでた場合の互換性を考えてXHTML 1.0 Transitionalを採用しました(たとえば、外部リンクを別ウィンドウで開きたいなどのクライアントニーズ)。
▼CSSの設計
企業サイトという性質上、個人がcssを変更できる仕様は想定していません。
▼スクリプトの採用・非採用
あえてスクリプトは使用せずCSSのみで表示を制御しましたが、状況に応じてアクセシビリティも考慮したうえでのスクリプト採用はありえます。
▼meta情報
keyword、descriptionのみ入れました。
▼title表示のルール
title要素の内容はSEO施策と連動したコピーワークが必要とされるかもしれません。
▼アクセシビリティに関して
いくつかのアクセシビリティに関する問題点があります。
・hover画像、ページトップのテキスト部分など
・スタイルを適用したまま画像をoffにした場合の不具合(altが重なって表示されてしまう)
・テキストブラウザ、音声ブラウザ用の隠しメニューどうするか?今回は入れていません(今後のディレクションベースでの検討課題)。
・フォームのtabindex、accesskeyをどうするか?上記項目に関わってくる可能性があるので今回は入れていません。
・フォームテキストのvalueに何を入れるか、もしくは入れないか。今回は入れましたが、スクリプトでonclick時にテキストを消すことも検討課題です。
・リンクや画像のtitle属性をどこまで入れるか。今回は今度のディレクションベースでの検討課題として、あえて入れていません。
▼非対応事項
・winIE7のズーム
・winIE5~5.5の表示チェック
・macIE5で表示と印刷の不具合がある
・携帯フルブラウザへの対応
・ほか、いろいろ
【その他】
コンテストの基本与件として、コーディングベースとディレクションベースの判断が混在しているように思います。ディレクションベースの判断には、もう少し与件を明確にしていただければコーディングの方向性も絞れたように思います。
審査員コメント【長谷川 恭久(COULD)】
ファイル構成、HTMLとCSSのコーディング、どれを見ても「これはすごイ!」という部分はないものの、シンプルで分かりやすく作られていて確実にやっておきたいところを確実にやったというエントリーだと思いました。CSSに関してもコメントの付け方、属性の記述順番、継承のさせ方にも一貫性があり、大変見やすいという印象がありました。あえて、ショートハンドを使わない部分もメンテナンスの際、分かりやすくするためなのだろうという思いが伝わってきました。また、コンテストでもあまり記述がされていなかった印刷用CSSもしっかり記述されていたのもプラス要因でした。