今回も引き続き、成果につながるデザインについて考えます。テーマは「ナビゲーション(誘導)のデザイン」です。
ナビゲーションとは
ナビゲーションは、ホームページの中の「道案内」です。
ホームページに訪れた人が、探している情報にたどり着けるよう設置された「メニュー」や「バナー」「リンク」などを総合して「ナビゲーション」と呼んでいます。
- 探している情報がどこにあるか
- 今現在、どのページにいるか
- そのページ以外にどのような内容のページがあるか
などの情報を、訪問者にわかりやすく示す役割を果たしています。
いくら有益なコンテンツを提供していても、適切に訪問者を誘導できなければ、成果につなげることはできません。
ナビゲーションはホームページの成果を左右する、とても重要な要素なのです。
ナビゲーションには、
- メニュー
- バナー
- コンテンツ内のテキストリンク
- パンくず
など、いろいろな種類があります。
ひとつひとつが重要ではあるのですが、特に重要な役割を持つのが、「メニュー」です。
メニューデザインのポイント
メニューは、ホームページの「目次」のようなものです。ページのタイトルがずらっと並んでいて、クリックするとそのページが開きます。
グローバルメニューやナビゲーションメニューとも呼ばれています。
みなさんがホームページを見るときには、メニューを利用して、いろいろなページを見ているのではないでしょうか。
あまり意識しなくても適切なページにたどりつくためのメニューにするには、いくつかのポイントがあります。
(1)すべてのページで、同じ位置に設置する
ページによってメニューの位置が違うと、訪問者は混乱してしまいますので、原則としてすべてのページで同じ位置に設置します。
メニューは、ページ上部のヘッダーや、左または右のサイドエリア(サイドバー)の上部に設置することがほとんどです。
これは、訪問者がページを見たときに、すぐメニューの位置を把握できるようにするためです。スクロールしなくても見える範囲にメニューを置くのがポイントです。
(2)すべてのページで、同じデザインにする
配色やアイコンなどの素材も、全ページで共通のものを使用します。
ホームページ全体のイメージに合わせつつ、他のパーツと同化しすぎないよう、メニューだと直感的に理解できる色やアイコンを配置します。
(3)階層構造がわかるデザインにする
ページ数が多いホームページでは、内容によってページをカテゴリわけして階層構造にすると、目的のページが探しやすくなります。
このとき、階層の高い「親メニュー」、それに属す「子メニュー」であることが、訪問者に伝わるようにデザインします。階層構造が分かりやすいデザインにすることが重要です。
例えば、弊社のホームページのサイドメニューも3階層にわかれています。ご覧になってみてください。
http://www.akibare-hp.jp/form/design/
(4)現在地がわかるデザインにする
現在開いているページは、背景色や文字色を変えるなど、現在地がわかりやすいデザインにすることも大事です。
それにより、訪問者はサイト内での位置関係を把握しやすくなります。
(5)PCサイトとスマホサイトのメニューを使い分ける
PCサイトとスマホサイトでは、使いやすいメニューのデザインやレイアウトが異なります。
PCとスマホでは、画面の大きさや操作方法が異なるからです。それぞれのサイトに適したメニューを設置しましょう。
訪問者の目線でチェックしてみよう
「うちのサイトのナビゲーションデザインはどうなんだろう?」と思われた方は、ぜひ一度、訪問者の視点でチェックをしてみてください。
訪問者が苦労することなく、
- 探している情報がどこにあるか
- 今現在、どのページにいるか
- そのページ以外にどのような内容のページがあるか
を理解できるナビゲーションになっているか、チェックしてみましょう。
あまりホームページを見ていない社員やご友人に確かめてもらうのもよいかもしれません。
ナビゲーションを改善するだけで、ホームページの反応が大きく変わった例がたくさんありますので、ぜひ取り組んでみてくださいね。
ホームページ制作の際、実際にデザインを作るのはデザイナーさんです。
デザインを依頼する側としては、どのような観点でデザインの良し悪しを見分ければいいのかを知っておけば、「なんとなくかっこいいけれど、成果がでない」ホームページになってしまうのを防げます。
参考になれば幸いです。