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

Webサイト制作
サイト制作
2019.02.28
2020.12.21

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

 

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

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

グローバルナビゲーションの例(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(土・日・祝日を除く)