ホームページの構成完全ガイド2026｜業種別9パターン・必須8ページ・AI検索対応設計

「ホームページを作りたいけど、どんなページが必要か分からない」「サイトマップとかワイヤーフレームって聞くけど、何から手をつければ？」——制作会社に依頼する前でも、自分で作る場合でも、最初に立ちはだかるのが「構成設計」の壁です。

ホームページの構成とは、サイト内のどのページに、どの情報を、どの順番で配置するかをまとめた設計図のこと。家でいえば「間取り図」にあたり、間取りを決めずに家を建てないのと同じで、構成を決めずに作ると後から大規模な作り直しが必要になります。

この記事では、構成の定義 → なぜ重要か → 必須ページと業種別パターン → サイトマップ・ワイヤーフレームの作り方 → SEO/UX原則 → モバイルファースト → AI検索（AIO）に強い構造化データ設計 → リニューアル → AI・ノーコード活用 → コピペできる構成チェックリスト → FAQの順に、2026年6月時点の最新知識を網羅的に解説します。構成設計の前に、外注・自作・AIといったホームページ作成の手段全体を比較したい方は、ホームページ作成の全体像をまとめた総合ガイドもあわせてご覧ください。

この記事の要点

• ホームページの構成には「サイト全体（サイトマップ）」と「ページ単位（ワイヤーフレーム）」の2つの設計図がある
• 全業種に共通する必須ページは8つ。これに業種特有のページが加わる
• 業種・目的によって必要なページ数は4〜10と幅がある
• サイトマップは3ステップ、ワイヤーフレームは4ステップで作れる
• インターネット接続端末としてスマートフォンを利用する個人の割合は74.4%（総務省）。モバイルファースト設計が前提
• 2026年は「AI検索（AIO）に拾われる構成」が新しい差別化軸。結論先出し・質問形の見出し・構造化データを設計段階から組み込む
• AI・ノーコードツールを使えば、構成テンプレを土台に短時間で設計できる

ホームページの「構成」とは — サイト全体とページ単位の2つの設計図

ホームページの構成とは、サイト内のどのページに、どの情報を、どの順番で配置するかをまとめた設計図のことです。

構成設計には2つのレベルがあります。

サイト全体の構成（サイトマップ）

サイトマップは、ホームページ全体をツリー状に可視化した図です。トップページを頂点として、第2階層（会社概要・サービス紹介など）、第3階層（個別サービスページなど）へ枝分かれします。

サイトマップを作ることで、抜け漏れの確認、関係者との合意形成、SEOを意識した階層設計が可能になります。

ページ単位の構成（ワイヤーフレーム）

ワイヤーフレームは、1ページ内のどこに何を配置するかを線画で示した設計図です。ヘッダー、メインビジュアル、見出し、テキスト、画像、CTAボタン、フッターなどの位置関係を決めます。

色やフォントなどのデザインは入れず、情報の優先順位と配置だけに集中するのがポイントです。

なぜ構成設計が重要か — 失敗例から見る3つのリスク

構成を決めずにいきなりページを作り始めると、3つのリスクが発生します。

リスク1: ユーザーが目的のページに辿り着けない

ホームページを訪れたユーザーは、ファーストビューを見た数秒以内に「自分が探している情報がありそうか」を判断するといわれています。トップページからゴール（問い合わせ・予約・購入）までの導線が複雑だと、その時点で離脱されかねません。

構成設計の段階で「誰が・どこから来て・何を求めているか」を整理しておくと、迷わない導線が引けます。

リスク2: SEOで評価されない

Googleなどの検索エンジンは、サイト内の階層構造や内部リンクを手がかりにページの重要度を判断します。階層が深すぎる、関連ページが繋がっていない、URL構造が複雑といった問題は、検索順位が伸びない原因になります。

構成設計の段階で階層を浅く保ち、内部リンクを設計しておくことが、後からのSEO対策よりも効果的です。

リスク3: 後から大幅な作り直しが必要になる

「あとで採用ページも追加したい」「ブログを始めたい」——構成を考えずに作り始めると、こうした追加要望のたびにナビゲーションやURL構造を作り直す羽目になります。

