web制作で理解するサイトマップの基本と作成手順完全ガイド

はじめに

目的

本ドキュメントは、Web制作におけるサイトマップの基本から実務で使える作成手順、代表的なツールの使い方までをわかりやすく整理しています。初心者でも実際に手を動かせることを目標にしています。

想定読者

・これからサイト設計を学ぶ方
・クライアント向けにサイト構成を作る方
・既存サイトの見直しをしたい方

本書で得られること

• サイトマップの役割と種類が理解できます
• 具体的な作成ステップがわかります
• PowerPoint、Canva、Xmind、WordPressでの実践方法を学べます

使い方

章ごとに手順とツール紹介を並べています。必要な章だけ参照して実務に応用してください。必要に応じて章を読み返して設計を固めましょう。

サイトマップとは何か

定義と目的

サイトマップは、ホームページ制作で最初に作る設計図のようなものです。トップページからカテゴリページ、個別ページへと続く階層を図式化し、サイト全体の構成やページ数を見える化します。目的はコンテンツを整理し、制作前にイメージを共有することです。

作る理由（メリット）

• 全体像を把握できます。どのページが必要か一目で分かります。
• 制作や運用の工数を見積もりやすくなります。
• デザインや導線の検討がしやすく、関係者との共有がスムーズになります。

含めるべき要素（具体例つき）

• ページ名：例「トップ」「サービス」「お問い合わせ」
• 役割：入口・案内・詳細など
• 想定URLや優先度、更新頻度（必要に応じて）

簡単な作り方の流れ

1. 提供する情報や機能を書き出す
2. 大分類（カテゴリ）に分ける
3. カテゴリの下に個別ページを配置する
4. 関係者に見せて修正する

よくある間違いと対処法

• 詳細を詰めすぎて後で手戻りが発生する→まずは大まかな階層から始める
• 導線（ユーザーの流れ）を考えない→主要な導線を1つ描いて確認する

サイトマップは完成形ではなく、制作のガイドです。最初に作ることで、その後の作業が格段に進みやすくなります。

サイトマップの3つの種類

ここではサイトマップの3種類を分かりやすく説明します。目的や作るタイミング、具体例を示します。

1. サイトマップ（サイト構成図）

ホームページ制作の最初に作る設計図です。サイトのページ階層や主要コンテンツを図で表します。例：トップ→会社案内、サービス、料金、ブログ、問い合わせ。目的は制作チームやクライアントと情報構成を共有することです。作るポイントは、ユーザーの導線を意識してページ名を短く具体的にすることです。

2. HTMLサイトマップ（ユーザー向け）

Webサイト上で訪問者に見せるページ一覧です。階層を示すことで目的のページへたどり着きやすくします。例：フッターに『サイトマップ』リンクを置く。多くのページがあるサイトや情報を探すユーザーが多い場合に有効です。作る際は分かりやすいラベルにし、主要ページ中心にして冗長にならないようにします。

3. XMLサイトマップ（検索エンジン向け）

検索エンジン用のファイルで、各URLの情報（最終更新日、優先度など）を記述します。クローラーがページを効率よく認識できます。例：sitemap.xmlをサイトのルートに置き、Search Consoleに登録する。更新頻度が高いサイトやページ数が多いサイトは自動生成して常に最新に保つと良いです。

簡単に言えば、サイト構成図は設計図、HTMLは訪問者向け、XMLは検索エンジン向けです。

サイトマップ作成の4ステップ

ステップ1：必要なページを洗い出す

まず現状と目標から必要なページを列挙します。例：トップページ、商品一覧、商品詳細、会社情報、お問い合わせ、よくある質問（FAQ）、ブログ。業務で使うページや将来的に追加予定のページも書き出します。

ステップ2：ページをグループ分けする

似た目的のページをまとまとめます。例：商品関連（商品一覧・詳細）、企業情報（会社概要・採用）、サポート（FAQ・お問い合わせ）。グループ名は利用者に分かりやすい言葉を使います。

ステップ3：ページの階層を決める

利用者の導線を考えて階層を決めます。トップ→カテゴリ→詳細のように深くなり過ぎないことを優先します。目安はトップのメニューは3〜7項目、詳細は2〜3階層以内に収めると使いやすくなります。

ステップ4：ツールを使って可視化する

書き出した構成を図にします。手書きでも良いですが、PowerPointやXmind、Canvaなどで作ると共有しやすくなります。各ページに役割や優先度（必須・任意）を付けると制作時の判断が速くなります。

作業のコツ

・優先度の高いページから先に検討する。・ユーザー目線でラベルを決める。・関係者に早めに確認を取り修正を反映する。

ピラミッド型（ツリー構造）での設計方法

はじめに

ページの分類とタイトルが決まったら、ピラミッド型で整理します。トップページを頂点にし、その下にカテゴリ、さらに個別ページを配置して階層を作ります。見やすい構造がユーザーと検索エンジンの両方に役立ちます。

