第1章：はじめに
本調査は、Webデザインにおける「サイトマップ」の基本から実践までを分かりやすくまとめたものです。サイトマップの定義や役割を整理し、構成図・HTML・XMLの三種類それぞれの特徴と作成手順、効率化に役立つツールまで解説します。
調査の目的
サイト構造を見える化し、ユーザー導線と検索エンジン両方の利便性を高める方法を提供することが目的です。例えばページが増えたときに何を優先して整理すればよいか、具体的な手順で示します。
対象読者
Webデザイナー、開発者、サイト運営者、これからサイトを作る方まで広く役立ちます。専門用語は最小限にし、実例を中心に説明します。
本書の使い方
第2章で概念を押さえ、第3章で種類を比較します。第4〜6章では実際の作成手順とツールを順を追って説明します。各章は独立して読める構成なので、必要な部分から参照してください。
サイトマップを整えることで、訪問者の満足度と検索で見つけられる可能性が高まります。本書がその一助になれば幸いです。
サイトマップとは何か
概要
サイトマップは、Webサイト全体のページ構成を視覚的に示した図や一覧です。制作チームでの情報共有、訪問者のルート把握、検索エンジンへの構造伝達が主な役割です。
主な役割
- 制作側：ページの関係や優先順位を明確にし、設計や工数見積もりを楽にします。たとえば「トップ→サービス→料金」の流れを最初に決めます。
- 訪問者：目的のページにたどり着きやすくなります。特に情報量が多いサイトでは、案内図として機能します。
- 検索エンジン：正確な構造を伝えることで、インデックスの効率が上がりやすくなります。
どのような形式があるか（簡単に）
- 構成図（階層図）: 制作で使う視覚的な図。
- HTMLサイトマップ: サイト内に公開する一覧ページ。
- XMLサイトマップ: 検索エンジン向けの機械読み取り用ファイル。
作るときのポイント
- 階層をシンプルに保つ。深すぎると訪問者が迷います。
- 重要なページを上位に置く。優先度で整理します。
- URLや更新頻度をメモしておくと後で便利です。
- 関係者と共有して意見を反映します。
注意点
公開用と内部用で内容を分け、未完成ページや不要な情報を載せないようにします。更新を怠ると実際の構造とずれてしまうため、定期的に見直してください。
サイトマップの3つの種類
1. 構成図サイトマップ（階層図）
サイト全体のページ構成を視覚化した図です。トップページから下層ページへ枝分かれする形で、関係性や優先度が一目で分かります。例：会社サイトなら「会社情報→事業内容→採用情報」のように配置します。制作段階や複数人での共有に向き、ワイヤーフレーム作成前の設計資料として便利です。
2. HTMLサイトマップ
訪問者向けに重要ページを一覧で表示するページです。カテゴリ別に分けてリンクを並べることで、ユーザーが目的のページにたどり着きやすくなります。例：商品カテゴリ一覧やよくある質問へのリンク集。SEO面でも内部リンクの助けになりますが、すべてのページを羅列すると探しにくくなるため、主要ページに絞ると効果的です。
3. XMLサイトマップ
検索エンジン向けの機械可読フォーマットです。ページのURL、更新日時、優先度などを伝えられます。特に新規サイトや大量ページを持つサイトで有効です。自動生成ツールやCMSのプラグインで作成でき、検索エンジンに送信することでインデックス促進に役立ちます。
どのタイプも目的が違うため、用途に応じて使い分けることが大切です。
構成図サイトマップの作成手順
はじめに
構成図サイトマップはサイトの骨組みを可視化する図です。目的とターゲットを明確にし、訪問者が迷わず目的ページにたどり着ける設計を目指します。
1. 目的とターゲットを決める
まずサイトの主目的（商品紹介、問い合わせ獲得、情報提供など）を決めます。ターゲット層（年齢、目的、利用端末）を想定して優先するページを整理します。
2. コンテンツの洗い出し
掲載したいページを箇条書きにします。例：トップ、製品一覧、製品詳細、料金、サポート、会社情報、問い合わせ。重要度を付けて整理します。
3. 階層を設計する
トップを頂点に、カテゴリ→サブページという枝状に並べます。訪問者が2クリック以内で主要な目的に到達できるように配慮します。例：トップ→製品一覧→製品詳細（2クリック）。
4. ナビゲーションと導線を考える
グローバルナビ、フッター、重要なCTA（お問い合わせボタンなど）をどこに置くか決めます。主要ページへは常に辿れるようにします。
5. 優先順位とワイヤー案作成
各ページの優先度を元にワイヤーフレームを作成します。コンテンツ量や見せ方（一覧、詳細、フォーム）を決めます。
6. テストと改善
想定ユーザーでの導線確認を行い、2クリックルールや表示の分かりやすさを検証します。必要に応じて階層やリンクを調整します。
7. ドキュメント化と共有
完成した構成図を図や表でまとめ、チームで共有します。手書き、スプレッドシート、専用ツールいずれでも構いません。
HTMLサイトマップの作成手順
目的と方針
HTMLサイトマップは訪問者向けの一覧ページです。重要ページに絞り、階層構造を分かりやすく見せることを優先します。色やフォントでカテゴリを区別すると使いやすくなります。
作成手順（6ステップ）
- 対象ページを選ぶ
- トップページ、主要カテゴリ、人気コンテンツ、お問い合わせなどを優先します。
- 階層を整理する
- 親ページ→子ページの関係を明確にします。例：製品 > 製品A > 仕様
- カテゴリ分けとラベル付け
- 関連するページをグループにまとめ、分かりやすい見出しを付けます。
- HTMLでマークアップ
- ul/liの入れ子で階層を表現し、各項目にリンクを貼ります。例:
- デザイン調整
- 色分け、フォントサイズ、太字で重要度を表現します。スマホでも読みやすくレスポンシブにします。
- 定期的な更新と確認
- リンク切れをチェックし、新しいページを追加します。管理しやすい運用ルールを決めます。
実装上の注意点
- 会員専用や重複コンテンツは掲載しないでください。
- アクセシビリティとして見出しタグやaria属性を使うと親切です。
- 検索エンジン向けにはXMLサイトマップも併用してください。
XMLサイトマップの作成方法
概要
XMLサイトマップは検索エンジン向けのファイルで、サイト内のURL一覧を機械可読な形式で示します。ここではsitemap.xml Editorを使って手動で自動生成する方法と、WordPressのプラグイン「Google XML Sitemaps」を使う方法の2つを丁寧に説明します。
方法1：sitemap.xml Editorで自動生成する
- sitemap.xml Editorのページを開きます。ブラウザで利用できるオンラインツールです。
- サイトのURLを1行ずつ入力します（例：https://example.com/page1）。複数ページまとめて入力できます。
- 更新頻度や優先度（任意）を設定します。特にこだわらなければデフォルトのままで問題ありません。
- 「生成」ボタンを押すとXMLが作成されます。生成後にダウンロードしてsitemap.xmlとして保存してください。
方法2：WordPressプラグイン「Google XML Sitemaps」を使う
- WordPress管理画面で「プラグイン」→「新規追加」を開き、”Google XML Sitemaps”を検索してインストール・有効化します。
- プラグインの設定画面で投稿タイプや更新頻度、優先度を設定します。通常は初期設定のままで問題ないことが多いです。
- 設定を保存すると自動でsitemap.xmlを生成します。多くの場合、生成されたファイルはhttps://あなたのサイト.com/sitemap.xmlで確認できます。
生成後の設置と確認方法
- オンラインツールで生成した場合は、FTPやサーバーのファイルマネージャーでルートディレクトリ（public_htmlなど）にアップロードします。
- ブラウザでhttps://あなたのサイト.com/sitemap.xmlにアクセスして正しく表示されるか確認します。
- robots.txtに“Sitemap: https://あなたのサイト.com/sitemap.xml”を追記するとクローラーに明示できます。
- 必要ならGoogle Search Consoleなどにサイトを登録してsitemapのURLを送信してください。
注意点
- 動的に更新するサイトはプラグイン等で自動生成・更新した方が手間が減ります。
- 重複URLや不要なパラメータは除外してください。検索エンジンのクロール効率が上がります。
