はじめに
本書の目的
この文書は、Webサイトのサイトマップ（構造図）のデザインについて分かりやすくまとめたガイドです。サイトの見やすさや探しやすさを高めるために、どのように設計すればよいかを具体例とともに解説します。実務で使えるヒントを中心に記載します。
なぜ重要か
サイトマップはユーザーが目的のページを見つける道しるべです。例えばネットショップでは、商品カテゴリが分かりやすければ購入率が上がります。運営側は情報の整理や担当者間の共通理解にも使えます。
対象読者
デザイナー、開発者、コンテンツ担当者、サイト運営者など、サイト設計に関わる方すべてに役立ちます。専門知識が少なくても読み進められるよう配慮しています。
本書の構成と読み方
第2章で基本を説明し、第3〜4章で代表的なデザインパターンを紹介します。第5章以降で階層設計や作成手順、ECサイト向けの実践ポイントを扱います。まずは第2章から順に読み、自分のサイトに当てはめて考えてください。
サイトマップとは
定義
サイトマップはWebサイトのページ構成をツリー図で示したものです。ホームページを起点に、各カテゴリや個別ページがどのように並んでいるかを視覚的に把握できます。設計段階やリニューアル時に全体像を共有するのに便利です。
HTMLサイトマップとXMLサイトマップの違い
- HTMLサイトマップ：ユーザー向けの一覧ページです。訪問者が目的のページへたどり着きやすくなります。例えば『カテゴリ一覧』や『サイト内検索』への導線として機能します。
- XMLサイトマップ：検索エンジン向けのファイルです。クローラーにサイト構造を伝え、インデックス促進に役立ちます。ユーザーは直接見ることは少ないです。
なぜデザインが重要か
HTMLサイトマップはユーザーの目に触れるため、見やすさが直結して使いやすさになります。階層が深すぎると目的のページが見つかりにくくなり、リンク名が不明瞭だと混乱を招きます。
HTMLサイトマップ作成の基本ポイント
- 大きなカテゴリで分け、関連ページをグループ化する
- リンクは分かりやすいラベルを付ける（具体例：『サイズ別一覧（S/M/L）』）
- 階層は深くなりすぎないようにする（目安は3階層以内）
- 検索窓や主要ページへのショートカットを設置する
- 定期的に更新し、非公開ページや重複ページを除外する
これらを意識すると、訪問者が迷わず目的を達成できるサイトマップを作れます。
サイトマップのデザインパターン6種類
1. シンプル型
文字だけで構成し、カテゴリー別に並べる基本形です。読みやすく情報量を整理できます。メリットは表示が軽く更新しやすいこと。デメリットは視覚的な訴求力が弱い点です。事例：株式会社ニコン。
2. 階層構造視覚化型
大・中・小のカテゴリーを明確に示して階層を可視化します。ユーザーが迷わず目的ページにたどり着けます。メリットは構造理解が早い点、注意点は深すぎる階層を避けること。事例：早稲田大学。
3. 色分け型
カテゴリーごとに色を割り当て、直感的に認識させます。視認性が上がり分類が把握しやすくなります。注意点は色を多用しすぎると混乱することです。事例：ひらかたパーク。
4. 縦2分割型
ページを中央で二分して情報を並列表示します。多くのリンクを見せたい場合に有効です。メリットは一覧性、注意点はスマホ表示で縦長になりがちなこと。事例：シュテルン横浜東。
5. グラフィカル型
画像やアイコンを使い視覚的に訴えます。旅館・ホテル業で効果的です。メリットは直感的理解とブランディング強化、注意点は画像の読み込み負荷です。事例：鬼怒川温泉あさやホテル。
6. 説明付き型
各リンクの下に短い説明文を付け、内容を事前に伝えます。情報の取捨選択がしやすくなります。注意点は説明が長くなると逆に煩雑になることです。事例：日本郵便株式会社。
各パターンは用途や対象ユーザーで使い分けてください。
その他のデザインパターン
上から下へと流れるパターン
ユーザーの視線の流れに合わせて上から下へ情報を配置する方法です。ファーストビューで要点を伝え、次に詳細、最後に行動を促す要素（問い合わせや購入ボタン）を置きます。スマホでも読みやすく、導線が直感的になる点が利点です。
使い方のポイント：
– 見出しとリードで関心を引く
– セクションごとにビジュアルで区切る
– 重要な行動喚起を複数箇所に配置する
悩み・目的別パターン
ユーザーの悩みや目的ごとに入口を用意する方法です。地方自治体や医療機関でよく使われます。利用者は自分の目的を選ぶだけで必要な情報にたどり着けます。
使い方のポイント：
– 分かりやすいラベルを付ける（例：「子育て」「税金」「観光」）
– 短い説明文とアイコンで判断を助ける
– 関連ページへの導線を明示する
注意点：カテゴリが重複すると迷わせるため、整理してシンプルに保ってください。
階層構造における工夫
はじめに
階層構造はサイトの「骨格」です。見やすく整理すると利用者が目的まで迷わずたどり着けます。ここでは実践的な工夫を具体例とともにご紹介します。
色分けで視覚的に区別する
大カテゴリーごとに色を割り当てると全体像がつかみやすくなります。配色は3〜5色に抑え、コントラストを確保してください。凡例を付けると初見のユーザーも理解しやすくなります。
起承転結でストーリー性を持たせる
大→中→小という単純な階層ではなく、導入（入門）→探索→比較→決定（購入）の流れで配置すると利用者の行動を想定しやすくなります。例えば「カテゴリ一覧→おすすめ→比較表→購入案内」の順に並べると自然です。
ラベルと命名の工夫
短く具体的なラベルを心がけ、専門用語は避けます。アクションを含むラベル（例：「買う」「比較する」）は目的が明確になります。
階層の深さと表示方法
深さは原則2〜3階層に抑え、必要なら折りたたみやアコーディオンで見せます。パンくずを用意すると戻る操作が簡単になります。
モバイル配慮
画面幅に応じた折りたたみ表示や優先表示を設定し、主要な項目を上位に置いてください。
検証と改善
ワイヤーやプロトタイプでユーザーテストを行い、アクセス解析で離脱箇所を確認して階層を調整します。
サイトマップの作成手順
STEP 01：必要なページを洗い出す
まずサイトの目的と対象ユーザーを明確にします。商品の購入、情報提供、問い合わせなど目的ごとに必要なページを列挙してください。例：トップ、カテゴリ一覧、商品詳細、会社概要、FAQ、問い合わせ、会員ページ、ブログ。既存サイトがある場合はアクセス解析や検索語から実際によく使われるページを確認します。
STEP 02：ページをカテゴリー別に分類
洗い出したページをユーザーが分かりやすいグループに分けます。大カテゴリ（例：商品、企業情報、サポート）とサブカテゴリを作り、ラベルは利用者視点で短くします。重複を避け、どこに置けば見つけやすいかを考えて整理します。
STEP 03：階層構造を設計
トップページを頂点に、下位ページを枝のように配置します。深さは3階層程度に抑えると見つけやすくなります。主要な導線（ナビ、パンくず、フッター）に合う構造にし、URL設計や内部リンクも同時に考慮します。
STEP 04：完成したサイトマップのチェック
実際のタスクで使いやすいかを検証します。カードソートやツリーテスト、社内レビューで見つけにくい箇所を洗い出してください。チェック項目：見つけやすさ、一貫性、モバイルでの見え方、SEOの基本（重複や孤立ページがないか）。成果物は視覚的なサイトマップ図とページリスト（CSVやスプレッドシート）にまとめましょう。
ECサイトのサイトマップ作成のポイント
基本方針
ECサイトは商品数が多いため、ユーザーと検索エンジンの両方に配慮した設計が必要です。見つけやすさを最優先にし、カテゴリ＝導線、商品ページ＝到達点として構成します。
カテゴリ設計のコツ
・階層は2〜3層を基本にします（例：メンズ > ジャケット > ダウン）。深すぎると離脱が増えます。
・属性（サイズ・色・価格帯）はフィルターで扱い、静的なカテゴリページを乱発しないようにします。
ページの扱い
・商品ページは一意のURLにし、重複を避けます。類似商品はバリエーションページにまとめます。
・ページネーションやソートでURLが増える場合はcanonicalやURLパラメータの管理で重複評価を防ぎます。
HTML sitemap と XML sitemap
・ユーザー向けのHTMLサイトマップは主要カテゴリとブランドを一覧化します。
・検索エンジン向けのXMLサイトマップは重要なカテゴリ・商品・特集ページを登録し、更新頻度と優先度を設定します。
ナビゲーションと内部リンク
・パンくずと関連商品で導線を強化します。カテゴリ間のクロスリンクで回遊率を高めます。
モバイルと運用
・モバイル表示を優先し、軽いページで遷移を速くします。CMSから自動生成できる形にして更新作業を減らします。
チェックリスト（簡潔）
- カテゴリ深度が適切か
- 重複URLの管理ができているか
- XMLに主要ページが含まれているか
- モバイルでの操作性
- 更新フローが確立しているか
これらを満たすことで、利用者に優しく検索にも強いサイトマップを作れます。
