【修正しやすい】画像生成×HTMLで広告を作る方法〜素材を残して、サムネイルから動画まで〜

「文字を少し右へ動かしたいだけなのに、人物の顔まで変わってしまった」。

画像生成AIで広告やサムネイルを作っていると、こんな場面に出会います。

今回、私のnote閲覧サイト「KAWAI BOOKS」の告知画像を作っていて、途中から制作方法を変えました。

人物や背景は画像で用意し、文字と配置はHTMLで組み立てる。

そこから、ロゴを80%に縮小する、文字を15px右へ動かす、要素を順番に表示する、といった修正を重ねました。

最後は、同じ素材を使った21秒の紹介動画に、ナレーションとBGMまで追加しています。

この記事では、今回の作り方と、やり直して分かった注意点を紹介します。

対象は、AIで広告やサムネイルを作っていて、細かな修正に時間がかかっている方です。

読み終わったら、手元の画像を使って「コピーだけを変えられる1枚」を作れる状態を目指します。

動画でも解説しています。

1. 完成画像ではなく「変更できる部品」を残す

今回のビジュアルは、スマートフォンを見ている女性の周囲に、公開中のnoteのサムネイルが並ぶ構成です。

最初は全体を画像として生成・修正していました。

ところが、調整を重ねるうちに、サムネイルの種類が減る、同じものが重複する、元画像の比率が変わる、といった問題が出てきました。

そこで、完成させる場所をHTMLへ移しました。

HTMLは、文字や画像をどこに置くかを記述するものです。

文字の大きさ、余白、重なりなどの見た目は、CSSで指定します。

Webサイトを公開しなくても、手元のブラウザで1枚のデザインとして表示できます。

今回、分けて扱ったのは次の6要素です。

• 背景：淡いパール調の画像。

• 人物：背景が透明な、スマートフォンとコーヒーを持つ女性の画像。

• サムネイル：実際に公開している記事の画像20種類。

• タイトル：「KAWAI BOOKS」の画像パーツ。

• コピー：HTML上の文字。

• ロゴ：本人の既存ロゴ画像。

大事なのは、全部を新しく生成しないことです。

今回のサムネイルとロゴは、既存のものをそのまま使いました。

人物と背景は別々に生成し、コピーは画像に焼き込まず、後から編集できる文字として置きました。

「画像生成AIは素材を作る」「HTMLは素材を配置する」と役割を分けると、直したい場所を指定しやすくなります。

ただし、どんな制作でもHTMLが最適とは限りません。

1回だけ使う雰囲気重視の画像なら、一括生成で十分な場合もあります。

同じ人物やロゴを保ち、コピーやレイアウトを何度も変える制作で、この方法が生きてきます。

見出し画像はAIで生成しました。
プロンプトは下記の記事に掲載中。
毎日プロンプトは増えていきます。

noteの執筆を自動化する方法はこちら

【 無料ウェビナーのお知らせ 】

Codexで作る「目を引く」サムネイル
〜デザイン歴14年のプロが教える、見せ方と伝え方〜

🔽 申し込みはこちら

＼ AI秘書の作り方を解説 ／
YOUTRUSTさんで
Claude Codeのセミナーを開催します。

【 オンライン・無料 】
🔽 申し込みはこちら

2. 素材は「後で置く場所」を決めてから作る

人物だけを生成するときも、「おしゃれな女性」だけでは足りません。

完成画面のどこに置き、どこに文字を重ねるかまで決めておきます。

今回なら、人物は中央、サムネイルは周囲、コピーは下部です。

そのため、人物の顔や持ち物が途中で切れず、背景と切り離せる素材が必要でした。

次は、今回の要件を再利用しやすく整理した指示例です。