グローバルナビゲーションとは?必要な理由やデザイン例を紹介

Webサイト制作
サイト制作
2021.03.16
Webサイトのメニューのイメージ画像

webサイトを作成する際に欠かせないのがグローバルナビゲーション。

しかし、実際にグローバルナビゲーションにはどんな役割があって、どのように作成すればいいのかわからない、とお困りの方も多いのではないでしょうか。

今回はグローバルナビゲーションについて説明しながら、グローバルナビゲーションの作り方やデザイン例についても紹介していきます。

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

グローバルナビゲーションとは、サイト内の各コンテンツを紹介するために設置される案内メニューのことです。

サイト内のショートカット機能として使われるのが主な設置理由です。

しかし、グローバルナビゲーションというのは正式名称ではなく、他にも

  • グローバルメニュー
  • グローバルナビ
  • ヘッダーメニュー
  • ヘッダーナビゲーション
  • メインメニュー
  • ハンバーガーメニュー

など、様々呼ばれ方をしています。

グローバルナビゲーションが必要な理由

グローバルナビゲーションを設置する理由には、ユーザーが目的のコンテンツへ最短でたどり着けるようにするためであったり、検索エンジンへ重要なコンテンツを伝える要素を持つなどの効果があります。

SEOの観点から見ても、グローバルナビゲーションはあった方が良いですが、何よりもユーザーの利便性を考えればグローバルナビゲーションが必要なのは明確です。

ですので、設置しない特別な理由がない限りは設置するようにしましょう。

ただし、グローバルナビゲーションは、ただ設置すればいいというわけではありません。

メニュー数が多すぎても利便性に欠けますので、グローバルナビゲーションに設置するリンクページは慎重に選ぶようにしましょう。

ユーザーを目的のコンテンツページへ導く

例えば、自身が冷蔵庫を探しているときに、家電量販店のHPでグローバルメニューが設置されていて「冷蔵庫」「掃除機」「洗濯機」など項目別に商品ページにリンクできるようになっているものと、全商品からしか探すことが出来ないものでは、どちらのHPが使いやすいでしょうか。

前者の方が圧倒的に多いと思います。

このように、最短でユーザーが求めている情報にたどり着けるようにすることで、ユーザーのサイト評価があがります。

検索エンジンにアピールすることができる

SEOの観点から見ても、グローバルメニューの設置はかなり重要なものになっています。

検索エンジンは、内部リンクが多く貼られたページを重要なコンテンツとして認識する傾向にあります。

また、グローバルナビゲーションのリンク先に設定されているページも重要なコンテンツと判断するため、グローバルナビゲーションを設置することで、検索エンジンに「このページは重要なコンテンツである」ということをアピールすることができます。

 ホームページ内での現在地を把握できる

グローバルメニューを常に表示させたり、アコーディオンメニューのようにすることで、ユーザーが、自分が今どのコンテンツを見ているのかを把握することができます。

グローバルナビゲーションの種類

グローバルナビゲーションにはどのような種類があるのかを大きく2つにわけて紹介します。

固定型

固定型は、画面をスクロールしても常にその位置に表示されているものです。

こちらはスクロールしても画面上部とサイドにグローバルメニューが固定されているのがわかると思います。

追従型

スクロールするとメニューの一部が追従してくるものでフローティングメニューと呼ばれています。

表示されているページに直接関係のあるメニューだけが表示されるので、ユーザーもわかりやすく、可動域も広がります。

▼関連記事

グローバルナビゲーションの作り方

ではグローバルナビゲーションはwebサイトを作成するうえで重要なものだということがわかったところで、実際にどのようにグローバルナビゲーションを作っていけばいいのか、流れと共に実装例についても紹介していきます。

グローバルナビゲーション作成の流れ

グローバルナビゲーションを設置するには、グローバルナビゲーションに設置するメニューページを決め、実際にwebサイト上に設置するという流れになります。

グローバルナビゲーションに設置するメニューを決める

グローバルナビゲーションはただ設置すればいいというものではなく、設置するページやメニュー数・並べ方を意識することが大切です。

グローバルメニューの数が多すぎると、かえってユーザーが混乱したり、目的の情報までたどり着けない可能性があります。

そのためグローバルナビゲーションに表示させるメニュー数は3~7個程度にとどめるのがベストです。

ページ数が多い場合には「親メニュー」「子メニュー」のように、親メニューを3~7個決め、その中に子メニューを入れる階層構造にするとわかりやすくなります。

また、クリック数が多いとユーザーがサイト内で迷いやすいため、3クリック以内に目的ページにたどり着けるようにするのが理想です。

