LP画像から素材だけを正方形グリッドで別出力→切り抜き・透過→全アセットと一緒に渡して忠実に再現させる
画像生成したLPデザインを実装するとき、写真やイラストなどの素材を別に作っておく。素材を1枚にまとめて出力し、切り抜いて透過させてから、デザイン画像と一緒にAIに渡す。
どんな問題を解決するか / いつ使うか
画像生成で作ったLPを、見た目に忠実なコードに落としたいとき。素材画像がLP画像に焼き込まれていて再利用できないとき。
やり方
- 画像生成（GPT Image 2 など）でLPのデザイン画像を出力する。
- そのLP画像で使われている素材画像だけを、正方形のグリッド状に並べて別途出力させる（数を詰め込みすぎると画質が落ちるので注意）。
- GPT または Claude に、②の素材の切り抜きと背景の透過を依頼する（切り抜き前提の画像はグリーンバックで生成し、白フチ・ドロップシャドウは付けない）。
- Claude Design に①のLP画像と③のアセットを全部渡し、忠実に再現するよう依頼する。
- 細かい修正・機能の追加は Claude Code に書き出して実装する。
注意点・対応状況
- 素材が多いときはグリッドを複数枚に分ける。
出典
- 投稿者: @Shin_Engineer (Shin@プログラミングチュートリアル)
- 投稿: @Shin_Engineer · 2026-04-22
- 投稿日: 2026-04-22（JST）
- 収集日: 2026-10-09（JST）