最初に構成図を描いておけば、将来追加する可能性のあるページもナビゲーションに織り込めます。

全業種に共通する必須ページ8選

業種を問わず、ビジネス用のホームページに最低限必要なページは次の8つです。

1. トップページ ホームページの「顔」。サイトの代表ページとして最初に見られることが多く、訪問者は短時間で「自分に関係あるサイトか」を判断します。サービス概要、強み、主要な導線をコンパクトにまとめます。

2. 会社概要・店舗情報 事業者情報、所在地、設立年、代表者、連絡先など。信頼性を担保する基本ページです。

3. 事業・サービス紹介 何を提供しているか、誰のためのサービスか、競合と何が違うかを伝えるページ。最も読まれる重要ページの1つです。

4. 料金・プラン 料金や見積もり目安。「いくらかかるか」を明示することで、問い合わせ前のハードルを下げます。価格非公開の場合も、想定レンジを示すと離脱を防げます。

5. お問い合わせ フォーム、電話番号、メールアドレス、対応時間など。コンバージョン（CV）の入口となる最重要ページです。

6. プライバシーポリシー 個人情報の取り扱い方針。個人情報の保護に関する法律（個人情報保護法）では、利用目的の通知・公表が義務付けられているため、お問い合わせフォームを設置する場合はプライバシーポリシーの掲載が実務上必須です。

7. よくある質問（FAQ） 問い合わせ前にユーザーが抱く疑問への先回り回答。後述する構造化データ（FAQPage）と組み合わせると、検索結果やAI検索に引用されやすくなるSEO効果もあります。

8. ブログ・お知らせ 新着情報や事例・ノウハウを発信する場。SEOの主要な流入元になるほか、サイトの「鮮度」を保つ役割もあります。

＋α. 採用情報（採用予定がある場合） 求人ページ、社員紹介、選考フロー、エントリーフォーム。採用ブランディングと応募の入口を兼ねます。採用予定がない事業者は前述の8ページ構成で十分ですが、コーポレート・工務店・クリニックなど採用を行う業種では9ページ目として組み込んでください。

ホームページが本当に必要かどうか迷っている方は、中小企業にホームページは必要かも併せて参考にしてください。

業種・目的別ページ構成パターン【9業種比較表】

業種や目的によって、必要なページ構成は大きく変わります。代表的な9業種・目的を表にまとめました。全業種共通の必須8ページに加えて、業種ごとの重点ページと業種特有の主要ページを抽出しています。プライバシーポリシー・FAQ・ブログなど共通必須ページは表からは省略しています。

業種別のポイント:

• コーポレートサイトは「信頼性」を担保する設計が最優先。会社概要・代表メッセージ・実績・採用情報など「企業の顔」となるページを過不足なく揃えます。
• 飲食店はメニューと予約への導線が9割を決めます。スマホでメニューを確認 → そのまま予約フォーム、という最短導線を意識します。
• 美容室・サロンはビジュアル訴求が鍵。スタイル集・施術ビフォーアフター・スタッフ紹介で「指名買い」を促す構成にします。
• クリニックは信頼性と「行きやすさ」が両輪。医師紹介・診療時間・アクセス・初診の流れを丁寧に。クリニックHPは「広告」として規制対象となるため、厚生労働省「医療広告ガイドライン」（医療法第6条の5に基づく）および「医療広告規制におけるウェブサイト等の事例解説書（第5版）」に抵触する表現に注意します。
• 工務店は施工事例の質と量で勝負。事例ごとに地域・坪数・予算感を整理して掲載すると、見積もり前のミスマッチを減らせます。
• 旅館・ホテルは客室・料理・温泉などビジュアル中心。予約システム連携と多言語対応も構成段階で検討します。
• 士業は専門性と相談しやすさのバランス。料金体系の明示と相談予約への導線がポイントです。
• **LP（ランディングページ）**は1つのアクションに集中。ヘッダーナビを置かず、ファーストビュー → 課題提起 → 解決策 → 実績 → CTAという縦の流れで完結させます。
• ECサイトは商品一覧 → 詳細 → カート → 決済の購買動線が最優先。レビュー・「特定商取引法に基づく表記」・会員規約は法令対応として欠かせません。景品表示法、また前払式支払手段がある場合は資金決済法にも注意が必要です。

