植木賞☆コーディングコンテストVol.1

05月18日（金）00:00

category: コンテスト

コーディングコンテストVol.1にて、植木賞を獲得されました、ごぼさんのデータを公開します！

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

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

---- こっから続き

profile.txtの内容

お名前

ごぼ

年齢

35歳

職業

派遣コーダー

会社名

デジタルスケープ

CSSによるコーディング歴

3年

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

MacOS 10.4.9, windowsXP
DreamWeaver MX 2004, 8
mi 2.1.6
Photoshop CS2

おおよその作業時間

30時間くらい（半分近くJavascript……）

苦労した点

Javascriptがものすごく苦手なので、ロールオーバーが出来なくて泣けました。

デザイナーへ提案！（物申す）とその理由

なんでそんなに角丸やドロップシャドウが好きなんだろうとか。
真面目な話、画像に頼らないデザインをしたほうが、メインの画像が生きると思うのですが。

また、最新Photoshop前提で作るのはやめてほしいなと思います。
手持ちのPhotoshopが5.5なので開くこと自体が出来なくなりつつあります、というのは論外としても、常に最新Adobeを保つのは無理です。

いつもいきなりImageReadyで開いているので、メモをPhotoshopのレイヤーに入れるのもやめてほしいです。
それと、いらないレイヤーは消してほしいと切実に思います。

色でもサイズでも、デザインの計算で半端な数字が出ているのか、単にずれなのか、こちらにデザイン素養がまるで無いので判断出来ずに丸められないことが多々あります。
「そのへんはわかってよー」ではなくて、正確なデザインを持って来てほしいです。

自由コメント

幅が801pxと半端だったので丸めました。
文字が小さめなので全体に行間と文字間を大きく取りました。
製品情報の製品名部分は重要なので、複数行になってもすっきりしたコードにするために角丸を取りました。
フォームは該当部分の色と必須項目の色を変えてあります。
フォームの注意書きは入力より先に読まれるように位置を変更しました。

審査員コメント【植木真（株式会社インフォアクシア）】

植木賞を選定させていただくにあたって、最初はJISX 8341-3の主要なガイドライン項目でチェックさせていただいたのですが、最終的には2ページ目の入力フォーム部分だけにフォーカスして検討しました。入力フォームをアクセシブルにするには、以下のようなポイントがあります。

入力方法や入力例を、ラベルとコントロールの間に記述しているか
各コントロールと対応するラベルとをlabel要素で関連付けているか
どれが必須項目なのかが音声読み上げでも確実に理解できるか

今回のサンプルでは、入力方法や入力例がテキストフィールドの後ろにありました。多くの方はサンプルを忠実に再現したのだと思いますが、中にはJISX 8341-3と音声読み上げ順序をふまえて、きちんとテキストフィールドの前に置いていたものがありました。今回は、あえてそうしていた7件をまず植木賞の候補にしました。

ちなみに、ユーザーテストをしていると、画面を見ているユーザーもテキストフィールドの右側にあるテキスト情報は見落としがちです。そういう意味では、入力方法や入力例をコントロールの前に配置するのは、音声読み上げに限らず、全てのユーザーのためにもなります。

最終的に、植木賞はごぼさんに決定したのですが、必須項目や見落とされがちな入力方法/入力例のテキストを、視覚的にも目立たせようとする工夫がされていた点が決め手となりました。その手法は他にもいろいろ考えられますが、ユーザーが入力エラーを起こすのを事前に回避するよう工夫するのは、フォームのアクセシビリティやユーザビリティにおいてとても大切なことです。その工夫が見てとれたのが印象に残っています。

ただ、label要素での関連付けがされていなかったのと、メールアドレスの入力例がテキストフィールドの右側に残っていました。この2点を改善すれば、さらに使いやすいフォームになるはずです。

各種SBMに追加