第2回コーディングコンテスト結果発表
2010年4月17日のCSS Nite LP9にて株式会社ピクセルグリッド主催、CSS Nite LP9連動 第2回コーディングコンテストの結果発表が行われ、89件（有効81件）の応募作品の中から優秀作品が選ばれました。
審査について
審査は審査員それぞれが7点まで作品を選出するプレ審査、その後、2名以上の審査員に選ばれた作品を本審査という流れで行いました。
審査風景写真
審査委員長から
審査委員長の小久保です。コンテストに参加されたみなさん、また応募するまでは行かなかったけれども課題に挑戦されたみなさん。本当にお疲れ様でした。そしてありがとうございました。今回のコンテンストのお題はチャレンジングな要素が多く、かなり時間がかかったことと思います。私は前回のコーディングコンテストでも審査員を務めさせていただきましたが、今回は課題が難しくなったのにもかかわらず応募作全体のレベルは前回よりもかなり上がったと感じました。しかしこれは別の角度から見れば優劣を比較するのが難しくなったと言うこともできます。
今回のお題となったデザインには意図的に様々な課題要素が盛り込まれていました。審査する上では、それらに対してHTML5やCSS3を用いてどのようにアプローチするのか、というのが大きなポイントだったわけですが、想像以上に多様なアプローチがあり、どれも非常に興味深く、優劣をつけるのは非常に難しいものでした。
事実、審査員各自で行ったプレ審査の結果を出し合ったところ、それぞれが違った作品を挙げました。それらの各作品に対して全員で再度確認していったのですが、どの作品も見るべきところがあり、どの作品にも惜しい部分がありなかなか審査員の意見がまとまりませんでした。しかしこれはある意味当然の事なのかもしれません。まだ仕様が固まってもいないHTML5、ブラウザの実装が追いついていないCSS3、これらを使った「ベストプラクティス」がどんなものなのかはまだ誰にもわかりません。
そんなわけで、審査員全員で長時間にわたって議論しましたが、やはり最終的にどれか一つの作品が明らかに飛び抜けているとは言えない、という結論に至り、結果として「最優秀賞は該当なし」ということになりました。
しかしながら、今回のコンテストを実施して得られた成果は当初考えていた以上に意義深いものでした。皆さんから寄せられた応募作と添えられたコメントから、今後私たちが取り組んで行くべき方向性や向きあうことになるであろう課題が浮き上がってきたように思います。それは端的に言うと次の2点です。
- 迫られるワークフローの変化
- 新しいタイプのコーダー像の出現
実際に課題に取り組まれた方は多かれ少なかれ感じたかもしれませんが、従来の「絵として完成したPSDを渡されてそれを再現するためにコーディング」というフローは見直しを迫られるでしょう。少なくともHTML5やCSS3などの新しい技術の利点の一つである「迅速な開発が可能」という恩恵を享受するためには業務の分担範囲を再考する必要がありそうです。
また2点目の「新しいタイプのコーダー像の出現」については上記の変化に対応した、従来よりも広い範囲のスキルセットを持った人材に対するニーズから想定されるものです。例えば従来の実装スキルに加えてビジュアルデザインやインターフェイスデザインについての知識を持った人材です。HTML5やCSS3で拡張された機能はそれらに関するものが非常に多く、これを使いこなして利点を活用するために然るべき知識が求められるのは必然でしょう。
これらの課題を明らかにすることが出来た今回のコーディングコンテストは本当に意義あるものになったと思います。まだまだ今回のコンテストとそこから見えてきた展望に関してはシェアしたいところが多いのですがそろそろいい加減長くなってきましたね。というわけでこの続きはCSS Nite LP, Disk 9.2（reprise）で!!（小久保 浩大郎）
各賞（優秀賞）
シックス・アパート賞
No.0071 まりおさん
賞品：シックスアパートグッズ詰め合わせ（パーカー, ipod shuffleなど）
ピクセルグリッド賞
賞品：ピクセルグリッドダーツ
審査員コメント
セクショニングコンテンツを無理なく利用していた点、title属性とalt属性の違いを意識していた点、表組みをtableでマークアップしていた点を評価しました。HTML5の新しい考え方を理解することも大切ですが、既存のHTMLの考え方も大切です。dl要素やtitle属性の乱用が散見した今回のコンテストですが、この作品にはこれらの問題もなく、丁寧にマークアップされている印象を受けました。
加えるとするなら、ユーザーの行動を意識したインタラクションに対してもう少し気を配ってみるとさらにいい内容となるかと思います。（小山田 晃浩）
サイバーガーデン賞
賞品：益子さんの書籍 + ipod shuffle
審査員コメント
今回のデザインを見たとき、各エリアがマルチカラムで、「max-widthによる可変レイアウトが合うだろう」と思ったので、実装していたフルカワさんの作品に魅かれたためです。
ウィンドウ幅にあわせてカラムを落とすのではなく、画像などを小さくリサイズして幅狭に対応する方法なので、その点は個人的な好みとは異なります。また、ほかのポイントもトータルで優れていた、とは必ずしもいえませんが、優秀な作品を参考にしつつ、今後の課題としてもらえれば幸いです。（益子 貴寛）
Firefox賞
No.0013 versionfiveさん / VERSIONFIVE
賞品：Firefoxジャージ
審査員コメント
「文法的に問題がない事」と「アウトラインが概ね自然である事」、HTML5の面でこの二つをクリアしつつ、 「多くのブラウザのサポート」までをカバーしている事が評価に繋がりました。 また、サイトが実際に使用された場合によく更新されるであろう部分（「ビジネスブログ導入事例」など）が柔軟な実装になっている事も好印象でした。 ただし、Safariで検索ボタンにマウスを乗せると画像が消えてしまう点や、「プラグインディレクトリ」などを囲んでいるaside要素に見出しがない点が気になりました。 検索ボタンの方はケアレスミスでしょう。aside要素は、文章の途中などに登場する場合は見出しがなくても自然ですが、今回のようなケースでは見出しが必要ではないかと私は考えています。 なお、CSSなどにDOASを使用している点は個人的にグッときました。（浜 俊太朗）
WebSite Expert賞
No.0031 比留間和也さん（面白法人カヤック） / えどさん / CSS-EBLOG
賞品 : WebSite Expert 一年分
審査員コメント
他の入賞作品と同じコメントではありますが、HTML, CSSともに丁寧な作りでした。マークアップにはいくつか改善できる点もありますが、明白に間違えているといったこともなく、コンパクトにまとめられている印象を受けました。
スタイルシートについては、抜け落ちがちなベンダー接頭辞なしのプロパティも記述していたところが素晴らしいと感じました（一箇所、見出しのところで記述忘れがありましたが）。今の実装にだけ媚びるのではなく、これからをしっかり見ようとしている姿勢にとても好感を持ちました。
一点だけ気になったのが、画面イメージの拡大画像でしょうか。元画像の幅が1120pxと大きく、ウインドウのサイズによっては画像がはみ出してしまうことから、ウインドウの幅をある程度考慮したスクリプトの実装になっていれば、より素晴らしいものになると思っています。 （矢倉 眞隆）
awesome! クリエイターズショップ賞
賞品 : お好きな作品
審査員コメント
HTMLについて、画像のalt属性値が空になっているところがすこし惜しいと感じましたが、全体的に丁寧にマークアップされており、自然なアウトラインの構造でした。CSSでは画像を最小限にとどめ、積極的に新しいプロパティを活用していた点が特に良かったです。セレクタのルールにひと工夫加えることで、よりメンテナンス性の優れたものになると思いました。（山田 あかね）
マイクロソフト賞
No.0060 tshinobuさん / tshinobu.com
賞品 : Expression Web 3
審査員コメント
この作品は、OOCSSという考え方を採用した作品です。OOCSSの基本的な考え方は、サイト内で使用されるデザインパーツをモジュールに分けて管理するというものです。この作品のソースコードは、この考え方を知っている人であればパッと見てすぐに。知らない人であっても、何をやっているのかがすぐにわかるソースコードであると判断しました。互換性を保ちつつ、CSS3を適用できる個所にはしっかりとCSS3を使っているという点も評価の対象となりました。（高津戸 壮）
毎日コミュニケーションズ・書籍編集部賞
No.0041 中谷倫平さん （株式会社ロクナナ） / りんぺいさん
賞品：新刊から3冊セット
審査員コメント
HTML、CSS、デザイン再現など全体的なレベルが高く、作業も非常に丁寧に行われており、多くの対応ブラウザへの配慮なども好印象でした。また、HTMLやCSSの設計も敢えて現実的な方法を取ることで、今からでも実際のサイトで使っていけるように考えられている点も評価の対象になっています。 とは言え、その分やり過ぎてる感も強く、例えば右上のドキュメント・プラグインは無理にテキストでやろうとせず、普通に画像で配置していた方がメンテナンス性は高くなったのかなぁと思いました。他にもHTML5の新要素や再定義された要素（timeやsmall要素など）をもう少し積極的に使うことで、より素晴らしい作品になったのではと思いますが、その点を差し引いても、現実的なラインでのHTML5 + CSS3の活用という点で非常に参考になる作品です。（平澤 隆）
入賞
審査員コメント
入賞作品として複数の審査員が選出した次の10作品を選ばさせていただきました。
今回の応募作品の特色として、オリジナリティーが高い作品が多く、優秀賞に選出された作品以外にもぜひ参考にしていただきたいサイトとして、 当初予定していなかった入賞を設定しました。
XHTML5で記述された作品や、高速化の為dataスキームを利用しリクエスト数を減らした作品、iPhone用のCSSを用意した作品、画像拡大までCSS3で記述している作品、プログレッシブ・エンハンスメントを利用しIEでも情報伝達を損なっていない作品、CSSがすごく丁寧に書かれている作品、CSS3を非常に多用している作品、JavaScriptを多用している作品、など多種多様な特色がある作品です。
HTML5やCSS3を利用することで表現の手法が、多様化することが感じられると思いますのでぜひ参考にしてください。（西畑 一馬）
全応募作品
- No.0001
- No.0002
- No.0003
- No.0004
- No.0005
- No.0006
- No.0007
- No.0008
- No.0009
- No.0010
- No.0011
- No.0012
- No.0013
- No.0014
- No.0015
- No.0016
- No.0017
- No.0018
- No.0019
- No.0020
- No.0021
- No.0022
- No.0023
- No.0024
- No.0025
- No.0026
- No.0027
- No.0028
- No.0029
- No.0030
- No.0031
- No.0032
- No.0033
- No.0034
- No.0035
- No.0036
- No.0037
- No.0038
- No.0039
- No.0040
- No.0041
- No.0042
- No.0043
- No.0044
- No.0045
- No.0046
- No.0047
- No.0048
- No.0049
- No.0050
- No.0051
- No.0052
- No.0053
- No.0054
- No.0055
- No.0056
- No.0057
- No.0058
- No.0059
- No.0060
- No.0061
- No.0062
- No.0063
- No.0064
- No.0065
- No.0066
- No.0067
- No.0068
- No.0069
- No.0070
- No.0071
- No.0072
- No.0073
- No.0074
- No.0075
- No.0076
- No.0077
- No.0078
- No.0079
- No.0080
- No.0081
- No.0082
- No.0083
- No.0084
- No.0085
- No.0086
- No.0087
- No.0088
- No.0089
おまけ
審査員 平澤 隆：作品
関連リンク
審査員ブログエントリー
- 第2回 コーディングコンテスト、個人的な総評 （益子 貴寛）
- CSS Nite LP9 & 第2回コーディングコンテストレポート （山田 あかね）
審査員コメント
自然なアウトラインを実現している HTML だけではなく、CSS ファイルの内容に独自のルールを設けてあったり、画像ファイルの命名規則、構成ファイルの管理方法に、普段から丁寧な作業を心掛けていることが感じられる作品です。
デザインの再現、mark 要素の使用箇所など気になるところもありましたが、作品全体から伝わる制作者の細かい気配りと、メンテナンスのしやすさを評価しました。（上ノ郷谷 太一）