グローバルナビゲーションの作り方｜分類・ラベル・スマホ表示

グローバルナビゲーションは、Webサイト全体の主要な行き先を示す共通メニューです。どのページからでも、製品、料金、サポートなどの重要な情報へ移動できるようにします。目的はメニューを増やすことではなく、利用者が自分の用事に合う行き先を予測できることです。

作る順序は、利用者の目的を整理し、行き先を分類し、分かる名称を付け、画面幅と入力方法ごとの動作を決める、という流れです。PixsoでWebサイトの画面を設計する際も、ヘッダー単体ではなく、移動先のページと一緒に確認すると判断しやすくなります。

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

グローバルナビゲーションは、多くの場合、ページ上部に配置されます。サイト全体で共通する主要な分類を示し、何を扱うサイトか、どこへ進めるかを伝えます。画面の左側に置く構成もあり、必ず横一列である必要はありません。

特定の分類の中だけを案内するローカルナビゲーションや、ページ内の見出しへ移動する目次とは役割が異なります。たとえば工具レンタルサイトの「製品」「利用方法」「料金」「サポート」が共通メニューで、「電動工具」「清掃用品」などが製品内の分類なら、2つの階層を区別して見せます。

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

2.1 目的のページを見つけられるようにする

検索結果から商品詳細へ直接来た利用者が、トップページを見ているとは限りません。そのページだけでは分からない貸出条件や返却方法を、共通メニューから探せるようにします。

滞在時間を長くすること自体が目的ではありません。返却方法をすぐに見つけて用事を済ませられるなら、短い訪問でも役に立っています。何度もメニューを開き直す場合は、関心が高いのか、名称や分類で迷っているのかを、実際の操作と併せて確認します。

ページごとに同じ行き先の名称や順序を変えないことも大切です。利用者が一度理解した分類を、次のページでも使えるようにします。

2.2 サイトの構成と現在地を伝える

メニューの項目から、扱っている製品、サービス、情報の範囲を想像できるようにします。「サービス」だけでは広すぎる場合は、実際の利用者が探す名称を使います。社内の部署名を、そのまま利用者向けの分類にしないようにします。

現在のページが属する項目には、選択中であることを示します。色だけでなく下線なども組み合わせ、キーボードのフォーカス表示とは区別します。W3Cのメニュー構造の解説（英語）では、実装で現在の項目を識別する方法や、画面幅が変わっても名称・順序・行き先を一貫させることを説明しています。

検索エンジンにページを見つけてもらうには、実装時のリンクも必要です。Googleのリンクの解説（英語）では、有効な行き先を持つリンクと、内容を説明するリンクテキストが基本とされています。ナビゲーションがあるだけで順位が上がる、有料アカウントで作ったサイトなら評価される、といった判断はできません。

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

3.1 利用者の目的と行き先を対応させる

作成前に、どの情報を誰が探すかを整理します。会社案内が重要な採用サイトと、商品選びが中心の販売サイトでは、優先する項目が違います。すべてのサイトに同じ並びを当てはめないようにします。

工具レンタルサイトを例にすると、次のように利用者の用事と行き先を対応させられます。これは設計用の例であり、項目数をこの通りに固定するルールではありません。

同じ情報を複数の場面から探すこともあります。返却手順は「利用方法」で説明し、困ったときの「サポート」からその説明へ案内するなど、本文中の関連リンクでつなげます。共通メニューに似た項目を増やして解決しようとしないことが大切です。

3.2 分類とラベルをそろえる

グローバルナビゲーションはあくまでも案内板の役割ですので、コンテンツの全てを説明する必要はありません。サービスの名前や、料金、購入方法など、何が表示されるのかをユーザーにイメージさせる必要があります。

複数の製品がある場合は、「製品」の下にカテゴリをまとめます。「製品一覧」と「工具を探す」が同じ場所へ移動するなら、異なる役割の項目に見えないよう名称を整理します。ラベルだけを読んで、次に表示される内容を予測できるかを確認してください。