並べ方は、見せたいページやユーザーがよく見ているページのような、優先度の高いものを左(サイドの場合は上)から並べることで、ユーザーに認識されやすくなります。

グローバルナビゲーションを設置する

グローバルナビゲーションを設置する位置も大切です。

わざわざスクロールしなくても、ページを開いたときにグローバルナビゲーションが目に入るよう、ヘッダーもしくはサイドに設置するのが一般的です。

見やすい位置にグローバルナビゲーションであるとわかるように設置することで、ページを開いたユーザが必要な情報にすぐにたどり着けるようになり、サイト評価が高くなります。

グローバルメニューの実装例

実際にグローバルナビゲーションを設置するにはどのようなコードを入力していけばいいのか、実装例を紹介します。

グローバルナビゲーションをヘッダー上部に表示

HTMLコード
<navi id="navi">
<ul id="menu">
<li><a href="#">メニュー1</a>
<ul class="sub-menu">
<li><a href="#"<i class="fa fa-caret-right" aria-hidden="true">サブメニュー</a></li>
</ul>
</li>
<li><a href="#">メニュー2</a>
<ul class="sub-menu">
<li><a href="#"<i class="fa fa-caret-right" aria-hidden="true">サブメニュー</a></li>
</ul>
</li>
<li><a href="#">メニュー3</a>
<ul class="sub-menu">
<li><a href="#"<i class="fa fa-caret-right" aria-hidden="true">サブメニュー</a></li>
</ul>
</li>
</ul>
CSSコード
#navi {
    position: relative;
    margin: 30px 35px;
   width: 100%;
}


#menu {
    display: block;
    height: auto;
    margin: 0;
    padding: 0;
}
#menu li {
    float: left;
    width: 33%;
    text-align: center;
    list-style: none;    /*リストの黒い点を削除*/
    position: relative;  /*z-indexの指定や子要素の基準とするために指定*/
    z-index: 1;  /*ドロップダウンしたメニューが隠れないように*/
}
#menu li a {
  padding: 0 20px 10px;
    border-top: none;
    border-right: none;
    background: none;
    color: #d9004e;
    display: inline-block;
    margin: auto;
    line-height: 1.3;
    text-align: left;
}
#menu li a:hover {
    background: none;
    color: #d9004e;
    text-decoration: underline;
}
#menu li a:active {
    color: #d9004e;
}
#menu li ul.sub-menu {
    display: none;  /*サブメニューは最初は非表示*/
    position: absolute;
    top: 0px;
    padding: 20px 10px;
    background: rgb(255, 94, 152);
    margin-top: 20px;
}
#menu li ul.sub-menu a{
    color: #fff;
    line-height: 1.2;
    margin-bottom: 1em;
}
#menu li a i{
    margin-left: -9px;
}
#menu li:hover ul.sub-menu {
    display: block;    /*マウスオーバー時にサブメニューを表示*/
}
#menu li ul.sub-menu li {
    float: none;
    width: 100%;
    text-align: left;
}

グローバルナビゲーションをサイドに表示

HTMLコード
<navi id="navi">
         <ul id="menu">
            <li><a href="#">メニュー1</a></li>
            <li><a href="#">メニュー2</a></li>
            <li><a href="#">メニュー3</a></li>
        </ul>
</body>
CSSコード
#nav ul {
    position: relative;
}
#menu,
#menu a{
    color: #fff;
}
#menu li a{
    background: #242424;
    padding: 30px 25px;
    list-style: none;
    border-bottom: 1px solid #222;
    position: relative;
}


#menu {
  list-style-position: inside;
  margin: 0 0 2em;
  padding: 0;
}

#menu li {
  margin: 0;
  list-style: none; 
  padding: 5px 0 4px;
  border-bottom: 1px solid #000000;
}

#menu li a { text-decoration: none; }

#menu li a:hover { text-decoration: underline;}

グローバルナビゲーションを作成する際に注意する点

グローバルナビゲーションを作成する際には大きくわけて3つの注意点がありますので、確認していきましょう。

グローバルナビゲーションのデザインは基本的に統一する

グローバルナビゲーションは、ユーザーに対して現在いる場所を示しているため、デザインを統一することで、ユーザーは同じサイトにいることを理解することが出来ます。

また、このページではヘッダー、このページではフッダーのように表示位置を変えるのではなく、基本的には全てのページで同じ場所に表示させることで、ユーザーがすぐにグローバルナビゲーションを活用できるようにすることも大切です。

グローバルナビゲーションは全てのページに表示する

