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のテクニックを紹介している。内容を要約すると次のとおり。

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

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

    関連サイト

    関連したタグ

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン