PROMPTON / BEST PRACTICES
AIにバナー制作を頼む前に、伝えたいことを一つにする
目的、情報の優先順位、掲載サイズ、写真、配色を整理し、HTMLとCSSで調整できるバナーをAIに依頼する手順。入力例から画像書き出しまで説明します。
「おしゃれなバナーを作って」だけでは、見た目が整っても、何を伝える広告なのかが曖昧になります。先に決めたいのは、誰に、何を知ってもらい、その後どこへ進んでほしいかです。
ここでは架空のコーヒーブランドを例に、制作条件をプロンプトにまとめます。Promptonは指示文を組み立てる道具です。完成した指示文を外部のAIへ貼り付け、そこで制作と修正を進めます。
1. 一枚に一つの目的を持たせる
最初に「新しいドリップバッグの商品ページを見てもらう」のように、期待する行動を一文で書きます。認知、購入、会員登録を一枚で同時に狙うと、必要な情報も増えます。今回の例では商品への興味をつくり、詳細へ案内することを優先します。
読者も具体化します。「忙しい人」より「仕事の合間に自宅でコーヒーを飲む人」とした方が、場面や言葉を選びやすくなります。未確認の価格、人気、効果をAIに補わせず、使える事実と例示用のコピーを分けて渡しましょう。
2. 見出し、商品、行動の順序をつくる
例示用ブランドは「MORNING COFFEE」、見出しは「ひと息を、淹れよう。」、商品名は「ドリップバッグ」、CTAは「商品を見る」とします。CTAは次の行動を示す短い言葉です。この四つを同じ大きさにせず、見出しを最も強く、商品を見分ける写真と名前を次に、CTAを最後に読めるよう配置します。
横長なら左に文章、右に商品写真という構成から始められます。余白を残し、説明を足す前に削れる文を探します。CTAだけが強すぎて何の商品か分からない場合は、色を増やすより商品名との距離や文字の大きさを調整します。
3. 掲載先とサイズを別々に確認する
「SNS用」だけでは制作条件は決まりません。媒体名、広告か通常投稿か、表示される枠を確認し、公式案内から幅と高さ、比率、形式、容量を控えます。たとえばGoogle Adsでも画像広告とHTML5広告では要件が異なります。掲載先ごとに調べ、以前使った寸法を流用できると決めつけないことが大切です。
この記事の1200×628pxは構成を説明するための作業サイズで、特定媒体の入稿条件ではありません。正方形や縦長へ展開するときは、横長をそのまま縮めず、写真の位置、改行、CTAの順序を組み直します。掲載枠で切れる範囲も確認してください。
4. 配色を絞り、写真の扱いを決める
例では背景を生成り、文字を深緑、CTAを深緑の面と明るい文字にそろえます。色名だけでなく色コードも渡すと修正しやすくなります。通常の文字は背景と4.5:1以上を基準に確認します。WCAGには大きな文字の3:1という基準もありますが、縮小表示では見た目の大きさが変わるため、小さい文字までその基準で扱わないようにします。
使用する商品写真は、利用条件を確認してから、指示文を貼り付ける先のAIへ直接添付します。Promptonの入力例だけでは写真は渡りません。ファイル名、残したい商品部分、切り抜きの可否も伝えます。素材がなければ仮の枠を使い、実在商品の写真として作り足さないよう指定します。
CSSのobject-fit: containは写真全体を枠内に収め、coverは比率を保って枠を埋めるため一部が切れます。パッケージを全て見せたいのか、写真を大きく見せたいのかで選び、ロゴや商品名が切れていないか実物で確認します。
5. HTMLを編集用の原稿にし、画像へ書き出す
AIには「CSSを内包した単一HTMLで、幅1200px・高さ628pxの固定キャンバスを作る」と依頼します。編集用HTMLでは文字を写真に焼き込まずテキストとして置けば、コピーや改行を後から直せます。見出しの構造、写真の代替テキスト、実際のリンク先がある場合のリンクも指定します。
下のCSSは外枠と写真の収め方だけを示す例です。生成されたHTMLをブラウザで開き、写真とフォントの読み込みを確認してから、バナー部分をPNGまたはJPEGへ書き出します。HTMLファイル自体は画像広告として入稿できません。書き出したファイルのピクセル寸法、形式、容量を掲載先の条件と照合します。
.banner {
box-sizing: border-box;
width: 1200px;
height: 628px;
padding: 64px;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
background: #f7f0e6;
color: #243b32;
}
.banner img {
width: 100%;
height: 100%;
object-fit: contain;
}画面上のCSSサイズと、書き出した画像のピクセル数は別に確認します。画面倍率や書き出し設定で、想定と違う寸法になることがあります。
6. 小さく見て、一点ずつ修正する
原寸だけでなく、実際に表示される大きさへ縮めて確認します。見出しが読めるか、何の商品か分かるか、CTAが埋もれていないかを見ます。写真の欠け、文字のはみ出し、不要な余白もチェックし、画像を書き出した後にも同じ確認を行います。
修正依頼は「もっと目立たせて」より「見出しの文言は維持し、文字を大きくして二行にする」のように具体化します。見出しを変える比較なら写真や配色はそろえ、何を変えたか記録します。見やすいデザインだけでクリックや購入は保証されません。公開後の反応と目的に照らして改善しましょう。
TRY IT WITH PROMPTON
Promptonで指示文を組み立てる
以下は記事の考え方を使った入力例です。名前や目的、素材の条件を自分の案件に合わせて書き換えてください。
- 読み手・相手
- 仕事の合間に自宅でコーヒーを飲む人。画面を短時間見るだけでも、商品と次の行動が伝わることを重視する。
- 達成したい目的
- 見出し、商品写真と商品名、CTAの順で読めるバナーにする。完成物はCSSを内包した単一HTML。後から文字、色、写真を変更でき、バナー領域をPNGまたはJPEGへ書き出せる状態にする。
- お願いしたいこと
- 架空のコーヒーブランド「MORNING COFFEE」のドリップバッグを紹介する横長バナーを、編集可能なHTMLとCSSで1案制作してください。目的は商品ページへの興味をつくることです。幅1200px・高さ628pxの固定キャンバスにしてください。この寸法は構成を説明するための作業サイズで、特定の広告媒体の入稿条件ではありません。
- 背景・参考情報
- 以下は制作例のために用意した架空のブランドと確定コピーです。ブランド名：MORNING COFFEE。見出し：ひと息を、淹れよう。商品名：ドリップバッグ。CTA：商品を見る。価格、容量、産地、効能、評価、販売実績は提供していません。
- 守ってほしい条件
- 背景・資料のブランド名と確定コピーをそのまま使用。商品写真はこのプロンプトの貼り付け先AIへ私が直接添付します。添付がある場合はファイル名を確認して使用し、ない場合は「商品写真を配置」と明記した枠を使う。左側に見出し・商品名・CTA、右側に商品写真を配置。外周64pxを余白の目安にし、文字の長さに合わせて調整。背景#f7f0e6、文字#243b32、CTAは#243b32の面に#f7f0e6の文字。文字と背景のコントラストを確認。見出しは最も強く、写真は比率を維持し商品全体を見せる。テキストは実際のHTML文字として置き、適切な見出し構造を使う。写真の内容に応じたaltを用意。リンク先未提供のCTAは視覚上のラベルとして表現し、空リンクや動かないボタンにしない。実在のURLが提供された場合だけリンク化する。コード内コメントに文字・色・写真の変更箇所を記す。写真とフォント読み込み後のバナー領域のPNG/JPEG書き出し手順、実際の画像寸法・形式・容量を掲載先の公式条件と照合する手順を添える。HTMLは画像広告として直接入稿するファイルではないと明記。
- 避けてほしいこと
- 実在商品の写真、価格、割引、期間限定、人気、受賞、効果、リンク先を捏造しない。写真内のパッケージやロゴを書き換えない。編集用HTMLでは文字を画像に焼き込まず、HTMLテキストとして保持する。最終成果物をPNG/JPEGの画像へ書き出すことは許可する。外部フォント、CDN、ライブラリ、追跡コードを追加しない。売上やクリック率の向上を保証しない。1200×628pxを全媒体共通の推奨仕様として説明しない。
Promptonが作るのは指示文です。コピーした指示文を制作に使うAIへ貼り付けてください。写真・ロゴなどの素材も、そのAIに別途添付します。
この入力例をPromptonで編集する新しいタブで開く 空の入力から作る （新しいタブで開く ）完成前のチェック
- 対象読者と、バナーから進んでほしい行動を一つずつ決めた
- 見出し、商品、CTAの優先順位と確定コピーを渡した
- 掲載枠の最新の寸法・形式・容量を確認した
- 写真を依頼先AIへ添付し、切り抜き条件を伝えた
- 縮小時の文字、配色のコントラスト、写真の欠けを確認した
- 書き出した画像の寸法と容量を確認し、編集用HTMLも保存した