ナビゲーションデザインの種類と設計のポイント

ナビゲーションは、ユーザーが現在地を把握し、必要な情報や機能へ移動するための案内です。分かりやすい名前と一貫した配置が、迷わず使えるWebサイトやアプリを支えます。

実際の場所で案内図や標識を頼りにするように、画面上でも現在の位置と行き先が分かる手掛かりが必要です。

ただし、すべてのリンクを並べればよいわけではありません。利用者がよく行う作業と情報の階層に合わせて、入口を整理しましょう。

この記事では、代表的なナビゲーションを「どの作業を支えるか」で比較します。PixsoのWebデザイン機能でデスクトップとスマートフォンの画面を並べるときも、先に行き先と項目名をそろえてから配置を調整しましょう。

1. なぜナビゲーションデザインが重要なのか

ナビゲーションは、目的の場所への移動を支える要素です。メニューやパンくずリスト、関連ページへのリンクなど、役割に合う形で用意します。

設計では、主に次の三つを確認しましょう。

行き先が分かる

項目名を見て、開いた先に何があるか予測できることが大切です。社内だけで使う略語より、利用者に馴染みのある言葉を選びます。

現在地と戻り方が分かる

選択中のメニューやページタイトル、パンくずリストで、どの領域を見ているかを示します。必要に応じて上の階層や前の画面へ戻れるようにしましょう。

検索結果や外部リンクから途中のページに入った場合も、サイト内での位置が分かる案内を用意します。

ページをまたいで一貫している

同じ機能は同じ名称と位置で提供します。ページが変わるたびにメニューの意味や並びを覚え直さずに済むようにしましょう。

2. よく使われるナビゲーションの種類

画面の大きさ、情報量と利用者の主な作業に合わせて組み合わせます。

2.1 トップメニュー

ページの上部に主要な領域への入口を置く形式です。製品、料金、サポートなど、サイト全体の構造を示すために使います。

項目名は行き先の内容を端的に表します。似た意味の項目が並ぶ場合は、分類そのものを見直しましょう。

下位項目を展開するドロップダウンや、スクロール中も表示する固定メニューを組み合わせることもできます。

メニューを展開する操作はマウスだけでなく、タッチとキーボードでも使えるようにします。固定表示する場合は、本文を隠しすぎない高さに調整してください。

2.2 垂直メニューまたはサイドバー

画面の側面に項目を縦に並べます。管理画面や、同じ領域の中を繰り返し移動する用途で使いやすい形式です。

階層がある場合は、どの項目が同じグループなのかを明確にします。展開状態と選択中の項目を区別して示しましょう。

2.3 フッターナビゲーション

ページの末尾に関連情報への入口をまとめます。会社情報、問い合わせ、利用規約など、本文を読み終えた後に必要になるリンクを整理できます。

重要な作業への入口をフッターだけに置くと、見つけるまでの移動が長くなります。利用頻度と目的に合わせて、上部のメニューや本文からの入口も用意しましょう。

リンクが多い場合は意味の近い項目をまとめ、見出しで区切ります。小さい画面でも読みやすく操作できる余白を確保します。

2.4 ハンバーガーメニュー

三本線などのアイコンを操作してメニューを開く形式です。表示領域を節約できますが、閉じた状態では項目が見えなくなります。

よく使う操作まで隠すべきかは、利用頻度と画面の目的から判断します。メニューを開く位置と閉じる方法を分かりやすく示しましょう。

2.5 パンくずリスト

パンくずリストは、サイトの階層の中で現在のページがどこにあるかを示します。上のカテゴリへ戻る入口としても使えます。

商品や記事のカテゴリが複数階層に分かれるサイトに適しています。ユーザーがたどった全操作の履歴とは区別して設計しましょう。

2.6 次の行動につなげるボタンやリンク

資料請求や登録など、そのページから進む主な行動を示します。サイト全体のメニューとは役割を分け、ページの目的に合う入口を用意しましょう。

