Webサイトのナビゲーション：8つの種類と設計の原則

公開日：2024年09月24日　更新日：2026年10月12日

Webサイトのナビゲーションは、ユーザーが「今どこにいて、次にどこへ行けるか」を理解するための案内です。見た目のメニューを増やす前に、探す情報とページの階層を整理しましょう。この記事では小さな講座サイトを例に、講座一覧から詳細、申込みまでの道筋を設計します。

講座を探す人が必要とするのは「分野を選ぶ」「日程を確かめる」「申込む」という流れです。PixsoのWebデザイン画面で各ページを並べ、現在地、戻り先、次の行動を一緒に確認します。メニューを美しくするだけでは、目的の講座に着けるとは限りません。

まず全体の入口を決める

講座サイトの上部には「講座を探す」「料金」「開催場所」「ヘルプ」など、初めて訪れた人が使う少数の入口を置きます。グローバルナビゲーションは全ページで同じ分類と順序を保ち、選択中の項目を示します。項目名は社内用語ではなく訪問者が探す言葉を選びます。

講座詳細の中に「概要」「日程」「持ち物」「よくある質問」があるなら、ページ内または同じ講座群のローカルナビゲーションが役立ちます。サイト全体の入口と混ぜず、現在見ている講座に関する選択肢だけを示しましょう。スマートフォンでは折り返しや開閉時のラベルも確認します。

「ホーム＞講座一覧＞写真講座＞初級」のように、今のページがどの分類にあるかを示せます。ただしパンくずはグローバルメニューの代わりではありません。ユーザーが一覧へ戻りたいときに役立つ階層を表し、同じページへ戻る不要な項目を増やさないようにします。

三回に分かれた講座教材なら「前の回」「次の回」が自然です。一方、講座一覧のページネーションは大量の候補を分けるための仕組みで、学習順序を示すものではありません。二つを同じ見た目にせず、利用者が何を移動するのか分かるラベルにします。

写真講座の詳細から「同じレベルの講座」や「必要な機材」へ進むなら文脈があります。関連が薄い人気記事を並べても選択の助けにはなりません。リンク先が何を説明するかを名前で示し、同じ目的地へのリンクを本文中に繰り返し置かないようにします。

言語切り替えやアカウント設定などの補助リンクは、主な「講座を探す」動線と区別します。重要な申込ボタンまで補助領域へ追いやると、訪問者は次の行動を見失います。画面幅が狭くなっても主要行動が残るか確かめましょう。

メニューが折りたたまれるとき、開くボタンの名前と閉じる操作、キーボードでの移動、現在地の表示を確認します。表示幅だけでなく長い講座名や翻訳された項目名でも試してください。見た目の流行を採用するより、必要な講座へ着けることを優先します。

講座一覧、詳細、日程、申込みの四画面を作り、メニュー、パンくず、申込ボタンを接続します。初めて見る人に「来週の初級講座を探して申込む」と依頼し、どこで戻り先を迷ったか観察してください。途中で説明が必要なら、ラベルか分類を修正します。クリック数だけではなく、迷いと誤った移動も記録しましょう。

この講座サイトでは全体メニュー、講座内メニュー、パンくず、必要な関連リンクで十分かもしれません。八種類をすべて実装する必要はありません。情報の階層、画面幅、訪問者の目的に合わせて選び、実際の課題で確認してから追加しましょう。