ホームページ構成図の作成手順！基本のテンプレートやおすすめツールも解説
ホームページ制作で失敗する人の大半は、デザインより先に手をつけるべきものを飛ばしています。ホームページ制作で大切なのは、おしゃれなデザインではなく「構成（設計図）」です。
どのページに何を載せ、どう並べ、どのルートでユーザーを目的地まで案内するか。この設計図なしに制作を進めると、「作り直し」「追加費用」「公開の遅れ」というリスクがあります。
特にこれからはじめてホームページを作る方や、業者に依頼する前に全体像を整理したい担当者の方にとって、構成図の作り方を知っているかどうかで、完成後の成果が大きく変わります。
本記事では、初心者の方でも迷わず作成できるように、ホームページ構成図の作り方を基礎から解説します。
すぐに使える構成の基本テンプレートや失敗を防ぐ重要ポイント、プロも使っているおすすめ作成ツールも紹介しているので、これからホームページを作成したいと考えている人はぜひ参考にしてください。
ホームページの構成とは
ホームページ構成とは、Webサイト制作における「設計図」です。
いきなりデザインやコーディング（構築）へ着手するのではなく、まずはサイトの全体像を整理・可視化したものを指します。これが「ホームページ構成図」であり、具体的には以下3つの要素を設計します。
- どんなページを作るか（ページ一覧）
- どのページをどこに配置するか（階層）
- ユーザーをどう案内するか（導線）
すなわち、「ページ一覧＋階層＋導線」をまとめた資料こそがホームページ構成図なのです。
この設計図があいまいなまま制作を進めると、「必要なページが不足する」「ユーザーが迷子になる」などの失敗を招きかねません。それゆえ、制作フローにおいて最重要の工程といえます。
構成図作成時に、よく「サイトマップ」の語が用いられますが、Web業界では文脈により意味が異なるので注意しましょう。
本来の「サイトマップ」には、完成したWebサイトへ実装する以下2種類が存在します。
- ユーザー向け（HTMLサイトマップ）
サイト訪問者が見るための「目次ページ」 - 検索エンジン向け（XMLサイトマップ）
Googleなどのロボットにサイト構造を伝える「専用ファイル」
本記事で扱う「構成図としてのサイトマップ」は、これらとは異なり「サイトの骨組みを作る企画資料」です。両者を混同しないよう留意してください。
サイトマップの種類や作成するメリット、作り方は以下の記事で詳しく解説しています。
https://www.value-domain.com/media/sitemap-about/Webサイトの構成は、大きく以下2つの視点で作成します。
- ホームページ全体の構成（サイトマップ）
- ページ単位の構成（ワイヤーフレーム）
各項目について、次項より詳しく解説します。
サイトマップ（ホームページ全体の構成）
サイトマップとは、Webサイト全体のページ構成をまとめた「全体図」です。
トップページを頂点とし、その下へ「大カテゴリー」「小カテゴリー」と枝分かれするツリー状（階層構造）で作成します。企業の「組織図」や「家系図」をイメージしてください。
主な作成目的は、以下の3点です。
- 全体量の把握
- 情報の整理
- 抜け漏れの防止
まずはこのサイトマップで全体の形を整える作業から、ホームページ制作が始まります。
ワイヤーフレーム（ページ単位の構成）
サイトマップが「家全体の骨組み」なら、ワイヤーフレームは「各部屋の間取り図」といえます。
サイトマップで洗い出した各ページについて、「どの情報を」「どの段階で」「どこに配置するか」、具体的なレイアウトを決める設計図です。
作成段階では、色や装飾などのデザイン要素は入れません。まずは「情報の優先順位」と「配置」のみに集中し、線と文字だけでシンプルな構成案を作りましょう。
- ヘッダー・フッターの共通部分
- メイン画像（キャッチコピー）の位置
- お問い合わせボタンの場所
これらを事前に固めておけば、デザイン制作へ移行した後に「必要な原稿が入らない」「スマホでボタンが押しにくい」などの手戻りを防げます。
Webサイトの「使いやすさ」や「情報の伝わりやすさ」は、デザイン着手前の本段階でほぼ決定します。
【重要】デザインの前に「構成」が重要である3つの理由
Webサイト制作において、最も避けるべき失敗の一つが、「構成（中身）が決まらぬまま、デザイン（見た目）制作へ着手してしまうこと」です。
多くの方が「おしゃれなサイト」を目指してビジュアルを優先しがちですが、構成がおろそかであれば、いくらデザインが美しくとも成果にはつながりません。
デザインより先に構成を固めるべき理由は、以下の3点です。
- 訪問者が求めている情報を探しやすくするため
- 必要なページ数やコンテンツ量を把握するため
- 完成イメージを共有し「手戻り」を防ぐため
それぞれの理由について、詳しく解説します。
訪問者が求めている情報を探しやすくするため
Webサイトを訪れるユーザーの目的は、洗練されたデザインの閲覧ではなく、「自身の悩みや疑問を解決する情報の入手」にあります。
いくら見た目が美しくても、情報が整理されておらず配置が不明瞭であれば、ユーザーはストレスを感じて即座に他サイトへ離脱してしまうでしょう。
例として、図書館を想像してみましょう。
- ×構成が悪い状態
建物は豪華だが、本がジャンル分けされず、床へ乱雑に置かれている。 - 〇構成が良い状態
建物はシンプルだが、「歴史」「科学」などの棚が整然と並び、目的の本がすぐ見つかる。
ユーザーにとって価値があるのは、圧倒的に後者です。
「料金」「サービス内容」「お問い合わせ」など、求める情報へ迷わず到達できる導線を作ること。これこそ、デザインより先に構成を固めるべき最大の理由といえます。
必要なページ数やコンテンツ量を把握するため
構成図（サイトマップ）なしで見切り発車すると、以下のようなトラブルが頻発しかねません。
- 「制作途中でコンテンツが入りきらないと気づく」
- 「スペースが余り、内容が希薄になる」
事前に構成を作って、全体像を可視化すれば、以下のボリューム感を正確に把握できます。
- サイト全体の必要ページ数
- 各ページの文字量や画像数
- 原稿や素材の「担当者」と「期限」
これらが明確になれば、制作会社への依頼時も正確な見積もりが算出され、「想定以上の作業量による追加費用」などの予算オーバーも回避可能です。
無駄なページを削ぎ落とし、必要な情報を網羅する上でも、まずは構成図で「制作物の総量」を確定させましょう。
完成イメージを共有し「手戻り」を防ぐため
完成イメージを共有して「手戻り」を防ぐ点は、構成図を作成する現実的かつ切実なメリットです。
デザインやコーディング（構築）まで進んだ段階で、「やっぱりこのページも欲しい」「画像の配置を逆にしたい」などの修正要望を出せば、当初の倍以上の時間と追加費用がかかりかねません。
建築に例えるなら、竣工後に「キッチンを移動したい」と要望するに等しく、壁を壊す大規模な工事を要するからです。
しかし、構成図（ワイヤーフレーム）の段階であれば、修正は線を書き直すだけで済み、数分で完了します。
- ×悪い例
完成直前に「イメージと違う」と指摘され、デザインからやり直しになる。 - 〇良い例
構成段階で「ここはこうしたい」と議論し尽くし、納得してデザインへ進む。
構成図をチームや依頼主との「共通言語」とし、事前に完成イメージをすり合わせること。これこそが、無駄なコストを抑え、最短ルートでプロジェクトを成功へ導く鍵といえます。
ホームページ構成の基本パターンとテンプレート
基本的なホームページ構成のパターンとテンプレートは、以下の通りです。
- まずはこれでOK！小規模サイトの最小構成（5～7ページ）
- コーポレートサイトの構成例
- 通販サイト（ECサイト）の構成例
- 採用サイトの構成例
- サービス販促サイトの構成例
これから構成図を作成する方は、まず上記テンプレートを参考にしてください。
まずはこれでOK！小規模サイトの最小構成（5～7ページ）
「最初はどんなページを作ればいいの？」 と迷ったら、まず基本となる以下の5～7ページから始めましょう。
いきなり何十ページもある大規模サイトを目指す必要はありません。特に中小企業や個人事業主のサイトにおいて、ユーザーが求める情報は限定的です。
情報を絞り込む方が、かえってお問い合わせなどの成果につながりやすいといえます。
| 目的 | お問い合わせの増加 |
|---|---|
| 必須ページ | トップページ 商品・サービス 実績・実例 よくある質問 お問い合わせ 会社概要（余裕があれば） お知らせ・ブログ（余裕があれば） |
| 主要導線 | トップ → サービス → 実績・よくある質問 → お問い合わせ |
| 成果の目安（KPI） | お問い合わせ率※ |
※お問い合わせ率：サイトを訪れた人のうち実際に問い合わせをした人の割合。ページ構成を見直す際の基準になります。
このテンプレートは、「ユーザーの不安を解消し、お問い合わせへつなげる」点に特化した、無駄のない構成です。
| トップページ | サイトの顔。 「誰に・何を提供するサイトか」を伝えます。 |
|---|---|
| 商品・サービス | 具体的な内容や料金を提示します。 |
| 実績・実例 | 「本当に任せて大丈夫？」という不安を、 過去の実績で解消します。 |
| よくある質問（FAQ） | お問い合わせ前の細かな疑問を先回りして解消します。 |
| お問い合わせ | ゴールとなるページです。 |
| 余裕があれば | 会社概要 お知らせ・ブログ |
- トップで興味を持つ
- サービス詳細で内容を理解する
- 実績やFAQを見て信頼する
- お問い合わせをする
まずはこの「勝ちパターン」となるルートをしっかり作り込んでください。ブログや詳細な会社情報は、運用に慣れてから徐々に追加していく手法こそ、成功の秘訣です。
「この5〜7ページ構成でさっそく公開したい」という方には、とりあえずHP+Oneがおすすめです。テンプレートを選び、文章や写真を入れるだけでホームページが完成するため、構成を決めたらすぐに制作に入れます。
コーポレートサイトの構成例
企業の顔となるコーポレートサイトにおいて、最優先すべき目的は「信頼性」の獲得です。
一般消費者向けサイトとは異なり、取引先や金融機関、株主、求職者など、ビジネスに関わる多様な人々が閲覧します。「この会社は実在するのか」「取引しても安心か」など、厳しい目で見られることを前提に、信頼を証明するコンテンツを厚く配置しなければなりません。
| 目的 | 企業の信頼獲得 お問い合わせ（リード）の獲得 |
|---|---|
| 必須ページ | トップページ 会社概要 実績紹介 よくある質問 事業内容 お知らせ お問い合わせ 採用情報 プライバシーポリシー |
| 主要導線 | トップ → 事業詳細 → 実績・会社概要 → FAQ → お問い合わせ |
| 成果の目安（KPI） | お問い合わせ率 会社概要の閲覧数 |
単に会社情報を載せるにとどまらず、ユーザーが抱く「どんな実績があるか」「課題を解決してくれるか」などの疑問へ、事実で答える構成にします。
| 実績紹介 | 「論より証拠」となる最も強力な 信頼獲得コンテンツです。 |
|---|---|
| 会社概要 | 単なる住所録ではなく、 代表挨拶や理念を掲載し「企業の顔」を見せます。 |
| 採用情報 | 求職者向けですが、取引先に対しても 「人が増えている＝成長企業である」という安心感を与えます。 |
- 事業詳細でサービスに興味を持つ
- 実績・会社概要を見て、「怪しい会社ではないか」を確認・比較する
- FAQで契約等の細かな疑問を解決し、心理的ハードルを下げる
- お問い合わせをする
成果の目安として「会社概要の閲覧数」を設定しているのは、会社概要をチェックするユーザーほど、検討度合いが高いと見込まれるからです。
このルートを意識して、各ページへのリンクを配置しましょう。
会社ホームページ作成の手順や注意点は、以下の記事でも詳しく解説しています。
https://www.value-domain.com/media/howtomake-company-homepag...通販サイト（ECサイト）の構成例
通販サイト（ECサイト）における重要な考え方は、「お客様の購入までのストレスを極限まで減らすこと」と「安心感の提供」です。
一般的な企業サイトとは異なり、通販サイトは直接金銭のやり取りが発生します。そのため、法律で定められた表記や、配送・返品ルールを明記したガイドページが必須となる点が大きな特徴です。
| 目的 | 商品の購入 |
|---|---|
| 必須ページ | 商品一覧・検索結果 商品詳細（レビュー・スペック） カート・決済画面 マイページ 特定商取引法に基づく表記 ご利用ガイド（送料・支払い・返品） 会社概要 よくある質問 |
| 主要導線 | トップ/検索 → 商品詳細 → カート → 決済 |
| 成果の目安（KPI） | 購入率（CVR※） 客単価 カゴ落ち率 |
※CVR（コンバージョン率）：訪問者のうち実際に問い合わせや購入をした人の割合
ユーザーは、「このショップでカード情報や個人情報を入力しても大丈夫か」などの不安を常に抱いています。したがって、以下の「信頼と利便性」を担保するページ配置にしなければなりません。
| 特定商取引法に 基づく表記 | ネットショップ運営において 法律で設置が義務付けられている最重要ページです。 |
|---|---|
| ご利用ガイド （送料・支払い・返品） | カゴ落ち（購入直前での離脱）の最大の原因は、 「送料がいくらかかるか分からない」「返品できるか不安」なことです。 これらを分かりやすく配置することで、購入率（CVR）を高めます。 |
| レビュー機能 | 商品詳細ページには、 第三者の意見（口コミ）を掲載できる仕様にするのが一般的です。 |
ECサイトの導線は、「迷わせず、最短で決済させること」に尽きます。
- トップ/検索で欲しい商品を見つける
- 商品詳細でスペックとレビューを確認し、納得する
- カートに入れる
- 決済（会員登録）
特に成果の目安（KPI）である「カゴ落ち率」を下げるには、決済画面の入力項目を最小限にするなど、構成だけでなくシステム面の工夫も併せて検討しましょう。
https://www.value-domain.com/media/wordpress-ecsite/採用サイトの構成例
採用サイトの最大目的は、単なる応募数の確保ではありません。「自社にマッチした人材からの応募獲得」と「入社後のミスマッチ防止」にあります。
給与や勤務地などの「条件」のみを見て応募する層は、より好条件の他社があれば早期離職するリスクも低くありません。したがって、社風や社員などの「環境」情報を充実させ、企業カルチャーへの共感を促す構成が求められます。
| 目的 | 人材の応募（エントリー）獲得 ミスマッチの防止 |
|---|---|
| 必須ページ | トップメッセージ（代表挨拶） 社員インタビュー 働く環境・福利厚生 数字で見る〇〇（データ紹介） 募集要項 選考フロー よくある質問 エントリーフォーム |
| 主要導線 | トップ → 社員インタビュー・環境 → 募集要項 → エントリー |
| 成果の目安（KPI） | 応募率（CVR） エントリーフォーム到達率 |
求職者は、「実際にどんな雰囲気か」「自分でもやっていけるか」などの不安と期待を抱いています。それらの感情へ寄り添うコンテンツが必須です。
| 社員インタビュー | 「1日のスケジュール」や「やりがい」を語ってもらうことで、 入社後の自分をリアルにイメージしてもらいます。 |
|---|---|
| 数字で見る〇〇 （データ紹介） | 「有給取得率」「平均残業時間」など、 聞きにくいけれど気になる情報をデータで公開します。 透明性をアピールすることで、企業への信頼度を高めます。 |
採用サイトの導線は、「共感」から「納得」への誘導が鉄則といえます。
- トップメッセージや社員インタビューで、「いい雰囲気」「楽しそう」と共感を得る
- 募集要項や福利厚生で、条件面を確認・納得してもらう
- エントリーへ進む
いきなり「募集要項」を提示せず、まずは「働く環境」を見せてファン化してから、応募ボタンへ導く流れを作ってください。
サービス販促サイトの構成例
サービス販促サイトは、会社の顔であるコーポレートサイトとは異なり、「特定の商品やサービス販売」に特化した、いわば営業マンのような役割を担います。
したがって、構成も「会社紹介」より「サービスの魅力」や「導入効果」を最優先で伝える、攻めの設計にしなければなりません。
| 目的 | 見込み客の獲得 無料トライアル・資料請求の増加 |
|---|---|
| 必須ページ | サービス紹介 料金プラン 導入事例 利用の流れ よくある質問 資料請求・お問い合わせフォーム 運営会社情報 |
| 主要導線 | トップ → 特徴・料金 → 導入事例 → 資料請求・無料体験 |
| 成果の目安（KPI） | 資料請求数・無料トライアル申込み率 CPA（顧客獲得単価） |
※CPA（顧客獲得単価）：1件の問い合わせや購入を得るためにかかった広告・施策の費用。
この型の最大の特徴は、「いきなり購入を迫らない」点にあります。特にBtoB商材や高額サービスの場合、Webサイト完結での即決は稀だからです。
ゆえに、本契約の手前に「ハードルの低いゴール」を用意する構成が鉄則といえます。
| 資料請求・ 無料トライアル | いきなり「お問い合わせ」はハードルが高いため、 まずは見込み客の情報を獲得するための 中間ゴール（マイクロコンバージョン※）ポイントを設けます。 |
|---|---|
| 導入事例 | スペック表だけでは伝わらない、 「実際に使うとどうなるか？」を伝え、 検討中の背中を押すための最重要コンテンツです。 |
※マイクロコンバージョン：問い合わせや購入（=最終的なゴール）に至る前の小さな行動のこと。
勝ちパターンの動線設計では、ユーザーを「興味」から「行動」へ段階的に引き上げるルートを作りましょう。
- トップ・サービス紹介で、「自社の課題が解決できそう」と興味を喚起する
- 料金プランで予算感を確かめてもらう
- 導入事例を見て、「同業他社も利用しており安心」と確信へ導く
- 資料請求・無料体験へ誘導する
KPIとして「CPA（1件の顧客獲得コスト）」を意識し、離脱が多いページの分析や、事例・FAQを充実させる運用が欠かせません。
構成図が固まったら、次のステップは「実際にサイトを立ち上げる環境を整えること」です。どのツールで作るにせよ、サーバー選びは早めに済ませておくと制作がスムーズに進みます。
コアサーバーのCORE-Xプラン（月額390円～※）であれば、サーバー・ドメイン同時申し込みで独自ドメインが永久無料になる上、WordPressの自動インストールまで申し込みと同時に完了できます。
※36ヶ月契約時/ドメイン永久無料：サーバー・ドメイン同時申し込みが条件
サイト構成（サイトマップ）の作成手順【4ステップ】
サイト構成（サイトマップ）の作成手順は、大きく分けて以下の4ステップです。
- 目的とターゲットを明確化する
- 必要なページを洗い出す
- ユーザー導線を意識してカテゴリー分けする
- ページの階層を決める
これから作成する場合、上記の流れに沿って進めれば、失敗のリスクを大幅に低減できます。
各ステップについて、詳しく解説します。
目的とターゲットを明確化する
サイト構成を作成する際、いきなりExcelやツールで図を描き始めるのは避けましょう。まずは、ホームページの「ゴール」と「ターゲット」の言語化から始めます。
サイトの目的とターゲットが曖昧なままでは、制作途中に「あれもこれも載せたい」と方向性がブレてしまい、結局誰にも刺さらないサイトになりかねないからです。
具体的には、以下3点を書き出した「企画メモ」を作成してください。これがすべての判断基準となります。
- サイトの目的
「誰に」「何を提供し」「最終的にどのような行動を促すか」を1行で言語化します。
（例：大阪市で腰痛に悩む30代女性へ、当院の痛くない整体を認知させ、Web予約につなげる） - ターゲット像と検索意図（ペルソナ）
具体的な人物像と、検索窓へ打ち込みそうなキーワードを予想しましょう。
（例：デスクワーク中心の会社員。「大阪 整体 おすすめ」などで検索し、土日の営業時間を気にしている） - 目標数値（KPI）
何をもってサイト運営の「成功」とするか、具体的な数字を決定します。
（例：月間のお問い合わせ数10件）
遠回りに見えても、初めに必ず「軸」を定めておくこと。それこそが手戻りを防ぎ、成果への近道です。
必要なページを洗い出す
次に、ステップ1で決めた目的を達成するために必要なページを、思いつく限りすべて書き出していきます。
ここでは階層や順番を気にする必要はありません。「お問い合わせページが必要」「社長挨拶も載せたい」など、箇条書きでアイデアを出し切りましょう。
具体的には、Excelやメモ帳へ、必要なページタイトルを縦に羅列してください。
洗い出しの際、初心者が陥りやすい失敗として「1ページへの過度な情報詰め込み」が挙げられます。
例えば、「サービス紹介」ページ内に、3つの異なる事業内容や料金表、お客様の声まで盛り込めば、縦に長すぎるページとなってしまいます。これではユーザーが目的の情報を見つけられず、離脱を招きかねません。
- 「サービスA」
- 「サービスB」
- 「料金一覧」
上記のように、1ページにつきテーマを1つに絞るよう意識してください。
この「1ページ1テーマ」の徹底こそが、ユーザーや検索エンジンに好まれる構成への第一歩です。
ユーザー導線を意識してカテゴリー分けする
ページリストが揃い次第、次はそれらを関連性の高い項目でグループ化し、情報の整理整頓をしましょう。
スーパーマーケットの売り場が「野菜」「肉」「日用品」と分かれているように、Webサイトでも「親カテゴリー（大見出し）」を作り、その下へ詳細ページを配置します。
ここで重要な点は、単なる分類にとどまらず、「ユーザーが次に何を見たいか（導線）」を想像して分けることにあります。
- カテゴリー案（グルーピング）
フォルダ分けするように整理した構成案のイメージ。
（例：「代表挨拶」「沿革」「アクセス」を「会社概要」カテゴリーへ分類） - 導線メモ（主要ルート）
ユーザーの動き（遷移）を想定したメモ。
（例：「サービス詳細」閲覧者は、次に「料金」か「事例」が気になるはず。同カテゴリー内に入れ、回遊性を高める）
グルーピングは機械的な作業ではなく、ユーザー心理を先読みしたカテゴリー決定が求められます。
例えば、「お客様の声」ページを独立させるか、あるいは「サービス紹介」カテゴリーへ含めるか。
ユーザーが「サービス内容を知った直後に評判を確認したい」心理であれば、同カテゴリーへの集約こそ、クリックの手間を省く親切な設計です。
この「情報の棚整理」の工程を経て、ユーザーが直感的に求める情報へ到達できる構造を作り上げてください。
ページの階層を決める
最後に、ステップ3でグループ化したカテゴリーを、トップページ頂点の「ツリー状（樹形図）」へ並べ替え、全体構造を確定させます。
どのページを「親（大見出し）」や「子（詳細）」に設定するか。この親子関係を線で結び可視化したものこそ、サイトマップの完成形です。
階層決定の際は、「サイト共通メニュー（グローバルナビゲーション）への採用」を意識して配置しましょう。
一般的に、トップページ直下の「親カテゴリー」が、そのままヘッダーのメニュー項目になります。
全ページをメニューへ並べると視認性が下がるので、「会社概要」「サービス紹介」「お問い合わせ」など、主要な親ページのみを残すのが鉄則です。
ここまで出来上がれば、ホームページの「骨組み」は完成といえます。あとはこの設計図を元に、各ページの中身（ワイヤーフレーム）作成へ進んでください。
ホームページ構成図を作成する際のポイント・注意点
ホームページ構成図を作成する際のポイント・注意点は、以下の3つです。
- 業界の標準的な構成を守る
- 1ページ1テーマの原則を徹底する
- 重要なページは「2クリック以内」に配置する
これからホームページ構成を作成するなら、上記のポイントを意識するようにしてください。
以下より、それぞれの注意点を詳しく解説します。
業界の標準的な構成を守る
ホームページ制作時、他社との差別化を意識するあまり、構成や配置まで「オリジナリティ」を求めるのは危険です。
Webの世界には、ユーザーが無意識に抱く「メンタルモデル（こうあるべきとの思い込み）」が存在します。
- 会社のロゴは「左上」にあり、クリックするとトップに戻る
- メニュー（ナビゲーション）は「上部」または「右上」にある
- お問い合わせボタンは「一番目立つ右上」にある
- スマホのメニューは「三本線（ハンバーガーメニュー）」である
これらは、多くのユーザーが他サイトを利用する中で学習した「業界の標準ルール」といえます。
もし、差別化を狙ってロゴを右下に置いたり、メニューを隠したりすれば、ユーザーは「使い方がわからない」とストレスを感じ、コンテンツを読む前に離脱しかねません。
構成やレイアウトに関しては、「奇をてらわず、ユーザーが使い慣れた形」を守ってください。これこそ、ストレスなく情報を届ける最短ルートです。個性や差別化は、構成ではなく「文章」や「写真のデザイン」で表現しましょう。
なお、業界標準を知る一番の方法は、同業他社のサイトを実際に見ることです。
デザインのプロも競合調査は欠かしません。「真似る」のではなく、「なぜそのレイアウトが使われているか」を読み解く視点で参考にしましょう。
1ページ1テーマの原則を徹底する
Webサイト構成を考える際、最も意識すべき鉄則は「1ページにつき、テーマ（主題）を1つに絞ること」です。
あれもこれもと複雑に情報を詰め込みすぎると、結局「何のページか」が不明瞭になり、成果が出にくいサイトになりかねません。理由は大きく2つ挙げられます。
- SEO（検索エンジン対策）で有利に働く
Googleなどの検索エンジンは、「ページが何のトピックについて書かれているか」を読み取り、評価します。例えば、「カフェ店舗情報」と「通販クッキー紹介」が混在していると、検索エンジンは表示させるべきキーワードを判断できず、順位も上がりきりません。
「カフェ」「通販」と別ページに分ければ、それぞれのキーワードで上位表示されやすくなるのです。 - ユーザーの迷いをなくす（ユーザビリティ向上）
ユーザーは基本的に「自分に関係のある情報」しか読みたくありません。興味のない情報が続けば、スクロールを面倒に感じて離脱するリスクが高まります。
構成図作成時、もし「内容が盛りだくさんになりそうだ」と感じたら、思い切って「子ページ」への分割を検討してください。ページを分けることで、一つひとつの内容が濃くなり、専門性と説得力が増すメリットも生まれます。
重要なページは「2クリック以内」に配置する
ユーザーは、私たちが想像する以上に「せっかち」です。目的の情報到達までに何度もクリックを求められると、ストレスを感じて途中離脱しかねません。
サイト構成時は、「全ページへトップから『2クリック以内』で到達できる状態」を理想に設計してください。
| 0クリック | トップページ |
|---|---|
| 1クリック | カテゴリー（一覧）ページ |
| 2クリック | 詳細ページ |
特に、お問い合わせや主力商品詳細など、「収益に直結する重要ページ」が、3クリック以上を要する深い階層へ埋もれぬよう心がけましょう。
仮に階層が深くなる場合、カテゴリー分けを見直すか、全ページフッター（最下部）から直接リンクを張るなど、物理的距離（クリック数）を縮める工夫が欠かせません。
これはユーザーへの配慮だけでなく、Googleの検索エンジンロボットに見つけてもらいやすくする上でも、極めて重要なポイントです。
見やすいページ構成（ワイヤーフレーム）を作る必須パーツ5つ
見やすいページ構成（ワイヤーフレーム）を作る際の必須パーツは、以下の5つです。
- ヘッダー
- メインビジュアル（ファーストビュー）
- メインコンテンツエリア
- クロージング
- フッター
どのようなページを作成する場合でも、上記5つのパーツは欠かせません。
次項より、各パーツの詳細を解説しましょう。
ヘッダー
ヘッダーはWebサイトの最上部に位置し、基本的に全ページ共通で表示される「サイトの看板」兼「羅針盤（ナビゲーション）」となる部分です。
ユーザーが「今どこにいるか」「次はどこへ行くか」を判断する上で最も基本的なパーツであり、ワイヤーフレーム作成時は以下3点の配置が定石といえます。
- ロゴマーク（左上）
サイトの顔です。クリックでトップページへ戻れるようリンクを設定するのが、Webデザインの共通ルールになっています。 - グローバルナビゲーション（メニュー）
「会社概要」「サービス紹介」など、主要ページへのリンクを横並びに配置します。項目数が多いと選びにくくなるので、5～7個程度に絞るのがコツです。 - お問い合わせボタン（CTA）
ヘッダー内で最も目立つ位置（PCなら右上）へ、アクセントカラーのボタンを配置しましょう。ユーザーが「いつでも連絡できる」状態を作ることこそ、機会損失を防ぐ鍵です。
スマートフォンの場合、メニューをすべて横に並べると画面からはみ出します。そこで、三本線のアイコン（ハンバーガーメニュー）内へメニューを収納し、ロゴとCTAボタンのみを表に出すレイアウトが一般的です。
ユーザーを迷わせず、最短距離でゴールへ導く「頼れる案内役」としてヘッダー部分を設計してください。
メインビジュアル（ファーストビュー）
メインビジュアルはヘッダー直下に位置し、ページ内で最大の画像や動画、キャッチコピーを表示するエリアです。
Webサイトにおいて、メインビジュアルは「お店の看板」や「雑誌の表紙」に相当します。ユーザーはページを開いてわずか数秒で「自分に役立つサイトか」を見極め、不要と判断すれば即座に閉じてしまうのです。
したがって、ワイヤーフレーム作成時は以下2点を明確に配置し、一瞬で心を掴む工夫が欠かせません。
- キャッチコピー（言葉）
「誰に」「何を提供し」「どうなれるか（ベネフィット）」を短く伝えます。おしゃれな言葉より、分かりやすさを優先してください。 - メイン画像（視覚）
商品写真や利用者の笑顔など、言葉を補完し「利用後のハッピーな未来」が直感的に伝わる画像枠を確保しましょう。
ユーザーにスクロールを促し、続きを読ませられるか否かは、このメインビジュアルの訴求力にかかっています。
メインコンテンツエリア
メインコンテンツエリアとは、ヘッダーとフッターに挟まれた、ページの実質的な「中身」を表示する領域です。ユーザーが最も時間をかけて見る場所であり、サイトマップで定めた「伝えたい情報」を具体的に配置します。
ワイヤーフレーム作成時は、以下2つの視点でレイアウトを決めましょう。
- カラム（列）構成の決定
「サイドバー（横メニュー）」を設置する「2カラム」か、なくして画面一杯に使う「1カラム」かを検討します。- 1カラム（主流）
スマートフォン表示との親和性が高く、視線が分散しないので、文章や写真をじっくり読ませたい場合に最適です。 - 2カラム
情報量が多いニュースサイトやブログなど、他記事への回遊を促したい場合に向いています。
- 1カラム（主流）
- 「Zの法則」「Fの法則」の意識
人の視線には、左上から右下へ「Z」を描く、あるいは左から右へ何度も往復する「F」のように動く習性があります。
この習性を利用し、「重要な画像や見出しは左上」「読み終わった右下に次のボタン（CTA）」などと配置すれば、ストレスのない自然な視線誘導が可能です。
読みやすさを左右する骨組みこそ、デザイン着手前の本段階でしっかりと設計してください。
クロージング
クロージングとは、本文を読み終えた直後、つまりユーザーの関心や納得感が最も高まったタイミングで配置する「最後の一押し」エリアです。
ここまでスクロールしたユーザーを、「申し込み」や「お問い合わせ」などのゴールへ確実に誘導する重要な役割を担います。
もし明確な導線がなければ、ユーザーは「で、どうすればいいの？」と迷い、ブラウザの「戻る」ボタンで他社サイトへ去りかねません。
これを防ぐには、ワイヤーフレーム上で以下の要素を配置し、「情報の行き止まり」をなくすことが大切です。
- 目立つCTAボタン
ヘッダーのボタンより大きく、クリックしやすいサイズで「お問い合わせはこちら」などを配置します。 - 電話番号
緊急度の高い層や、入力を嫌うスマホユーザーへ配慮し、タップで発信可能な番号を掲載しましょう。
「読ませて終わり」ではなく、「読んだ後にどう行動すべきか」を明確に提示すること。これこそが、Webサイトの成果（コンバージョン）を最大化する鍵です。
フッター
フッターはページ最下部に位置し、全ページ共通で表示される「サイトの土台」エリアです。
メインコンテンツやCTAでアクションに至らなかったユーザーも、最終的にここを見て「会社概要はどこか」「他に関連ページはないか」と情報を探します。
したがって、ワイヤーフレーム作成時は、ユーザーの取りこぼしを防ぐ「総合案内所」として、以下要素の配置が定石といえます。
- サイトマップ（リンク集）
ヘッダーに入りきらない詳細ページを含め、サイト内リンクを一覧表示します。迷子の救済だけでなく、検索エンジン（SEO）へ構造を伝える効果も期待できます。 - 信頼性情報
会社概要やアクセス、プライバシーポリシーなど、運営元の実態やルールを示すリンクを設置しましょう。 - コピーライト（著作権表示）
ページ最下端へ、著作権を示す「©」マークと発行年、会社名を記載してください。
フッターは地味に見えますが、情報の整理状況で「しっかり運営されている会社か」を判断されかねません。ゆえに、手を抜かない設計が求められます。
ただし、どれだけ丁寧にワイヤーを設計しても、ページの表示が遅ければユーザーは読む前に離脱してしまいます。
表示速度を重視するなら、コアサーバーのCORE-Xプラン（月額390円～※）が有力な選択肢です。高速な処理性能とWordPressの自動インストール対応で、制作から公開までをスムーズに進められます。
※36ヶ月契約時/ドメイン永久無料：サーバー・ドメイン同時申し込みが条件
スマホでも見やすいレイアウトと情報設計のコツ
現代のWebサイト制作において、スマートフォン（スマホ）での見やすさは、パソコン（PC）以上といっても過言ではありません。多くの業界で、スマホのアクセス比率が半数以上を占めるとされています（※業種・サイトにより異なります）。
PCサイトを単に縮小表示するのではなく、「指での操作」「縦長画面」など、スマホ特有の性質に合わせた設計が求められます。具体的なコツを3つ紹介しましょう。
- 基本は「1カラム」レイアウト
スマホは画面の横幅が狭いので、全情報を上から下へ一直線に並べる「1カラム」が鉄則です。 - 指で押せる「サイズ」と「距離」を確保する
スマホ操作の主体は指です。ボタンやリンクが小さすぎる、あるいは隣接しすぎていると、「押せない」「押し間違えた」などのストレスを与えかねません。 - 「アコーディオン」や「メニュー」で情報を隠す
画面の小さいスマホですべての情報を初期表示すれば、ページが縦に長くなりすぎます。優先度の低い補足情報などは、タップで開く「アコーディオン」やハンバーガーメニューへ格納し、必要な時だけ開示できるよう整理してください。
「画面内の限られたスペースを、いかに有効に使うか」。この引き算の思考こそ、スマホサイトの使いやすさを左右します。
ホームページ構成図作成におすすめのツール5選
ホームページ構成図作成におすすめのツールは、以下の5つです。
ホームページ構成図の作成にどのツールを使えばいいか迷ってしまう人のために、目的別の選び方を以下の表にまとめました。
| 1人でサクッと作りたい | Microsoft Excel マインドマップツール |
|---|---|
| チームで共有したい | Figma Cacoo |
| 提案資料にしたい | Microsoft PowerPoint |
| UI設計まで行いたい | Figma |
以下より、各ツールの詳細を解説します。
Microsoft Excel【リストや情報の整理】
Microsoft Excelはビジネス現場で最も普及しており、誰もが操作に慣れている点が最大の強みです。
Excelは、「1人でサクッと作りたい」というニーズに最適といえます。新しいデザインツールの学習コストがかからず、即座に構成案作りへ着手できるのも魅力でしょう。
特に、ワイヤーフレーム（絵）を描く前段階、「情報の整理」において圧倒的なパフォーマンスを発揮します。
- ページ一覧表（ディレクトリマップ）の作成
「ページ名」「URL」「タイトルタグ」などを横一列に管理するリスト作成に適しています。行の入れ替えや追加も容易で、大規模サイトの全容把握に役立ちます。 - 階層構造の可視化
セルのマス目（罫線）を利用して階段状に配置すれば、サイトのツリー構造（親子関係）も簡単に表現可能です。
専用のデザインツールを持たないが、まずは一人で情報を整理したい、あるいは社内・チームで「必要なページ」を気軽にすり合わせたい。そんな時は、まずExcelでのリスト化から始めましょう。
Microsoft PowerPoint【配置やラフの作成】
プレゼンテーションソフトとしておなじみのPowerPointですが、実は「ワイヤーフレーム（画面構成図）」作成においても、非常に優秀なツールです。
多くのビジネスパーソンが使い慣れているので、新しい操作を覚える必要はありません。「白いスライド」へ四角形やテキストボックスを並べるだけで、直感的にレイアウトを作成できます。
- クライアントへの提案に
作成した構成案をそのままスライドショーとして提示できるので、画面遷移のイメージ共有もスムーズです。 - 修正のやり取りに
専用のデザインソフトとは異なり、クライアント側でも「文章を変えたい」などの修正作業が容易な点は、大きなメリットといえます。
プロのデザイナーへ依頼する前の、「手書きメモを清書する」感覚で、ざっくりとした配置やラフイメージを形にするのに最適なツールでしょう。
Microsoft PowerPointの公式サイトはこちら＞＞
マインドマップツール（Xmindなど）【階層整理】
Xmindなどのマインドマップツールは、頭の中にあるアイデアを「中心」から放射状に広げる思考整理ツールですが、実は「サイトマップ（階層構造図）」作成とも驚くほど好相性です。
チームでの共有より、まずは「1人でサクッと作りたい」初期段階のブレインストーミングに適しています。
- 直感的に操作したいとき
「Enterキー」で同階層、「Tabキー」で下層ページを追加など、キーボード操作だけでサクサクとツリー構造を作成可能です。 - 自由に配置換えをしたいとき
「ページを別カテゴリーへ移したい」などの変更も、枝（ブランチ）をドラッグ＆ドロップするだけで完了します。
デザインやレイアウトの検討前に、まずはマインドマップツールで「必要なページ」や「階層配置」など、サイトの骨組み（論理構造）を固めましょう。
Figma【本格デザイン設計】
Web制作の現場において、現在事実上の業界標準となっているのがFigmaです。
ブラウザ上で動作するので、MacやWindowsなどのOSを問わず利用可能。ワイヤーフレーム（構成図）作成から、最終的なデザイン（UI設計）までシームレスに完結できる点が最大の強みといえます。
- UI設計まで完結させたい場合
ExcelやPowerPointが「四角い箱」を並べるのに対し、Figmaは当初より「Webサイトのピクセル単位」で設計できます。構成案をなぞってデザイン化する二度手間もなく、フォントや余白もブラウザ上の見た目そのままで作成可能です。 - チームで共有したい場合
Googleドキュメントのように、1つのファイルを複数人で同時編集できます。「ディレクターが構成を作り、デザイナーが調整する」などのリアルタイム連携により、修正のやり取りにかかる時間を大幅に削減できるでしょう。
「構成だけでなく、クリックして画面遷移する『プロトタイプ』まで作り込みたい」本格的なプロジェクトでは、迷わずFigmaを選んでください。
Cacoo【共有・共同編集】
Cacooはヌーラボ（Nulab）が提供する日本発のクラウド型作図ツールであり、特に「チームでの共同作業」への特化が最大の特徴です。
「チームで共有したい」ニーズに対応しており、複数人によるリアルタイム編集やコメント機能が充実しています。
- リアルタイム共同編集
Googleドキュメントのように、遠隔地のメンバー同士でもブラウザ上で同時にワイヤーフレームを編集可能です。「そのボタン、もう少し右に」などの会話をしながら、目の前で図が出来上がるライブ感は、メール連絡にはないスピード感を生み出します。 - 豊富なテンプレート
Webサイト用ワイヤーフレームに加え、フローチャートやネットワーク図など、ビジネス用テンプレートも多種多様。ドラッグ＆ドロップだけで整った図の作成が容易です。
Figmaほど高機能なデザイン機能は不要だが、Excelよりも直感的に、かつチームで相談しながら構成を固めたい。そんなニーズに最適なツールといえます。
ホームページ構成に関するQ＆A
ホームページ構成に関する、よくある質問は以下のとおりです。
- ホームページ構成図のテンプレートはある？
- サイト構成図を自動生成する方法は？
- 無料でWebサイトを構築できるサイトは？
- Webサイト構築にかかる費用相場は？
以下より、それぞれの疑問を詳しく解説します。
ホームページ構成図のテンプレートはある？
インターネット上では、多くのホームページ構成図テンプレートが無料で配布されています。
一から枠線を作る単純作業に時間を費やすよりも、既存テンプレートを賢く活用し、本質的な「構成の検討」へ時間を割きましょう。
以下のツールなら、「sitemap」や「組織図」のテンプレートを選ぶだけで、即座にツリー構造図を利用可能です。
ただし、テンプレートはあくまで「汎用的な枠」に過ぎません。空欄を埋める行為自体が目的化しないよう、自社サイトのゴールに合わせて項目を増減させるなど、柔軟にカスタマイズしてください。
サイト構成図を自動生成する方法は？
サイト構成図を自動生成するには、ChatGPTやGemini、Claudeなどの「生成AI」活用が最も手軽です。
「〇〇（業界名）のコーポレートサイトに必要なページをリストアップして」と指示するだけで、一般的な構成案が数秒で生成されます。
さらに「マークダウン形式」で出力し、Xmindなどのマインドマップツールへ貼り付ければ、自動的にツリー構造図として展開されるので、手作業で箱を作る手間も省けます。
ただし、自動生成された図はあくまで「たたき台」に過ぎません。最終的には「自社の戦略」に応じて、人の手による調整を忘れないでください。
無料でWebサイトを構築できるサイトは？
「サーバー契約」や「HTMLの知識」がなくとも、ブラウザ上で簡単かつ無料でWebサイトを作成できるサービス（ノーコードツール）が存在します。代表例は以下の3つです。
ただし、ビジネス利用では注意を要します。無料プランの多くには、以下のような制限（デメリット）があるからです。
- 独自ドメイン不可
URLが「https://〇〇.wixsite.com」のような借り物の住所になります。 - 広告表示
自社サイト内へ、運営会社の広告バナーが自動挿入されてしまいます。 - 機能制限
お問い合わせフォーム数やデータ容量に上限が設けられています。
趣味のブログや期間限定イベント用なら無料プランでも十分でしょう。しかし、「会社の顔」であるコーポレートサイト制作ならば、社会的信用やSEO集客の観点から、有料プランへの加入、もしくはレンタルサーバーとWordPressによる構築を強く推奨します。
会社ホームページ作成の手順は、以下の記事でも詳しく解説しています。
Webサイト構築にかかる費用相場は？
Webサイトの構築費用は、「依頼先」と「目的（規模）」により、数万円から数百万円まで大きく変動します。
参考までに、依頼先ごとの目安は以下の通りです。
| 自分で作成 （WordPressなど） | 約3万円～ （サーバー・ドメイン代や有料テーマ代のみ） |
|---|---|
| フリーランス・個人に依頼 | 10万円～20万円程度 |
| 中小規模の制作会社に依頼 | 30万円～100万円程度 |
| 大手制作会社に依頼 | 100万円～300万円以上 |
また、サイトの目的によっても相場は異なります。
例えば、1ページ完結型の「LP（ランディングページ）」なら10～30万円程度で制作可能です。一方、決済機能を要する「ECサイト」やページ数の多い「大規模サイト」では、システム開発費が加算されるので、50万円～200万円以上の予算が見込まれます。
「まずは名刺代わりのサイト」か、「売上に直結する高機能サイト」か。要望次第で最適な依頼先と予算感が変わる点を、あらかじめ把握しておいてください。
ホームページ作成費用の相場は、以下の記事でも詳しく解説しています。
https://www.value-domain.com/media/homepage-cost/まとめ：ホームページ構成図を作成して全体像を把握しよう
ここまで、ホームページ構成図の作成手順や基本テンプレート、おすすめツールを解説しました。
ホームページ制作において、いきなりデザインやコーディングから着手するのは、設計図なしで家を建てるようなものです。
まずは紹介した手順で「構成図」や「ワイヤーフレーム」を作成し、サイトの全体像とゴールを明確にしましょう。骨組みさえしっかりしていれば、ユーザーにとって使いやすく、成果の出るWebサイトへの道のりはぐっと縮まります。
構成図が固まれば、次は実際にサーバーを用意し、サイトを公開・運用するフェーズです。
どれだけ良い構成図を作っても、サイトの表示が遅ければユーザーは離脱してしまいます。
コアサーバーCORE-Xプラン（月額390円～※36ヶ月契約時）なら、サイト運営に必要な環境がこれ一つで整います。
- 独自ドメイン永久無料（サーバー・ドメイン同時申し込みで）
- ドメイン同時申し込みでWordPress自動インストール
- 次世代Webサーバー「LiteSpeed」採用により、表示速度も安心
コストを抑えながら、高速で、すぐ公開まで進められる環境が月額390円から。構成図を作ったら、あとは動かすだけです。
ドメインの提供開始から20年。
その経験をもとにIT（ドメイン・サーバー・WordPress・セキュリティ...etc）の知識はもちろん、ここでしか見れない役立つ情報やコンテンツを発信するチームです。
目次へ