ホームページのサイトマップ（構成図）の作り方｜5ステップと業種別テンプレート【2026年版】

この記事で分かること

• サイトマップ（構成図）の定義とXMLサイトマップとの違い
• 初心者でも迷わないサイトマップ作成5ステップ
• Excel・Cacoo・draw.io等6ツールの比較表
• 飲食・美容・医療の業種別サイトマップテンプレート
• 階層が深すぎる、孤立ページ等よくある失敗パターンと回避策

「ホームページを作りたいけれど、何ページ必要か分からない」「サイトマップの作り方を調べたら、XMLとビジュアルの説明が混ざっていて混乱した」と悩んでいませんか？

サイトマップ（構成図）は、ホームページに掲載するページを階層的に整理した「サイトの設計図」です。建築でいう設計図と同じく、サイトマップなしで制作を始めると、ページの抜け漏れ・導線の断絶・無駄な工数が発生しやすくなります。

この記事では、初心者でも迷わずサイトマップを作れる5ステップ、おすすめツール6選、飲食・美容・医療の業種別テンプレート、よくある失敗パターンまでをまとめて解説します。

ホームページのサイトマップ（構成図）とは？なぜ必要か

サイトマップとは、ホームページに含まれるすべてのページを階層構造で整理した「サイト全体の地図」です。Web制作の初期段階で作成し、関係者の合意形成と制作工程の土台になります。

サイトマップ（構成図）の定義

サイトマップは、トップページを頂点として、各ページがどのカテゴリにぶら下がっているかをツリー状に図解したものです。「どんなページが、どんな関係で配置されているか」を一目で把握できる形式で表現します。

似た用語に「ワイヤーフレーム」がありますが、こちらは各ページ内のレイアウト設計図であり、役割が異なります。ワイヤーフレームについては後述の章で詳しく区別します。

ビジュアルサイトマップとXMLサイトマップの違い

「サイトマップ」という言葉には2つの意味があり、目的も読み手もまったく異なります。

本記事で扱うのは**ビジュアルサイトマップ（構成図）**です。XMLサイトマップは公開後のSEO施策として別途必要になりますが、設計フェーズでは構成図の方が先です。

サイトマップを作る5つのメリット

サイトマップを設計フェーズで作るメリットは以下の5つです。

1. ページの抜け漏れ防止 — 必要なページを網羅的に洗い出せる
2. 関係者の合意形成 — クライアント・制作者・運用担当の認識を揃えられる
3. 制作見積もりの根拠 — ページ数が確定するため工数とコストを見積もれる
4. ユーザー導線の土台 — どのページからどのページに遷移させたいかを設計できる
5. URL設計とSEOの指針 — 階層構造がそのままURLパスやパンくずに反映される

サイトマップを作らずに制作を進めると、「あのページが抜けていた」「カテゴリ分けが破綻している」といった手戻りが頻発します。1〜2時間の設計工数を惜しまないことが、結果的にプロジェクト全体の時間短縮につながります。

サイトマップを作るタイミング

サイトマップは、ホームページ制作の最初のアウトプットとして作成します。具体的には、目的・ターゲットを決めた直後、ワイヤーフレームやデザインに着手する前のタイミングです。リニューアル時には、既存サイトの全URLをリストアップしてから新サイトマップを設計すると、コンテンツの統廃合がスムーズに進みます。

【5ステップ】ホームページのサイトマップの作り方

サイトマップは、目的設定からツールで図に落とすまで、5つのステップで作成できます。各ステップの目的と具体的な作業内容を解説します。

Step 1. サイトの目的とターゲットを明確にする

最初に「このサイトは誰に何を伝え、どんな行動を起こしてほしいのか」を言語化します。目的とターゲットが曖昧なまま構成を考えると、ページ数だけ多くて訴求がぶれたサイトになりがちです。

具体的には、以下の3つを箇条書きで決めておきましょう。

• サイトの目的: 例 — 新規問い合わせの獲得 / 採用応募の促進 / ブランディング
• メインターゲット: 例 — 30代女性・自宅から徒歩圏内で美容室を探している
• ゴールアクション（CV）: 例 — 予約フォーム送信 / 電話発信 / 資料ダウンロード

サイト全体のゴールが明確になると、必要なページ・不要なページが判断しやすくなります。

