グローバルナビゲーションとは？役割や簡単な作り方を解説

グローバルナビゲーションという言葉をご存知でしょうか？Web系のお仕事をされている方でなければ耳にする機会も少ないかもしれませんが、ほとんどのwebサイトにあるものです。

そんなに大事なものなの？

Webサイトを構成するにあたって非常に重要な項目の一つなので、この際に覚えていってください！

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

グローバルナビゲーションとは、webサイト全体で共通で表示しているメニューのことです。文章よりも画像で見た方が早いと思うので…

こちらのサイトでいう赤線の中部分のことですね。主要なコンテンツのリンクがまとめられているものです。一般的にユーザーがどのページに遷移しても見つけやすいようにサイトのヘッダー付近に配置されています。最近ではサイドバーとして表示しているサイトも見かけますね。

グローバルナビゲーションによってユーザーはwebサイトのどこにいるのかを把握することができます。それによりサイト内を自由に行き来することができます。

• グロナビ
• グローバルメニュー
• ヘッダーメニュー

などと呼ばれることも多いです。ややこしいですが基本的に全て同じような意味合いです。

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

ユーザーにとって主要なコンテンツに導くため

グローバルナビゲーションの最も大きな役割は、ユーザーを主要なコンテンツに導くこと。ユーザーにとってのいい案内役になるということですね。

上述しましたが、グローバルナビゲーションがあることによって自身がサイト内のどの場所にいるのかを素早く把握することができます。そうすることによってユーザーは素早く主要なコンテンツにアクセスしたり、戻ったりということができるようになり、UXの向上に繋がります。

なおUI/UXについて、詳しくはこちら「【現職が徹底解説】UI/UXデザイナーとは？仕事内容や必要なスキルをわかりやすく解説！」で解説していますので覗いてみてください。

Webサイトの概要をわかりやすく示すため

グローバルナビゲーションにはwebサイトの概要をわかりやすく伝える役割もあります。

グローバルナビゲーションがあることによって、ユーザーがwebサイトに訪れてすぐに主要なコンテンツを知ることができます。そうすることでwebサイト全体の概要を素早くユーザーが知ることに繋がります。

ざっくりどんなwebサイトで、どんな構造をしているのかを把握できるということですね。

ユーザーがどのページからアクセスしても、webサイト全体のコンテンツが把握できることは大きなメリットになります。

SEO的な観点

グローバルナビゲーションはSEO的にも効果的だと言われています。SEOの観点で見ても「主要なコンテンツ」をわかりやすく設置しておくのは重要です。

基本的にグローバルナビゲーションは全てのページに設置されているので、検索エンジンにも「このコンテンツが重要です」とわかりやすく伝えていることになります。そうすることで検索エンジンに「わかりやすいwebサイト」と評価されることに繋がります。

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

グローバルナビゲーションを作るには、情報設計が欠かせません。要するにユーザーを知る必要があるということです。いきなりグローバルナビゲーションを作るのではなく、ユーザーの心理や目的をしっかりと定め、サイトマップやサイトストラクチャを考えた上で設計しましょう。その後のワイヤーフレーム作りにもかなり深く関わってきます。

ブログなど小規模サイトの場合はコンテンツ自体がそもそも少ない場合もあると思うので、徐々に増やしていくのもOKです。

サイトストラクチャについてはこちらの「サイトストラクチャとは？知っておきたい５つのパターンを解説」でも解説しています。ワイヤーフレームに関してはこちらの「誰でも作れるワイヤーフレームの作り方ガイド！おすすめツールも紹介」をご覧ください。

Webサイト全体の構成を考える

まずはサイトマップやサイトストラクチャを設計してwebサイト全体の構成を考えましょう。作るwebサイトにどんなコンテンツ（情報）を入れるのか？ということです。

ここでは重要度は気にせず、どんな情報があり、またその情報を載せるにはどんなページが必要なのかを考えて洗い出しましょう。この際、ユーザーの動線を強く意識しましょう。webサイトのスタートとゴールを明確にするとコンテンツ整理が簡単になります。

「この情報で足りてるのかな？」と不安になると思うので、競合を見て回りましょう。そうすればそこまで労力をかけずに必要なページが見えてくるはずです。

Webサイトの中で重要なコンテンツを考える

続いて洗い出したページの中からグローバルナビゲーションに採用する項目を決めます。ユーザーにとって重要なコンテンツを選ぶことを忘れないでください。

重要度順に左から並べていくのがセオリーとされています。人間は左から右にかけて情報を得るためです。

また、ユーザーにとってわかりやすい言葉になっていることも必要です。一目見て意味が通じるようにしてください。

例えば三井住友銀行HPでは以下のように、「商品・サービス」「金利・手数料」「各種お手続き」などユーザーが最も気になる項目をグローバルナビゲーションに採用しています。そうすることで情報が多いサイトでもユーザーは素早く目的を達成することができます。

Manablogでは「SEO」「CODE」「LIFE」などユーザーにとってわかりやすいコンテンツをグローバルナビゲーションに採用していますね。

他のサイトも参考にしながら検討を進めてください。ブログなどの小規模サイトであればそこまで複雑にならない思うので、あまり時間をかけすぎないことも重要です。

グローバルナビゲーションを作る上での注意点

ここからはやってしまいがちなグローバルナビゲーションを作る上での注意点を説明していきます。

項目数は5~7個までにする

グローバルメニューの数の増やしすぎには気をつけましょう。上述しましたがグローバルメニューの目的はユーザーにとってwebサイトの案内役になることです。その案内が10個も15個もあったらどうでしょう？案内どころかむしろユーザーを混乱させてしまいます。

項目数は5~7個にしましょう。それ以上ある場合は情報の整理ができていない場合が多いです。

お問い合わせなどのCVに繋がる導線は入れない・差別化する

ほとんどのwebサイトにはお問い合わせなどのコンバージョンに繋がる導線があると思います。そういった導線は通常グローバルナビゲーションには入れません。あくまでお問い合わせはメニューではないので、情報の種類が違うからです。

とはいえ重要度は極めて高い場合が多いので、グローバルナビゲーションの上部などに設置したり、色を変えるなどしてユーザーがすぐにコンバージョンできるようにしましょう。

日立のホームページでは「お問い合わせ」や「検索」をグローバルメニューの上部に配置してユーザーにとってわかりやすくしています。

わかりにくい文言を使わない

グローバルナビゲーションにおいてわかりにくい文言を使うのはNGです。意外にやってしまっているのをよく見ます。

例えば、社内では当たり前に使われているサービス名などを入れてしまう例です。社内では知っているのが当たり前でも、ユーザーにとっては全く馴染みがないことがよくあります。

ユーザーにとって本当にわかりやすい文言になっているか改めて確認しましょう。

まとめ

グローバルナビゲーションについて解説してきました。グローバルナビゲーションはサイトの重要な案内役であり、概要をわかりやすくしてくれる役割があります。

ブログやwebサイトを作る中でも、なんとなくグローバルナビゲーションを入れていた方も多いと思います。（僕もその一人でした…）本来の役割や作り方を意識することで、より良いwebサイトを作ることにつながると思います。是非参考にしてみてください！

サイトストラクチャとは？知っておきたい5つのパターンを解説

続きを見る

誰でも作れるワイヤーフレームの作り方ガイド！おすすめツールも紹介

続きを見る

【現職が徹底解説】UI/UXデザイナーとは？仕事内容や必要なスキルをわかりやすく解説！

続きを見る