AIで作る広告・サムネは「人物・背景は画像、文字・位置・余白はHTML」に分けて、文字だけ直せるようにする
1枚絵で生成すると、文字を直すたびに顔まで変わる。画像生成は素材づくりに限定し、組み立てをHTMLにすると、変えたい部品だけ編集できる。
どんな問題を解決するか / いつ使うか
画像生成AIで広告やサムネイルを作ると、「キャッチコピーを1文字直したい」だけで全体を生成し直すことになり、人物の顔や構図が変わってしまう。同じ人物やロゴを使い続けたい連載サムネ、バナーのサイズ違い、A/Bテスト、動画化まで見据えた制作に向く。
やり方
- 部品に分ける：人物、背景、ロゴ、装飾は画像として用意する（生成または素材）。見出し・本文・価格・ボタンなどの文字と、その位置・余白はHTML／CSSで組む。投稿では6つの部品に分けて使い分けている。
- 素材は単体で出す：人物は切り抜きやすいように単色背景で生成すると扱いやすい（切り抜き前提の画像はグリーンバックで生成し、白フチ・ドロップシャドウは付けない、LP画像から素材だけを正方形グリッドで別出力→切り抜き・透過→全アセットと一緒に渡して忠実に再現させる）。
- HTMLで組み立てる：Codex や Claude Code に「この画像を背景と人物として配置し、見出しは◯◯、余白は◯px」と頼む。修正は文字・位置・余白の値を変えるだけで済む。
- 書き出す：ブラウザでスクショを撮って画像にする。同じHTMLにアニメーションを付ければ、サムネイルから短い動画まで同じ素材で作れる。
注意点
- 文字を画像生成に任せないので、日本語の文字崩れも起きにくい。
- 人物と背景の光や色味がずれると合成感が出る。必要なら色味をそろえる指示を入れる（AI写真の黄ばみ・青白さは「ホワイトバランス◯K相当」と、欲しい肌色の言葉で直す）。
- フォントのライセンスと、書き出し環境でフォントが同じに表示されるかを確認する。
出典
- 投稿者: @kawai_design
- 投稿: @kawai_design · 2026-10-13（詳しい手順のnote: @kawai_design · 2026-10-13）
- 収集日: 2026-10-14（JST）