名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

多くのホームページは、ユーザーが迷わずサイトを回遊できるように「ナビゲーション」と呼ばれる導線が設けられます。サイト内の回遊を促すためには、分かりやすく使いやすいナビゲーションを設計・デザインしなくてはいけません。
今回はナビゲーションの中でも、多くのホームページで実装されている「グローバルナビゲーション」について、その役割と参考になるデザインを紹介します。

グローバルナビゲーションとは

グローバルナビゲーションとは、多くのホームページで実装されているナビゲーションの一つです。略して「グロナビ」とも呼ばれます。
ユーザーの探している情報まで分かりやすく導く役割を担っており、ホームページ内の主要なページへのリンクが配置されます。
分かりづらいグローバルナビゲーションは、サイト内の回遊がしづらく、ユーザビリティを下げてしまう為、ユーザーに悪い印象を与えてしまいます。目的の情報がすぐに見られるように、ユーザーの視点に立って、分かりやすく使いやすいデザインにする事が重要です。

グローバルナビゲーションのデザインで気をつけるべきポイント

ここからはグローバルナビゲーションのデザインを制作する際にWEBデザイナーが気をつけるべきポイントを3つ紹介します。

メニューの数が多くなりすぎないようにする

グローバルナビゲーション内のメニューの数があまりにも多い場合、ユーザーが目的の情報を見つけるのに時間がかかってしまいます。認知心理学者のジョージ・A・ミラーは「マジカルナンバー」といって、「人の短期記憶が覚えておくことのできる情報量は7±2個」と提唱しています。ユーザーが分かりやすいよう、メニューの数はできる限り減らし、7個前後に収まるようにしましょう。

メインコンテンツの邪魔にならないレイアウトにする

多くのホームページで、グローバルナビゲーションを画面の端に追従させるデザインを実装させています。追従する要素はスクロール時にも見る事ができるため、便利ではありますが、メインコンテンツを隠してしまうというデメリットもはらんでいます。グローバルナビゲーションを追従させる際には、メインコンテンツの邪魔にならないよう、スクロール時にナビゲーションバーを小さくするなどの配慮が必要です。

重要度を考慮してメニューの順番を決める

メニューの順番は、ホームページ内でのコンテンツの重要度を暗に示しています。グローバルナビゲーション内のメニューの順番は重要度を考慮して並べましょう。重要度はホームページの目的や役割を考慮して設計時に決めておく必要があります。
基本的に、重要度の高いコンテンツが左（左右のどちらかにグローバルナビゲーションがある場合は上）になるように順番に配置します。

グローバルナビゲーションの参考デザイン3選

ここからは参考になるグローバルナビゲーションのデザインを3つ紹介します。

ページリンクが多い場合はカテゴリごとに整理してまとめる

グローバルナビゲーション内のページリンクはユーザーが迷わないようできる限り少なくしなければいけませんが、サイトのコンテンツが多い場合、カテゴリごとに整理してまとめることで見た目をすっきりとさせる事ができます。参考デザインでは、マウスオーバーでカテゴリ内のメニューが表示されます。メニューの側に矢印などをつけて、プルダウンだと分かるようにデザインしましょう。

ライフマイスター株式会社

ハンバーガーメニューに収めて追従要素をできる限り少なくする

ハンバーガーメニューは今では多くのホームページで使用されており、ほとんどのユーザーが使い方を理解しています。画面を隠す面積も減らせる為、スマホデザインで多く使用されています。線だけで構成されたハンバーガーメニューは、洗練された印象を与えるため、サイトの世界観に合わせて使用しましょう。

plus motif

左右に配置してページ遷移を促す

ホームページの左右どちらかにグローバルナビゲーションを配置するパターンです。必然的に表示する領域は広くなりますが、ページ上部に配置するパターンに比べて、他ページへの遷移がしやすくなります。また表示領域が広い分、分かりやすく扱いやすいというのもメリットとして挙げられます。

名古屋税理士会

今回のまとめ

グローバルナビゲーションはホームページ内の回遊を促す重要なパーツです。
今回紹介したデザイン以外にも様々なグローバルナビゲーションのパターンがありますが、ホームページの目的に合わせた使いやすいデザインを心がけましょう。