Step 2. 必要なページを洗い出す（チェックリスト付き）

目的とターゲットが決まったら、必要なページをすべて洗い出します。最初は順番や階層を気にせず、付箋やスプレッドシートにフラットに書き出すのがコツです。

業種を問わず、ホームページに必要となる共通の必須ページは以下です。

• トップページ
• 会社概要（または店舗情報）
• サービス・商品紹介
• 料金（または価格表・メニュー）
• お問い合わせ
• アクセス（実店舗の場合）
• プライバシーポリシー
• 利用規約・特定商取引法に基づく表記（通信販売・有料サービスを提供する場合）

さらに、業種や目的によって以下のページが必要になります。

• ブログ・お知らせ（更新で鮮度を出したい場合）
• お客様の声・導入事例（信頼性を補強したい場合）
• スタッフ紹介・医師紹介（人で選ばれる業種）
• 採用情報（採用も兼ねたい場合）
• FAQ・よくある質問（問い合わせを減らしたい場合）
• 予約フォーム（飲食・美容・医療）

「何が必要か自分で判断できない」という方は、業種・目的を入力するだけで必須ページの構成案を自動で提案する構成診断ツールを試してみてください。チェックリスト形式でページ候補を確認できるため、抜け漏れ防止に役立ちます。

Step 3. ページをカテゴリ分け・階層化する

洗い出したページを、関連性ごとにグルーピングして階層構造に整理します。階層は浅すぎるとカテゴリが大量に並んで見渡しにくくなり、深すぎるとユーザーが目的のページにたどり着きにくくなります。

階層数の目安は、サイト規模によって以下のように考えるとバランスが取れます。

• 小規模（10ページ未満）: 2階層構成（トップ → 各ページ）
• 中規模（10〜30ページ）: 3階層構成（トップ → カテゴリ → 詳細ページ）
• 大規模（30ページ以上）: 3〜4階層構成（適切にカテゴリ分けして深さを管理）

Nielsen Norman Group など情報設計の研究機関が示す慣例として、トップから主要ページまで2クリック以内で到達できる設計が広く推奨されてきました。深すぎる階層はSEO上もユーザビリティ上も不利になりやすいため、3階層を一つの目安と考えると良いでしょう。

カテゴリ分けに迷う場合は、「ユーザーがどの言葉で探すか」を基準にすると失敗しにくくなります。社内の都合（部署・担当者）ではなく、訪問者の検索行動と思考プロセスに合わせて分類しましょう。

Step 4. ユーザー導線を設計する

階層が決まったら、ページ間の遷移（導線）を設計します。サイトマップは静的な構造図ですが、その上に「ユーザーがどう動くか」を意識した矢印やメモを追記すると、回遊性の高い設計になります。

特に重要なのは、コンバージョン（問い合わせ・予約・購入）への導線です。以下を意識して導線を引きましょう。

• どのページからも2クリック以内でCVページに到達できるか
• グローバルナビゲーションに「予約」「問い合わせ」が常設されているか
• 関連ページ同士に内部リンク（例: サービス → 料金 → 事例 → 問い合わせ）が張れるか
• フッターからもCVページ・主要カテゴリにアクセスできるか

導線設計の段階で「このページから次にどこへ行くべきか」を意識しておくと、後の実装フェーズで迷わなくなります。

Step 5. ツールで図にまとめる

最後に、ここまでの整理を見やすい形に図解します。クライアントや制作チームに共有する前提なら、誰でも閲覧できるオンラインツールを使うのが効率的です。

サイトマップを図にする際は、以下の情報を含めると実用性が上がります。

• ページ名
• URL（仮）
• 階層
• 担当者・作成状況（メモ）
• CVへの導線（矢印）

具体的なツールは次の章で6つ紹介します。

サイトマップ作成におすすめの無料・有料ツール6選

サイトマップは紙とペンでも作れますが、関係者と共有・編集することを考えるとオンラインツールが便利です。代表的な6ツールの特徴を整理します。

Googleスプレッドシート / Excel（表形式）

最も導入ハードルが低い方法です。行と列でページを階層表現でき、URL・備考・担当者などの情報を一緒に管理できます。図にこだわらず情報の整理を優先したい場合に最適です。共同編集や履歴管理ができるGoogleスプレッドシートを基本的におすすめします。

