サイト構成図の作り方｜Web制作前の階層設計

01はじめに｜この記事でわかること

要点：この記事は、制作会社からサイト構成図を受け取る発注側の方に向けて、読み方・決めるべきこと・確認の順番をまとめたガイドです。ホームページ制作の流れのうち、いちばん最初に発注側の判断が求められる工程がここにあたります。

制作会社から「サイト構成図です」と表が届いた。ページ名が並んでいるけれど、何を判断すればいいのか分からない。とりあえず「問題ありません」と返した——。

この工程は、発注側と制作会社のすれ違いがよく起きるところです。解説記事の多くは、どのツールでどう描くかという話です。でも依頼した側に必要なのは、描き方ではなく何を決めるかのほうです。

この記事では、2000年創業のWeb制作会社ZenWeb Japanが、実際の制作案件で発注側とやりとりしてきた経験をもとに、構成図の読み方と決め方をわかりやすく解説します。

本題に入る前に、全体像を短時間でつかめる動画をご紹介します。

02サイト構成図とは？サイトマップとの違い

要点：サイト構成図とは、サイト全体のページ一覧と、その上下関係を図にしたものです。1ページの中身を決めるワイヤーフレームとは役割が分かれていて、構成図のほうが一つ前の工程になります。

まず言葉を整理しておきましょう。現場では「サイトマップ」という言葉が三つの意味で使われていて、これが混乱のもとになっています。

• 設計段階のサイトマップ（＝サイト構成図）。制作前に、どんなページを作るかを決めるための図です。この記事のテーマがここにあたります。
• 訪問者向けのサイトマップページ。公開後のサイトの中にある、全ページへのリンク一覧のページです。
• 検索エンジン向けのXMLサイトマップ。Googleにページの存在を伝えるためのファイルで、人が見るものではありません。

制作会社が「サイトマップを作りました」と言うときは、ほぼ一つ目の意味です。念のため一度確認しておくと、話が早くなります。

設計に使う資料は、次の順番で細かくなっていきます。

• サイト構成図。ページ名と階層だけの図です。全体像を共有する段階で使います。
• ディレクトリマップ。構成図にURL・ページの目的・担当者を書き足した一覧表です。実務ではこちらを使います。
• ワイヤーフレーム。1ページの中身をどう並べるかを示した図です。

03なぜデザインの前に構成図が必要なのか

要点：構成図がないと、ページ数が固まりません。ページ数が固まらないと、見積りも納期も動きます。見積書の見方で項目が読めるようになるのも、構成図が確定してからです。

いまや自社サイトを持つのは当たり前になりました。総務省の令和6年通信利用動向調査によると、自社のホームページを開設している企業の割合は93.2%です（総務省「令和6年通信利用動向調査報告書（企業編）」）。持っているかどうかではなく、中身をどう組み立てるかで差がつく時代です。

その組み立てを最初に決めるのが構成図です。作る意味は、大きく三つあります。

• ページの抜けに気づける。営業でいつも聞かれる質問のページがない。この見落としは社内の人しか見つけられません。コーポレートサイトのページ構成と見比べると拾いやすくなります。
• 担当と期限を決められる。原稿と写真を誰が用意するのか。ここが曖昧だと、デザインは終わっているのに中身が入りません。
• 見積りの根拠になる。ページ数と作り方が決まって、はじめて金額と納期が固まります。構成図なしの見積りは概算にすぎません。

依頼前の準備は依頼する前に準備すべきことにまとめています。載せたい情報を先に洗い出しておくと、この工程が短くなります。

04規模別・構成図に並ぶページの内訳

要点：ページ数が増えるとき、増えるのはたいてい「サービス」と「実績」です。会社案内や問い合わせまわりは、規模が変わってもほとんど増えません。詳しい内訳は必要なページ構成の一覧もあわせてご覧ください。

「うちは何ページくらいになりますか」とよく聞かれます。規模別に、どのページ群が何ページ分を占めるのかを整理しました。

横に読むと、増え方の違いがはっきり出ます。サービスは2から18へ、実績は1から15へ。一方で問い合わせまわりは3から5にしか増えません。つまり規模を決めるのは、商材をいくつに分けるかです。

05サイト構成図の作り方｜5つのステップ

