SEO対策なら株式会社ペコプラ > Webサイト制作 > サイト制作 > グローバルナビゲーションとは？必要な理由やデザイン例を紹介

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

Webサイト制作

サイト制作

2021.03.16

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

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

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

1 グローバルナビゲーションとは
2 グローバルナビゲーションの種類
- 2.1 固定型
- 2.2 追従型
3 グローバルナビゲーションの作り方
4 グローバルナビゲーションを作成する際に注意する点
5 グローバルナビゲーションのデザイン例
- 5.1 PC表示のグローバルナビゲーション
  - 5.1.1 画面上部に表示
  - 5.1.2 サイドに表示
- 5.2 スマホ表示のグローバルナビゲーション
  - 5.2.1 スライドメニュー
  - 5.2.2 プルダウン
6 まとめ

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

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

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

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

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

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

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

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

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