Cacoo（オンライン作図）

国産（Nulab提供）のオンライン作図ツールで、サイトマップ用のテンプレートが豊富に用意されています。日本語UIで直感的に操作でき、複数人での共同編集にも対応。無料トライアルから始められるため、まず小規模プロジェクトで試したい場合に向きます。料金体系は変更される場合があるため、最新情報は公式サイトで確認してください。

draw.io / diagrams.net（無料作図）

無料で全機能を使える作図ツールで、ブラウザでもデスクトップでも動作します。Googleドライブ・OneDriveなどに直接保存でき、コスト負担なしで本格的な構成図を作成できる点が大きな強みです。

XMind（マインドマップ）

マインドマップ形式でサイトマップを作る場合に強力です。中央にトップページを置き、放射状にカテゴリを広げる発想で構成を整理できます。「ページの洗い出し」フェーズで思考整理にも使えるツールです。

FigJam（コラボレーション）

Figma社が提供するオンラインホワイトボードツール（Figma本体とは別プロダクト）です。ふせん感覚でページ案を貼り出し、複数人で議論しながらサイトマップを組み立てられます。デザイナーと一緒に進める案件で特に便利です。

ツール比較表

主要ツールの違いを一覧で比較します。

最初はGoogleスプレッドシートで洗い出し、決定後にCacooやdraw.ioで清書する流れが、コストと品質のバランスが取りやすい組み合わせです。

【業種別】サイトマップの構成例3パターン

業種によって必要なページや重視する導線は大きく異なります。ここでは飲食・美容・医療の3業種について、典型的なサイトマップ例をテキストツリーで示します。自分のサイト構成の叩き台としてご活用ください。

飲食店のサイトマップ例

飲食店のホームページは、メニュー・予約・店舗情報・アクセスを中心に組み立てます。Googleマップや予約システムとの連携を意識し、来店までの最短導線を設計するのがポイントです。

トップページ
├── お店について
│   ├── コンセプト・こだわり
│   └── シェフ紹介
├── メニュー
│   ├── フードメニュー
│   ├── ドリンクメニュー
│   └── コース・ランチ
├── 店舗情報
│   ├── アクセス・地図
│   └── 営業時間・定休日
├── 予約・お問い合わせ
│   ├── オンライン予約
│   └── お問い合わせフォーム
└── お知らせ・ブログ

飲食店向けの詳細な構成設計は、飲食店のホームページ作成で業種特化のノウハウを解説しています。

美容サロンのサイトマップ例

美容サロン（美容室・ネイル・エステ）のホームページは、スタッフ・メニュー・料金・予約・お客様の声が中心です。指名予約を促す設計を意識し、スタッフ紹介とブログを充実させるのが王道です。

トップページ
├── サロンについて
│   ├── コンセプト
│   └── 店内の様子
├── スタイリスト・スタッフ紹介
│   ├── スタイリスト一覧
│   └── スタッフ詳細ページ
├── メニュー・料金
│   ├── カット・カラー
│   ├── パーマ・トリートメント
│   └── 初回限定クーポン
├── お客様の声・スタイル例
│   ├── スタイル写真ギャラリー
│   └── 口コミ・レビュー
├── ご予約
│   ├── オンライン予約
│   └── 電話予約
├── ブログ・お知らせ
└── アクセス・店舗情報

美容サロンのホームページ作成では、指名率を高める動線設計と、写真ギャラリーの効果的な見せ方を詳しく紹介しています。

クリニック・医療系のサイトマップ例

医療機関のホームページは、診療内容・医師紹介・初診の方へ・アクセス・受付時間が中心です。初めて訪れる患者の不安を解消するため、初診案内・診療内容・医師紹介を上位階層に配置するのが定石です。

トップページ
├── 当院について
│   ├── 理念・特色
│   └── 院内の様子
├── 診療内容
│   ├── 一般診療
│   ├── 専門外来
│   └── 検査・治療メニュー
├── 医師・スタッフ紹介
│   ├── 院長紹介
│   └── スタッフ紹介
├── 初診の方へ
│   ├── ご予約方法
│   ├── 持ち物・問診票
│   └── よくある質問
├── 受付時間・休診日
├── アクセス・地図
├── お問い合わせ
└── お知らせ・院内ブログ