要点：サイト構成図の作り方は、目的を決める→情報を出しきる→グループにまとめる→階層とURLを決める→担当と期限を書く、の5ステップです。文章そのものはホームページの原稿の書き方で扱うので、ここでは箱を決めることに集中します。

ツールは何でもかまいません。Excelでも、付箋でも、紙とペンでも進められます。順番のほうが大事です。

1. 目的とお客様を1行で決める。「地元の工務店に、加工の相談をしてもらう」のように、誰に何をしてほしいかを一文にします。以降の判断は、この一文に照らして決めます。
2. 載せたい情報を全部書き出す。整理はまだしません。営業資料や会社案内、よく聞かれる質問を見ながら並べます。ここで出しきれなかったものが、後の追加ページになります。
3. 似たものをまとめてグループにする。並べた項目を、お客様から見た近さでまとめます。社内の部署の分け方ではなく、お客様の頭の中の分け方に寄せます。
4. 階層とURLを決める。グループを親ページ、中身を子ページとして並べ、URLも一緒に決めます。あとで変えると手間が増えます。
5. 担当と期限を書き込む。ページごとに、原稿と写真を用意するのが自社か制作会社かを書きます。日付まで入れると、そのまま進行表になります。

5番まで書き終えたものが、実務でいうディレクトリマップです。ここまで来て、制作会社はようやく具体的な作業に入れます。

06階層の深さ別に、運用で何が起きるか

要点：階層は3階層までが目安です。深くなるほど、訪問者も社内の担当者も目的のページにたどり着けなくなります。公開後の運用についてはホームページ公開後にやることもあわせて確認しておくと、設計の判断がしやすくなります。

Web業界では「トップから3クリック以内」がひとつの目安として使われます。実際の案件で、階層設計ごとに何が起きたかを整理しました。

4階層から下がり方が急になります。深い構成が生まれる原因は、たいてい「とりあえず下にぶら下げた」ことです。迷ったら横に広げてください。

07構成図に書く項目｜抜けたときに起きること

要点：構成図に書く項目は、ページ名・階層・URL・ページの目的・原稿と写真の担当・公開の優先度・既存ページの扱いの7つです。ページ単位の中身はワイヤーフレームの読み方で詰めていきます。

初回の構成図でどの項目が抜けやすいのか、そして抜けると何が起きるのかを整理しました。

いちばん抜けやすいのは「担当」です。構成図は絵ではなく、約束の一覧です。ページ名の右に担当者の名前が並んでいるか、まずそこを確かめてください。

08URLの決め方｜リニューアル時の注意点

要点：URLは構成図の段階で決めきってください。公開後に変えると、検索順位も外部からのリンクも影響を受けます。作り直しのときはリニューアルでSEO順位を落とさない移行チェックリストを先に確認しておくと安心です。

URLは一度公開すると変えにくくなります。決めるときの基準は、次の4つで足ります。

• 短い英単語にする。/service/や/company/のように、意味が分かる短い単語を使います。
• 日本語URLは避ける。コピーすると長い記号の列に変換され、共有しづらくなります。
• 階層をURLにも反映させる。サービスの下に加工がある構成なら/service/processing/と揃えます。人にもGoogleにも構造が伝わります。
• 変えるなら転送設定をセットにする。既存のURLを変える場合は、旧URLから新URLへの転送（301リダイレクト）を必ず用意します。

作り直しの案件は、まず現状のページ一覧を作ることから始まります。進め方はリニューアル前のサイト診断にまとめました。どのページを残し、まとめ、閉じるのか。この判断も構成図の一部です。

09規模別・構成図づくりにかかる期間の目安

要点：構成図づくりでいちばん時間がかかるのは、図を描く作業ではなく社内の確認と決裁です。全体のスケジュール感は制作の流れとあわせて見ておくと、社内調整がしやすくなります。

工程ごとに、どれくらいの日数を見ておけばよいかを規模別に整理しました。

4番の行を見てください。規模が大きいほど、社内の確認が全体の半分近くを占めます。着手前に「誰が見て、誰が決めるか」を決めておけば、この行は短くできます。

10よくある失敗5つと、その直し方

要点：失敗の多くは、社内の都合をそのまま構成に持ち込んだときに起きます。こうした点に付き合ってくれるかどうかは、制作会社の選び方を見分ける手がかりにもなります。