色々とページを移動していると、ユーザーは自分が今どのページにいるのかわからなくなってしまうことがあります。

そのため、基本的には全てのページにグローバルナビゲーションを表示させることで、ユーザーが迷子になることを防げます。

ただし、お問い合わせフォームや商品購入ページでは、グローバルナビゲーションを設置すると他のページに遷移してしまう可能性もあるので、極力設置しない方が良いです。

Googleアナリティクスを活用する

Googleアナリティクスを活用すると、ユーザーがどのページから訪問したのかを把握することができ、グローバルナビゲーションがきちんと機能しているか確認することが可能です。

そのため、Googleアナリティクスでコンバージョン(CV)ページへの導線を確認・改善することで、CV率を上げる効果が期待できます。

▼関連記事

グローバルナビゲーションのデザイン例

では実際にグローバルナビゲーションというのはどのようなデザインで作られているのか、紹介していきます。

 PC表示のグローバルナビゲーション

まずはPCで表示されるグローバルナビゲーションについて見ていきましょう。

画面上部に表示

画面上部に表示されるのが1番多い表示パターンです。

ユーザーは上から順に見ることが多いので、わかりやすく、すぐに目的のページにたどり着くことが可能です。

ディズニーリゾート

ディズニーリゾートの公式サイト

出典:https://www.tokyodisneyresort.jp/

画面上部にトップ、ディズニーランド、ディズニーシー、ホテル、予約の親メニューが5項目で構成されており、中にお気に入り、TOPというように子メニューが表示されています。

項目ごとにアイコンが設定されており、色もカラフルでテーマパークに合わせたデザインになっています。

ダイハツ

DAIHATSUの公式サイト

出典:https://www.daihatsu.co.jp/index.htm

こちらも上部に6つの親メニューが表示されており、内容によっては子メニューが中に入って構成されています。

下の画像がシンプルだからこそ、白地の背景に黒文字とシンプルなデザインがかえってわかりやすく、綺麗にまとまっています。

サイドに表示

画面サイドにグローバルナビゲーションが表示されるパターンです。

ペコプラ

ペコプラの公式サイト

画面左側にグローバルナビゲーションが表示されています。

サイドに表示させると画像のインパクトがより強くなり、まず画像に目がいくのでキャッチコピーが目に入ってきやすいです。

無印良品

無印良品の公式サイト

出典:https://www.muji.com/jp/ja/store

サイドに商品一覧が表示されています。

商品紹介では写真がアピール材料になるため、このようにサイドに固定されている場合が多いです。

 スマホ表示のグローバルナビゲーション

次にスマホでよく見られるグローバルナビゲーションについて見ていきましょう。

スライドメニュー

スマホでよく見られる典型的なパターンです。

ハンバーガーメニューと呼ばれる三本線をクリックすると、画面の左右どちらかにスライドするようにグローバルナビゲーションが表示されるものです。

横からせり出してきて、縦長に使えるのでメニュー数が多くても使えるので便利な表示形式です。

ユニバーサルスタジオジャパン

ユニバーサルスタジオジャパンの公式サイト

出典:https://www.usj.co.jp/web/ja/jp

東京スカイツリー

東京スカイツリーの公式サイト

出典:https://www.tokyo-skytree.jp/
両方とも右上のハンバーガーを押すと、画面右側からメニューが出てくるようになっています。

プルダウン

こちらはスライドメニューと同じくハンバーガーメニューをクリックすると、上から下に向かってグローバルナビゲーションが表示されるものです。

上から出てくるので、メニュー数が多いと画面全体がメニュー画面になってしまうので、メニュー数が少ない時におすすめの表示形式です。

また、階層が複雑になるとスクロール数が増えて見にくく使いにくいメニューになってしまうため注意が必要です。

ペコプラ

ペコプラの公式サイト

左上のハンバーガーを押すと、上から下に向かってメニューが表示されます。

コナミスポーツ

コナミスポーツの公式サイト

出典:https://www.konami.com/sportsclub/

こちらは右下のハンバーガーを押すと上に向かってメニューが表示されます。

まとめ

webサイトを作成する際は、グローバルナビゲーションナビゲーションを適切に設置するようにしましょう。

グローバルナビゲーションを適切に設置することで、ユーザーのサイト評価があがるだけでなく、検索エンジンにもアピールすることができます。

グローバルナビゲーションのメニューを決める際には、

  • 何を見てほしいのか
  • どんな情報をユーザーは必要としているのか

をしっかりと考えてメニュー作成をすることで、よりよいサイト作りをすることができます。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)