「こちら」だけでなく「料金を見る」「資料をダウンロード」のように、実行する内容が分かるラベルを使います。

3. より良いナビゲーションをデザインするコツ

社内申請サービスのメニューを組み立てる

経費を申請する人と承認する人では、最初に探す情報が異なります。「管理」「各種機能」のような社内分類を並べる前に、利用者の作業を行き先へ対応付けます。次の表は、そのための設計例です。

「経費を申請」は操作、「自分の申請」は一覧への移動です。両者の役割を区別すれば、ボタンとナビゲーションを同じ外観で大量に並べずに済みます。「承認待ち」を権限によって表示しない場合も、表示される項目の名称や順序がページごとに変わらないようにします。

スマートフォンでは、項目名を短縮して別の意味にするより、優先度の低い領域を展開式にする方法を検討します。「自分の申請」を「自分」と略すと、プロフィールとの違いが分かりません。長い日本語ラベルを入れても、項目が重ならず読める幅と折り返しを確保してください。

次に、実際の画面で使いやすさを確かめるポイントを紹介します。

3.1 操作できる場所を明確にする

リンクやメニューが本文と紛れないように、位置、余白、色などで区別します。操作できるかをユーザーに推測させないことが大切です。

選択、ホバー、キーボードのフォーカスの状態も用意します。色だけで区別せず、下線や形などを組み合わせると判断しやすくなります。

3.2 期待される場所に配置する

ユーザーは他のサイトで覚えた操作を手掛かりにします。よくある配置から大きく変える場合は、見つけやすさと操作性を実際に確かめましょう。

主要なメニューはページ間で同じ位置に置きます。スマートフォンで表示を変える場合も、名称と情報の階層を保つと理解しやすくなります。

3.3 ナビゲーションと本文を視覚的に分ける

余白、背景、境界線などを使い、移動するための領域と本文を区別します。

見た目を完全に別のデザインにする必要はありません。共通の書体や色のルールを使いながら、まとまりと役割が分かる構成にしましょう。

3.4 項目を意味のあるグループにまとめる

リンクを増やす前に、利用者がどの言葉で情報を探すかを考えます。似た項目を整理し、優先度の高い入口を見つけやすくします。

項目数を一律に5〜9個へ制限する必要はありません。情報量、名称の分かりやすさ、分類の関係を見て、実際の課題を探してもらうテストで判断します。

3.5 目的の情報を探してもらう

利用者に具体的な課題を伝え、目的の情報へ進んでもらいます。最初に選んだ項目、戻った場所、迷った名称を観察しましょう。

見つからなかった原因が名前なのか、分類なのか、表示位置なのかを切り分けます。修正後は同じ課題で確認し、迷いが減ったかを見ます。

4. Pixsoを使ったナビゲーションバーのデザイン

Pixsoでは、メニューと移動先の画面を同じファイルで検討できます。申請サービスなら「自分の申請」の一覧、申請の詳細、差し戻しの修正画面を並べ、どの画面でも現在地の表示が矛盾しないようにします。

共通のメニューをコンポーネントとして作り、通常、選択中、キーボードフォーカスの外観を並べます。オートレイアウトで項目の間隔を調整したら、長い名称と狭い画面でも確認してください。メニューを押した後の移動先は、プロトタイプで接続します。

テストはトップページからだけでなく、申請詳細を直接開く条件でも行います。「差し戻された申請を直してください」と伝え、どの入口を選ぶかを観察します。一覧へ戻る操作で条件が失われる、サイドバーの選択とページ名が一致しない、といった問題は、スクリーンショット単体では見落としやすい箇所です。

分類の名前そのものを確かめたい場合は、ナビゲーションのツリーテストで構造を先に検証できます。画面上の見つけやすさのテストとは分けて考えましょう。

名称と構造を利用者の目的に合わせる

ナビゲーションは、現在地と行き先、戻る方法を伝えるためにあります。主要な課題を一つ選び、迷わず移動できるか実際の画面で試すことから改善を始めましょう。