ページへ移動する操作と、下位メニューを開く操作も分けます。たとえば「製品」という文字は製品一覧へのリンク、隣の開閉ボタンは分類の展開とすれば、それぞれの役割が明確です。見た目が同じ場所で、最初のクリックだけ展開し、次のクリックで移動するなどの分かりにくい動作は避けます。

3.3 狭い画面でも行き先を残す

ヘッダーに項目が収まらない場合は、メニューボタンから一覧を開く構成にできます。開いた画面でも「製品」「利用方法」「料金」「サポート」の名称と順序を保ち、デスクトップにあった重要な行き先を省略しないようにします。

小さい矢印だけに開閉を任せず、何を開けるかが分かる操作領域を用意します。開いている状態、閉じる操作、前の階層へ戻る方法を描きます。メニューを閉じた後は、開く前のページで作業を続けられるようにします。

タッチ操作ではホバーを前提にできません。キーボードで操作する人もいるため、下位メニューはクリックやキーボードで明示的に開けるようにします。W3Cのドロップダウンメニューの解説（英語）も、マウスとキーボードの操作、親ページへのリンクと開閉操作の分離を扱っています。

4. Pixsoで共通メニューと遷移先を確認する

4.1 ヘッダーをコンポーネントにする

ヘッダーとメニュー項目をコンポーネントとして作り、各ページに配置します。通常、ホバー、フォーカス、現在地、展開中の見た目を並べ、役割が混同されないかを確認します。影を付けるだけでは、現在のページと、これから移動する項目の違いを表せません。

Auto Layoutで項目間の余白をそろえ、長いラベルや画面幅の変化を試します。狭い幅では共通メニューを切り替える画面を用意しますが、すべての端末ごとに別の分類を作る必要はありません。

4.2 3つの探し方をプロトタイプで試す

ヘッダーの見た目だけで終わらせず、Pixsoのプロトタイプで行き先までつなぎます。工具レンタルの例では、次の3つの用事を題材にできます。

1. 商品詳細から料金を調べる。料金へ移動した後、選んでいた製品へ戻る方法を確認します。共通メニューが本文の重要な情報を隠さないかも見ます。
2. 製品カテゴリを開いてドリルを探す。一覧を開く操作と、カテゴリへ移動する操作を区別します。目的の項目に到達する前にメニューが閉じない構成を検討します。
3. スマートフォンから返却方法を探す。メニューを開き、利用方法やサポートから該当する説明へ進めるかを確認します。閉じる方法や戻り先も含めて試します。

プロトタイプは、ラベルや遷移をチームで検討するために使います。実際のキーボード操作、フォーカスの移動、スクリーンリーダーへの伝達まで自動的に実装するものではありません。それらは引き継ぐ動作として記録し、本番の画面で確認します。

4.3 日本語のラベルを実際の長さで配置する

「返却・延長について」「法人のお客様向け」など、実際に必要な長さの文言を入れます。短い仮ラベルでは収まっていても、日本語の名称に変えたときに重なったり、意図しない位置で折り返したりする場合があります。

説明を長くする必要がある項目は、ラベルを短く保ち、展開先に補足を置く方法があります。レビューでは「この分類名から何が見つかると思うか」を確かめ、見た目の好みだけで名前を決めないようにします。

Pixsoで共通メニューと移動先の画面を作成する

利用者の用事から、メニューの良し悪しを判断する

グローバルナビゲーションは、ページをまたいで使える案内です。主要な行き先、分かる名称、一貫した順序、入力方法に合った開閉をそろえることで、どのページから来た人も次へ進みやすくなります。

完成後は、実際に探してもらい、最初に選ぶ項目、迷う名称、行き止まりになる場所を確認します。項目を増やす前に、分類とリンク先が利用者の目的に合っているかを見直してください。