AI画像プロンプト

1.ChatGPT ImageでLPデザインを作る まず画像生成で、LPの完成イメージを作ります。 ■プロンプト例 プロテイン商品のLPデザインを作ってください。 モダンで目を引くデザイン。 構成は、ファーストビュー、悩み訴求、商品の特徴、成分、口コミ、料金、CTA。 スマホ表示を意識した縦長LP。 白・黒・ネオン系のアクセントカラー。 高級感とスポーティーさを両立。 2.画像を見ながらLP構成を文章化する 次に、その画像をChatGPTに貼ってこう依頼します。 このLP画像をもとに、HTML/CSSで再現しやすいように、 セクション構成・見出し・本文・CTA・配色・余白・フォント感を整理してください。 出力してほしい項目はこれです。 ・セクション構成 ・各セクションの役割 ・見出し ・本文 ・CTA文言 ・配色 ・レイアウト指示 ・スマホ対応の注意点 3.Claude Code用の実装指示を作る ChatGPTで以下のような指示文を作ります。 あなたはLP制作に強いフロントエンドエンジニアです。 添付したLP設計をもとに、1枚のLPサイトを作成してください。 要件： - HTML/CSS/JavaScriptで作成 - レスポンシブ対応 - スマホファースト - ファーストビューは画像の雰囲気を再現 - CTAボタンは目立たせる - セクションごとに余白をしっかり取る - アニメーションは控えめ - ファイル構成は index.html / style.css / script.js - まず実装方針を説明してからコードを作成 4.Claude Codeで実装する ターミナルで作業フォルダを作ります。 mkdir protein-lp cd protein-lp claude ■Claude Codeに貼る指示 ChatGPT Imageで作ったLPデザインをもとに、静的なLPサイトを作ってください。 以下の設計をもとに、index.html、style.css、script.jsを作成してください。 【ここにChatGPTで整理したLP設計を貼る】 まずファイル構成を作り、その後コードを書いてください。 スマホ表示を優先し、PCでも崩れないようにしてください。 5.ブラウザで確認する Claude Codeで作成後、ローカルで確認。 open index.html またはVS Codeなら、Live Serverで確認。 修正したい場合はClaude Codeに以下のように指示します。 ファーストビューのインパクトをもっと強くしてください。 CTAボタンを目立たせて、スマホで見たときに購入ボタンが押したくなるデザインに調整してください。 一発で完璧に作ろうとせず、 ① ChatGPT Imageでデザイン案 ② ChatGPTで構成・文言化 ③ Claude CodeでHTML/CSS化 ④ ブラウザ確認 ⑤ Claude Codeで修正 この流れが一番早いです。 特にLPは、画像をそのまま再現するより、画像＝デザイン参考、Claude Code＝実装担当に分けると作りやすいです。