色付きの「見出しバー」を活用しよう:: ユーザビリティ

WebデザインのちょっとしたTipsをご紹介します。
とくに、情報量の多いサイトのトップページに適したテクニックです。

まずは、japan.internet.comのサイトを見てみてください。

真ん中の列、メインコンテンツが入る箇所に、各カテゴリの見出しがグレーの帯で掲載されています。

結果として、情報が「視覚的」に見やすくなっていませんか？
それぞれのカテゴリを色（グレー）付きの帯で目立たせることで、訪問者は、パッと見て情報を選別しやすくなるんです。
「トップニュースは何かな？ふむふむ。じゃあ、リサーチは？」・・・といった具合に。

ちょっと想像してみてください。
もし、カテゴリ名とその下の記事見出しが、違いの無い同じようなデザインで掲載されていたら・・・？

たぶん、ひどく見づらいですよね（^ ^；）
どこまでが「ニュース」で、どこからが「リサーチ」なのかが、非常に判別しづらくなると思います。

ここで重要なのは、視覚デザインが、情報の構造（このケースでは「階層」ですね）を、強力にバックアップしているという点。
このページのデザイナーは、「グレーの帯はカッコイイだろうから、なんとなく付けてみた」のではありません。

デザインの原則を思い出してください。
「色」や「形」といったデザインは、あくまでも「情報のプレゼンテーション」を支援するもの。
決して、「まずデザインありき」ではないのです。

ちなみに、「色付き見出しバー」のテクニックはとくにニュースサイトで頻繁に使用されています。
ご参考までに、以下のサイトでも探してみてください。

色つきの見出しバーは、とにかく、いろいろなサイトで活用されています。
たくさん見つけて、あなたのサイトでも、ぜひ応用してみてください（^ ^）

このエントリーのトラックバックURL :

メルマガ「嫌われないWebデザイン」
さらに突っ込んだデザインノウハウは、メルマガでお届けします！メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る

Powered by

色付きの「見出しバー」を活用しよう