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

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

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


profile.txtの内容

お名前

kosei

サイトURI

http://www.culture27.com/

年齢

29歳

職業

求職中...

CSSによるコーディング歴

4年くらい

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

Windows XP、Dreamweaver 8、Photoshop CS2、Firebug(Firefox拡張機能)

おおよその作業時間

何だかんだで60時間くらい

苦労した点

・余計なタグやCSSハックを極力使用しないこと。
・画像を非表示にしたり、文字サイズを変更した場合でも閲覧に支障がでないように配慮した(イメージリプレイスメントを使用しない、グローバルナビの背景色の設定など)。

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

・グローバルナビの項目数はもっと少なくした方がユーザビリティの向上につながる。
「事業内容」「採用情報」「会社概要」は「企業情報」(新規に設置)に含める。
また、B2Cにより力を入れるのであれば、それらを左ナビおよび「プライバシーポリシー」の左に移動させる。

・「検索ボックス」を設置する。
理由は言わずもがなだが、多数の製品を扱うのであれば必要だろう。

・「製品情報」の左ナビのサブメニュー項目は再考する必要がある。
「アクセサリー、時計」とあるが、時計が壁掛けの場合には「インテリア」のカテゴリに入る。
「売れなかった製品」は各製品自体に問題があると思われるので、わざわざピックアップする必要はないので項目から外す。
それよりも売れている製品にスポットをあてるべきだが、このサブメニューは一番上の「最新製品一覧」以外は製品のカテゴリを示しているので、別の場所に設置した方が良いかもしれない。

・「注文する」ボタンだけでなく「カートに入れる」ボタンも設置する。
他にも注文したい製品がある場合に便利。

・「お客様の声」コンテンツが企業によるただの宣伝文句を並べているだけのものにならないようにするために、ユーザーが意見を書き込めるような仕組みを設ける。

・「お客様の声」のコンテンツの「続きを読む」をクリックした場合に、コンテンツ自体が下に拡張する仕様にするとページ遷移をせずにすむ。

・「その他オススメ製品」もよいが、Amazonのように関連する製品も表示させると、より売上を伸ばすことができるだろう。

・「製品に関するお問い合わせ」は「お問い合わせ」カテゴリに入れ、各製品への問い合わせが可能なフォームを設けた方が良い。

現状では「製品に関するお問い合わせ」から「その他オススメ製品」への問い合わせができない。
仮に問い合わせた場合には、送信者と受信者の間に誤解が生じる可能性がある、メール振り分け処理に一手間かかるといった問題が発生しそうだ(今回はリード文の一部を変更しました)。
改善後は全製品情報ページの軽量化が図られ、さらにメンテナンス性も向上する。

・問い合わせ時に入力する個人情報の取り扱いについての文章をフォームの前後どちらかに明記する。
ユーザーの不安をちょっとでも解消することができるし、「プライバシーポリシー」を各ページの上部に表示するくらいなのだからこれは当然の処置。

・分割で入力するなどの必要がないのでメールアドレス入力例は不要。
不必要な説明書きはユーザーに一瞬でも考えさせる。
また、abc@abc.co.jpなどが実在する場合があるので、メールアドレスなどの例示には「example.com」などを使用する。

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

・全体的に文字サイズが小さく行間も狭いので可読性が低い。
文字サイズを大きくし行間も広めに変更しました。

・コンテンツの幅が801pxなので、ディスプレイサイズによってはコンテンツの右側を閲覧するためには毎回スクロールバーを動かす必要があり、ユーザーにとって手間である。
また、通常の印刷ではA4用紙からはみ出してしまう。
グローバルナビやサイドバーなどを印刷しないようにCSSで設定し、A4用紙の幅におさまるようにしたが、画面に表示されたものをそのまま印刷したいと思うユーザー(企業の上司なども含む)も多数いることを考慮すること。

・角丸のボックスやコンテンツの高さをそろえるといったデザインは、現状では余計なタグやCSSハックを使用する必要が出てくるので、あまり多様しない方がよい。

・ファビコンもあった方がよい。
IEも7でタブ式になったので、より多くのユーザーがファビコンを意識・利用する。
多くのタブを出していても、ファビコンによって目的のタブを見つけることができる。

自由コメント

審査よろしくお願いします!

審査員コメント【浜 俊太朗(株式会社ライブドア)】

評価に最も影響したのは、「提案力」です。

koseiさんの作品は、製品の見せ方にLightboxを使っていたり、フォームにフォーカスするとinput要素のサイズが変わるなど、細かいギミックが使われていました。
「そんな物は無くてもいいじゃないか」と思われる方もいらっしゃると思いますが、ここで今回のクライアントである「HappyLifeCompany」という企業について考えてみたいと思います。

みなさんは最初にお題のデザインを見た時に、どのような印象を受けましたか?
僕は「とても遊び心のある企業だな」と感じました。
それは「真鍮製サラダボウル」や「HappyLifeマシン」という名称(むしろ用途もよくわからない)からもうかがえます。
更には、「売れなかった製品」というコンテンツを掲載しています。
これを製作側から提案する事は考えられないので、恐らくはクライント側からの要望なのだと思います。 かなりイッちゃってます。 良い意味で。
そんな遊び心溢れるクライアントなら、こういった小ネタは喜んでくれると思います。

koseiさんの提案は、それだけに留まりません。
添付のテキストには、ディレクターとデザイナーへの提案が事細かに書き込まれていました。
特に、印刷時の事を考えてデザインする必要性や、ページ遷移をせずに情報を見せる提案は、コーダーという立場だからこそできる提案だと言えます。