専門知識なし・フォーム入力だけ

LPプロンプトジェネレーターver2.0

必要事項を入力すると、LPデザイン画像を作るプロンプトと、
その画像からWebページを生成するプロンプトが完成します。

入力項目は「おまかせ」対応 プロンプトをコピーして貼るだけ 画像・写真・実装まで順番に案内
HOW TO USE

LP完成までの3ステップ

最初にフォームを設定し、①②③を順番に使います。

1

必要事項を入力する

必須は業種と目的だけ。迷う項目は「おまかせ」のままで進められます。

2

①②でLPデザイン画像と写真を作る

①のプロンプトを生成AIへ貼り付け、完成した縦長のLPデザイン画像を保存します。続けて②のプロンプトで、デザインの写真を個別に出力します。

3

③でWebページを作る

③のプロンプトで、①のデザインと②の写真を使った写真入りのWebページ一式がChatGPTから出力されます。必要ならエージェント型AI(Claude Code・Codexなど)で仕上げて、Cloudflare Pagesなどに公開します。

必須入力・選択が必要です任意入力しなくても生成できます

LPデザインの画面サイズ

最初に作成するLPデザイン画像のサイズを選択してください。
迷った場合は、一般的なWebサイト向けのPC版がおすすめです。

LPデザインの基本情報

「業種」と「目的」の2項目だけで、①LPデザイン画像生成プロンプトを作成できます。
名前やキャッチコピーなど、その他の項目は「おまかせ」のままで大丈夫です。

業種と目的を入力したら、すぐに作成できます ① LPデザイン画像生成プロンプトを作成するへ移動
年齢層(1つ以上選択・複数選択可。「全年齢層」を選ぶと他は自動解除されます)
性別(1つを選択)
ターゲットが抱えている悩み任意
入力 3|デザインの方向性任意 全体のイメージ 用意された選択肢から設定する方法と、参考にしたいホームページを指定する方法のどちらかを選べます。

「すべておまかせ」を解除するか、下の項目を選ぶと手動設定に切り替わります。

入力 4|詳細設定任意 デザインの詳細設定 色・装飾・画像・フォント・余白・アニメーションを細かく指定できます。迷う場合は閉じたままで大丈夫です。

すべて「おまかせ」のままでも生成できます。こだわりたい項目だけ変更してください。

装飾の使用(1つを選択)

「おまかせ」は生成AIが最適な装飾を選びます。「使用する」を選んだ場合のみ、下の装飾と色表現を設定できます。

見せ方の使用(1つを選択)

「おまかせ」は生成AIが最適な見せ方を選びます。「使用する」を選んだ場合のみ、下の見せ方を設定できます。「使用しない」は四角形のまま加工しません。

この内容はLPデザイン画像には反映されません。「②Webページ(HTML・CSS)制作プロンプト」にのみ反映されます
アニメーションの使用(1つを選択)

「おまかせ」はAIが最適な動きを選びます。「使用する」を選んだ場合のみ、下の動き方を設定できます。「使用しない」はアニメーションを実装しません。

入力 5|ページ構成任意 ページの構成 セクション名を8個まで指定できます。決まっていなければ閉じたままで大丈夫です。

決まっていなければ「おまかせ」のままで大丈夫です。
指定したい場合だけ、上から表示したい順にセクション名を入力してください。

入力欄がすべて空の場合はおまかせになります。セクション名を入力すると自動で解除されます。

PROMPT GENERATOR必須

入力が終わったら、①→②→③の順に進めます

まずLPの完成イメージを画像で作り(①)、その画像で使う写真を出力し(②)、Webページのファイル一式を生成します(③)。①②③はすべて同じChatGPTの会話で続けて使います。

STEP ①
画像を作る

生成AIでLPデザイン画像を作成

入力内容をもとに、LP全体の完成デザイン画像を作るためのプロンプトを生成します。

  • ①を押してプロンプトを表示
  • コピーしてChatGPTなどの生成AIへ貼り付けて実行
  • LPデザイン画像を生成
STEP ②
写真を用意する

デザインの写真を
まとめて出力

LPデザイン画像を作ったChatGPTの会話に②のプロンプトを貼り付けます。デザインで使われている写真が、1枚のシート画像にまとまって出力されます。

  • ②を押して写真出力プロンプトを表示
  • ①と同じChatGPTの会話へ貼り付けて実行
  • 画像をまとめた1枚の画像シートを生成
STEP ③
Webページにする

ChatGPTで
Webページを生成

①②と同じChatGPTの会話に③のプロンプトを貼り付けます。①のデザインと②の写真がそのまま使われ、写真入りのWebページ一式(zip)が出力されます。

  • ③を押してWebページ制作プロンプトを表示
  • ①②と同じChatGPTの会話へ貼り付けて実行
  • 出力されたzipファイルを展開すれば、そのまま表示できる

ポイント:①②③は、すべて同じChatGPTの会話で続けて使ってください(会話を分けると、前に作ったデザインや写真を引き継げません)。同じ会話で進めれば、③が①のデザインと②の写真をそのまま使うので、画像を保存したり入れ直したりする作業は不要です。仕上げたいときは、出力されたzipファイルをClaude CodeやCodexなどのエージェント型AIで調整し、Cloudflare Pagesなどで公開できます。

LPデザイン画像生成プロンプト

このプロンプトを1回だけ貼り付けてください。縦長のLP完成デザイン1枚を直接作成するよう指定されています。コピーしました!コピーしてChatGPTを開く ↗

次にすること

  1. 「コピーしてChatGPTを開く」を押します。
  2. ChatGPTの入力欄へ、コピー済みの①プロンプトを貼り付けます。
  3. LPデザイン画像が完成したら保存し、このページへ戻って下の②へ進みます。

写真の個別出力プロンプト

①でLPデザイン画像を作った、同じChatGPTの会話に貼り付けてください。写真は会話に残るので、保存しなくてもそのまま③で使えます。
コピーしました!

次にすること

  1. ②のプロンプトをコピーします。
  2. ①でLPデザイン画像を作った、同じChatGPTの会話へ貼り付けて実行します。
  3. 写真が格子状に並んだ1枚の画像が出てきたら、そのまま下の③へ進みます。

※画像はChatGPTの会話に残るので、ダウンロードや保存は必要ありません。③が同じ会話からこの写真を使います。
※写真が出せなかった場合も、②を飛ばして③へ進んで大丈夫です。③がLPデザイン画像から写真を切り出して使います。

Webページ(HTML・CSS)制作プロンプト

①②と同じChatGPTの会話に貼り付けてください。①のデザインと②の写真を使って、写真入りのWebページ一式(zip)が出力されます。
コピーしました!

次にすること

  1. ③のプロンプトをコピーします。
  2. ①②と同じChatGPTの会話へ貼り付けて実行します。
  3. 出てきたzipファイルをダウンロードして、パソコンの分かりやすい場所に展開(解凍)します。
  4. 中の index.html をダブルクリックすると、写真入りのページがそのまま表示されます。
  5. 気になるところがあれば、下の「仕上げ」へ進みます。問題なければCloudflare Pagesなどで公開できます。

※画像は①②の画像から切り出され、zipの assets/images/ に入った状態で出てきます。画像を用意し直す作業は不要です。

①②③ プロンプト作成へ