業種別の具体的な構成例は以下の記事で詳しく解説しています。

• 飲食店ホームページの作成ガイド
• 美容室・サロンホームページの作り方
• クリニックホームページ制作のポイント
• 工務店ホームページ制作完全ガイド
• 旅館・ホテルホームページ制作ガイド
• ランディングページの作り方

ホームページ全体のフルラインナップが必要なBtoB企業ならコーポレートサイトとは、1ページで完結させたいキャンペーンサイトならランディングページの作り方を参照すると、最適な構成パターンが選びやすくなります。

1ページ内の基本パーツ7つ — ヘッダーからフッターまで

どのページにも共通する基本パーツが7つあります。これらはサイト全体で統一されたデザインにすることで、どのページに移動してもユーザーが迷わない設計になります。

1. ヘッダー 画面最上部に固定される領域。ロゴ、グローバルナビゲーション、お問い合わせボタン、電話番号などを配置します。

2. グローバルナビゲーション 主要なページへのリンクを横並びまたはドロップダウンで配置するメニュー。スマホではハンバーガーメニューに切り替わります。

3. メインビジュアル（ヒーローセクション） トップページのファーストビューに配置する大きな画像や動画。サイトの世界観を一目で伝える領域です。下層ページではページタイトルとアイキャッチに置き換わります。

4. メインコンテンツ ページの本体となる情報領域。見出し、本文、画像、引用、表などで構成します。

5. CTA（行動喚起）ボタン 「お問い合わせ」「資料請求」「予約」など、ユーザーに行動を促すボタン。ファーストビューと記事末尾の2箇所に置くのが定石です。

6. サイドバー（必要に応じて） ブログやお知らせのページで、関連記事一覧やカテゴリーリンクを配置する縦長領域。コーポレートサイトのトップページなどでは省略します。

7. フッター 画面最下部。サイトマップ的なリンク集、会社情報、コピーライト、SNSアイコン、プライバシーポリシーへのリンクなどを配置します。

サイトマップの作り方【3ステップ】

サイトマップは、誰でも3つのステップで作れます。より詳しい手順とテンプレートはサイトマップの作り方で深掘りしているので、本記事では全体像をつかんでください。

STEP1: ページの洗い出し

まず必要なページをすべて書き出します。先ほどの「必須8ページ」と業種別の追加ページを参考に、付箋やExcelに1ページ1行で並べていきます。

このとき、競合のホームページを5〜10サイト見て「他社にはあるが自社にないページ」を見つけるのが有効です。

STEP2: グルーピングと階層化

書き出したページを目的別にグルーピングします。たとえば「会社情報」グループには「会社概要・代表挨拶・沿革・アクセス」、「事業」グループには「サービスA・サービスB・料金」などをまとめます。

その上で、「グローバルナビに置く第1階層」と「その下に紐づく第2階層」を決めます。中小企業のホームページであれば3階層程度に収めるのが目安で、大規模サイトであっても内部リンクとパンくずで深い階層を補える設計にすることがSEO・UX両面で効果的です。

STEP3: ツリー図に落とし込む

最後にツリー図として可視化します。手書きでも構いませんが、関係者と共有するならツールを使う方が効率的です。

無料で使える代表的なツール:

• XMind: マインドマップ系。サイトマップに最適
• Figma: デザイン+構成図を一元管理
• Miro / FigJam: チームで共同編集できるホワイトボード
• パワーポイント / Googleスライド: 図形でツリーを描くシンプル派

ワイヤーフレームの作り方【4ステップ】

ワイヤーフレームは1ページずつ作ります。トップページとお問い合わせページなど、重要度の高いページから着手するのが効率的です。

STEP1: 各ページの目的とゴールを決める

