サイトマップの作り方 — 情報が先、ゴールデンルートを通す
この記事でわかること
Lesson 2-4 で KPI を決めました。 KPI を達成するには、それを支えるサイトの構造が必要です。 この Lesson では、サイトマップ(ページのツリー図)の作り方を扱います。 ただし、本書では「ページから入らない」やり方を提案します。 最初に整理するのは、ページではなく情報です。
1. サイトマップという言葉を整理する — 3 つの別物がある
最初に用語を揃えます。 「サイトマップ」という言葉は、現場で 3 種類の別物を指して使われます。 混同すると話が通じません。
1-1. 設計図としてのツリー図
ページの構造を一望する設計図、これが本 Lesson で扱う「サイトマップ」です。 企画段階・要件定義段階で作成して、業者・社内関係者と共有します。 ここから先の説明は、すべてこのツリー図のことを指します。
1-2. 訪問者向けの HTML サイトマップ
サイト上で公開する「全ページ一覧」ページのことです。 フッターからリンクされていることが多い、あれです。 本 Lesson では扱いませんが、別物として別途用意します。
1-3. 検索エンジン向けの XML サイトマップ
検索エンジンに「このサイトにはこういうページがあります」と知らせる XML 形式のファイル(`sitemap.xml`)です。 SEO 対応の一環で第 6 章で扱います。 こちらも本 Lesson のスコープ外です。
用語の整理ができたら、本題に入ります。
2. ここが核心 — 「ページ」より「情報」を先に整理する
2-1. ページと情報は別物
サイトマップを描くとき、いきなりページを並べたくなります。 でも、ここで止まってください。 ページは情報を入れる容れ物、情報は伝えたい中身 です。 どんな容れ物が必要かは、中身が決まってから決まる、というのが順序です。
2-2. 情報が決まらないままページを並べる失敗
情報設計を飛ばしてページを並べると、現場で必ず次のことが起きます。 ページ数だけが膨らみ、何を載せるかが定まらず、業者にも意図が伝わらず、結局やり直し。 「とりあえずページを並べておこう」は最大の遠回りです。
2-3. 情報から入る 4 ステップ
正しい順序は、次の 4 ステップです。
- Step 1:何を伝えるかをすべて列挙 — Lesson 2-1 の「4 つの問い」で書いた「何を」を、ここで詳細化します
- Step 2:情報をグループ化 — 似たもの同士をまとめてカテゴリ化します
- Step 3:各カテゴリをページ化 — 1 カテゴリ=1 ページとは限りません。量で分割・統合します
- Step 4:ページ同士の関係を整理 — 階層・関連付け・動線を決めます
3. 「人物」シリーズで言うと — 情報=話したい内容、ページ=それを話す場面
本書の「人物」シリーズで例えると、こうなります。 情報は、自社が訪問者に向けて話したい内容。 ページは、その内容を話す場面。 同じ人(自社)が、立場(ページ)を変えて、違う場面で同じ「強み」(情報)を話します。
たとえば「自社の強み」という情報は、トップで一言、専用ページで詳しく、事例ページで具体的に — というように、複数の場面(ページ)で出すことになります。 情報とページが 1 対 1 で対応するのではなく、1 つの情報が複数のページで顔を出す のが自然です。 だから、まず情報を整理する。 場面は情報のあとで決まる。
4. ユーザーは必ずしもトップから来ない — 「ゴールデンルート」設計
4-1. 検索流入は中ページから直接
昔のサイト設計は「トップ → 一覧 → 詳細」の流れを想定していました。 でも今は、検索流入の多くが 中ページから直接 です。 Google で検索して、特定の記事や製品ページに直接着地する。 トップから来るユーザーは、全体の数割しかいないことも珍しくありません。 「トップから誘導する」設計だけでは、半分しかカバーできません。
4-2. ゴールデンルートとは
そこで本書が提案するのが、ゴールデンルート という考え方です。 どの入口ページから入っても、自然に CV に着く主動線、これがゴールデンルートです。 入口がトップでも、ブログ記事でも、料金ページでも、製品詳細でも、最終的に CV に向かう導線が設計されている状態を目指します。
4-3. 代表的な入口ページを洗い出す
まず、代表的な入口ページを洗い出します。
4-4. 入口ページごとに「期待される動き」を決める
入口ページの種類によって、訪問者の動き方は変わります。 それぞれに期待する動きを決めておきます。
- その場で CV(LP 型):他のページに回遊させず、入口でクロージング
- 1 ページ回遊して CV:製品ページから問い合わせフォームへ、のような短い動線
- 数ページ回遊して CV:メディア記事 → 製品ページ → 問い合わせ、のような長い動線
4-5. どのページにも「次の一歩」を入れる
ゴールデンルートを成立させるには、どのページにも「次の一歩」 が用意されている必要があります。 関連リンク、CTA(行動喚起)、問い合わせフォームへの導線、関連記事 — 訪問者が次に行ける道が、必ず一つは見えていること。 行き止まりのページがあると、そこでゴールデンルートが切れます。
4-6. ゴールデンルートを図にしてサイトマップに重ねる
ゴールデンルートが見える化されたら、サイトマップ(ツリー図)の上に重ねます。 主動線が太く、副動線が細く描かれた状態にすると、業者にも社内にも「このサイトはどう動いて成果を出すか」が一目で分かります。
5. 階層とナビ — ルールにこだわりすぎない
5-1. 「3 階層以内」は便利な目安、でも絶対ではない
Web の入門書で「サイトの階層は 3 階層以内」と教えるものが多くあります。 便利な目安ですが、絶対のルール ではありません。 情報量が多いサイトを 3 階層に押し込もうとすると、各階層に項目が並びすぎて、かえって探しにくくなります。
5-2. タイプ別の階層感
サイトタイプによって、適切な階層感は変わります。
5-3. 階層は「情報カテゴリの結果」
階層を先に決めてから情報を割り振るのではなく、情報整理の結果として階層が現れる のが正しい順序です。 H2-2 の「情報から入る 4 ステップ」で整理した結果、自然と階層が決まります。 階層を先に固定すると、情報が階層に押し込まれて変形します。
5-4. クリック数の方が大事
階層が深くても、訪問者にとって問題になるとは限りません。 検索・パンくず・関連リンクで 3 クリック以内に目的のページに着けるなら問題なし です。 階層数を減らすことに気を取られるより、クリック数とユーザー動線で見た方が、本当に使えるサイトになります。
5-5. ナビ項目数 5〜7 も目安
グローバルナビの項目数も、「5〜7 がベスト」と言われがちです。 これも目安です。 モバイル時代はハンバーガーで隠せるので、絶対視しません。 PC で 9 項目並んでいても、項目同士の関係性が明確なら問題ないケースもあります。
6. 見落としがちな「必要ページ」7 つ
サイトマップ作成時に、新規ページの議論ばかりで埋もれがちな「必要ページ」を 7 つ挙げておきます。 後付けで困るので、最初から含めてください。
- お問い合わせ完了画面(送信後の表示、サンクスメール送信のトリガーにも)
- 404 ページ(リンク切れ時の救済)
- プライバシーポリシー(個人情報を取得する以上、必須)
- サイトマップ(HTML 形式の全ページ一覧)
- 検索結果ページ(サイト内検索を実装する場合)
- カテゴリ一覧ページ(オウンドメディア・EC など)
- FAQ(問い合わせ前の不安解消、業務支援コンテンツとしても価値あり)
これらはゴールデンルートには直接乗らないことが多いですが、無いと信頼を失います。 特に 404 とプライバシーポリシーは、無いと不信感の原因になります。
7. サイトマップを描くツール
サイトマップを描くツールに「これが正解」はありません。 自社が読み書きできるものを選んでください。
- Excel / Google スプレッドシート:慣れていれば最速。階層構造を行・列で表現
- Miro / Figma / draw.io:共同編集に強い。ビジュアルで見やすい
業者が使うツールに合わせる必要はありません。 自社内で読み書きでき、関係者に共有できるものなら、ツールは何でも OK です。
8. サイトマップは「v1」で完成、運用で変わる
完成時のサイトマップは、あくまで 初版(v1) です。 運用が始まると、ページは増えたり減ったりします。 これは正常な状態です。 サイトマップは固定資産ではなく、運用とともに更新される生き物として扱ってください。
そのために、更新ルールを最初に決めておきます。
- 誰が更新するか
- いつ更新するか(月次・四半期・大型改修のタイミング)
- 何をきっかけに見直すか(新規ページ追加・廃止・大幅な構造変更)
リニューアル時には、サイトマップの 履歴 も重要です。 過去にどの構造だったかが残っていると、リニューアル方針の判断材料になります。