なお医療機関のホームページは、**医療広告ガイドライン（厚生労働省）**の規制対象です。診療内容・医師紹介・体験談などの記載には特に注意が必要なので、テンプレートを使う場合も各記載項目をガイドラインに照らして確認してください。クリニックのホームページ作成では、医療広告ガイドラインへの配慮や信頼性を伝える情報設計を詳しく解説しています。

サイトマップ作成でよくある失敗パターン3つと回避策

サイトマップは設計次第でホームページの使いやすさが大きく変わります。初心者が陥りがちな失敗パターン3つと、その回避策を解説します。

失敗1. 階層が深すぎてユーザーが迷う

カテゴリを細かく分けすぎた結果、4階層・5階層の深い構造になり、目的のページに到達するまで何度もクリックが必要になるパターンです。深い階層はユーザーの離脱率が上がる傾向があるだけでなく、内部リンクの分配やクローラーの巡回効率の観点でも不利に働きやすくなります。

回避策: 主要ページはトップから2クリック以内で到達できる設計を基本とし、3階層を上限の目安にしましょう。階層を増やすより、カテゴリの粒度を見直すほうが効果的です。

失敗2. グローバルナビから孤立したページがある

サイトマップ上には存在するのに、グローバルナビゲーションやパンくず、関連リンクのいずれからもたどり着けない「孤島ページ」が発生するパターンです。孤立したページは検索エンジンの巡回・評価の優先度が下がりやすく、せっかく作っても活用されません。

回避策: サイトマップの全ページについて「どこからリンクが張られているか」を必ず確認します。グローバルナビ・フッター・関連記事リンクのいずれかで、各ページへの導線を確保しましょう。

失敗3. CTA（問い合わせ・予約）への導線が途切れる

各ページに「次に何をしてほしいか」のCTAが配置されておらず、訪問者がコンバージョンに至らないパターンです。特に下層ページから問い合わせフォームへの導線が抜けると、せっかくの興味が離脱に変わってしまいます。

回避策: サイトマップ作成時に「全ページに最低1つCV導線（ボタン or リンク）を入れる」というルールを決めておきます。固定のフローティングCTAボタンや、フッター直前の問い合わせブロックなど、テンプレート化すると抜け漏れを防げます。

サイトマップとワイヤーフレームの違いと作成順序

Web制作の現場では「サイトマップ」と「ワイヤーフレーム」が混同されがちですが、役割もアウトプットも異なります。違いを整理し、正しい作成順序を確認しましょう。

それぞれの役割

サイトマップとワイヤーフレームは、設計の粒度がそもそも違います。

作成順序とアウトプット例

正しい順序は、サイトマップ → ワイヤーフレーム → デザイン → 実装です。サイトマップでサイト全体の構造を確定し、その後で各ページのレイアウトをワイヤーフレームに落とし込みます。

順序を入れ替えると、ワイヤーフレームを作っている途中で「このページは別のカテゴリに移したほうがいい」と気づき、すべてを作り直すことになります。先に全体像を決めるからこそ、個別ページの設計に集中できます。

ホームページを自分で作る方法では、サイトマップ作成後の各工程（デザイン・実装・公開）の進め方も解説しています。本格的に自作したい方はあわせて参考にしてください。

よくある質問（FAQ）

まとめ

ホームページのサイトマップ作成は、目的設定 → ページ洗い出し → カテゴリ化・階層化 → 導線設計 → ツールで図にまとめる、の5ステップで進められます。

もっとも重要なのは、訪問者の検索行動と思考プロセスに沿った構成にすることです。社内の都合や担当部署で分類するのではなく、ユーザーが求める情報をすぐ見つけられる階層・カテゴリを設計しましょう。

業種ごとに必須ページや重視する導線は異なりますが、本記事で紹介した飲食・美容・医療のテンプレートを叩き台にし、Googleスプレッドシートで素早く洗い出してからCacooやdraw.io等で清書する流れが、コストと品質のバランスが取りやすい進め方です。

コーポレートサイトの作り方やランディングページの作り方もあわせて参照しながら、サイトの目的に合った最適な構成を組み立ててください。