2026年ブラックフライデー バナーの作り方：AI バナー作成でWeb・メール背景を生成（8プロンプト）
手元に商品写真が1枚しかなくても、Webサイトのトップバナーから告知メールのヘッダーまで、ブラックフライデー向けの一式を揃えることができます。要点は、AIには背景の生成だけを任せることです。片側に商品を置き、反対側にすっきりとした余白を残しておけば、見出しや割引率、クーポンコードは後からデザインツールで自在に配置できます。本記事では、DramaCanvasのキャンバス上での具体的な作成手順、縦横比の選び方、コピーしてそのまま使える8つのプロンプト、そしてカウントダウンやクーポンコードをミスなく配置する正しい方法を解説します。
商品写真がまだ用意できていない場合は、スマートフォンの写真1枚から作るAI商品写真から始めてみてください。連動する15秒の動画広告が必要な場合は、ブラックフライデー向け広告動画の作り方で手順を解説しています。
ブラックフライデーのバナー作成で作業をどう分担すべきですか？
背景の生成はAIに任せ、文字情報の配置はデザインツールで行います。
AIは魅力的なシチュエーションや照明効果の描写に優れている一方、正確な文字の描画は得意ではありません。割引率の数字やクーポンコード、有効期限の表記が乱れると、顧客の混乱を招くだけでなく、決済トラブルの原因にもなります。確実な進め方は、キャンバス上で文字入れ用の余白を残した背景を生成し、ダウンロードした後にデザインツールで見出しや正確な数字、ボタンを重ねる2段階の手順です。
Webサイト用のバナーとメールヘッダーは、同じ商品写真をもとにトーンや余白の構成を揃え、縦横比のみを変えることでブランドの統一感を保てます。
キャンバス上でバナー背景をどのように生成しますか？
商品写真をアップロードして画像ノードに接続し、縦横比を選んでプロンプトを入力し、生成を実行します。
ステップ1：商品写真をアップロードしてノードを接続する
キャンバス下部のツールバーにあるノードを追加をクリックし、ファイルをアップロードを選択して商品写真を選び、キャンバスに追加（1）をクリックします。続いて画像ノードを追加し、商品写真ノードの右側にある接続ポイントからラインを引いて接続します。プロンプト入力欄に「@」と入力してメニューから画像1を選択すると、この写真を参照できます。後述のプロンプト集にある[画像1]は、この参照指定に置き換えてください。
ステップ2：画像設定でワイドな縦横比を選択する
ノード下部でモデルにGPT Image 2.5を指定し、画像設定を開いてサイズまたは縦横比から比率を選択します。トップページの大型ヒーローバナーには21:9、標準的なバナーやメールヘッダーには16:9を指定します。解像度はまず1Kから始めます。
ステップ3：プロンプトを入力し、クレジットを確認して生成する
後述のプロンプトを貼り付け、ご自身の商品に合わせて一部を書き換えます。生成ボタンには今回の出力に必要なクレジット数が表示されるため、確認した上で実行します。画像が生成されたら、商品の輪郭と色合いが保たれているか、文字入れ用の余白がすっきりと確保されているか、予期せぬ文字や記号が混入していないかの3点を確認します。
ステップ4：ダウンロードしてデザインツールで文字を追加する
イメージに合う画像が得られたら、ノード上のダウンロードボタンで保存します。デザインツール側で余白部分に見出し、割引率、クーポンコード、アクションボタンを配置し、サイトやメールの実際の掲載幅に合わせて切り抜きます。
バナーにはどの縦横比を選ぶべきですか？
Webサイトのトップを飾る大型ヒーローバナーには21:9を、通常のサイトバナーやメールヘッダーには16:9を使用します。
| 用途 | 推奨比率 | 余白の位置 | 注意点 |
|---|---|---|---|
| Webサイトのヒーローバナー | 21:9 | 左側3分の2 | スマートフォン表示では幅が狭く切り抜かれるため、商品は中央寄りに配置します |
| Webサイトの通常バナー | 16:9 | 左側半分 | サイトの実際の表示サイズに合わせてトリミングします |
| メールヘッダー | 16:9 | 上部または中央 | メールの横幅は狭いため、文字サイズを大きめに設定します |
| カウントダウンエリア背景 | 16:9 | 中央の広めの領域 | カウントダウン機能を持つタイマーパーツを重ねて表示します |
| SNS用横長カバー | 16:9 | 左上 | プラットフォーム側で表示領域が自動トリミングされるため、被写体を端に寄せすぎないようにします |
コピーして使えるブラックフライデー向けバナープロンプト8選
すべてのプロンプトはGPT Image 2.5に対応しています。比率はサイズまたは縦横比のメニューから選択し、プロンプト内の比率表記は構図の補助として機能します。[画像1]を含むプロンプトは、事前に商品写真ノードを接続して使用します。
01 · Webサイトのヒーローバナー、商品は右側（16:9）
[画像1]は商品の参照画像です。16:9の横長プロモーション背景。商品全体を右側3分の1に配置し、左側には小物を一切置かず、平坦で均一なウォームグレーの壁面を広く確保します。商品の右後方にわずかにぼかした深紅のリボンを数本配置し、柔らかなサイドライトで照らします。商品の輪郭と色を正確に維持してください。左側は見出し文字配置用の領域です。文字、数字、価格、クーポンコード、ロゴ、透かしは一切生成しないでください。02 · 超ワイドな余白構図（21:9）
[画像1]は商品の参照画像です。21:9の超ワイドバナー背景。商品全体を画面の右端寄りに配置し、手前にはマットなダークグレーの台を置き、右側に控えめな温かみのあるゴールドのペーパークラフト装飾を配置します。左側3分の2はテクスチャのないクリーンな空間にします。商品の形状や細部のディテールを正確に維持し、柔らかなスタジオ照明で照らし、商品が画面の端に触れないようにします。文字、数字、価格、割引率、クーポンコード、透かしは一切生成しないでください。03 · メールヘッダー、中央余白構図（16:9）
[画像1]は商品の参照画像です。16:9のメールヘッダー背景。商品全体を画面の右下に配置し、左下に数本のモミの小枝を添え、上部および中央全体にクリーンなベージュの余白を確保します。商品の本来の色と形状を維持し、明るく柔らかな光を当て、装飾が商品を覆い隠さないようにします。文字、数字、セール価格、クーポンコード、透かしは一切生成しないでください。04 · カウントダウン用背景（16:9）
16:9の横長フェスティブ背景。ダークチャコールのグラデーションを基調とし、画面の両サイドに深紅のファブリックリボンを各1本、下端に沿ってぼかした金箔フレークを少量散りばめ、中央に広々とした平坦な余白を確保します。時計、文字盤、スプリットフラップ表示器（パタパタ式表示板）は含めず、数字、文字、記号、価格、透かしは一切生成しないでください。05 · クーポンコード用背景（16:9）
[画像1]は商品の参照画像です。16:9のショッピングシーズン向け背景。商品全体を左側に配置し、右側には後からクーポンコードを配置するための、外周にごく淡い影が落ちた明るく平坦なベージュの領域を確保します。商品の色と構造を維持し、他の商品は一切含めないでください。カード上の文字、破線やテキスト、数字、アルファベット、価格、クーポンコード、透かしは一切生成しないでください。06 · SNS用横長カバー（16:9）
[画像1]は商品の参照画像です。16:9の横長カバー画像。商品全体を中央やや下寄りの右側に配置し、マットなディープグリーンを背景として、左上および両サイドにクリーンな余白を確保し、遠景に柔らかな暖色の光を数点配します。商品の色は元画像に忠実とし、輪郭が照明で飛ばないようにします。見出し、価格、割引率の数字、日付、クーポンコード、ロゴ、透かしは一切生成しないでください。07 · 深紅ペーパークラフトのワイドバナー（21:9）
21:9の超ワイドなフェスティブバナー背景。深紅の折り紙やペーパークラフトの装飾を右端のみに配置し、左側と中央は光の反射ムラや密なテクスチャのない、平坦なライトベージュにします。柔らかな照明を当て、紙の陰影による奥行きを持たせ、後からのレイアウト用余白を残します。文字、アルファベット、数字、カウントダウン、価格、クーポンコード、透かしは一切生成しないでください。08 · モバイル切り抜き対応構図（16:9）
[画像1]は商品の参照画像です。16:9のバナー背景。商品を中央やや右寄りに配置し、全体の輪郭と両脇のマージンを明確に残します。左側はクリーンなライトグレーの背景とし、右端にのみ深紅のリボンを数本あしらいます。商品の色と視認できるパーツを維持し、柔らかなサイドライトを当て、スマートフォン向けの縦長トリミングが容易なように被写体をコンパクトに収めます。文字、価格、数字、クーポンコード、透かしは一切生成しないでください。余白をきれいに保つプロンプトはどのように書きますか？
商品の配置場所、余白の位置、そして生成させない除外要素の3点を漏れなく指定します。
| プロンプトの記述 | 指示内容の特徴と課題 | 結果 |
|---|---|---|
| 「全品50%オフ、クーポンコードBF2026と書かれたブラックフライデーのバナーを作成して」 | AIに正確な文字や数字の描画を求めている | 文字が崩れる可能性が高く、余白の位置も制御できません |
| 「商品は右側3分の1、左側に大きくクリーンな余白を確保し、文字は一切含めない」 | 配置位置、余白領域、除外事項がすべて明確に定義されている | レイアウト作業にそのまま使える背景を初手で得やすくなります |
余白部分に意図しないテクスチャやハイライトの斑点が生じる場合は、プロンプトに「左側は均一で平坦、テクスチャやハイライトの斑点なし」と追記して再生成します。装飾が商品に重なってしまう場合は、小物の数を減らすか「装飾が商品を覆い隠さない」と指定してください。
カウントダウンやクーポンコードをミスなく配置するにはどうすればよいですか？
すべてデザインツール側で重ねて配置し、文字を1文字ずつ入念に校正します。
- クーポンコード：視認性の高いサンセリフ（ゴシック系）フォントを用い、十分なサイズで背景とのコントラストをしっかりと確保して配置します。配信前にコードを自分でコピー＆ペーストして適用できるかテストしてください。
- 割引率と終了日時：実際のキャンペーン規約と完全に一致させ、対象のタイムゾーンも明記します。
- カウントダウンタイマー：画像データ自体は静止画であるため時間変化しません。Webサイトでは余白部分にHTMLやタイマーコンポーネントを重ね、メールでは配信サービスの動的カウントダウン機能を使うか日替わりで画像を差し替えます。
- アクションボタン：「今すぐ購入」などのボタンはWebサイトやメールのエディタ上で作成します。画像内にボタンを描き込んでしまうとクリック操作ができません。
バナー一式を作成するには何クレジット必要ですか？
GPT Image 2.5の1Kなら1枚あたり2クレジットで生成できるため、8種類のプロンプトを1回ずつ試しても計16クレジットで済みます。以下の消費クレジット数は2026-10-29時点の基準に基づいています：
| 解像度 | 1枚あたり | 8枚合計 |
|---|---|---|
| GPT Image 2.5 1K | 2クレジット | 16クレジット |
| GPT Image 2.5 2K | 3クレジット | 24クレジット |
| GPT Image 2.5 4K | 4クレジット | 32クレジット |
Webサイトのトップを飾る大型ヒーローバナーは、最終稿として2Kまたは4Kで生成することをおすすめします。再生成を行うたびに都度クレジットが消費されるため、生成前にボタンに表示される数値を確認してください。
この方法にはどのような注意点や制約がありますか？
- 文字や数字は後から追加する必要がある：生成画像に描かれる文字は精度が安定しません。
- 商品の細部がわずかに変化する場合がある：ロゴやラベル、細かな印字は変形することがあるため、重要な画像は実物と照合してください。
- 各サイズへの自動リサイズには非対応：出力される画像は1枚であるため、サイトやメールの横幅に応じた切り抜きは手作業で行います。
- 静止画であるためタイマーは動かない：Webサイトやメール配信ツールのカウントダウン機能を利用する必要があります。
よくある質問
AIにクーポンコードや割引率を直接バナーへ書き込ませることはできますか？
おすすめしません。生成画像内の文字や数字は崩れやすく、クーポンコードのスペルが1文字でも異なると購入者が利用できなくなります。AIには余白を残した背景のみを生成させ、見出しや割引率、コードはデザインツール側で追加して文字校正を行ってください。
Webサイトのバナーとメールヘッダーで同じ画像を使用できますか？
ビジュアルのトーンは統一できますが、サイズは個別に調整する必要があります。Webサイトのバナーは21:9や16:9が主流であり、メールヘッダーは16:9をメールの表示幅に合わせて切り抜くのが一般的です。同じ商品写真と同一の配色パレットから別々に生成することで、キャンペーン全体に統一感を持たせられます。
画像内にカウントダウンタイマーを埋め込むことはできますか？
画像は静止画であるため、自動でカウントダウンすることはありません。中央に余白を設けた背景を生成し、Webサイトやメール配信ツールのタイマー機能を使って重ねるか、残り日数を記載した画像を毎日差し替えてください。
バナー背景1枚の生成にクレジットはどのくらいかかりますか？
GPT Image 2.5の場合、1枚あたり1Kは2クレジット、2Kは3クレジット、4Kは4クレジットです。本記事のプロンプト8選を1Kで1回ずつ試すと計16クレジットになります。正確な消費量は生成ボタンに表示される数値をご確認ください。
まずは手元にある商品写真とプロンプト01および03を使い、1KでWebサイト用バナーとメールヘッダーを各1枚生成してみてください。余白の配置や配色のバランスに納得できたら、2Kまたは4Kで最終版を出力し、デザインツールで見出しや割引率、クーポンコードを配置しましょう。
