【実例・プロンプト付き】AIでLPをつくる全工程〜目的設定からデザイン・公開まで〜

AIに「LPを作って」と頼むと、見た目は整っていても、文字と画像が別々に並んだページになることがあります。

どの順番で情報を決め、何を画像にし、どこをHTMLで作ると、伝わるページに近づくのでしょうか。

今回作ったのは、川合のnoteメンバーシップ3プランを紹介するLPです。

完成したページだけでなく、何を決め、AIへどう頼み、出てきたもののどこを直したかを順番にまとめました。

画像生成だけでページ全体を完成させようとすると、文字の精度やスマホでの読みやすさが課題になります。

一方、HTMLで文字と画像を別々に並べるだけでも、まとまりのあるデザインにはなりませんでした。

そこで、文字・料金・ボタンはHTMLを基本に、画像生成と実物素材を組み合わせています。

今回の到達点： 7セクションのLPを実装し、2026年10月24日に公開LPへ反映しました。

成約率はまだ検証していません。

「完成したから売れる」とは扱いません。

完成したLPを開く

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

noteの執筆を自動化する方法はこちら

【ウェビナーのお知らせ】
売れるnote、売れないnote 〜AIで見つける、次に書く1本のテーマ〜
🔽 無料お申し込みはこちら

【11/13（金）12:00〜 メンバーシップ限定セミナー】
AIっぽさをなくす方法 完全解説セミナー
作る前のテンプレートから修正指示まで、60分で全部見せます。
対象：noteメンバーシップ LIGHT以上の会員（YouTube Live・アーカイブなし）
詳細・お申し込みはこちら

最初に用意するもの

商品名、提供内容、価格、対象者、申込先、利用条件、本人や商品の写真、実績の根拠となるURLを集めます。

分からない項目は「未確認」と記入し、AIに埋めさせません。

写真・書影・ロゴなどは利用できる原本を用意してください。

下のプロンプトの [ ] を自分の情報に置き換えます。

次の工程には、前の工程で採用した結果を渡します。

長いチャットの記憶だけに頼らず、目的、読者、原稿、デザインの確定内容をファイルで残すと、修正のたびに方向が変わるのを防げます。

【商品】[商品名・提供内容・価格]
【対象者】[誰がどんな場面で検討するか]
【根拠】[資料・公式URL・実物画像]
【申込先】[確認済みURL]
【条件】[対象外・回数・時間・利用方法]
【制作環境】[HTML編集と画像生成を行える環境]
【今回変えてよい範囲】[対象ファイル・対象セクション]
【未確認】[まだ確認できていないこと]

必要なのは、画像生成、HTML/CSSの作成・編集、ブラウザでの確認という機能です。

特定のモデルだけで同じ画像が再現されることは保証できません。

画像の構図と合格条件を指定し、結果を見て調整します。

素材とHTMLを分ける考え方は、広告制作にも共通します。

1. 目的を決める

見た目を決める前に、読者に何を理解し、どの行動へ進んでもらうかを一文にします。

クリックと購入完了は別の成果です。

今回の判断： AI・デザインを仕事に使いたい人が、3プランの違いを理解し、自分に合う学び方を選んでnoteへ進む。

主要行動はnoteへの遷移。

入会はnote側で完了します。

コピーして使うプロンプト