「このページで何を達成したいか」を1文で書き出します。たとえばトップページなら「サービス概要を3秒で伝え、お問い合わせか事業ページへ誘導する」のように具体化します。

STEP2: 載せる情報を洗い出す

そのページに必要な情報をすべてリストアップします。トップページなら「キャッチコピー、サービス概要、強み3つ、お客様の声、CTA、ニュース」など。

STEP3: 優先順位とレイアウトを決める

情報の優先順位を決め、上から重要度順に並べます。スマホで縦スクロールしたときに、最初に目に入る順序を意識します。1カラム・2カラム・3カラムなど、レイアウトもこの段階で決めます。

STEP4: ツールで作図する

最後にツールで線画として描き起こします。

無料で使える代表的なツール:

• Figma: 共同編集に強い業界標準。テンプレートも豊富
• Adobe XD: Adobeユーザーなら馴染みやすい
• Whimsical: 高速にワイヤーフレームを描ける
• パワーポイント / Googleスライド: 図形機能だけでも十分

SEOとUXに効く構成設計の5原則

検索エンジンに評価されつつ、ユーザーにも使いやすいサイトを作るための5つの原則です。

原則1: 主要ページへは少ないクリック数で到達できるように設計する

「3クリックルール」という俗説が広まっていますが、Nielsen Norman Group（NN/g）はデータに基づくルールではないと指摘しています。重要なのはクリック数そのものより、各クリックで次に何があるかが明確に予測できることです。

その上で、トップページから主要ページ（事業紹介・料金・問い合わせ等）への動線はなるべく短く保ち、深すぎる階層は避けます。検索エンジンのクローラーがサイト全体を効率よく巡回できるよう、内部リンクとパンくずで補強します。

原則2: パンくずリストを設置

「トップ > サービス > Webサイト制作」のようなパンくずリストは、ユーザーが現在地を把握しやすくなるだけでなく、検索エンジンの構造理解にも役立ちます。後述する構造化データ（BreadcrumbList）と組み合わせると、検索結果にパンくずが表示されやすくなります。

原則3: 内部リンクで関連ページを繋ぐ

本文中に関連ページへのリンクを自然に貼ります。たとえば「料金についてはこちら」ではなく「Webサイト制作の料金プラン」のように、リンク先の内容を表すアンカーテキストにします。

原則4: URL構造をシンプルに

/services/web-design/ のように、階層構造とURLを揃え、英単語や意味のあるスラッグを使います。日本語URLや乱数のID列は避けます。

原則5: モバイルファースト + Core Web Vitals

スマホで見たときの体験を最優先に設計します。Googleは2018年3月にモバイルファーストインデックス（MFI）の段階的移行を開始し、2023年10月にすべてのサイトへの移行が完了。2024年7月にはPC用Googlebotによるクロールも終了しており、スマホ版のページ内容が検索評価の基準となっています（出典: Google検索セントラル（2018年・移行開始）、同（2023年10月・移行完了））。

加えて、ページの実体験品質を測る指標が Core Web Vitals（コアウェブバイタル） です。Googleはユーザー体験の中核指標として次の3つを定義しています（出典: web.dev「Core Web Vitals」）。

INPは2024年3月12日に、それまでの FID（First Input Delay）に代わる応答性指標として正式に採用されました（出典: web.dev「INP becomes a Core Web Vital on March 12」）。各指標は実ユーザーデータの75パーセンタイルで評価されます。構成設計の段階では、ファーストビューに重い画像や動画を詰め込みすぎない（LCP対策）、広告やバナーの差し込みで表示位置がずれない設計にする（CLS対策）といった配慮が、後からの速度改善より効果的です。表示速度の具体的な改善手順はホームページの表示速度改善ガイドで解説しています。

これら5つを構成段階で満たしておくと、「公開後にSEO対策が必要になった」というやり直しコストが激減します。SEOをもう少し体系的に学びたい方は、ホームページSEO対策の初歩も併せて参考にしてください。

モバイルファーストの構成設計

SEO原則5で触れたモバイルファーストとCore Web Vitalsを踏まえ、ここではスマホ特有の構成判断に絞って掘り下げます。

