デザインをする時、見た目を重視するあまり、ナビゲーション設計を軽視しがちなデザイナーって割と多いです。

でもユーザビリティという観点、あるいは使い勝手という意味で、ナビゲーションの設計はもっとも重要と言っても過言ではありません。

というのも、ユーザーを迷わず目的のコンテンツページへ誘導させることができるからです。

今日はナビゲーション設計の意義やらそもそもどんな種類があるのか？ってことをお伝えしていきます。

ナビゲーション設計とは？

ナビゲーション設計は、ウェブサイトやアプリケーションのユーザーインターフェース（UI）において重要な要素。

ユーザーがサイト内をスムーズに移動し、必要な情報やコンテンツに辿りつけよう計画的に導線を考えていきます。

具体的には、メニュー、リンク、ボタンなどの要素を設計し、ユーザーが直感的に操作できるようにします。

どうしてナビゲーション設計が大切なの？

ストレスなく特定のアクションをスムーズにするため

ナビゲーション設計で最も大切な考えは、ユーザーが目当ての情報にすぐ辿り着けるよう誘導してあげること。

そもそもユーザーはWebサイトに入ってきた時点で、何かしら「情報」を探しているケースがほとんどです。

そしてデジタルにおけるユーザは「せっかち屋」なので、いかにストレスなく、早々に求める情報に辿り着くか、が重要。

もしなかなか情報を見つけられなかったら、ユーザーは100%離脱しますよ。（せっかく訪問してくれたなの・・・）

ユーザーを正しく予想させる

ナビゲーション設計は、サイト内のコンテンツ構造を把握しやすくする、と言う意味でも大切。

そもそもナビゲーションは、カテゴリ構造や階層関係、重要なコンテンツを分かりやすく示してあげることで、ユーザーにサイト内の全体像を示す役割があります。

ナビゲーション設計がちゃんとされていれば、ユーザーはサイト内の情報構造を理解できて、自分自身がどこへ行こうか？という部分を正しく予想させることができるるのです。

ナビゲーション設計ではどんな視点が大切なのか？

もしデザイナーとしてワンランクアップしたいなら、下記のナビゲーションルールは必ず守った方がいいです。

実際、僕も下記の視点はナビゲーションを設計する上で、常に大切にしている視点です。

シンプル

ナビゲーションはシンプルかつ直感的な構造を持つべき。複雑なナビゲーションはNG。

ナビゲーションの項目には、明瞭で分かりやすいラベルを使用することが重要です。

一般的な用語やユーザーが理解しやすい言葉を選ぶことで、ユーザーが求める情報を素早く特定できます。

一貫性・統一感の確保

ナビゲーションは各ページにおいて一貫性を保つことが重要です。

例えば、どのページにおいてもリンク位置を同じにしてあげたり、出現順序も同じにしてあげること。あるいはナビ文言は統一してあげること。

なぜ一貫性が大事かというと、ユーザーが”予測できる”からです。

重要な項目を目立たせる

ウェブサイトやアプリケーションにおいて重要なページや機能は、ナビゲーション内で目立つように配置しましょう。主要な目的やユーザーの利益に直結するコンテンツには、優先的な位置付けをして視認性を高めます。

例えばスマホは画面サイズの影響で、表示するナビゲーションの数は少ないです。そういうときには、「どういった項目をまずユーザーに見せたいのか？」と考えてみると良いです。あるいは、ユーザーが見たいものはなんだろう？と。

ユーザー行動に反応性を

ナビゲーションはユーザーが簡単に操作できるように設計されるべきです。

クリック可能な領域やホバーエフェクトなど、ユーザーの行動に反応する要素を適切に配置します。また、アクセシビリティにも配慮し、バリアフリーなナビゲーションを提供します。

ナビゲーションの種類【代表的なナビゲーション】

ナビゲーションにはさまざまな種類があります。

今回は代表的なナビゲーションをご紹介します。

種類を押さえておけば、「あっ、ここにナビゲーションが必要だな」と言うことがわかります。

グローバルナビゲーション

ナビゲーションって言えば、真っ先に思い浮かべるのがグローバルナビゲーション、という人は多いはず。

グローバルナビゲーションはウェブサイトやアプリケーションの全体的なメインメニューで、主要なコンテンツがまとめられています。

通常、全ページに共通して表示されており、ヘッダーやサイドバーに配置されています。