実際の案件でよく出会うつまずきを、直し方とあわせて5つ挙げます。

• 組織図をそのまま構成図にする。部署ごとに分けても、お客様には伝わりません。「相談したい内容」で分け直してください。
• とりあえず下にぶら下げる。迷ったページを深い階層に置くと、二度と見られなくなります。親を増やして横に広げます。
• ページ名が社内用語のまま。「ソリューション一覧」より「できること」のほうが伝わります。お客様の言葉に置き換えましょう。
• ブログを後回しにする。更新のしくみを公開時に決めておかないと、あとで追加費用がかかります。一覧と記事の雛形だけでも入れてください。
• 全ページ同時公開にこだわる。原稿が1本遅れると全体が止まります。優先度を書いておけば、揃ったところから公開できます。

どれも設計の腕前ではなく、決め方の問題です。1回で完璧を目指さず、2〜3回に分けて詰めていくほうが早く終わります。

11自社で作るか、制作会社に任せるか

要点：図として整えるのは制作会社の仕事です。発注側が用意すべきなのは、載せたい情報とその優先順位です。判断の考え方は自作と外注の比較にも通じます。

「構成図まで自分たちで作るべきですか」とよく聞かれます。多くの場合、そこまでする必要はありません。次の使い分けを知っておけば十分です。

• 手書きのラフは大歓迎。紙に書いた雑な図でも、「この順で見せたい」という意思は正確に伝わります。
• ページの一覧だけは自社で作る。載せたい情報の洗い出しは、社内の人にしかできません。
• 作り込みすぎない。完成度の高い図を渡すと、制作会社は提案ではなく再現をしてしまいます。

費用の考え方はホームページ制作の費用相場にまとめています。構成図が固まっているほど見積りの精度は上がるので、この工程に使った時間は、そのまま予算の精度になります。

12まとめ｜構成図は決めたことの記録

要点：サイト構成図の作り方は、目的を1行で決め、情報を出しきり、グループにまとめ、階層とURLを決め、担当と期限を書く。この5ステップです。相談はホームページ制作サービスのページからどうぞ。

構成図は、デザインが始まる前の最後の分岐点です。ここで決めたことが、ページ数にも見積りにも公開日にも影響します。

むずかしく考える必要はありません。「うちのお客様は、まずこれを知りたいはずです」。その一言をページ名と順番に落とし込むだけです。図の見た目より、担当と期限が埋まっているか。まずはそこからで十分です。

13よくある質問

要点：発注側の方からよくいただく5つの質問にお答えします。サイトマップとの違いや、階層の目安など、判断に迷いやすい点をまとめました。

1. サイト構成図とは何ですか？

サイト全体にどんなページがあり、それぞれがどうつながるのかを一枚で示した図のことです。ページ名と上下関係を並べたもので、デザインに入る前に作ります。ここでページの抜け漏れ、階層の深さ、URLを確定させておくと、後の工程が大きく楽になります。

2. サイト構成図とサイトマップの違いは何ですか？

ほぼ同じ意味で使われますが、「サイトマップ」には三つの意味があります。設計段階の構成図、公開後の訪問者向けリンク一覧ページ、そして検索エンジン向けのXMLファイルです。制作の打ち合わせで出てくるのは、たいてい一つ目の設計段階の構成図です。

3. サイト構成図は何階層までにすべきですか？

3階層までが目安です。トップページから3クリック以内で、どのページにもたどり着ける状態を保てます。4階層以上になると訪問者が下層まで届かなくなり、社内でもどこに何があるか分からなくなります。深くなりそうなときは、親のグループ分けを見直してください。

4. サイト構成図は発注側が作る必要がありますか？

図として整えるのは制作会社の役割なので、作る必要はありません。発注側が用意すべきなのは、載せたい情報の一覧とその優先順位です。手書きのラフや、参考にしたいサイトを見せていただければ、意図は十分に伝わります。

5. リニューアルでもサイト構成図は必要ですか？

新規のときより重要になります。既存の全ページを一覧にして、残す・まとめる・閉じるを判断する作業が加わるためです。あわせて旧URLから新URLへの転送設計も必要になります。これを飛ばすと、公開後に検索経由の流入が落ちる原因になります。