ホームページのディレクトリマップとは？公開前に決めておきたいサイト構造の作り方

「デザインの打ち合わせは進んでいるのに、ページ数や構成がまだ固まっていない」——ホームページのリニューアルや新規制作で、こうした状態のまま進んでしまうケースは少なくありません。見た目の話から入ってしまうと、後になって「このページが足りなかった」「思っていたより階層が深い」といった問題が公開直前になって発覚し、手戻りが発生します。

こうした手戻りの多くは、デザインの良し悪しではなく、その前段階である「どんなページを、どんな階層で用意するか」が曖昧なまま進んでしまったことが原因です。デザインは目に見えるため打ち合わせで話題に上りやすい一方、ページ構成という土台の部分は後回しにされがちで、気づいたときには修正が難しい段階まで進んでしまっていることがあります。

この記事では、ページのデザインより前に決めておくべき「ディレクトリマップ（サイト構造図）」とは何か、なぜ制作前に必要なのか、具体的な作り方から、発注者側がチェックすべきポイントまでを解説します。

ディレクトリマップとは

ディレクトリマップとは、ホームページ内にどんなページがあり、それぞれがどんな親子関係・階層構造になっているかを1枚の図にまとめたものです。会社でいえば組織図、建物でいえばフロア図にあたる、サイト全体の「地図」です。

似た言葉に「サイトマップ」がありますが、文脈によって指すものが異なるため、混同しないよう整理しておきます。

この記事で扱う「ディレクトリマップ」は、公開後の話ではなく、制作に入る前に決めておくべき設計図を指します。

なぜ制作前に決めておく必要があるのか

手戻りのコストを防ぐ

デザインやコーディングが進んだ段階で「このページも必要だった」と気づくと、すでに完成しているページ間のリンクやナビゲーションメニューを作り直す必要が出てきます。ページ数が少ないうちの手戻りと、デザインが8割方できあがった段階での手戻りとでは、修正にかかる時間も費用も大きく変わります。ディレクトリマップは、この手戻りが最も安く済む「まだ何も作っていない段階」で、ページの過不足を確認するための作業です。

URLの階層に影響する

多くの場合、ディレクトリマップの階層構造は、そのままページのURLの階層に反映されます（例:「サービス」の下に「サービスA」を置けば、URLも/service/a/のような形になりやすい）。URLは一度公開すると変更しにくく、変更する場合は転送設定（リダイレクト）などの追加対応が必要になります。土台となる構造を先に決めておくことで、公開後にURLを何度も変更するような事態を避けられます。

階層が浅く整理されたURLは、検索結果に表示された際にも「/」区切りで構造が伝わりやすく、訪問者にとって今どの階層にいるかが把握しやすいという利点もあります。逆に、行き当たりばったりでページを追加していくと、/campaign2/detail-final/のような、内容が推測しづらいURLが増えていきがちです。ディレクトリマップの段階で「このページはどのグループに属するか」を決めておくことが、分かりやすいURL設計の土台にもなります。SEOにおける施策全体の考え方については「SEO対策のやり方を完全解説」もあわせてご覧ください。

情報の抜け漏れに気づける

「会社概要」「サービス」「事例」「お問い合わせ」といった主要なページは決めていても、「採用ページは必要か」「よくある質問は独立させるか、各ページに埋め込むか」といった細部は、図にしてみて初めて漏れに気づくことが多くあります。文章や口頭でのやり取りだけでは見落としやすい部分を、図という形にすることで発見しやすくなります。

ディレクトリマップの作り方：4つのステップ

①ページを洗い出す

まず、必要そうなページをすべて紙やドキュメントに書き出します。この段階では階層や順番を気にせず、「会社概要」「代表挨拶」「事業内容」「サービス」「料金」「事例」「お客様の声」「採用情報」「お問い合わせ」など、思いつく限りリストアップすることが目的です。

②似たページをグループ化する

洗い出したページを、内容の近いもの同士でグループにまとめます。「代表挨拶」「事業内容」「会社概要」は「会社情報」グループに、「事例」「お客様の声」は「実績」グループに、というように整理すると、後の階層化がしやすくなります。

③階層化する（親子関係を決める）

グループ化したものに、上位ページ（親）と下位ページ（子）の関係をつけていきます。例えば「サービス」を親ページとし、「サービスA」「サービスB」を子ページとして配置します。ここで意識したいのは、トップページから何回クリックすれば目的のページに辿り着けるかという深さです。クリック数そのものより、各ページへ進むたびに「自分は今どこにいて、次に何が見られるか」が分かるようになっているかが重要ですが、階層が深くなるほどその見通しは悪くなりやすいため、目安として主要なページはできるだけ浅い階層に置く方針で設計するとよいでしょう。