基本の考え方

• トップ（レベル1）：サイト全体の入口（例：トップページ）
• カテゴリ（レベル2）：大きなまとまり（例：サービス、会社情報、ブログ）
• 個別（レベル3）：詳しいコンテンツ（例：サービスAの詳細、記事）
  深さは原則2〜3階層に抑えると良いです。

設計手順（4ステップ）

1. レベルを決める：どのページを上位に置くか明確にします。
2. グループ化する：関連ページを同じカテゴリにまとめます。
3. 命名ルールを統一する：分かりやすいタイトルとURLを付けます。
4. 表で確認する：Excel等で全体像を俯瞰します。

Excel／Googleスプレッドシートでの作り方（例）

• 列Aにレベル1、列Bにレベル2、列Cにレベル3を入力します。
• インデントや色分けで階層を視覚化します。
• 例：
• 列A: トップページ
• 列B: サービス
• 列C: サービスA（サービスA詳細）

注意点とコツ

• 階層を深くしすぎるとユーザーが辿りにくくなります。例えば4階層以上は避ける方が無難です。
• 同じレベルは内容の性質を揃えると導線が自然になります。
• パンくずリストやナビゲーションで構造を可視化すると親切です。

ペルソナ設定の重要性

ペルソナとは

ペルソナは典型的なユーザー像を具体化したものです。名前や年齢、仕事、ライフスタイル、目的、悩み、行動パターンまで想定します。サイト設計の「設計図」の一部として使います。

ペルソナを設定するメリット

• ユーザーのニーズを可視化でき、必要なページや導線が見えます。
• コンテンツのトーンや優先順位を決めやすくなります。
• 誤った仮定で無駄なページを作るリスクを減らせます。

ペルソナ設定の5ステップ

1. 情報収集：アクセス解析や顧客の声、社内の知見を集めます。簡単なアンケートで十分です。
2. 属性の決定：年齢、職業、家族構成、住まいなどを書き出します。
3. 目的と課題の明確化：サイトで何を達成したいか、何に困っているかを特定します。
4. 行動シナリオ作成：検索キーワード、訪問経路、期待する情報の流れを想像します。
5. 優先順位付け：複数ペルソナがいる場合、優先度を決めてサイトマップに反映します。

よくある間違いと対策

• 抽象的すぎるペルソナ：具体的な行動や場面を入れると実用的になります。
• 一人に限定しすぎる：主要なタイプを2〜3人用意すると現実に近づきます。

簡単なテンプレート例

名前：山田花子（仮）
年齢：35歳／職業：パート／目的：短時間で信頼できる情報を得たい／課題：育児と仕事で時間がない／行動：スマホで検索、夜に閲覧

このようにペルソナを作ると、どのページをまず用意すべきかが明確になります。

サイトマップ作成に使用するツール

概要

サイトマップ作成に使う代表的なツールを分かりやすく紹介します。用途に応じて選ぶと作業が早くなり、共有や見た目の調整も楽になります。

Excel（スプレッドシート）

リスト形式で整理しやすく、ページ名・URL・親子関係・優先度などを列で管理できます。サンプル：列に「ページ」「階層」「担当者」を作るだけで全体像が見えます。利点は手軽さとCSVでのエクスポートです。注意点は視覚的な階層が分かりにくい点です。

PowerPoint

SmartArtや図形で階層図を簡単に作れます。発表資料にもそのまま使えます。利点はテンプレートが豊富でドラッグ操作で調整できることです。多人数で編集する場合はオンライン共有を活用すると便利です。

Canva

デザイン性の高いサイトマップが短時間で作れます。アイコンや配色を直感的に選べるため、クライアント提案に向きます。無料プランでも基本機能が使えますが、高解像度出力は有料です。

Xmind（マインドマップ）

アイデア出しから構造化する流れに向きます。ノードを移動して構成を試せるため、初期設計で威力を発揮します。完成後に画像やPDFで書き出せます。

Miro（オンラインホワイトボード）

リモートでのブレインストーミングや共同編集に優れます。付箋や図形で自由に配置でき、リアルタイムで意見を反映できます。アクセス管理や履歴機能も役立ちます。

選び方のポイント

• まずは目的を決める（リスト管理／見た目重視／共同作業）
• 草案はXmindやExcelで作り、見せる用はPowerPointやCanvaに仕上げると効率的です
• 共有が多い場合はMiroやクラウド機能を優先してください

活用のヒント：テンプレートを使うと時間短縮になります。必要に応じてツールを組み合わせて使ってみてください。

PowerPointでの作成手順

準備

1. PowerPointを開き、新規スライドを追加します。
2. 挿入タブから「SmartArt」を選びます。階層や組織図のカテゴリを開きます。

作成手順（基本）

