コーディングコンテストVol.1にて、神森賞を獲得されました、スーパー肩パッドさんのデータを公開します！
受賞者の一覧はコンテストの結果とLP3を終えてを見てください。
追記にて、profile.txtに記載して頂いた情報や、神森さんからのコメントを掲載いたします。
また、神森さんのサイトのT-STUDIOにLiveコーディングのデータが公開されておりますので、そちらもご覧下さいませ。
profile.txtの内容
お名前
スーパー肩パッド
サイトURI
年齢
26歳
職業
会社員（Webデザイナー）
会社名
（株）テンポ
CSSによるコーディング歴
2006年5月中旬より業務に携わるようになりました。もうすぐ1年です。
作業環境関連のデータ（OS、オーサリングソフト、エディタ）
XP、ドリ8、PhotoshopとImageReady
おおよその作業時間
10.0h
7割方IE6と角丸に悩まされました。当初の見込みは3時間でした！
苦労した点
▽IE6での対応
死ぬかと思いました。不要なコードがたくさんです！しかしIE7がボチボチ描画できるところに驚きました。
▽h1の背景画像
どうしようかとあぐねていたら、天の声が聞こえました。きっとモダンブラウザの神様の声だと思います。
▽Macを持っていないので、すべて勘で対応したところ
スクリーンショットレベルしかわかりませんでした。申し訳ないです。やはり調達できるよう努力しなければなりませんね。
▽角丸
変なコードがたくさんになるのはさけたいところだったので、javascriptで対応しました（それでもspanだらけになりました。span最高！）。
jsライブラリはjQueryしか触ったことがなく、安直に角丸プラグインを使っていましたが、うまく角丸を描画してくれなくて困りました。結局、javascriptを自作しました。
それでもうまくいかないところが多く、多少のcssハックをかけましたが、プラグインよりは随分と見栄えも保守も楽になったかと思います。safariで一箇所おかしくなっているのを直したいのですが…、Macどうにかして手に入れます！
ディレクターへ提案！（物申す）とその理由
▽製品問い合わせフォーム「全角カタカナ」はカタカナの変換がわからない人や、自分の名前を変換したときカタカナのものが残っていると嫌だと思いますので、ひらがなにしています。
▽角丸をとるか、htmlをとるか
角丸をとることが大事かと思います。しかし、角丸があるところはほぼすべて不要なタグが詰め込まれてしまいます。いずれにせよ工数が余分にかかり、最初に十分な議論や決め事として使うかどうかを決めたいところですね。
デザイナーへ提案！（物申す）とその理由
▽「製品詳細」の「価格」「素材」「備考」の大きさが異なっていたため修正しました。
▽ロゴの右部分ピクズレはコーダーが触れる範疇ではないため、そのままにしています（通常は、PSDが届いた時点でアラートを出します）。
自由コメント
▽htmlは極力いじらずに、視覚的効果（ロールオーバーなど）はjsの処理でやっています。
▽htmlの構造は基本的に
h
section
h
dl
のパターンで繰り返しています。あっちはdl、こっちはh3とulまたはcaptionとtableなどパターンが複数入っているとリニューアル時が大変です。ガイドラインを守ることで保守も簡単になると思っています。
▽絶対配置の多用について
他人の作成した絶対配置はなかなか触りづらいですが、恐れずに使いました。
それ相応のスキルが必要かと思いますがきちんとしたガイドラインを書けば問題ないですし、スキルの底上げにもつながるかと思います。
▽print
まったくプリント対応してません！
▽最後に
大変よい機会をありがとうございました！
スィ～エスエス 大会ばんざい！
審査員コメント【神森 勉（アンカー・テクノロジー株式会社）】
非常に扱いにくいインターフェースデザインでしたが、インターフェースと文書をどう両立させるかを考えた結果、本来の文書構造には不要かもしれない要素を追加する状況は現場で起こることです。もちろんそうならないようにする実装技術と提案力も必要ですが、サイト構築の中で優先すべきことを判断した上で実装することは大切だと思っています。
今回選ばさせていただいた作品は、そういう部分が見え隠れしている感じを受け、大変悩まれたと思います。
その中で、コメントにもあるように一定のルールに従った構造処理などは、サイトを運営する点もさることながら、サイト内の情報の一貫性を保つためにもルール付けは非常に重要です。その部分は、大変共感をいたしました。
また、より多くの人が利用するであろうWebサイトというのを想定した際に、様々な環境で閲覧されることは想定の範囲だと思います。今回私が注目したのが、CSSの有無・画像の有無にかかわらずサイトを利用してもらえるかどうかという点です。CSSをOFFにした際にどのように表示されるのか、逆にCSSがONでありながら画像OFFの状態だとどのようにサイトが表示されるのか、全体から見るとそういった利用者は少ないとはいえ、多くの人に利用していただくことを想定してコーディングしていくことも重要だと思っています。
ほとんどすべての作品が、CSSを切った際に正しく構造化されているコーディングをされていたので、その点に関しては大きな差異はなかったのですが、CSS ON / 画像 OFFの状態の差異に、見え方が作品毎に違っているのはなかなか興味深く、CSSの実装方法によってこう変わるのかというのを改めて実感しました。
その中で、比較的サイト閲覧として支障のないであろう作品としてこの作品を選出させていただきました。
補足として、今回は、基本的にDreamweaverの機能を活用しているかどうかは審査基準にはもうけておりませんでしたが、偶然かこの作品はDreamweaverのテンプレート機能を使って、トップページと中ページを同じテンプレートで使い回していました。特に、タグそのものをテンプレート式で操作している点は、なかなか面白いアイデアだなぁと思いました。