UIデザインを改善する10の方法

後藤大地　 [2008/12/19]

Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY.

Dmitry Fadeyev氏がSmashing Magazineにおいて10 Useful Techniques To Improve Your User Interface Designsというタイトルのもと、Webページのデザインを改善するための10のテクニックを紹介している。内容を要約すると次のとおり。

ブロックリンクを活用する。たとえば a { display: block; padding: 6px; } のようにインラインをブロックに変更してさらにパディングを指定する。幅を指定する必要がないうえ、リンク対象が広くなりクリック漏れが少なくなる
英字の場合、上下のバランスを考える。ボタンやラベルに配置される英字の場合、文字のバランスを考慮しベースラインを若干下げるように調整する
文字のサイズやフォンとの種類のみならず、主張したいデータごとにコントラストを変更する。コントラストを工夫することで多くの情報が掲載されているページでも一瞥して重要なデータをチェックできるようになる
色を効果的に活用する。注目して欲しいデータは一瞥して注意が向くようにするなど考える
空白によるグループ効果を活用する。要素間の空白は要素、たとえば題名とコンテンツ、ナビゲーションバーなどの間の空白のサイズによってどの要素が一括りの関係にあるのかを印象づける。空白を工夫することで情報のグループ化を適切におこなう
ヘッドラインにおいてフォントの種類とサイズのみならず、文字間サイズ(letter-spacing)を変更する。文字間サイズを変更することで印象を変えるとともに審美的に優れた効果を実現できる。ただし文字間サイズはボディテキストには使わないほうがいい。デフォルトの設定がすでに優れた設定になっている
検索サイトなどフォームが重要な位置づけにあるならページが表示された段階でフォームにフォーカスをあてることを検討する。処理にはJavaScriptが必要。ただし自動フォーカスした場合バックスペースで前のページに戻るという操作ができなくなるため、JavaScriptで判定処理を記述して対処する
入力フォームのスタイルをカスタマイズする。また必要に応じてフォーカス時にスタイルが変わるようにする
不要な要素は表示しないように.controlsや:hover.controlsを活用する。ただしIE6だけは別途処理する必要がある
ラベルに何をするかを記載する。「Yes」「No」といったラベルではなく「Don't Save」「Cancel」のようにする。こうすることでダイアログのメッセージをすべて読む必要がなく、ボタンを見ただけで何をすればいいのか直ぐに判定できるようになる

Dmitry Fadeyev氏は最後に、テクニックが使えるからといった理由だけでこうしたテクニックを使うといったことはしないようにと忠告している。これらテクニックのうち適用して意味がある場合のにみ適用した方がいいと説明している。