ホームページのページ構成はどう決める？サイトマップの作り方と例

サイト制作の準備を表したAI生成イメージです。実際の社内や顧客の写真ではありません。

ホームページのページ構成は、読者が知りたい情報を洗い出し、別ページにする理由を決め、親子関係と制作担当を一覧にすると整理できます。必要なページ数や階層に、全社共通の正解はありません。この記事では、制作を依頼する中小企業の担当者向けに、企画用サイトマップの作り方と、ページを分ける・まとめる判断を架空の会場サイトで解説します。

ページ構成とサイトマップは、作る情報の置き場所を決めるもの

ページ構成とは、ホームページにどんなページを置き、それぞれに何を載せるかという計画です。企画用のサイトマップは、そのページ同士の親子関係を一覧や樹形図にしたもの。デザインを描き始める前に、何をどこで説明するかを関係者でそろえるために使います。

たとえば、施設の利用を検討する人には、部屋の違い、使える設備、利用条件、交通手段、問い合わせ方法が必要です。「会社案内」「サービス」といった定番の名前だけを並べても、その情報がどこにあるのかは決まりません。逆に、情報の役割が決まっていれば、最初は表計算の一覧だけでも検討を進められます。

Googleが説明するサイトマップは、ページや動画などのファイルと、それらの関係について検索エンジンへ情報を提供するものです。社内で作る構成表を、そのまま検索登録用のファイルだと考えないようにしましょう。構成表の完成だけで検索掲載や順位が保証されるわけでもありません。

出典：サイトマップについて | Google 検索セントラル  |  Documentation  |  Google for Developers

この記事の範囲はサイト全体のページ分けです。ページ内の見せ方は、各ページの役割が決まってから具体化します。1枚のLPで案内するか、複数ページのホームページにするかを迷う場合も、まず相手が比較・確認したい内容を言葉にすると、制作方式を相談しやすくなります。

読者の用事から、必要な情報を洗い出す

最初に「誰が、何を確かめ、どんな行動をするためのサイトか」を一文にします。架空の会場運営サイトなら、「法人研修の担当者が、人数や用途に合う部屋を比較し、利用条件を確認して、空き状況を問い合わせるサイト」と書けます。これは説明用の想定であり、実在する顧客や制作実績ではありません。

洗い出すときは、営業資料や案内文をそのまま見出しにするのではなく、読者の疑問へ言い換えます。「設備一覧」という資料があるなら、「オンライン参加に必要な設備はあるか」「持ち込みが必要なものは何か」という質問に直します。社内の部署名による分類と、利用者が探す言葉が一致するとは限らないためです。

次に、疑問へ答える材料の有無を確認します。会場なら、各部屋の寸法・定員・設備・写真・利用条件などです。未確認の条件を推測で埋めず、「運営担当へ確認」「掲載できる写真を選定中」と残します。ページ構成の段階でも、文章を用意する仕事と事実を確かめる仕事を分けておくと、制作中の行き違いを見つけやすくなります。

すべての読者を同じ導線に詰め込む必要はありません。初めて比較する人、利用を決めて交通手段を探す人、会社情報を確認する人では用事が違います。最も重要な検討の流れを決めたうえで、アクセスや運営者情報など、別の用事にも迷わずたどり着ける場所を用意します。

ページを分けるか、同じページにまとめるかを判断する

別ページにする理由は、違う用事を一つのページへ押し込むと比較しにくい、独立した説明や写真が必要になる、特定の情報へ直接案内したい、といった読者側の必要から考えます。文字数が増えたから機械的に分ける、ページ数を増やすために同じ説明を言い換える、といった決め方は避けます。

この例では、部屋が2種類あるため詳細を分けています。ただし、違いが短い比較表で十分伝わり、写真や条件も少ないなら、1ページにまとめる案もあります。反対に、同じサービス名でも対象者・申込条件・説明すべき内容が大きく違うなら、入口を分ける余地があります。「名前が違うか」より「読者が別々に判断する必要があるか」を基準にします。

まとめる場合は、見出しで情報を探せるようにします。1ページの中に会社情報・料金・使い方などを置くなら、各情報に名前を付け、ページ内リンクの必要も検討します。別ページにする場合は、そのページだけ読んでも対象や条件が分かる説明を持たせます。どちらも、内容の薄い箱だけを先に増やさないことが大切です。

見積もりの前に、同じ文章を複数の場所で管理する必要がないかも確認します。共通条件を何ページにも複製すると、変更時に直す場所が増えます。一か所に集約してリンクするのか、管理画面で共通情報として扱うのかは、更新担当と制作担当で決めます。読者の読みやすさに加えて、公開後に正しく更新できる形を選びましょう。

親子関係とメニューを組み、移動の順番を確かめる

ページを分けたら、大きな分類と詳細の関係を整理します。架空の会場サイトなら、「会場一覧」の下に「会議室」「研修室」を置きます。これは情報の分類です。一方、利用者は部屋の詳細を読んだ後に、利用案内や施設案内へ移動するかもしれません。その移動は、分類の線とは別にリンクで案内します。

