画像生成で作った LP を、素材の切り出し→Claude Design で再現→Claude Code で仕上げる
画像生成で LP の完成イメージを作ったら、使われている素材を別にグリッドで出し直して切り抜き・透過させ、完成イメージと素材をまとめて Claude Design に渡して忠実に再現させる。細かい修正は Claude Code に書き出して実装する。
どんな場面で使う？
- 画像生成 AI で作った LP や Web ページのデザインを、実際に動くページにしたいとき
- 生成画像から素材（イラスト・アイコン）を切り抜く作業に時間がかかっているとき
手順
- 画像生成（GPT Image 2 など）で LP の完成イメージを出す
- その LP で使っている素材画像を、正方形のグリッドで出し直させる（数が多すぎると画質が落ちやすい）
- 透過しやすくするコツ: 「背景はグリーンバック」「ドロップシャドウは不要」と指定する。影や白フチ・色付き背景があると切り抜きにくい
- GPT か Claude に、グリッドの素材の切り抜きと透過を頼む（Claude Design に一覧を貼って切り分けさせると、個別・一括ダウンロードや透過／白背景／黒背景での確認もできた、という報告もある）
- Claude Design に、1の完成イメージと3の素材を全部渡して「忠実に再現して」と頼む
- 細かい修正や機能追加は Claude Code に書き出して実装する（Claude Design から Claude Code へ渡すときは「実際に動くアプリとして作って」と頼む）
注意点
- 画像に入った文字は崩れやすい。見出しや本文はテキストとして入れ直させる
- 生成画像の素材を商用で使う場合は、各サービスの利用規約を確認する
- 関連: Codex で「画像を作ってから UI を実装する」6ステップ（再現用プロンプトを書かせるのが肝）
出典
- いいね: @Shin_Engineer · 2026-04-22
- いいね（グリーンバック指定）: @MatoToushi · 2026-04-23
- いいね（Claude Design での切り分け）: @MatoToushi · 2026-04-21