AIでホームページの構成案を作る方法｜サイトマップからワイヤーフレームまで、プロンプト例つき

ツールを選んだのに、手が止まってしまう

「無料でホームページを作るなら？2026年版おすすめサービスとAI作成機能の比較」で、無料で使えるホームページ作成サービスを紹介しました。

ただ、サービスを選んで登録したあとに、こんなところで手が止まってしまう方はとても多いです。

トップページに何を書けばいいか分からない
ページをいくつに分ければいいか分からない
テンプレートを選んだけど、自分の内容に当てはめられない

最近はAIがサイトを自動で作ってくれるサービスも増えましたが、「何を伝えたいか」がはっきりしていないと、AIが作ったサイトもどこかぼんやりしたものになってしまいます。

そこで今回は、サイトを作りはじめる前の「構成案」を、AIと一緒に作る方法を紹介します。
例として、これまでの記事にも登場した「地域の電気屋さん」のホームページを作る想定で進めていきます。

今回の記事の目的

ホームページの「構成案」とは何かを知る
対話型AIで構成案を作る手順を知る
AIの案をそのまま使わないためのチェックポイントを知る

この記事で紹介する方法は、ChatGPT・Claude・Geminiなど、どの対話型AIでも使えるように書いています。
普段使っているものでそのまま試してみてください。

そもそも「構成案」とは

ホームページの構成案は、家を建てるときの間取り図のようなものです。
いきなり家具を買いに行かないのと同じで、ホームページも先に「どこに、何を置くか」を決めておくと、そのあとの作業がぐっとラクになります。

構成案は、大きく3つに分けて考えると分かりやすいです。

名前	内容	家でいうと
サイトマップ	どんなページがあるか（ページの一覧）	部屋の数と種類
ページ構成	各ページに何を、どの順番で載せるか	部屋ごとの家具の配置
ワイヤーフレーム	ページのレイアウトを線で描いたもの	間取り図

この3つを、AIに手伝ってもらいながら順番に作っていきます。

AIで構成案を作る5つのステップ

ステップ1：AIに質問してもらって、情報を整理する

最初のコツは、いきなり「構成案を作って」と頼まないことです。
情報が少ないまま頼むと、AIはどこにでもありそうな、一般的な案を出してきます。

そこで、まずはAIに「必要な情報を質問して」と頼みます。

あなたはWeb制作のディレクターです。
これから私のお店のホームページの構成案を一緒に作りたいので、
構成案を作るために必要な情報を、私に1つずつ質問してください。
質問は全部で10個以内にしてください。

お店の概要：[名古屋市内の家族経営の電気屋さん。家電の販売と修理、エアコン工事をしている]

すると、AIから「主なお客さんはどんな人ですか？」「ほかのお店と比べて強みは何ですか？」「ホームページを見た人に、最終的に何をしてほしいですか？」といった質問が返ってきます。

答えていくうちに、自分のお店の強みや、ホームページの目的が自然と整理されていくのがこの方法のいいところです。
最後に、次のように頼んでまとめてもらいましょう。

ここまでの回答を、ホームページ制作の「要件メモ」として箇条書きでまとめてください。

ステップ2：サイトマップを作る

要件メモができたら、ページの一覧（サイトマップ）を作ってもらいます。
ここでは「何ページまで」などの条件を伝えるのがポイントです。たとえばJimdoの無料プランならページ数は5ページまでなので、その範囲で考えてもらいます。

上の要件メモをもとに、ホームページのサイトマップを作ってください。
条件：
・全部で5ページ以内
・それぞれのページの名前と、そのページの役割を1行で書く
・見た人に一番してほしい行動は「電話かフォームで問い合わせること」

AIの回答例は、たとえばこんな形です。

1. トップページ … お店の強みと対応エリアを伝え、問い合わせにつなげる
2. サービス紹介 … 家電販売・修理・エアコン工事の内容と料金の目安
3. 施工事例 … エアコン工事などの実例を写真つきで紹介
4. お店について … 家族経営の店主紹介、店舗情報、アクセス
5. お問い合わせ … 電話番号、営業時間、問い合わせフォーム

この時点で「施工事例の写真は用意できないな」など、現実に合わないところがあれば遠慮なく伝えて直してもらいましょう。

ステップ3：ページごとの構成を作る

次に、ページの中身を考えます。まずは一番大事なトップページからです。

トップページの構成を、上から順番に考えてください。
それぞれのブロックについて、
・見出しの案
・伝えること
・ボタンやリンクがあればその内容
を書いてください。スマホで見る人が多い前提でお願いします。

回答例はこんな感じです。

1. メインビジュアル
   見出し：「家電のことなら、まちの電気屋さんへ」
   伝えること：地域密着、すぐ駆けつける
   ボタン：電話する／問い合わせる
2. お悩み別の入り口
   見出し：「こんなときはご相談ください」
   伝えること：エアコンが動かない、家電の買い替え、取り付け工事