企画用サイトマップには、まず親子関係だけを書きます。その後、代表的な用事を一つずつたどって、必要な横の移動を確認します。すべてのリンクを最初から樹形図へ描き込むと、分類と導線が混ざりやすくなります。分類は表の「親ページ」欄、主な移動は「次に読む場所」欄に分けても構いません。

GoogleのSEOスターターガイドは、論理的なサイト構成がページ同士の関係を理解する助けになると説明しています。ただし、階層を一段浅くするだけで検索順位が上がる、すべて3クリック以内なら正解、といった一律の成果条件にはしていません。ページ数に合わせて、分類の意味が伝わるかを確認しましょう。

出典：Google 公式 SEO スターター ガイド | Google 検索セントラル  |  Documentation  |  Google for Developers

上部メニューに全ページを並べる必要もありません。主要な入口を示し、その先の一覧や本文から詳細へ進める形を検討します。名称は社内用語だけで決めず、「会場」「利用案内」「アクセス」など、読者が内容を予想できる言葉にします。分類名が広すぎて迷う場合は、見出しや短い説明で対象を補います。

W3Cの見出し・ラベルの解説では、対象の話題や目的を表すことを求めています。また、リンクの目的はリンクの文面だけ、または文面と文脈から分かることが重要です。たとえば会議室の説明から共通条件へ送るなら、「利用条件と料金の決まり方を確認する」とすると、移動先で何が読めるかを伝えやすくなります。

出典：Understanding Success Criterion 2.4.6: Headings and Labels | WAI | W3C

出典：Understanding Success Criterion 2.4.4: Link Purpose (In Context) | WAI | W3C

最後に、トップページから始める場合だけでなく、部屋の詳細へ直接来た場合も確認します。施設全体の場所が分かるか、他の部屋と比較できるか、問い合わせ前に必要な条件を読めるかをたどります。すべての人を同じ順番に誘導するより、途中のページからでも判断を続けられる構成を目指します。

架空の会場サイトで、ページ一覧と制作範囲を作る

以下は、2種類の部屋を持つ架空の会場サイトを考えるための記入例です。8行はこの教材の検討対象であり、必要最低限のページ数や制作プランではありません。運営上の表示事項などは事業内容に合わせて別途確認します。親欄のIDは、この表の中でページを識別するための番号です。

表が収まらない場合は横にスクロールできます →

親子関係だけなら、P1の下にP2・P5・P6・P7・P8が並び、P2の下にP3・P4が入ります。P3からP5へのリンクは分類を変える線ではなく、読者が共通条件を確認するための移動です。この区別ができれば、樹形図を描く専用ツールがなくても、表のIDと親欄で構成を共有できます。

この例の大切な判断は、部屋の詳細を分けつつ、共通条件をP5へまとめたことです。P2には比較に必要な項目をそろえ、P3・P4では個別の写真や固有条件を説明します。比較表に何を載せるかと、詳細ページで何を補うかを決めると、ページごとの役割が重なりにくくなります。

制作会社へは「8ページお願いします」だけで渡さず、何を1ページとして数えるかもそろえます。問い合わせの入力画面と完了画面、記事一覧と記事詳細、管理画面で追加する投稿などは、見積もり上の扱いが制作方法によって異なります。この構成表は公開する情報の一覧なので、作る画面や機能の一覧は追加して確認します。

同じ見た目を使う会議室と研修室も、写真・説明・設備情報を入れる作業はそれぞれ発生します。共通のひな型を何種類作るか、初回に何件の情報を登録するか、公開後は誰が追加できるかを分けて伝えましょう。ページ数だけから、制作費や納期を決めつけることはできません。

初回公開の範囲と担当を決めて、制作へ渡す

構成ができたら、素材と確認事項をページごとに割り当てます。名前のあるページがすべて公開可能とは限りません。料金条件や設備が未確認なら確認を先に進め、事例の掲載許可がまだなら後日の候補に残すなど、初回の目的を果たすための情報がそろう範囲を決めます。

この担当表は役割の例です。実際には自社の担当者と確認期限を追記し、「資料あり」「確認待ち」「原稿確認中」などの状態をそろえます。担当が決まらない項目は、制作会社が自由に補ってよいという意味にはしません。誰が事実を確認するか、誰が文章や画面を作るかを分けて依頼します。

構成案を確認するときは、「研修に合う部屋を選んで問い合わせる」「利用が決まって施設への行き方を調べる」のように、具体的な用事で順にたどってみます。構成表で説明できても、スマホのメニューや実際の画面で探しづらい場合は調整が必要です。ワイヤーフレーム、デザイン、実装の各段階でも同じ用事で確かめます。

制作担当への依頼は、たとえば「会場2種類を比較して問い合わせるサイトにしたい。P3・P4は個別詳細、共通条件はP5にまとめる。P2〜P4の写真と設備は運営担当が確認中。利用事例は初回から外す。必要画面、入力項目、素材の不足をこの表に追記してほしい」と書けます。資料が未完成でも、決めたことと迷っていることを区別して渡せます。

既存サイトの改修では、現在のURLや検索から読まれているページも確認します。構成案に合わせてURLをすぐ変えたり、古いページを削除したりせず、残す情報と移行方法を別途検討します。新しい分類を作ることと、公開中のURLを変更することは同じ作業ではありません。

よくあるご質問