メニューの項目数は5つがいいと言われています。

ローカルナビゲーション

ローカルナビゲーションとは、グローバルナビゲーションで選択された現在のカテゴリー内の同一カテゴリーに属するページを表示するサブメニュー。
つまりグローバルメニューの位置関係で言えば、下位であり「子ページ」や「孫ページ」を表示するイメージ。

表示される場所としては、ヘッダーの直下、あるいは画面の左側もしく右側に配置されることが多いです。

ページ数が多く大規模なサイトほどローカルナビゲーションが重要です。

なぜなら関連するサブページを出してあげることで、ユーザーが特定の下層ページから別の下層ページへの移動を容易にできるからです。

パンくずリスト

パンくずリストとは、Webページの現在位置を示すナビゲーションです。要はユーザーが今どのページにいるのか、またサイト全体の中でどの階層位置にいるのかを示します。

例えば、「トップ > カテゴリA > サブカテゴリB > ページC」といった形式で。

通常、パンくずリストはページ上部に配置されることが多いですが、最近はページの下部に出ていることもあります。

ちなみにブレッドクラムナビゲーションともいうらしいです。

関連ナビゲーション

関連ナビゲーションは、ユーザーが現在閲覧しているコンテンツと関連する情報を『内部リンク』として提供するナビゲーション。

ECサイトであれば、ユーザーがある商品を閲覧している場合、「これも好きではないですか？」と同カテゴリーの他の商品や関連商品のリンクが表示されることがあります。これです。

ブログページであれば、ページの最後の方に「関連記事」とあるケースがありますが、これも関連ナビゲーションです。

関連ナビゲーションを計算して設計してあげると、アップセルや関連商品のクロスセルにつながりますし、ブログなら回遊性を高める結果、ユーザーの滞在時間も伸びるのもメリットです。

ステップナビゲーション

ステップナビゲーションは、ユーザーが商品購入や会員登録フォーム、お問い合わせフォームなどの操作を行う際に、その進行状況を表示するためのナビゲーションのこと。

具体的には、ユーザーがどのステップに進んでいるのかを視覚的に示し、次の画面や手順の詳細情報を提供してくれます。

例えば、決済手続きの際には、「ここを操作したら、決済が完了してしまうのかな？確認画面とかないのかな？」という疑問や心配を抱くことないですか？

ステップナビゲーションがあれば、決済手続きで現在の進行状況や次のステップがどのような内容かを明確に表示でくるのでユーザーエクスペリエンスの向上に役立ちます。

またステップナビゲーションは、ユーザーの離脱を防ぐこともできます。なぜならユーザーが手続きを途中で中断することなく最後まで完了するよう促すことができます

ページネーション

ページネーションとは要するに「ページ送り」のこと。

例えば、メディアサイトやECサイトの一覧ページ・検索結果一覧など、長いリストやコンテンツを複数のページに分割して表示する場合に使用されます。ページネーションは、ページ番号のリンクや「次へ」「前へ」のリンクなどを提供し、ユーザーが簡単に別のページに移動できるようにします。

検索エンジンに対してページ間の関係性を明示し、サイトの品質を高めることができます。検索エンジンのクローラビリティを考慮して、metaタグの「rel=”next”」と「rel=”prev”」として表記してあげるといいです。

コンテンツ内ナビゲーション

コンテンツ内ナビゲーションはWebサイトの文章内に設置されるナビゲーションのこと。

代表的なコンテンツ内ナビゲーションの一つは、テキストリンクです。

テキストリンクは通常、文章内のキーワードや関連するフレーズにリンクが設定してあげるといいです。

一般的には青文字やアンダーラインを使って示すケースが多いですが、最近はカード型のリンク表示もあります。

ユーザーはテキストリンクを辿って、自分が欲しい情報をより深く知ることができます。

フッターナビゲーション

フッターナビゲーションは、サイト内のフッター領域（最下部）に配置されるナビゲーション。

フッターってサイトを上から下まで読んだ人（最下部までスクロールした人）には必ず表示される領域なので、そこでページ全体の階層構造を示してあげると、回遊率がグッと上がります。

ちなみにフッターナビゲーションは、グローバルナビとは役割は異なっていてます。

ヘッダーナビゲーションは主要なメニューを表示させるのに対して、フッターナビゲーションはサイト全体のリンクを示します。