ChatGPT・Claude・GeminiにWebサイトの下書きを作らせるプロンプトのコツ5つ

「それらしいサイトは出てくるけれど、思っていたものと違う」——生成AIにWebサイトを作らせたことのある方なら、一度は感じたことがあるはずです。

生成AIの出力の質は、モデルの性能と同じくらいプロンプト（指示文）の書き方で変わります。この記事では、WebサイトのHTML/CSSを書かせるときに仕上がりを安定させる、実践的なコツを5つ紹介します。ChatGPT・Claude・Geminiのどれでも使える内容です。

コツ1：ページの構成を箇条書きで渡す

「カフェのサイトを作って」とだけ頼むと、構成はAI任せになります。ファーストビュー、こだわり、メニュー、店舗情報、というように、欲しいセクションを箇条書きで渡しましょう。

構成を渡すだけで、出力の骨格が毎回ほぼ同じになり、「惜しいけど作り直し」の回数が目に見えて減ります。構成自体に迷うときは、先に「このお店のサイトに必要なセクション構成を提案して」と相談し、返ってきた構成を確定させてから本体を頼む二段構えが有効です。

コツ2：文章（原稿）は自分で用意する

キャッチコピーや説明文をAI任せにすると、どこかで見たような当たり障りのない文章で埋められます。あとから全部書き直すことになるので、二度手間です。

店名・キャッチコピー・各セクションの本文といった実際に載せたい文章を先に用意し、「この原稿をそのまま使って」と渡すのが確実です。原稿が確定していると、AIはレイアウトに集中でき、文字量に合った崩れにくいデザインを返しやすくなります。

コツ3：1ファイルにまとめてもらう

HTMLとCSSを別ファイルで出されると、保存やプレビューの手間が増え、貼り忘れによる崩れも起きがちです。「CSSは<style>タグでHTMLに含めて、1ファイルで完結させて」と指定しておくと、ダブルクリックだけでブラウザ確認ができる状態で受け取れます。

画像はAIには作れないので、「画像はプレースホルダーでよい」と伝えたうえで、あとから自分の写真に差し替える前提にしておくとスムーズです。

コツ4：派手な動きより「崩れないこと」を頼む

生成AIは頼まなくてもスライダーや凝ったJavaScriptの動きを入れたがることがあります。見栄えはしますが、動きが増えるほど壊れやすくなり、ノーコードツールへ持ち込むときの障害にもなります。

「JavaScriptは使わない」「アニメーションは控えめに」「スマートフォンでの表示を優先して」といった一文を添えるだけで、静的で堅牢な、あとから扱いやすい下書きになります。

コツ5：修正は「作り直し」ではなく「差分」で頼む

一度よい下書きが出たあとに「もう少し高級感を」と全体をやり直させると、気に入っていた部分まで変わってしまいます。

修正したいときは「ファーストビューの背景色だけを変えて、他はそのまま」というように、変えたい箇所と変えてほしくない箇所をセットで伝えます。仕上がりに近づくほど、指示は狭く・具体的にしていくのがコツです。

まとめ：下書きができたら、公開の器へ

5つのコツに共通するのは、「決めごとは人間が握り、AIには作業をさせる」という分担です。構成と原稿を人間が決め、レイアウトの試行錯誤をAIに任せると、生成AIはとても頼れる下書き係になります。

できあがった下書きは、そのままではまだ「HTMLファイル」です。公開して運用するには、ホスティングやノーコードツールなど、どこかの器に載せることになります。Studioで運用したい場合の選択肢は生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較の記事で詳しく比較しているので、あわせてどうぞ。