まずはデータです。

• ファイル（別ウィンドウ・タブで開きます）
• 商品情報ページ（別ウィンドウ・タブで開きます）
• ファイルを一括でダウンロードする（zip形式：254KB）

※ちなみにソースコードはCoolWevWindowに、画像はCSS HappyLife様に著作権があります。ファイルの閲覧は可能ですが、二次利用、再配布は厳禁です。良識の範囲でご活用ください。

基本設計は大事だよ

とりあえず、今回Photoshopの生データあるいはそれを画像化したものを見て、ロールオーバー時にどのように変化するかを見ないといけなかったのですが、全然わかりませんでした。
なので、結構つけていないものがあることに、他の方のデータを見たときに思いました（泣）

私は田舎で仕事をしているので、ほぼ全てを一人でこなします。
そのため、他の会社では、デザイン担当者とコーディング担当者の意思疎通をどのようにやっているのかわかりませんが、少なくとも私の会社では、設計書を作成します。
これを見れば、他の人が見ても作れるくらいに落とし込みます。
例えばここにはアンカーがあって、どこのページにリンクしているとかそういうことまで書きます。
で、最初は簡単な図を書きますが、出来上がったら実際のものをキャプチャなどして差し替えます。
本来なら、デザインはPhotoshopで作成してそれを元にコーディングするのですが、お客さんのHPを作成する場合は、作りながらきりのよいところでディスカッションして、修正という形を取ったほうが明らかに早いので、人に提出できるようなPhotoshopデータは基本的に作りません。（ただし個別の画像データは納品します。）

今回のようなコーディングコンテストは、いわば外注にコーディングさせるようなものだと思います。
やはり設計書的なものがないと辛いなあと感じました。

今回は時間がないということで、仕方なかったのですが、次回そういうのがあるとよいなと思います。
それでもあのデザインを（他の業務があるにもかかわらず）短期間にやったデザイナーさんはすごいと思いました。お疲れ様でした。

何を基準にコーディングするか

このコーディングコンテスト開催の意義でもある「提案力」というのがこれにあたると思うのですが、何を基準にするか？というのは大切だと思います。
個人的に感動したのは、浜賞を受賞したkoseiさんです。
CSS HappyLifeさんの下記のページを読んでください！
この方はユーザの立場になって、こと細かくデザインが機能面をつぶしてしまっていることを指摘しているんですが、ああ、こういう視点から見ないといけなかったなぁと反省しました。

浜賞☆コーディングコンテストVol.1｜CSS HappyLife

私個人の意見としては、CSSや画像表示をはずした時点で、一般的なユーザが見やすいかどうかは関係ないと思います。
そもそもCSSや画像をわざわざはずして見るユーザはいない点と、マークアップというのはユーザのためではなく「機械」のためのものだと思っているからです。
機械というのは、検索エンジンロボットであり、音声ブラウザのようなものを指します。
そういう意味では、「CSSで画像置換するかどうか」は悩みました。
果たして、検索エンジンはどこまでCSSを読んでいるのか、例えば-9999pxはスパム行為とみなすのか？というのは実際のところわかりません。
この点は、私の中で結論が出てないので、もうちょっと考えます。

「何を基準に審査するか」は審査員別にお考えがあったようなので、それに見事マッチした方が受賞したという形でしょうか。（審査員別の受賞に関しては）

今回思ったことは、「何を基準」にするかは、そのウェブサイトの本質（目的）を見抜く必要があることを勉強しました。
先のkoseiさんは、このサイトで商品を紹介・販売することがメインになることに着眼しておりました。
このあたりは、実際の業務でもすごく不可欠な要素です。今回一番心に残ったことですね。

ディレクトリ構成

ディレクトリ構成ですが、indexファイルはもちろんルートの直下ですが、その他のhtmlファイルは数が少ないとわかりきっているときはルートの直下。そうでないときはカテゴリ分けします。
CSSファイルはルートの直下にCSSという名前のディレクトリを作ってその中に入れます。CSSファイルが一枚の場合でも同様です。
他のプログラムを使う場合は、ルートの直下に例えば、phpとかjsといったようなディレクトリを作ります。
イメージファイルは、ルートの直下にimageあるいはimgというディレクトリを作成して、その中でまた個別にディレクトリを作成します。
イメージファイルはどうしても数が多くなってしまうのである程度カテゴリわけしてたほうがよいと思います。

これは基本なので、みんなやっていると思いますが、htmlファイルでも画像ファイルでも同じことが言えますが、例えばsample.htmlに10までの連番をつけるとします。
この場合どのように名前をつけますか？
正解なのが、例えば「sample01.html」や「sample_01.html」でしょう。
桁をあわせないと、名前でソート（並び替え）したときにファイルがばらばらになってしまうので注意が必要です。

興味深く感じたコーディング

全てに説明するとたきりがないので、要点だけ紹介します。
今回、画像も自分で切り貼りしてよかったので、一番みんなで違いが出たのがページ上部でした。
ここは公開されている皆さんのデータみたほうがよいです。すごくみんなユニーク！

ちなみに私は邪道なことに背景画像は繰り返さず、一枚でやってます。
これはどうしても、斜線とバナー部分でうまくつなぎができなかったのですが、私はばかなことに、バナーのほうの斜線をずらしてる！！！ってことに先ほど気づき、涙しております。
本来なら、できるだけ画像は軽く、繰り返せるならそれに越したことがないのですが、7KBという軽さだったので適用しました。
でももうちょっといい方法あったなぁと思いました。

トップページの最新製品情報のところもちょっと考えないといけないのですが、皆さんだいたい同じような実現方法をしてましたね。

アピールポイント

1. ファビコンつけた
2. サンプルRSSファイルつけた
3. 画像のロールオーバーにはjQuery使った（参考：JavaScriptでロールオーバーメニューを作る）
4. フォントサイズは異なるブラウザでもほぼ同一に表示（参考：ブラウザに依存せず文字の大きさを統一させる方法）
5. CSSファイルにフォント換算表つけた
6. フォントを大きくしてもIEでいう最大程度ではデザインくずれしない

個人的反省点

最大の反省点は、印刷ページのことを全く考えてなかったことです。というかすっかり忘れていました。
しかも、一部のCSSファイルは印刷時に適用してないのでくずれまくってます。

実際、HP作成していても、比較的印刷のことは言われてしまうんですよね。
印刷を例えばA4サイズを行おうとしても、個人の設定によっては横幅約150mmくらいしかとれないわけです。px換算したら450pxですよ。
ブラウザでそのまま見えているのを印刷するのは難しいんですよね。
印刷の話は長くなるのでまた次回コラムを設けたいと思います。

最後に

最後になりましたが、CSS HappyLifeの平澤さんには、このような機会を与えてくださりありがとうございました。
審査員の方々もありがとうございました。無償で見ていただけるということは本当に稀だと思います。
本当にこんなところですみません。

今回参加された方のソースコードならずコメントも非常に有用ですので是非CSS HappyLifeさんのサイトのみならず、作者さんのサイトも訪れてみてください。