1. 階層テンプレート（縦型・横型）を選択します。ページ数が多いときは横方向階層が見やすいです。
2. SmartArtの右側に表示されるテキストウィンドウに、ページ名や見出しを入力します。
3. ノードを追加・削除する場合は、SmartArtツールの「図形の追加」「削除」を使います。
4. レイアウトや色は「デザイン」タブで変更します。フォントは読みやすい大きさに設定します。

便利な操作

• SmartArtを右クリックして「グループ解除」すれば個別に編集できます。
• ガイド線を表示して均等に配置します。
• スライドを複製して別案を作成します。

出力と共有

• 完成したらPDFまたはPNGで書き出します。印刷用はA4比率を確認してください。
• アクセシビリティ向けに、図形に代替テキストを付けます。

注意点とコツ

• 各ノードの文字は短く要点を入れます。説明は別スライドで補足してください。
• ページ数が多い場合は横展開か複数スライドに分割すると見やすくなります。
• 最終確認で整列と余白をチェックしてください。

Canvaでの作成手順

1. テンプレートを探す

Canvaを開き、デザインタブの検索欄に「サイトマップ」と入力します。表示されたテンプレートから、サイトの雰囲気やページ数に近いものを選んでください。テンプレートは視覚の参考になります。

2. 基本の枠組みを作る

選んだテンプレートの不要部分を削除し、ページ（トップページ→カテゴリ→個別ページ）の順にボックスを配置します。四角や線で階層を表現すると分かりやすくなります。

3. テキストを入力する

各ボックスにページ名と短い説明を入れます。例：トップページ／サービス紹介（短い説明）。フォントは読みやすいものを選び、重要な項目は太字にします。

4. 見た目を整える

整列ツールで間隔を揃え、色を2〜3色に絞ります。アイコンや矢印を使うと視認性が上がります。グループ化して移動しやすくしてください。

5. 共同編集と出力

共有ボタンでチームに編集権限を渡せます。完成したらPNGやPDFでダウンロードして関係者に渡してください。

ポイント

• 階層はシンプルに保つ。深すぎると見づらくなります。
• モバイル表示を意識して横幅を狭めに作ると実務で役立ちます。
• テンプレートをベースに、必要に応じて自由にカスタマイズしてください。

Xmindでの作成手順

はじめに

Xmindではマインドマップ形式でサイト構成を視覚的に整理できます。テンプレートを使うと見た目が整い、作業が早くなります。

手順（初心者向け）

1. Xmindを開き「デザイン」タブの「ベーシック」テンプレートを選びます。
2. 中央のメイントピックにサイト名や目的を書きます。
3. トピックを追加して主要ページ（例：ホーム、サービス、料金、お問い合わせ）を作成します。
4. 各主要ページにサブトピックを追加し、個別ページやコンテンツ項目を記入します。
5. トピックに説明を付けるときはノート機能を使います。リンクやファイルを添付すると参照が楽になります。
6. アイコンや色で優先度や種類を分けます。視覚的に分かりやすくします。
7. 完成後は保存し、PNG・PDF・OPMLなどで書き出して共有します。

ポイント

• トピック名は短く具体的に書きます。読み手が一目で分かります。
• 階層は深くしすぎないで、3層程度を目安にします。
• ショートカット（Tabで子トピック追加など）を使うと作業が速くなります。

よくあるミスと対策

• 項目が細かくなりすぎる：まとめるかノートに移す。
• 色やアイコンを乱用：ルールを決めて統一する。

以上の手順で、Xmindを使って見やすいサイトマップを作れます。

WordPressでのXMLサイトマップ作成

概要

WordPressはバージョン5.5以降、標準でXMLサイトマップを自動生成します。通常のURLは /wp-sitemap.xml です。検索エンジンにサイト構造を伝えやすくなり、インデックス促進に役立ちます。

手順（標準機能）

1. サイトにログインし、ブラウザで https://あなたのサイト/wp-sitemap.xml にアクセスして表示を確認します。
2. Google Search Consoleにサイトを登録し、ダッシュボードの「サイトマップ」から /wp-sitemap.xml を送信します。
3. robots.txtでサイトマップや重要ページがブロックされていないか確認します。

プラグインを使う場合

Yoast SEO、All in One SEO、Rank Mathなどのプラグインは、投稿タイプやタクソノミーの除外、優先度設定が可能です。プラグインで生成したサイトマップのURLを同様にSearch Consoleへ送信します。

よくあるトラブル

• 404になる：パーマリンク設定を保存し直すと解決することが多いです。
• 空の項目がある：キャッシュやプラグイン競合を疑い、一時無効化で確認してください。
• 非公開ページが含まれる：noindexやプラグインの設定を見直します。

注意点

大規模サイトはサイトマップを分割すると効率的です。更新は自動で行われますが、Search Consoleで定期的にエラーをチェックしてください。