設計書と画像を、まとめて渡す
ここは、あっけないくらい短いです。設計書と見本の画像を渡して、再現してと頼むだけ。
lp フォルダの 設計書.md と design の画像をもとに、高品質なLPを作成してください。 デザインは画像をできるかぎり忠実に再現し、セクションの並びと中身は設計書に従ってください。 画像が人のページを保存した物の場合は、写真・ロゴ・文章は使わず、色も変えて、並びと余白の考え方だけを借りてください。 画像を1枚そのまま貼るのではなく、実際のWebページとして作ってください。 lp フォルダに素材の画像があれば、それも使ってください。 できたら、lp フォルダに index.html として保存してください。
できたページを開く
- AIの作業が終わるまで待つ
- 作業フォルダの lp フォルダを開く
- index.html をダブルクリックする
ブラウザが開いて、自分のLPが出てきたら成功です。見本の画像に近い見た目で、自分の文章が入ったページが縦にずっと続いているはずで、何も描いていないのにここまで形になるのか、と最初はちょっと笑ってしまうと思います。
見た目の手本は画像が、中身は設計書が持っています。AIはその2つを合わせて、1枚のページに組み立てるだけです。
画像があれば、1本でも作れる
ここまで壁打ちから順にやってきましたが、見本の画像さえあれば、プロンプト1本で作ることもできます。僕が実際に使っている物を、誰でも使える形に直して置いておきます。画像と一緒に送ると、ページに載せる文章を先に聞いてくるので、答えていくだけです。
画像1枚からLPを再現する（1本で作る版）
# LP画像から再現 添付画像を、LPの完成ビジュアル設計図として扱ってください。 この画像をもとに、HTML/CSSで可能な限り忠実に再現してください。 画像が人のページを保存した物の場合は、写真・ロゴ・文章は使わず、色も変えて、並びと余白の考え方だけを借りてください。 最重要： 画像をそのまま1枚貼るのではなく、実際のWebページとして再構築してください。 ただし、画像内の文字が崩れている場合でも、デザイン上の文字配置・サイズ・余白・雰囲気は尊重してください。 実際に表示する文章は、下の「載せる内容」で私から聞き取った文章に置き換えてください。 成果物はプロデザイナーwebアワード受賞級であること。 載せる内容： 作業を始める前に、何のページか、誰に向けたものか、見出し、説明、よくある質問、ボタンの文言を、1つずつ私に質問して集めてください。私が決めていない所は、案を出して選ばせてください。集め終わったら一覧にして見せ、私の確認を取ってから、作業手順に進んでください。 作業手順： 1. まず添付画像を詳細に分析してください。 - 全体の世界観 - 色 - フォントの雰囲気 - 余白 - セクション構造 - カードUI - ボタン - 背景表現 - 光、影、ぼかし、奥行き - PC/スマホで再現すべき要素 2. 画像をセクション単位に分解してください。 - ファーストビュー - こんな人へ - 特徴 - 流れ - よくある質問 - 最後の申し込み （画像の並びが違う場合は、画像に合わせてください） 3. 「載せる内容」の文章を、正式な文言として配置してください。 画像内の崩れた文字は参考にしないでください。 4. CSSでデザインを再現してください。 - 色はCSS変数化 - 余白、角丸、影、境界線、ぼかしを丁寧に再現 - 画像の「雰囲気」ではなく、構図と階層を再現 - 文字が背景から浮かないように、セクションごとの背景・パネル・光を一体化 5. 画像アセットを最適化してください。 - WebP化 - lazy loading - width/height指定 - PCではリッチ、スマホでは軽く滑らか 6. レスポンシブ対応をしてください。 - PC - タブレット - スマホ - 390px幅 - 横はみ出しなし - ボタンがスマホ初期表示で見える 7. 実装後に必ず検証してください。 - PCとスマホの幅で表示を確かめる - コンソールエラーなし - 画像切れなし - 横スクロールなし 完成後、変更内容と検証結果を簡潔に報告してください。
補足 画像をチャット欄に貼って、このプロンプトと一緒に送ります。載せる文章は、作り始める前に聞かれます。
動きを入れたい人向けに1つだけ。スクロールすると要素がふわっと出てくる、カードが回る、といった動きは、できあがった後に「控えめな動きを付けて」と頼めば足してもらえます。このコースでは、入れなくて大丈夫です。
1本で作れるなら、壁打ちも設計書もいらない。
1本の版は、載せる中身と見た目の手本がもう決まっている人向けです。誰に何をしてほしいかが固まっていないまま使うと、見た目は整っているのに目的に合わないページができます。迷ったら、設計書の流れで作るほうが確実です。