301 ホームページのデザイン(ナビゲーション)

さて、今回も引き続き、ホームページのデザインについて考えます。テーマは「ナビゲーション（誘導）のデザイン」です。

ナビゲーションは、ホームページの中の「道案内」です。

ホームページに訪れた人が、探している情報にたどり着けるよう設置された「メニュー」や「バナー」「リンク」などを総合して「ナビゲーション」と呼んでいます。

などの情報を、訪問者にわかりやすく示す役割を果たしています。

いくら有益なコンテンツを提供していても、適切に訪問者を誘導できなければ、成果につなげることはできません。

ナビゲーションはホームページの成果を左右する、とても重要な要素なのです。

ナビゲーションには、

など、いろいろな種類があります。

ひとつひとつが重要ではあるのですが、特に重要な役割を持つのが、「メニュー」です。

メニューは、ホームページの「目次」のようなものです。
ページのタイトルがずらっと並んでいて、クリックするとそのページが開きます。

グローバルメニューやナビゲーションメニューとも呼ばれています。

みなさんがホームページを見るときには、メニューを利用して、いろいろなページを見ているのではないでしょうか。

あまり意識しなくても適切なページにたどりつくためのメニューにするには、いくつかのポイントがあります。

ページによってメニューの位置が違うと、訪問者は混乱してしまいますので、原則としてすべてのページで同じ位置に設置します。

メニューは、ページ上部のヘッダーや、左または右のサイドエリア（サイドバー）の上部に設置することがほとんどです。

これは、訪問者がページを見たときに、すぐメニューの位置を把握できるようにするためです。スクロールしなくても見える範囲にメニューを置くのがポイントです。

配色やアイコンなどの素材も、全ページで共通のものを使用します。

ホームページ全体のイメージに合わせつつ、他のパーツと同化しすぎないよう、メニューだと直感的に理解できる色やアイコンを配置します。

ページ数が多いホームページでは、内容によってページをカテゴリわけして階層構造にすると、目的のページが探しやすくなります。

このとき、階層の高い「親メニュー」、それに属す「子メニュー」であることが、訪問者に伝わるようにデザインします。階層構造が分かりやすいデザインにすることが重要です。

現在開いているページは、背景色や文字色を変えるなど、現在地がわかりやすいデザインにすることも大事です。

それにより、訪問者はサイト内での位置関係を把握しやすくなります。

ＰＣサイトとスマホサイトでは、使いやすいメニューのデザインやレイアウトが異なります。

ＰＣとスマホでは、画面の大きさや操作方法が異なるからです。それぞれのサイトに適したメニューを設置しましょう。

「うちのサイトのナビゲーションデザインはどうなんだろう？」と思われた方は、ぜひ一度、訪問者の視点でチェックをしてみてください。

訪問者が苦労することなく、

・探している情報がどこにあるか

・今現在、どのページにいるか

・そのページ以外にどのような内容のページがあるか

を理解できるナビゲーションになっているか、チェックしてみましょう。

あまりホームページを見ていない社員やご友人に確かめてもらうのもよいかもしれません。

ナビゲーションを改善するだけで、ホームページの反応が大きく変わった例がたくさんありますので、ぜひ取り組んでみてくださいね。

ホームページ制作の際、実際にデザインを作るのはデザイナーさんです。

デザインを依頼する側としては、どのような観点でデザインの良し悪しを見分ければいいのかを知っておけば、「なんとなくかっこいいけれど、成果がでない」ホームページになってしまうのを防げます。

参考になれば幸いです。