コーディングコンテストVol.1にて、鷹野賞を獲得されました、HILCAさんのデータを公開します!

受賞者の一覧はコンテストの結果とLP3を終えてを見てください。

追記にて、profile.txtに記載して頂いた情報や、鷹野さんからのコメントを掲載いたします。


profile.txtの内容

お名前

HILCA

年齢

18歳

職業

-(浪人生)

CSSによるコーディング歴

1年~2年

作業環境関連のデータ(OS、オーサリングソフト、エディタ)

開発OS環境 : WinXP SP2
ローカル確認環境 : Apache
サイト作成 : Dreamweaver MX
画像処理 : Photoshop CS

おおよその作業時間

20時間

苦労した点

IEバグ
:[フロートの左右にある行の端がずれる(5.x/6.0)]
http://cssbug.at.infoseek.co.jp/detail/winie/b151.html
の対処。
いままで何度もこのバグに遭遇したけどスルーしていたので、この機会にと思いCSSハックを利用しない回避法を色々と考案していたのですが、どれも不完全でやはり諦めざるを得なかったです。

ディレクターへ提案!(物申す)とその理由

●検索機能をつけるべきだと思います
:アクセシビリティ向上のため。

○想定していなかっただけでしょうが、製品情報のページで注文が可能であるならば、どこか(左のメニュー等)にショッピングカートへのリンクを張るべきだと思います。

●プロダクトページの「お問い合わせフォーム」で、フリガナを入力しなくても良い(必須項目ではない)というのは疑問です。
:どちらでも良いのであれば、そもそも項目を削除するべきだと思います。
:難読姓名の方であれば記入してくださいという含みがあるのであれば、その判断は記入者に委ねられ曖昧になるため、むしろ強制させるべきだと思います。

デザイナーへ提案!(物申す)とその理由

仕様画像を見る限りウィンドウサイズ幅800pxに対応させたいのかもしれませんが、その場合ブラウザのスクロールバーの幅も考慮し、例えば幅780pxなどでデザインするべきだと思います。

自由コメント

サイトレイアウト技術において、1ページ内により多くの情報量を持たせるliquid layoutの研究に注力しております。
自分の強みを出すということで、コンテストもliquid layoutで挑戦させていただきました。

文字の大きさが明らかに小さいので大きくするべきなのですが、
縦方向の位置を画像と等しくすることにこだわっていたためそのままです。

これからの進路については悩んでいるのですが、もちろんコーダとして働くことも視野の内にありますので、
この機会に息抜き時間を使って様々なことを学ぼうと思いました。

他のベテランの方々によるソースを早く見たいですね。
審査員の方や平澤さんをはじめとする主催関係者の方々、お疲れ様です。
どう見ても素晴らしい企画です。本当にありがとうございました。今後も期待してます。

●独断で改良した点
・メイン背景(斜線を含む青と水色の画像)の左と右で、左には中央線があるのに右には無い点ですが、中央線が存在すると解釈して統一しました。

・せっかくですからウィンドウサイズの幅800pxで閲覧できるように、お問い合わせの幅を他より大きく取りました。
本当はフォントを直接いじってテキストの間隔を縮めて全て同じ幅にしたかったのですが、自分のパソコンに同じフォントが無く編集できず、やや不本意ですがこのようにしました。
もしこれが実際に生じた仕事中の出来事であれば、次のような提案をすると思います。
1.「お問い合わせ」を「サポート」などの短い単語などにすることで改善できます。
2.テキストフォント間隔を狭めれば改善できます。
3.左のサイドメニューの幅210pxを小さくすれば改善できます。

・メインビジュアルに使われている大きい画像を幅広いサイズでもできる限り違和感なく途切れないように加工させていただきました。

・サイドメニュー画像及びページトップ画像のホバー状態時にボーダー変化をつけました。

・「過去の記事一覧に戻る」の位置が、下の製品情報内のボックスやプロダクトページから推測すると右に3pxずれているように思えます。
そのため左方向に3pxずらしました。

・中ページの「お問い合わせ」の幅を決めるガイドが左右対称ではない点について・・・、具体的にいうと、左方のx軸ガイド345pxと355pxの距離は10pxですが、右方のx軸ガイド876pxとx軸885pxの差は9pxである点を、両方とも差が10pxだと解釈しました。(もしかしたら、自分でガイドを1px移動させちゃっただけかもしれません。)

審査員コメント【鷹野 雅弘(株式会社スイッチ)】

固定サイズでコーディングされたものが多い中、あえて、リキッド・レイアウトでコーディングでトライされたところを大きなポイントしてチョイスしました。
リキッド・レイアウトでコーディングされたので、min-width/max-widhtを併用してもよかったかもしれません。

命名規則や注意点などがこまめに記載されていたのも加点しました。

id/classを使い分ける方針の一貫性が感じられない点、フォント指定で「MS Pゴシック」が最優先されている点、(個人的には好きなんですが)画像置換を多用している点など、難をいえばいろいろ出てきますが、あとでプロフィールを読んで18歳の方の作品と聞いてビックリ。
このくらいはできてしまうんですね~