3. 選ばれる理由（3つ）
4. サービス紹介への案内
5. 施工事例（新着3件）
6. 対応エリアと営業時間
7. お問い合わせ（電話番号を大きく）

「スマホで見る人が多い」「電話の問い合わせが多い」など、自分のお店ならではの事情を伝えると、案がぐっと具体的になります。

ステップ4：ワイヤーフレームにする

ページ構成ができたら、レイアウトの形にしてみます。方法は大きく3つあります。

方法1：文字で図を描いてもらう

一番カンタンなのは、AIに文字（テキスト）で図を描いてもらう方法です。

トップページのワイヤーフレームを、スマホ表示を想定して
テキストの図（罫線や記号）で描いてください。

┌──────────────────┐
│ ロゴ         ☰ メニュー │
├──────────────────┤
│ [メイン画像]               │
│ 家電のことなら、           │
│ まちの電気屋さんへ         │
│ [電話する] [問い合わせる] │
├──────────────────┤
│ こんなときはご相談ください │
│ [エアコン] [買い替え]      │
│ [取り付け工事]             │
├──────────────────┤
│ 選ばれる理由 1 / 2 / 3     │
└──────────────────┘

細かいデザインは分かりませんが、「どこに何があるか」を確認するには十分です。

方法2：簡単なHTMLで出してもらう

もう少し見た目で確認したい場合は、HTMLで出してもらう方法もあります。

トップページのワイヤーフレームを、1つのHTMLファイルで作ってください。
・色はグレーと白だけ
・画像の部分はグレーの四角に「画像」と書く
・スマホ幅で見やすいように

出てきたコードをメモ帳に貼り付けて「wireframe.html」のような名前で保存し、ブラウザで開くと、ページの形を確認できます。
AIによっては、その場でプレビューを表示してくれるものもあります。

方法3：ワイヤーフレーム用のAIツールを使う

Relumeのように、サイトマップからワイヤーフレームまでをAIで作れる専用ツールや、ホームページ作成サービスに組み込まれたAI機能もあります。
制作会社やデザイナーが使うような本格的なものも多いので、「もっとしっかり作りたい」と思ったら試してみるのもいいですね。無料で使える範囲はツールごとに違うので、公式サイトで確認してみてください。

ステップ5：自分の目でチェックして直す

ここが一番大事なステップです。AIの案は、あくまで「たたき台」。次のポイントで見直してみましょう。

本当の強みが入っているか：「丁寧な対応」のような、どのお店でも言える言葉だけになっていないか
お客さんが知りたい順番になっているか：料金や対応エリアなど、気になる情報がすぐ見つかるか
実際に用意できる情報か：写真や事例、お客さんの声など、今すぐ用意できないものが前提になっていないか
言葉が具体的か：「地域密着」より「名古屋市◯◯区・◯◯区なら当日対応」のほうが伝わる

気になったところは、そのままAIに伝えて直してもらいましょう。何度かやり取りしながら詰めていくのが、AIと構成案を作るコツです。

そのまま使えるプロンプト集

ここまでのプロンプトを、[ ]の中を書き換えるだけで使える形でまとめておきます。

① 情報を整理する

あなたはWeb制作のディレクターです。
これから私の[お店／会社]のホームページの構成案を一緒に作りたいので、
構成案を作るために必要な情報を、私に1つずつ質問してください。
質問は全部で10個以内にしてください。

概要：[業種、地域、主なサービスなど]

② 要件メモにまとめる

ここまでの回答を、ホームページ制作の「要件メモ」として箇条書きでまとめてください。

③ サイトマップを作る

上の要件メモをもとに、ホームページのサイトマップを作ってください。
条件：
・全部で[5]ページ以内
・それぞれのページの名前と、そのページの役割を1行で書く
・見た人に一番してほしい行動は「[問い合わせ／予約／来店]」

④ ページの構成を作る

[トップページ]の構成を、上から順番に考えてください。
それぞれのブロックについて、
・見出しの案
・伝えること
・ボタンやリンクがあればその内容
を書いてください。[スマホで見る人が多い]前提でお願いします。

⑤ ワイヤーフレームにする

[トップページ]のワイヤーフレームを、1つのHTMLファイルで作ってください。
・色はグレーと白だけ
・画像の部分はグレーの四角に「画像」と書く
・スマホ幅で見やすいように

AIに構成案を頼むときの注意点

便利なAIですが、使うときには次の点に気をつけましょう。

お客さんの個人情報や、社外秘の情報は入力しない：入力した内容がどう扱われるかは、サービスや設定によって違います
数字や実績などの「事実」はAIに作らせない：「創業30年」「施工実績1,000件」のような、それっぽいけれど事実と違う内容が混ざることがあります。必ず自分で確認しましょう
他社サイトの文章をそのまま貼って真似させない：参考にするのは構成の考え方まで。文章は自分の言葉で
一度で決めようとしない：最初の案は60点くらいのつもりで、やり取りしながら仕上げていきましょう