総務省「令和7年版 情報通信白書」（2025年7月公表）によると、2024年時点でインターネット接続端末としてスマートフォンを利用した個人の割合は**74.4%**で、パソコン（46.8%）を27ポイント以上上回っています（出典: 総務省「令和7年版 情報通信白書」）。今やホームページの閲覧はスマホが主流であり、構成設計もスマホ起点で考えるのが原則です。

スマホ最適化の5つのポイント:

• ハンバーガーメニュー: グローバルナビをアイコンに格納し、画面を圧迫しない
• 縦長スクロール最適化: 横並びの情報を上から順に積み上げる構造に
• タップ領域の確保: ボタンやリンクは十分な大きさを確保する。WCAG 2.2（達成基準2.5.8）では最低24×24CSSピクセル、Apple Human Interface Guidelinesは44pt、Material Designは48dpを推奨
• ファーストビューを圧縮: スマホは縦が短いため、要点を最初に。重い画像で表示が遅れると前述のLCPも悪化します
• 電話タップ・地図リンク: 電話番号や住所はタップで電話・地図アプリへ繋がるよう設計

PCで見栄えの良いデザインを作ってからスマホ対応するのではなく、最初からスマホでの見え方を想定した構成にすることで、後から大幅な調整が不要になります。

AI検索（AIO・LLMO）に強い構成設計 — 構造化データを設計段階で組み込む

2026年の構成設計で新しく重要になっているのが、AI検索に拾われる構成です。Googleの AI Overview（AIO）や ChatGPT Search、Perplexity といった生成AI検索は、Webページの内容を要約して回答します。ここで引用されるには、人間にもAIにも理解しやすい「機械可読な構成」が必要です。

AI検索に強い構成とは、結論を先に書き、見出しを質問形にし、構造化データで内容を機械可読にした構成です。具体的な施策は次の3点で、いずれも構成段階で組み込みます。

1. 結論を先に書く（結論先出し）

各セクションの冒頭1〜2文を「〇〇とは、〇〇です」という明確な定義文・結論文にします。AI検索は段落の冒頭を要約に使いやすいため、結論を後回しにすると引用されにくくなります。

2. 見出しを質問形にする

ユーザーが検索する質問（「ホームページに必要なページは何個？」など）をそのまま見出しやFAQにすると、AI検索の回答や「他の人はこちらも質問（PAA）」に採用されやすくなります。

3. 構造化データ（schema.org）を構成段階で設計する

構造化データとは、ページの意味を検索エンジンやAIに伝えるための機械可読なマークアップ（schema.org形式）です。実装はコーディング段階ですが、どのページに何を設定するかは構成段階で決めておくと手戻りがありません。中小企業のホームページで使いやすい代表的な3種類は次の通りです。

BreadcrumbList は前述のパンくずリスト（原則2）を機械可読にしたもので、サイトマップの階層設計とそのまま対応します。FAQPage は必須8ページのFAQをマークアップするもので、検索結果やAI検索に質問と回答がそのまま引用されやすくなります。

なお、構造化データは検索順位の直接的なランキング要因ではなく、リッチリザルト（検索結果での見た目の拡張）やAIの内容理解を助ける補助的な役割です（出典: Google検索セントラル「構造化データの仕組み」）。順位を保証するものではない点に注意してください。

補足: 従来のSEO構成との関係

従来のSEO構成設計（浅い階層・内部リンク・パンくず）は、AI検索時代でも引き続き有効です。AIO対応はそれを置き換えるものではなく、「人間が読みやすい構成」を「AIも引用しやすい形」に整える上乗せだと考えると分かりやすいでしょう。シタミのようなAI生成ツールでは、これらの構造化データが自動で出力されるため、構成設計に集中できます。

リニューアル時の構成見直しチェックリスト

既存サイトをリニューアルする場合は、新規制作と違って「壊さないこと」が最優先です。

チェック項目:

