あやね
ナビゲーションは、ユーザーが現在地を把握し、必要な情報や機能へ移動するための案内です。分かりやすい名前と一貫した配置が、迷わず使える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では、メニューとページの構成を同じファイルで検討できます。既存の対応ファイルを取り込んで、主要な画面のつながりを整理することもできます。
Pixsoのコンポーネントとオートレイアウトを使ってメニューを作り、画面をプロトタイプでつなぎましょう。無料プランで始め、必要なファイル数や共有機能に合わせてプランを選べます。
名称と構造を利用者の目的に合わせる
ナビゲーションは、現在地と行き先、戻る方法を伝えるためにあります。主要な課題を一つ選び、迷わず移動できるか実際の画面で試すことから改善を始めましょう。
