あやね
Webサイトのナビゲーションは、ユーザーが目的の情報にたどり着くための案内です。メニューの名前、分類、現在地の示し方をそろえると、初めて訪れた人にもサイトの構造が伝わります。
この記事では、代表的なナビゲーションの種類と設計の原則を紹介します。サイトの情報量や画面幅に合わせて、どの方式を使うか検討しましょう。
1. Webサイトの「ナビゲーション」とは？
最初に、そもそもWebサイトにおける「ナビゲーション」とは何なのか、そこから解説していきたいと思います。
「ナビゲーション（navigation）」は「航海術、航行」などを意味する英語ですが、Webサイトにおいてはユーザーがサイト内の目的のコンテンツへたどり着くための案内表示のことです。様々なサイトの一番上に付いたメニューがナビゲーションの一種にあたります。
このナビゲーションが不足することで、次のようなことを招きます。
- ユーザーが得たい情報や商品のページにたどり着けなくなる
- 直帰率が上がる
- サイトの滞在時間が減少する
- コンバージョン率が低下する
- 不満が溜まりリピートされなくなる
こういった負の連鎖が生まれるため、たかがナビゲーションと侮ることなく、これから制作するWebサイトに適切なナビゲーションを検討し、設置するようにしましょう。
2. 代表的なナビゲーション8種
次に、ナビゲーションにはどのような種類のものがあるのかを知っておきましょう。ここでは代表的なナビゲーションとして8種類を紹介いたします。
2.1 グローバルナビゲーション
Webサイトの全てのページに表示される共通のページリンクです。一般的には、ページカテゴリーを並べて表示し、位置はヘッダーに置かれることが多くあります。
2.2 ローカルナビゲーション
あるページカテゴリー内のコンテンツへのリンクを集めたナビゲーションです。表示方法は、グローバルナビゲーションのリンクにマウスオーバーしたときに展開する形式や、サイドカラムに配置する形式など様々です。
2.3 ブレッドクラムナビゲーション（パンくずリスト）
ブログやSEO記事などによく見られるナビゲーションで、そのページの階層を順に表示して上の階層に戻れるようになっています。位置はヘッダーのすぐ下あるいはフッターのすぐ上にある場合が多くあります。
2.4 ダイナミックナビゲーション
いわゆる“サイト内検索”のことを指しており、ユーザーが自由なキーワードでサイト内を検索できます。位置は、グローバルナビゲーションなどに内包されることが多くあります。
2.5 ページネーション・リニアナビゲーション
同列のコンテンツが複数ページにまたがるときに表示される、ページ間を移動できるナビゲーションです。ページネーションは画像のような「1」「2」など、他ページへ直接リンクできるナビゲーションで、リニアナビゲーションは前後のページにのみ移動できるナビゲーションです。
2.6 関連ナビゲーション
いわゆる“関連記事”などの、コンテンツに関連したコンテンツへ誘導するナビゲーションです。効率よくサイト内を回遊させるのに役立ちます。メインコンテンツの下に表示することが多くあります。
2.7 ステップナビゲーション
アカウントの新規登録や商品購入時によく表示される、登録や購入のどのステップに現在いるのかを示すナビゲーションです。ユーザーに必要な手順と現在の位置を指し示し、離脱を防ぐねらいがあります。
2.8 エクストラナビゲーション
グローバルナビゲーションの項目ほど重要ではないが、全ページに表示しておきたいページへのリンクを載せるナビゲーションです。例えば、利用規約やプライバシーポリシーなどが挙げられます。位置はヘッダーやフッターなど様々です。
3. ナビゲーションのデザインの原則
ナビゲーションを設計するときは、配置の一貫性、項目の整理、ラベルのわかりやすさを確認します。
3.1 統一されたデザインにする
ナビゲーションの色、文字、選択状態の表現をそろえましょう。同じ役割の要素が同じ見た目で表示されると、操作を覚えやすくなります。
また、各ナビゲーションの位置は全ページで一貫性があるようにしましょう。この場所にこのナビゲーションがある、とユーザーがわかるようにすると利便性が上がります。
3.2 シンプルなデザインにする
主要メニューには、ユーザーがよく使う項目を優先して並べます。数を減らすだけでなく、分類名を見て移動先を予測できることが大切です。
3.3 わかりやすいデザインにする
現在のページに対応する項目を強調し、必要に応じてパンくずリストを添えます。色だけに頼らず、文字の太さや下線なども組み合わせましょう。
4. 画面に合わせたナビゲーションの配置
画面幅と情報量によって、使いやすい配置は変わります。ここでは3つの配置方法と検討点を紹介します。
4.1 オートリサイズナビゲーション
画面が狭くなるときは、項目の折り返しやメニューへの集約を検討します。固定ヘッダーが本文を隠さないよう、高さと余白を確認しましょう。
4.2 縦型のナビゲーション
縦型のナビゲーションは、階層のある項目を一覧できる配置です。管理画面などで使う場合は、本文の幅とメニューの幅を合わせて検討します。
4.3 コーナーナビゲーション
画面の四隅に操作を分けて配置する方法もあります。視線が分散しやすいため、項目数を絞り、操作の順序とキーボードでの移動を確認しましょう。
5. ナビゲーションの作成に便利なデザインツール-Pixso
Pixsoでナビゲーションの見た目と画面遷移を設計し、プロトタイプで使い勝手を確認できます。
まず主要なページとメニューを作り、現在地の表示や開閉状態を加えていきましょう。
5.1 Pixsoとは？
Pixsoは、ブラウザでUIデザインとプロトタイプを作成できるツールです。チームでファイルを共有し、画面上のコメントを使って意見を集められます。
繰り返し使うメニューをコンポーネントにし、通常・選択・展開などの状態を整理します。共有スタイルを使うと、色や文字の表現もそろえやすくなります。
5.2 Pixsoの特徴やメリット
ナビゲーションの設計では、次のような作業に活用できます。
- 主要なページとメニューの画面を作成
- ブラウザでファイルを開いて編集
- チームで共同編集し、コメントでレビュー
- 画面幅に応じたレイアウトを検討
- 画面をつないだプロトタイプで移動を確認
- コンポーネントとスタイルで表現を統一
6.まとめ
ナビゲーションは、情報の分類と移動のしやすさをつなぐ仕組みです。種類を選ぶだけでなく、配置やラベルを一貫させることが設計の基本となります。
代表的なタスクを使って、初めて訪れた人が目的のページにたどり着けるか確認しましょう。迷った箇所を見直すと、改善点を具体的に絞れます。
Pixsoで画面と操作の流れを用意すれば、実装前にチームで確認できます。メニューの分類と表示名から、使いやすい導線を整えていきましょう。