④図にする

最後に、決めた階層関係を実際に図として書き出します。文章や箇条書きのままだと、階層の深さやページ数の偏りに気づきにくいため、図にして視覚的に確認する工程を省略しないことが大切です。専用の作図ツールを使ってもよいですし、手書きやスプレッドシートでも構いません。重要なのは、制作会社と発注者の双方が同じ図を見ながら「このページで合っているか」を確認できる状態を作ることです。

発注者側がチェックすべきポイント

制作会社から提案書や見積もりを受け取った際に、ディレクトリマップに関して確認しておきたいポイントを整理します。

• ページ構成の図や一覧が提示されているか：見積書に「トップページ、下層ページ×5」のようにページ数だけが書かれている場合、どのページがどんな階層関係になるかまでは分かりません。図または一覧での提示を求めましょう
• 階層の深さが説明されているか：主要なページがトップページから何クリックで到達できるかは、訪問者の使いやすさに直結します
• 各ページの役割が言葉で説明できるか：「なぜこのページが必要なのか」を制作会社が答えられない場合、そのページは何となく作られている可能性があります
• 将来のページ追加を見越した余地があるか：採用活動を始める予定がある、事業を拡大する予定があるなど、将来的に増えそうなページがあれば、今の段階で階層に組み込めるか確認しておくと、後からの追加がスムーズになります

例えば、打ち合わせの場で「事例ページはどの階層に置く予定ですか」「トップページから何クリックで辿り着けますか」といった質問を投げかけてみると、制作会社がその場でディレクトリマップを示しながら答えられるかどうかで、設計段階がどれだけ具体的に詰められているかが分かります。逆に「追って資料を作ります」としか返答がない場合は、まだページ構成が固まっていない可能性があるため、契約前にもう一段階、構成の確認を挟んだ方が安全です。

サイト構造が決まっていると、その先のデザインがスムーズになる理由

ディレクトリマップは、その後に続くデザインの作業の「土台」にあたります。ページの見た目や操作性を考えるユーザーインターフェース（UI）のデザインも、見込み客がどんな体験をしながらページを進むかを考えるユーザーエクスペリエンス（UX）のデザインも、「そもそもどんなページが、どんな階層で存在するか」が決まっていなければ、具体的に組み立てることができません。

構造が曖昧なまま先にデザインを進めてしまうと、後からページ構成が変わるたびにデザインを作り直す必要が生まれます。逆に、ディレクトリマップの段階でページ構成をしっかり固めておけば、その後のデザインの打ち合わせでは「このページに何を配置するか」という中身の話に集中でき、手戻りの少ない進め方ができます。

なお、ページの中に何をどんな順番で配置し、問い合わせにつなげるかという「導線設計」については、「ホームページの導線設計とは？」で詳しく解説しています。ディレクトリマップが「どんなページがあるか」を決める工程だとすれば、導線設計は「そのページの中身をどう見せるか」を決める工程にあたります。役割の異なる2つの工程として、区別して理解しておくとよいでしょう。

画面の見た目や操作性そのものの設計については、「UIデザインとは？」でも解説しています。

工務店の例でディレクトリマップを組み立ててみる

実際に手を動かすイメージを持てるよう、地域密着の工務店を例に、4つのステップを順番に見ていきます。

①洗い出し

まずは思いつく限りのページを書き出します。会社概要、代表挨拶、施工事例、お客様の声、対応エリア、料金の目安、よくある質問、お問い合わせ、採用情報——このように、階層を気にせずリストアップします。

②グループ化

洗い出したページを近い内容ごとにまとめます。「会社概要」「代表挨拶」は会社情報グループへ、「施工事例」「お客様の声」は実績グループへ、「対応エリア」「料金の目安」「よくある質問」は検討材料グループへ、というようにまとめます。

③階層化

グループごとに親ページを立て、その下に子ページをぶら下げます。例えば「実績」を親ページとし、その下に「施工事例」「お客様の声」を子ページとして配置します。採用情報は検討中の見込み客には関係が薄いため、トップページの主要ナビゲーションからは切り離し、フッターからのみ辿れる階層に置く、といった判断もこの段階で行います。

④図にする

• 第1階層（トップ）：トップページ
• 第2階層：会社情報／実績／検討材料／お問い合わせ
  • 会社情報 → 代表挨拶
  • 実績 → 施工事例／お客様の声
  • 検討材料 → 対応エリア／料金の目安／よくある質問

