【保存版】AIでWebサイトを作る全手順〜プロンプト・デザインの見方・修正指示を、具体例で解説〜

AIにWebサイトを作ってもらったものの、「この仕上がりでいいのか」「どこをどう直せばいいのか」と迷うことはありませんか？

この記事では、最初の指示から、生成されたサイトの確認、気になる部分の修正までを順番に解説します。最初の構成とデザインはAIに任せて、出来上がりを見ながら整える進め方です。

品質の高いサイトとは、訪問者が内容を理解でき、迷わず行動でき、必要な操作が動くサイト。見た目の好みだけで判断せず、目的に合っているかを確認していきます。

この記事で分かること

• 作る前に何を整理し、AIにどう伝えるか。

• 生成されたサイトのどこを見て、修正の優先順位を決めるか。

• 文章・文字・余白・一部分のレイアウトを、どう直してもらうか。

• セクション辞典の見本・HTML・生成プロンプトを、部分修正にどう使うか。

見出し画像はAIで生成しました。
プロンプトは下記の記事に掲載中。
毎日プロンプトは増えていきます。

目次

1. 作る前に、目的と掲載情報を整理する

2. 初回のプロンプトでサイト全体を生成する

3. 5つの観点で出来上がりを確認する

4. 直す範囲を絞って修正を依頼する

5. 辞典を使ってセクションのレイアウトを変える

6. 修正後にもう一度確認する

1. 作る前に、目的と掲載情報を整理する

最初に決めるのは、色や配置よりも「誰が、何を理解し、どう行動するサイトなのか」です。

例として、法人向けの研修サービスを紹介するサイトを考えます。以下は架空の例です。

• 誰に：社員向けAI研修を検討している人事・研修担当者。

• 何を伝える：対象者、研修内容、実施形式、相談から実施までの流れ。

• してほしい行動：問い合わせフォームから相談してもらう。

• 掲載できる事実：確定したサービス内容、料金、連絡先。

• 未確定の情報：未確定と明記し、AIに作らせない。

実績・推薦コメント・導入企業・料金は、見栄えを整えるために補ってよい情報ではありません。存在しない情報を生成しないよう、依頼時に明記します。個人情報や社外秘は、利用するAIの取扱条件と社内ルールを確認したうえで入力してください。

「誰に」を、属性から状況まで具体化する

「企業向け」だけでは、AIは何を優先して説明すればよいか判断しにくくなります。同じ企業の人でも、初めて研修を調べる担当者と、候補を比較して稟議書を書く担当者では知りたいことが違います。

今回の架空の例なら、「AI研修の必要性は感じているが、社員の習熟度に差があり、何を依頼できるか分からない人事担当者」と書いてみます。すると、研修テーマの一覧だけでなく、対象レベル、内容を調整できる範囲、相談の流れなどが必要だと考えられます。これは構成の仮説であり、実際の顧客の相談内容に照らして調整します。

主な行動を一つ決める

問い合わせ、資料請求、購入、メルマガ登録をすべて同じ強さで見せると、何をしてほしいサイトかが曖昧になります。まずは最も大切な行動を一つ決め、他は補助として整理します。

研修の内容を相談して決めるサービスなら、主な行動を「研修について相談する」にする案が考えられます。一方、資料を見て社内で検討する人が中心なら、資料請求を主な行動にする選択もあります。ボタンの色を考える前に、事業の進め方と合っているか確認しましょう。

事実・希望・未確定を混ぜない

AIへ渡すメモは、以下の3種類に分けると扱いやすくなります。

空欄を埋めてもらう便利さと、事実を作ってしまうことは区別します。例えば料金が未確定なら、架空の「月額9,800円」を置くのではなく、掲載方法を保留するか、実際の運用がそうであれば「お問い合わせください」とします。

コピーして使える制作前メモ

【誰に】
主な読者：
その人が今困っていること：
このサイトを見るきっかけ：

【何を伝える】
サービス・商品の内容：
読者の課題にどう応えるか：
比較するときに知ってほしい情報：

【どう行動してほしい】
最も大切な行動：
その行動の後に起きること：

【掲載できる事実】
確定した文章・料金・連絡先：
使用してよい写真・素材：
事実確認に使う資料：

【未確定の情報】
未確定の項目：
確認する相手：
公開までに決めること：

この段階でデザイン案を完成させる必要はありません。「誰に」「何を」「どの行動へ」が一文で説明でき、事実と未確定が分かれていれば、初稿を依頼する材料になります。

2. 初回のプロンプトでサイト全体を生成する

最初から細かい配置をすべて指定する必要はありません。目的と材料を渡し、構成とデザインの初稿を作ってもらいます。

以下の条件でWebサイトの初稿を作ってください。

目的：[問い合わせ・申込みなど]
想定読者：[誰が、どんな状況で見るか]
伝えたい価値：[何を提供し、どんな課題に応えるか]
掲載する情報：[確定した文章、サービス内容、料金、連絡先]
最も大切な行動：[問い合わせボタンなど]
希望する印象：[落ち着いた、親しみやすい、など]

ページ構成とデザインは、目的に合う形で提案・実装してください。
スマートフォンでも読みやすく、操作しやすくしてください。
未提供の実績、推薦コメント、料金、企業名は創作しないでください。
不足情報は確認事項として分け、仮の情報を事実として掲載しないでください。
問い合わせなど、見た目だけで未接続の機能は明記してください。
使用素材は利用条件を確認できるものにし、出典と条件を示してください。
作成後に、実装した範囲と未完了の項目を説明してください。

実習の準備：使うAIと保存先を決める

必要なのは、HTMLファイルを作成・編集できるAIと、出来上がりを開くブラウザです。写真を自分で作る場合は画像生成機能も使います。

チャットにコードを表示するだけのAIを使う場合は、生成されたコード全体をテキストエディタに貼り、`index.html`という名前で保存してください。ファイル作成に対応するAIなら、下のフォルダ構成で保存するところまで依頼できます。

sample-site/
  index.html
  assets/
    hero.webp
    workshop.webp

画像がPNGやJPEGなら、その形式のままで構いません。例えば`hero.png`なら、HTML側の参照も`assets/hero.png`に揃えます。拡張子だけを書き換えても形式は変わりません。

以下の実習は、A：初稿 → B：写真 → C：デザイン → D：配色と動き → 最終確認の順に、同じサイトを編集して進めます。A・Bはこの章、C・Dは第4章に掲載しています。

AIの出力には差があるため、同じプロンプトでも配置や写真まで完全に同じになるとは限りません。完成版と同じHTML・写真から試したい方は、完成サイト一式をダウンロードして展開し、`index.html`を開いてください。以下は、その完成形を目指して自分で作るための指示です。