伝わる! ナビゲーションデザイン
「私はどこ? ココは誰?」 昔、こんなのが流行りました(おぼえています?)
Webサイトを見ているときも、よく迷いますね。
「あれっ、私は、どこのページを見ているのかしらん?」
サイトの情報量が多ければ多いほど、ページ構成も複雑になります。
当然、訪問者も迷子になりやすい。
魔法の森に迷い込んだヘンゼルとグレーテルよろしく、ページを夢中で見ていくうちに、自分がどこに来たのか分からなくなってしまいます。
「今、あなたが見ているのはこのカテゴリですよ」
訪問者のいる「現在地」を、視覚的に分かりやすく見せる方法のひとつをご紹介します。
いま、この瞬間に開いているカテゴリを目立たせる
お手本として、ホンダのサイトを挙げておきましょう。
Honda - クルマのカテゴリの最上段、右側のメニューに注目してください。
「更新情報」「クルマ」「バイク」・・・と並んでいます。その中で、「クルマ」の下の赤いラインだけ、太くなっていますね。
「今、あなたがいるのは『クルマ』のカテゴリですよ」
サルでも分かるくらい(笑)親切。
- ラインの太さを太くする
- 項目の文字の色を濃くする
たったこれだけの違いを出すことで、ハッキリ明快なナビゲーションを実現しています。
もし、あなたのサイトが複数のカテゴリに分かれているのなら、ホンダのサイトのように、「今いるカテゴリ」だけを目立たせてあげると親切かも。
★ココでのポイント
他の項目とハッキリと区別できるくらい、分かりやすく表現すること。
つまり、コントラスト、メリハリをシッカリ出す。
たまに、「背景の色が微妙に違うだけ」とかメニューのデザインがオシャレすぎる(笑)サイトもありますが、これでは分かりづらいです(^ ^;
表面的なデザインに凝りすぎると、逆効果なのでご注意。
いくらカッコイイデザインでも、伝わらなかったらオシマイです・・・。
ちなみに、余談ですけど。
ナビゲーションに限らず、ホンダのサイトはデザインのクオリティが非常に高いです(ほんと、ホレボレしちゃうわぁ・・・^ ^)
派手すぎず、地味すぎず。
最小限の色やラインを上手く使いこなしている。
・・・これ、最初にやる人は難しいんですよ(^ ^;
できるだけ少ない要素で、「ホンダ」というブランドのイメージもシッカリと表現しなきゃいけない。
何も考えずにシンプルデザインを追求しすぎると、ただの手抜き(笑)になっちゃうわけです。
ここまでくると、もう、職人技の世界。
非常に優秀な熟練デザイナーが手がけているのではないかと思います。
さらに突っ込んだデザインノウハウは、メルマガでお届けします!メルマガ読者限定の、サイト無料診断企画もたまにやってます。
>>バックナンバーを見る
Powered by