サイト構造の設計とは、サイトに載せる情報をすべて洗い出し、似たものをグループにまとめ、親子の階層に組み立てる「情報設計」の工程です。ページをいきなり作り始めるのではなく、「何のページが必要で、どう分類し、どの階層に置くか」を先に決めます。結論から言えば、進め方は「①洗い出す → ②グループ化する → ③階層に組む → ④図にして確認する」の4ステップで、この順番を踏むだけで破綻しないサイト構造が作れます。
サイト制作でありがちなのが、トップページから作り始めて、必要になるたびにページを足していくやり方です。これだと分類の基準が途中で変わり、階層がちぐはぐになり、あとから「このページはどこに置くべきだったのか」と迷子になります。サイト構造は、ページを1枚も作る前に決めておくのが最も手戻りが少ないのです。
この記事では、サイト構造・階層設計のやり方を、ページの洗い出しからグループ化、階層の組み立て、図への落とし込みまで手順に沿って解説します。作った構造は、そのままディレクトリマップで図にし、URL設計へとつなげられます。この記事はその一番上流にあたる「設計思考」の工程です。
サイト構造の設計とは：情報を洗い出して階層に組むこと
サイト構造の設計は、情報アーキテクチャ（情報設計）とも呼ばれます。サイトに載せる情報を整理し、ユーザーが目的の情報にたどり着けるように配置する設計のことです。Nielsen Norman Groupは情報アーキテクチャを「コンテンツを構造化し、整理し、ラベル付けする実践」と説明しており、サイトの分かりやすさを左右する土台と位置づけています（Nielsen Norman Group「Information Architecture」）。
やることはシンプルで、「載せる情報を全部出す → 似たものをまとめる → まとまりを階層にする」だけです。難しく考える必要はありません。ただし、この順番を飛ばして「なんとなく」で分類すると、あとで必ず破綻します。まずは全体を出し切ることから始めます。
なぜ最初にサイト構造を設計するのか
サイト構造を最初に設計するのは、あとから直すコストが大きいからです。構造が決まっていないままページを増やすと、次のような問題が積み重なります。
- 分類の基準がぶれる： 途中でカテゴリの切り方が変わり、同じ種類のページが別々の場所に散らばる。
- 階層が深くなる： 置き場所に迷ったページを「とりあえず下の階層」に押し込み、どんどん深くなる。
- ナビゲーションが破綻する： 構造がないままメニューを作るため、ユーザーが目的のページにたどり着けない。
- URLもバラつく： 構造が定まらないとURLの階層も一貫せず、あとでURL変更という重い作業が必要になる。
逆に言えば、最初に構造を固めておけば、これらはまとめて防げます。設計にかける数時間が、公開後の何十時間もの手戻りを防ぐ投資になります。
サイト構造は、ナビゲーションやSEOの土台にもなります。整理された構造はグローバルメニューやパンくずにそのまま反映でき、ユーザーが迷わず回遊できます。検索エンジンにとっても、階層が整理されたサイトはページの関係を理解しやすく、内部リンクも自然に張れます。つまりサイト構造の設計は、見た目を作る前の「サイトの背骨」を決める作業であり、あとの工程すべてに影響します。
手順①：ページを洗い出す
最初の工程は、サイトに載せる可能性のある情報・ページをすべて書き出すことです。この段階では分類も順番も気にせず、思いつくものを付箋やリストにどんどん出していきます。「会社概要」「料金」「よくある質問」「事例」「お問い合わせ」「ブログ記事」……と、粒度もバラバラでかまいません。まずは量を出し切ることが目的です。
洗い出しの視点は2つあります。1つは「事業者として載せたい情報」（サービス内容・実績・会社情報など）、もう1つは「ユーザーが知りたい情報」（料金・比較・使い方・不安の解消など）です。特に後者を忘れると、作り手都合の使いにくいサイトになります。両方の視点から出すことで、抜け漏れが減ります。
たとえば小さな制作会社のサイトなら、洗い出しの段階では次のようなページ候補が出てきます。この時点では並び順も分類も気にせず、思いつくままに挙げていきます。
- トップ／サービス一覧／サービス個別（Web制作・ロゴ制作など）／料金
- 制作実績／実績個別／お客様の声
- 会社概要／代表あいさつ／採用情報
- ブログ記事／よくある質問／お問い合わせ／プライバシーポリシー
粒度がバラバラでも問題ありません。「サービス個別」のように複数ページになるものと、「料金」のような1ページのものが混ざっていても、この段階では気にせず全部出し切ります。次のグループ化で整えていきます。
手順②：グループ化する（カードソート）
次に、洗い出したページを似たもの同士でグループにまとめます。付箋を動かしながら「これとこれは同じ仲間」とまとめていく作業で、情報設計ではカードソートと呼ばれます。「サービス」「実績」「会社案内」「サポート」のように、いくつかの大きなまとまり（＝カテゴリ候補）が見えてきます。
グループ化のコツは、「作り手の組織図」ではなく「ユーザーの探し方」で分けることです。社内の部署別に分けると、ユーザーには意味不明な分類になりがちです。「ユーザーはこの情報をどんなカテゴリで探すか」を基準にまとめると、直感的にたどれる構造になります。分類に迷ったら、MECE（モレなくダブりなく）を意識して、1つのページが複数のグループに入らないように整理します。
先ほどの制作会社の例なら、洗い出したページは「サービス」「実績」「会社案内」「サポート・その他」の4グループにまとまります。サービス一覧・サービス個別・料金はサービスへ、制作実績・実績個別・お客様の声は実績へ、会社概要・代表あいさつ・採用は会社案内へ、といった具合です。ブログやお問い合わせ、ポリシー類はサポート・その他にまとめます。この4つが、次の階層でカテゴリになります。
手順③：階層に組み立てる
グループができたら、親子の階層に組み立てます。大きなまとまりを親（カテゴリ）にし、その中の個別ページを子として並べます。ここでの原則は、「浅く保つ」ことです。トップから2〜3階層で目的のページに届く構造が理想で、深くなりそうなときは、無理に潜らせず親カテゴリを増やして横に広げます。
階層を組むときは、各カテゴリに入るページ数のバランスも見ます。1つのカテゴリだけページが極端に多い、あるいは1ページしかないカテゴリがある、といった偏りは、分類の見直しサインです。「どのカテゴリもだいたい同じくらいの規模」に近づくと、メニューもきれいに収まります。
制作会社の例で階層に組むと、トップの下に「サービス」「実績」「会社案内」の3カテゴリを置き、それぞれの下に個別ページをぶら下げる形になります。「料金」はサービスの下、「お客様の声」は実績の下、というように、親カテゴリを見れば子ページの位置づけが分かる状態が理想です。お問い合わせやポリシーのような全ページ共通のものは、カテゴリに入れずフッターなどからたどれるようにすると、階層をすっきり保てます。こうしてトップ→カテゴリ→個別ページの2〜3階層に収まれば、浅い構造の完成です。
手順④：ディレクトリマップに落として確認する
組み立てた階層は、最後に図にして全体を確認します。頭の中やリストのままだと、階層の深さや偏り、抜け漏れに気づきにくいためです。フォルダとページの親子関係を図にしたものがディレクトリマップで、これを1枚作ると「どのページがどの階層にあるか」がひと目で分かり、設計のミスを早い段階で発見できます。作り方はディレクトリマップの作り方｜フォルダ構成を図にする無料ツールの使い方で解説しています。
図で構造が固まったら、次は各ページに具体的なURLを割り当てていきます。ディレクトリの階層をどんなURLに落とし込むか、命名をどうそろえるかは、URL設計・ディレクトリ構造の決め方【SEO観点】で解説しています。「洗い出し → 図 → URL」の順に進めると、設計から実装まで一本の流れでつながります。
サイト構造の代表的な型
サイト構造にはいくつかの典型的な型があります。作るサイトの目的に合った型を選ぶと、階層設計が進めやすくなります。
| 型 | 特徴 | 向いているサイト |
|---|---|---|
| 階層型（ツリー） | トップ→カテゴリ→個別ページと枝分かれする基本形 | 企業サイト・情報量の多いサイト全般 |
| 直線型（シーケンス） | ページを順番にたどらせる一本道 | チュートリアル・申込みフロー |
| ハブ&スポーク | 中心となる軸ページから関連ページへ放射状に展開 | 特定テーマを深掘りするコンテンツ群 |
多くのサイトは階層型を基本に、一部で直線型やハブ&スポークを組み合わせます。まずは全体を階層型で組み、申込みや特集など特定の目的の部分だけ別の型を使う、と考えると設計しやすくなります。
型を意識すると、グローバルナビゲーション（サイト上部のメニュー）の設計も決まりやすくなります。階層型なら、トップに置いた親カテゴリがそのままメニュー項目になります。メニューはおおむね5〜7項目に収めるのが目安で、これを超える場合は、カテゴリを統合できないか、あるいは一部をフッターや下層に移せないかを見直します。ナビゲーションがすっきり収まるかどうかは、構造がうまく整理できているかのよい判断材料になります。
やりがちな失敗パターン
サイト構造の設計でつまずきやすいポイントを、原因とあわせてまとめます。
| 失敗パターン | 何が問題か |
|---|---|
| 作り手都合の分類 | 社内の部署や都合で分け、ユーザーが情報を探せない |
| 階層が深すぎる | 重要ページが埋もれ、クリック数が増えて離脱される |
| 粒度がバラバラ | 大分類と個別ページが同じ階層に混在し、構造が読めない |
| 1ページだけのカテゴリ | 中身が1つしかない分類ができ、メニューが不自然になる |
| 洗い出し不足のまま着手 | 後から必要なページが出て、構造を作り直すはめになる |
これらの多くは、「洗い出し」と「ユーザー視点のグループ化」を省いたことが原因です。最初の2ステップを丁寧にやれば、大半の失敗は防げます。
サイト構造設計チェックリスト
ページを作り始める前に、次の項目を確認しておきましょう。
- 載せる情報・ページを、事業者視点とユーザー視点の両方から洗い出したか
- ユーザーの探し方を基準にグループ化し、MECEに整理したか
- トップから2〜3階層で主要ページに届く、浅い構造になっているか
- 各カテゴリのページ数に極端な偏りがないか
- ディレクトリマップに落として、全体を図で確認したか
- その構造をもとに、URL設計へ進める状態になっているか
よくある質問（FAQ）
Q. サイト構造の設計は制作のどの段階でやりますか？
ページを作り始める前、企画・要件定義の直後が理想です。デザインや実装に入ってから構造を変えると手戻りが大きくなるため、最初に固めておきます。
Q. 情報アーキテクチャとサイト構造は同じ意味ですか？
ほぼ同じ意味で使われます。情報アーキテクチャ（情報設計）は情報を構造化・整理・ラベル付けする考え方で、その結果としてできあがるページの階層構造がサイト構造です。
Q. カードソートとは何ですか？
洗い出したページ（カード）を似たもの同士でグループにまとめる手法です。付箋やカードを動かしながら分類することで、ユーザーが直感的に探せるカテゴリを見つけられます。
Q. 階層はどれくらいの深さにすべきですか？
トップから2〜3階層で主要ページに届くのが目安です。深くなりそうなときは、下に潜らせるのではなくカテゴリを増やして横に広げると、浅さを保てます。
Q. サイト構造とサイトマップは違うものですか？
サイト構造は情報の階層そのもの、サイトマップはそれを図や一覧で表したものです。設計したサイト構造をディレクトリマップとして図にすると、全体像を確認・共有しやすくなります。
Q. 小規模なサイトでも構造設計は必要ですか？
ページ数が少なくても、洗い出しとグループ化はやっておく価値があります。小規模なうちに構造を決めておけば、ページが増えたときに破綻せず、そのまま拡張できます。
Q. 設計した構造が良いか、どう確かめればいいですか？
「ユーザーが目的の情報に最短でたどり着けるか」を基準に、いくつかの探し方をシミュレーションしてみます。図にして第三者に見てもらい、迷わずたどれるかを確認するのも有効です。
まとめ
- サイト構造の設計とは、情報を洗い出し、グループ化し、階層に組み立てる情報設計の工程。ページを作る前にやるのが最も手戻りが少ない
- 手順は①洗い出す → ②グループ化する（カードソート）→ ③階層に組む → ④図で確認するの4ステップ
- グループ化は作り手都合ではなくユーザーの探し方で。階層は浅く保ち、深くなるなら横に広げる
- 組んだ構造はディレクトリマップで図にして確認し、そのままURL設計へつなげる
サイト構造は、頭の中で考えているだけでは良し悪しが判断できません。まずは載せる情報を全部書き出し、グループにまとめて、図にしてみましょう。洗い出した構造をそのまま図にできるツールから始めるのが近道です。
関連記事
ディレクトリマップの作り方｜フォルダ構成を図にする無料ツールの使い方