1. アクセス解析で残すべきページを判断: Google Analyticsなどで過去12か月程度（季節変動を考慮）のアクセス上位ページを抽出。流入の多いページは原則残すか、リダイレクトで引き継ぐ
2. 統合・廃止するページを決める: アクセスが極端に少ない、内容が重複している、情報が古いページは統合または廃止
3. URL変更時はリダイレクトを設定: 301リダイレクトで旧URLから新URLへSEO評価を引き継ぐ。これを怠ると、検索流入が一気に消失します
4. 404ページを用意: 万が一たどり着けないURLがあった場合に、サイト内の他ページへ誘導する404ページを設計
5. 内部リンクを洗い直す: 旧URLのままになっている内部リンクをすべて新URLに置き換え
6. サイトマップを再提出: XMLサイトマップを Google Search Console に再提出
7. Search Consoleでエラーを監視: リニューアル後1〜2週間は、エラー（404や500）が増えていないかチェック

詳しい費用面はリニューアル前にホームページ制作の費用相場とホームページの月額維持費で確認しておくと安心です。

AI・ノーコードで作る時の構成設計

AIホームページ生成ツールやノーコードツールでは、業種別の構成テンプレートが用意されているのが一般的です。これを上手く使いこなすコツを紹介します。

AI・ノーコードに任せる部分

• 基本ページの雛形生成（トップ・会社概要・サービス・問い合わせ等）
• レイアウト・配色・フォントの初期提案
• 業種別の標準的な構成パターンの提示
• 構造化データ（Organization・BreadcrumbList等）の自動出力

自分で決めるべき部分

• どんなページを追加するか（業種特有のページ）
• 各ページの目的とゴール
• CTAの文言・配置
• 強み・差別化メッセージ
• お客様の声・実績の選定

つまり、「構成の骨組み」はAIに任せ、「中身」は自社で考えるという分業が現実的です。

シタミでは、業種を選ぶだけで業種別の構成テンプレートが提案され、ヒアリング型のAIとの対話を通じて中身を埋めていく流れを採用しています。サイトマップやワイヤーフレームを一から描く必要がなく、構成設計の知識がない方でも、業界標準のページ構成からスタートできます。

ノーコードの選択肢を広く知りたい方はノーコードでホームページ作成、自作する場合の手順はホームページを自分で作る方法、AI活用の全体像はAIホームページ作成ツールおすすめを参考にしてください。

保存版・ホームページ構成設計チェックリスト

ここまでの内容を、着手前にそのまま確認できるチェックリストにまとめました。そのままコピーして、Notionやスプレッドシート、Excelに貼り付けて使えます。各項目を「OK / NG」で埋めながら、自社の構成設計の抜け漏れを点検してください。各項目の詳細は本文の該当セクションを参照できます。

NGが多かった項目から優先的に着手すると、効率よく構成の完成度を高められます。

よくある質問（FAQ）

まとめ — 構成設計はHP成功の8割を決める

ホームページの構成設計は、地味に見えて成果を左右する最重要工程です。

• 構成 = 設計図: サイト全体（サイトマップ）とページ単位（ワイヤーフレーム）の2レベル
• 必須8ページ + 業種特有ページ: 9業種・目的別パターンから自社の型を選ぶ
• 作り方: サイトマップは3ステップ、ワイヤーフレームは4ステップ
• SEOとUXを両立: 浅い階層・パンくず・内部リンク・シンプルなURL・モバイルファースト + Core Web Vitals
• 2026年はAI検索対応がプラスα: 結論先出し・質問形の見出し・構造化データを設計段階から
• AI・ノーコードを活用: 構成テンプレを土台に、中身は自社の言葉で

「構成は分かったけど、実際に作るのは大変そう」と感じた方は、業種テンプレートと対話型AIで構成設計から執筆まで自動化できるシタミを試してみてください。最新のホームページデザイントレンドを踏まえた構成テンプレが用意されているので、ゼロから設計図を描く必要がありません。

構成という地図さえ正しければ、あとは情報を埋めていくだけで、成果の出るホームページに辿り着けます。最初の一歩として、まずは「自社に最低限必要なページ」を紙に書き出すところから始めてみてください。