こうして図にすると、「実績」というグループの重要度が高い（見込み客が最も見たい情報）にもかかわらず、トップページから2段階で到達できる設計になっていることが視覚的に確認できます。逆に、もし施工事例が階層の奥深くに埋もれていることに気づいたら、この段階で階層を浅くする調整ができます。

よくあるディレクトリマップの失敗

階層を深くしすぎる

「カテゴリ分けを丁寧にしよう」という意識が強すぎると、トップページから目的のページまで4クリック、5クリックとかかる構造になりがちです。分類の正確さよりも、見込み客が迷わずたどり着けるかどうかを優先し、階層はできるだけ浅く保つことが基本です。

ナビゲーションメニューと構造が一致していない

ディレクトリマップ上ではきれいに整理されていても、実際のサイトのナビゲーションメニュー（ヘッダーやフッターのリンク一覧）に反映されていなければ、訪問者はその構造を実感できません。図を作って終わりにせず、メニュー設計にそのまま反映されているかを最後に確認しましょう。

「念のため」でページを増やしすぎる

将来使うかもしれないという理由だけで、中身の薄いページを次々と作ってしまうケースがあります。ページ数が増えるほど管理の手間も増え、更新されないまま放置されるページが生まれがちです。今の時点で明確な目的があるページに絞り、将来必要になったページはその時点で追加する、という考え方の方が運用しやすくなります。

作り手側の都合で分類してしまう

「営業部が管理するページ」「制作側が作りやすい単位」など、社内の都合や制作のしやすさを基準に分類してしまうと、訪問者にとっては探しにくい構造になります。分類の基準は常に「見込み客がどう探すか」を軸に置き、社内の都合は後から調整する、という優先順位を崩さないことが大切です。

まとめ

ディレクトリマップは、ホームページのデザインより前に決めておくべき「サイト構造の設計図」です。ページを洗い出し、グループ化し、階層化し、図にするという4つのステップを踏むことで、公開直前になってからのページ不足や階層の作り直しといった手戻りを防げます。

発注者側にとっても、提案書の中にディレクトリマップが明確に示されているかどうかは、その制作会社がどれだけ設計段階を丁寧に進めているかを見極める材料になります。デザインの話に入る前に、まず「どんなページが、どんな階層で必要か」を制作会社と一緒に確認する時間を取ることをおすすめします。

ページ構成という土台が固まれば、その先の「何をどんな順番で見せるか」という導線設計、「どう操作させ、どう体験してもらうか」というUI/UXデザインへと、手戻りの少ないまま進めていくことができます。

よくある質問

ディレクトリマップとサイトマップは同じものですか？

異なります。ディレクトリマップは制作前にページ構成を設計するための図で、発注者と制作会社が確認し合うためのものです。一方でサイトマップは、公開後に検索エンジン向けに作成するXMLファイル、または訪問者向けに作成するページ一覧を指すことが多く、目的も見る相手も異なります。

ページ数が少ない小規模なサイトでもディレクトリマップは必要ですか？

ページ数が5〜10ページ程度の小規模なサイトであっても、簡易的なもので構わないので作っておくことをおすすめします。ページ数が少ないほど図を作る手間も小さいため、簡単な一覧表やメモ書き程度でも、抜け漏れの確認には十分役立ちます。

ディレクトリマップは自分たちで作れますか？

主要なページの洗い出しやグループ分けは、自社のビジネスやサービスを最もよく理解している担当者が行える作業です。階層の深さやURLへの影響など専門的な判断が必要な部分は、制作会社に相談しながら詰めていくとよいでしょう。方針は自社で考え、専門的な調整は制作会社に任せる、という進め方が現実的です。

ディレクトリマップを作った後は何をすればいいですか？

ディレクトリマップでページ構成が固まったら、次はページの中に何をどんな順番で配置するかという導線設計、そして画面の見た目や操作性を決めるUI/UXデザインへと進んでいきます。土台となる構造が決まっているほど、これらの工程もスムーズに進められます。

既存サイトのリニューアルでもディレクトリマップは作り直すべきですか？

リニューアルの場合は、まず現状のサイトのページ構成をそのまま図に起こすところから始めるとよいでしょう。「今どんなページがあるか」を可視化した上で、アクセス解析のデータも参考にしながら、あまり見られていないページを整理したり、新しく必要なページを加えたりする形で見直していきます。ゼロから作るリニューアルよりも、既存の構造を土台にした方が、訪問者にとって急激な変化による戸惑いも少なく済みます。