伝わる! ナビゲーションデザイン

現役Webディレクターによる「嫌われないウェブデザイン」秘密講座ブログ!

トップページ > ホームページ作成塾> ユーザビリティ >

伝わる! ナビゲーションデザイン

「私はどこ? ココは誰?」 昔、こんなのが流行りました(おぼえています?)
Webサイトを見ているときも、よく迷いますね。

「あれっ、私は、どこのページを見ているのかしらん?」

サイトの情報量が多ければ多いほど、ページ構成も複雑になります。
当然、訪問者も迷子になりやすい。

魔法の森に迷い込んだヘンゼルとグレーテルよろしく、ページを夢中で見ていくうちに、自分がどこに来たのか分からなくなってしまいます。

「今、あなたが見ているのはこのカテゴリですよ」
訪問者のいる「現在地」を、視覚的に分かりやすく見せる方法のひとつをご紹介します。

いま、この瞬間に開いているカテゴリを目立たせる

お手本として、ホンダのサイトを挙げておきましょう。

Honda - クルマのカテゴリの最上段、右側のメニューに注目してください。
「更新情報」「クルマ」「バイク」・・・と並んでいます。その中で、「クルマ」の下の赤いラインだけ、太くなっていますね。

「今、あなたがいるのは『クルマ』のカテゴリですよ」
サルでも分かるくらい(笑)親切。

  • ラインの太さを太くする
  • 項目の文字の色を濃くする

たったこれだけの違いを出すことで、ハッキリ明快なナビゲーションを実現しています。

もし、あなたのサイトが複数のカテゴリに分かれているのなら、ホンダのサイトのように、「今いるカテゴリ」だけを目立たせてあげると親切かも。

★ココでのポイント

他の項目とハッキリと区別できるくらい、分かりやすく表現すること。
つまり、コントラスト、メリハリをシッカリ出す。

たまに、「背景の色が微妙に違うだけ」とかメニューのデザインがオシャレすぎる(笑)サイトもありますが、これでは分かりづらいです(^ ^;
表面的なデザインに凝りすぎると、逆効果なのでご注意。
いくらカッコイイデザインでも、伝わらなかったらオシマイです・・・。

ちなみに、余談ですけど。
ナビゲーションに限らず、ホンダのサイトはデザインのクオリティが非常に高いです(ほんと、ホレボレしちゃうわぁ・・・^ ^)

派手すぎず、地味すぎず。
最小限の色やラインを上手く使いこなしている。

・・・これ、最初にやる人は難しいんですよ(^ ^;
できるだけ少ない要素で、「ホンダ」というブランドのイメージもシッカリと表現しなきゃいけない。
何も考えずにシンプルデザインを追求しすぎると、ただの手抜き(笑)になっちゃうわけです。

ここまでくると、もう、職人技の世界。
非常に優秀な熟練デザイナーが手がけているのではないかと思います。


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


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

登録アドレス:
解除アドレス:
Powered by まぐまぐ