グローバルナビゲーションとは?グローバルナビゲーションの役割とデザイン例

WEB制作・開発実例・コラム
2019.02.28
2019.03.19

グローバルナビゲーションという言葉をご存知でしょうか。グローバルナビゲーションは、ユーザーにサイト内のコンテンツを紹介するために設置されているメニューのことです。今回は、グローバルナビゲーションの具体的な役割や、作成する上での注意点、デザイン例をご紹介していきます。


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

グローバルナビゲーションとは、サイト内の各コンテンツを紹介するために設置されるメニューです。グローバルナビゲーションは、主要なコンテンツへのリンクとなるので、基本的にはヘッダーなど全ページに共通する部分に設置するのが望ましいです。

グローバルナビゲーションの例(PC版)

スマホ版のナビゲーションはハンバーガーメニューと呼ばれる3本線が入っているアイコンをクリックすることで各メニューが紹介されるサイトが多くなっています。

スマホ版のグローバルナビゲーション(ハンバーガーメニュー)

グローバルナビゲーションの役割

グローバルナビゲーションの役割は以下の2つがあります。

ユーザーにどんなコンテンツがあるかわかる

検索してくるユーザーはどのページから訪れるかわかりません。例えば下層のページからアクセスした場合、 グローバルナビゲーションがないと、どんなサイトかわからない、必要な情報に遷移したい場合、どこをクリックすれば良いかわからない可能性があります。

なおグローバルナビゲーションと合わせて、ユーザーの現在の階層の深さを表す「パンくずリスト」があるとより効果的です。

検索エンジンに重要なコンテンツであると認識させる

グローバルナビゲーションには多くの内部リンクが集まります。検索エンジンは、内部リンクが多く張られたページを重要なコンテンツと認識する傾向にありますので、グローバルナビゲーションを設置して重要なコンテンツであると伝えましょう。またクローラーは、各内部リンクをたどって各ページをクロールしていきます。

そのため、グローバルナビゲーションを設置して、クローラーがサイト内のページを辿りやすくなり、例えば新規に追加したページがいつまでも認識せず、インデックスされないということを防ぐことが出来ます。

グローバルナビゲーションの作成ポイント

ここでは、グローバルナビゲーションを作成するにあたってのポイント(注意点)を見ていきます。

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

 先ほども紹介しましたが、グローバルナビゲーションは、ユーザーに対して現在いる場所を示し、サイトがどんな内容で、どのように遷移すれば良いかという役割があります。そのため、グローバルナビゲーションのデザインを統一することで、ユーザーは、同じサイトにいることを理解することが出来ます。

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

パンくずリストを設置する

 こちらも先ほど紹介しましたが、パンくずリストがあるとよりユーザーが、今どこの階層にいるのか把握できます。なおパンくずリストのデザインの注意点ですが、メインとなるコンテンツのすぐ上あたりなど、ファーストビューでどこの階層にいるのか認識できるところに設置しましょう。

またパンくずの内部リンクのテキストは、ユーザーが現在いるページのタイトルと同じにすると、どこにいるかすぐに把握することが出来ます。

メニューの数は7つ程度にする

 大規模サイトだと、表示するメニューの数も増えてくると思います。しかし、グローバルナビゲーションのメニューが多すぎると、ユーザーはかえって混乱していしまいます。

認識心理学上、人間は一度に認識できる要素は7つ程度といわれていますので、グローバルナビゲーションも最も伝えたいメニューを7つ程度に絞ると良いです。
ただ、企業の商品名などユーザーが一見すると何がわからない場合は、もう少しメニューの数を減らすと良いです。

メニューの並び順も意識

 先ほどはメニューの数についてご紹介しましたが、どういう順番で並べるかも併せて意識すると良いです。これも認知心理学を使って、最も見て貰いたいメニューから左から順番に並べると良いです。 例えば、トヨタのサイトで言うと、グローバルナビゲーションの順番は以下のようになっています。

  •  ラインナップ→購入サポート→販売店検索→中古車検索→インフォメーション→MyTOYOTA

  • 上記で言うと、車のラインナップがTOYOTAが一番見せたい項目ということが推測できます。逆にユーザーが良く見る項目を一番左にもってきても良いと思います。

    リストタグ(ul、ol、li)を使う

     グローバルナビゲーションは、divタグとpタグの組み合わせでも作成することが出来ますが、リストタグでマークアップすることで、検索エンジンに認識されやすくなるというSEO上の効果が期待できます。

    テキストで作成する

     グローバルナビゲーションは、クローラーにとっても重要になってきます。クローラーは、トップページに配置されたグローバルナビメニューを起点に各コンテンツをクロールしてインデックス登録していきます。

    クローラーは、画像の認識がテキスト比べまだ精度がよくないため、画像でグローバルナビを作ると正常に認識できない可能性があります。これについては、以下の検索エンジン最適化(SEO)スターター ガイドの避けるべき項目で「全体的に画像やアニメーションに基づいてナビゲーションを作成する」とあります。

    そのため、グローバルナビゲーションは画像ではなくテキストやhtmlで作成するようにすると良いです。なおJavascriptを使ってグローバルナビを作る場合は、ページ読み込み時にメニューが表示されるようにすると、クローラーも正常に認識できます。

    参考URL:検索エンジンにとって重要なナビゲーション

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

    グローバルナビゲーションも様々なデザインがあります。

    一般的なグローバルナビゲーションの例

     最も一般的なものは、グローバルナビゲーションをヘッダーの上部に配置し、各メニューにカーソルを合わせるとドロップダウンメニューが表示されるものです。サンプルのhtmlやcssは以下となります。

     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やcssは以下となります。

     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;}
    

    まとめ

    いかがでしたか?今回はグローバルナビゲーションについて解説しました。グローバルナビゲーションのデザインは様々ですが、グローバルナビゲーションの目的は、ユーザーに対して、何のサイトなのか、今開いているページはどのようなページなのか、サイトでどのようなことが出来るのか(わかるのか)が提供できれば良いデザインといえます。

    もちろん、seo上はメインコンテンツが重要で、せっかく良いグローバルナビゲーションを作っても、メインコンテンツ疎かにならないよう、メインコンテンツの充実も併せて行ってもらえればと思います。

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

    コラム

    ピックアップコラム

    最新コラム

    人気コラム

    過去の記事

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

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

    03-5829-9912

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