お待たせいたしました！
コーディングコンテストVol.1にて、最優秀賞を獲得されました、にんさんのデータを公開します！
受賞者の一覧はコンテストの結果とLP3を終えてを見てください。
追記にて、profile.txtに記載して頂いた情報や、審査員の方々からのコメントを掲載いたします。
profile.txtの内容
お名前
にん
サイトURI
年齢
29歳
職業
Web屋
CSSによるコーディング歴
2年4ヶ月
作業環境関連のデータ（OS、オーサリングソフト、エディタ）
OS / Windows XP Professional
Soft / Dreamweaver8 , EmEditor
おおよその作業時間
24時間
苦労した点
普段デザイン～コーディングまで一人で行うのですが、全く別の方の（社外の）コーディングをするのが初めてでしたので、どこをどうスライスしてどうマークアップしようか考える時点で時間が掛かってしまいました。
結局コーディングをはじめた後も、画像のスライス方法を変更する箇所がいくつかありました。
ディレクターへ提案！（物申す）とその理由
※デザイン→コーディングの段階でディレクターが介入する事があまり無いのでなにを
もの申していいのか分かりませんが、HappyLife Companyを実際の仕事と想定して…
- 製品情報「その他オススメ製品」で、テキストリンクのマウスオーバー時のアクション内容の指示があいまいだったため他と同じ処理にしました。
- MetaDescription、MetaKeyword、ページタイトルの指示がありませんでしたので、想定されるものを設定しておきました。
- ショッピングページが有るにもかかわらず、コンテンツに「特定商取引法に基づく表記」がないのですが…。
デザイナーへ提案！（物申す）とその理由
/* 全般 */
◆画像
・メインビジュアルの横幅が1px大きかったので800pxにしました。
（※背景として表示させているので実際801pxでも問題ありませんが。）
・破線部分は画像ではなくボーダーで置き換え、明度を上げました。
◆テキスト
・サイトタグライン、コピーライト以外の“ユーザによるアクションが発生する”もしくは
“読む”と思われる箇所の最小フォントが小さすぎるので、12px相当の大きさにしました。
◆リンク
・テキストリンクでhoverの指定はありましたが、visitedの指定がなかったのでデフォルトカラーの紫をベースに色の設定をしました。
・左側のバナーですが、マウスオーバー時の設定指示がありませんでしたが、他と同様に、マウスオーバー時の設定があったほうがクリックを喚起できると思いましたので、ボーダー色を変える設定をしました。
/* Home */
◆最新製品情報
・説明文が読みづらいので、フォントサイズを大きくし、行間を広げました。
また、文字ばかりで“きつきつ”した感じがするので、フォントカラーを＃333から＃666にしました。
この部分で提案なのですが、説明文をHome用に簡潔・短文にし、製品写真を入れた方が訪問者がクリックしてくれる（したくなる）と思いますがどうでしょうか。
・「真鍮製！！！！！！！サラダボウル」のエクスクラメーションマークが折り返されず、カラム落ちの原因になったり（IE6,5）、枠からはみ出す（Firefox）ため、半角スペースを1箇所挿入しました。
/* 製品情報 */
◆ローカルナビゲーション
・リンクの下線によって視認性が損なわれると思いましたので、下線装飾をあえて無くしました。それと併せ、アイコンのみ変化では弱いので、文字色も変化させるようにしました。
◆画像
・「素材」「備考」の各アイコンが四方に1pxずつ大きかったので小さくしました。
◆フォーム
・デザインカンプでの「問い合わせフォーム」では、アクセシビリティの配慮が無いため、入力条件を項目欄に、入力例を入力欄の前（画面上では上）に移動しました。
・入力欄の横幅が狭いので広くしました。
・各項の下線は再現が難しかったため、下線無しにしてあります。
・入力欄にフォーカスした時に入力欄の背景色が変わるように設定しました。
（IE7、Safari以外のモダンブラウザ用）
自由コメント
角丸が多いデザインで苦労しました。^^;
このカンプを作ったデザイナーさん、お疲れさまです。
自身、このコーディングで新たに学んだ事が多々あり、いい機会をいただけたと思います。
普段はCSSの補助的にもう少しJavaScriptをつかうのですが、今回は極力CSSを使って表現してみました。
◆対応ブラウザ
Win / IE5.5～7、Firefox2、Opera9
Mac / Safari2、Firefox2、Opera9
◆xml宣言
有
◆DOCTYPE
XHTML1.0 Transitional
◆文字コード
UTF-8
審査員コメント
益子 貴寛（株式会社サイバーガーデン）
ほぼ満場一致で、最優秀賞となりました。
私も、はじめに推（お）したのは、この作品でした。
特に感心したのは、ナビゲーション類に対するdl要素の使い方や、印刷スタイルシートに対応していた点です。
head要素内の丁寧で充実した内容、ロゴの画像処理なども、非常によいと思いました。
皆さんも、ぜひこの作品を参考にし、提案力を支えるための想像力を鍛えてもらえると、よりよい成果物をアウトプットできるようになるだけでなく、仕事自体がもっともっと楽しくなるのでは、と思います。
小久保 浩大郎（株式会社 ビジネス・アーキテクツ）
ランク付けするとしたら、やはり何度見直して考えてみてもこの方を1位にせざるを得ませんでした。
非常によく考えられていて隅々まで気配りが行き届いた設計、実装だと思います。
実際に課題の2ページだけでなくこの「サイト」がどのように作られるのか、ということを想定したマークアップ、id/classの設定、CSSファイルの分割が行われており、まるで本当に全体が作られているサイトの中から偶然この2ページを取り出したのかと思ってしまうほどしっかりと考えられていました。
デザインの再現度も非常に高く、加えて要件で触れられていない印刷用スタイルシートまで作成しており、至れり尽くせりの感があります。
この仕事の丁寧さと気配りには本当に感心しました。
河内 正紀（株式会社 ロクナナ）
本当に細かいところまで配慮が行き届いた作品というのが第1印象です。隙のない作りは、かえってこちらが勉強になりました。
リンク先の情報をあらかじめ補足するようなtitle属性など、ひとつひとつは細かい配慮なのですが、そうした小さな積み重ねが結果的に作品全体のクオリティを高めているように感じます。
神森 勉（アンカー・テクノロジー株式会社）
非常に安定感があり、ほとんどの審査員の方々の賛同を得た作品です。
ロゴ周りの画像を透過処理によって背景のロゴとうまくマージさせるテクニックは、多くの方が採用していましたが、この作品では、ロゴとして最小限に抑えた画像をうまく背景処理でデザインした点は、一見できそうでも時間の関係で妥協してしまう点だったりする部分なので、とても感心しました。
かくいう私も、少ない時間という制約から見落としていた点でしたので、私自身もコーディングに関するテクニックの再認識をいたしました。
長谷川 恭久（COULD）
HTMLファイルではナビゲーション関連の DL の使い方には関心しました。
また、CSSファイルでも背景属性やフォント属性の改行や継承の仕方に工夫を感じました。ところどころが凝っていてコードを見ているだけでワクワクしたエントリーでした。
伊藤 学（ウィルシステム・インコーポレイテッド）
フォルダ構成からはじまり、head要素内の細かさや、IDやClassの命名方法だけでなく、見出しの使い方や、フォーム部分でのlabel要素の関連付け、各ファイル内のコメントの入れ方にいたるまで、個人的にも、総合的な面すべてにおいて点数が高い評価になりました。
結果的にも、ほかの審査員の票を集める結果となりましたね。
また、プロフィールの提案記述部分においては、自分の立場をきちんと想定し、自分が何故そのように作ったのか、が事細かに記述されていました。
現場でもそうですが、報告・連絡・相談は大事ですね。
浜 俊太朗（株式会社ライブドア）
見やすいインデント、直感的に把握しやすいディレクトリ構造、省略せずに書かれたCSSセレクタなど、多くの点において丁寧さを感じました。
id名、class名の命名規則も違和感がなく、また要素の使い方も文書に合っています。
ソースコードだけではありません。
リンク領域を広めに取っている事や、フォーム部分の（全角）（全角カタカナ）といった注意書きをinput要素の前に持ってくるなど、アクセシビリティ・ユーザービリティ・提案力という観点でも、非常に評価が高くなりました。
最優秀賞に選ばれるのも納得ですね。
データ一式
コレは冒頭で公開しているのと同じです。