Nano Banana Pro (Gemini 3) の画像生成能力を使って、バナー広告のリサイズ作業をAIで代行できるか検証した実験プロジェクトです。
Webデザインの現場では、1つのオリジナルバナーから様々なアスペクト比のバリエーションを作成する「リサイズ作業」が頻繁に発生します。同じコンテンツ（ロゴ、キャッチコピー、商品画像、価格など）を、160x600、300x250、728x90といった異なるサイズに展開する作業です。
Nano Banana Proで画像生成能力が格段に改善されたと聞き、この定型作業をAIで自動化できないか試してみました。
以下の3つの素材を入力として与え、指定サイズのバナー画像を生成させます：
- 背景画像 - バナーのベースとなる画像
- 仕様書（YAML） - ブランド名、キャッチコピー、価格、デザインガイドラインなど
- クリエイティブ作例 - 完成形のイメージを示す参考バナー
Nano Banana Proに以下のシステムプロンプトを与えています：
ユーザーの指示した解像度のバナー画像を作成してください。
**バナー画像であるため、解像度の順守は最重要ポイントです。必ず守ってください**
アスペクト比の順守を強調していますが、後述の通り横長バナーではこの指示が守られませんでした。
campaign_info:
brand_name: "ESSENCE (エッセンス)"
product_name: "S1 Oven"
target_audience: "本質的な価値とデザインを追求する富裕層"
brand_tone: "Sophisticated, Minimalist, Architectural, Innovative"
content_assets:
# ブランド・製品ID：最優先表示
identity:
brand_logo_text:
text: "ESSENCE"
priority: "high"
product_name:
text: "S1 Oven"
priority: "high"
# キャッチコピー：製品の世界観を決定づける言葉
copywriting:
main_catch:
text: "キッチンに、彫刻を。"
priority: "high"
note: "家電を超えた存在感を表現"
sub_catch:
text: "気配を消したテクノロジーが、完璧な火入れを実現する。"
priority: "mid"
note: "革新的な機能（見えないインターフェースとAI調理）を示唆"
# 価格情報：重要度を上げ、分かりやすい税込表示に変更
pricing:
price_display:
text: "¥207,900（税込）"
priority: "high"
note: "本体価格¥189,000＋消費税"
# 特徴：具体的な革新性を示す要素
features:
- item:
text: "Invisible Touch Interface（隠された操作盤）"
priority: "mid"
- item:
text: "AI Chef Engine搭載による自律調理"
priority: "mid"
- item:
text: "継ぎ目のないモノリス一体成型ボディ"
priority: "low"
# デザイン指定（メタデータ）
design_guidelines:
font_family: "Futura, Avenir, Noto Sans JP, sans-serif"
text_color: "#FFFFFF"
background_image_tone: "Dark, Moody, Premium"
layout_note: "余白を贅沢に使い、美術館の展示品のように見せること。価格は明確に伝える。"正方形に近いアスペクト比のため、比較的良好な結果。レイアウトのバランスも取れています。
縦長フォーマット。要素の配置が適切で、読みやすいレイアウトになっています。
極端な縦長でも、コンテンツを縦に並べて対応できています。
横長ですが比率が緩やかなため、まずまずの結果。
問題発生: 極端な横長アスペクト比（約8:1）に対応できず、生成された画像は指定よりも縦長になりました。後処理でクロップしているため、上下が切れた状態になっています。
問題発生: 728x90と同様、極端な横長（約6.4:1）に対応できていません。
6種類のバナーを生成した際の実行結果です。
| 要求サイズ | AI出力 | アスペクト比差 | 最終サイズ | ファイル | 時間 |
|---|---|---|---|---|---|
| 160x600 | 528x2000 | -0.003 | 160x600 | 23KB | 24.22s |
| 300x250 | 1136x944 | +0.003 | 300x250 | 21KB | 22.13s |
| 728x90 | 1024x1024 | -7.09 | 728x90 | 11KB | 49.96s |
| 320x50 | 1024x1024 | -5.40 | 320x50 | 4KB | 29.37s |
| 300x600 | 720x1456 | -0.005 | 300x600 | 44KB | 22.66s |
| 1200x628 | 1424x752 | -0.017 | 1200x628 | 123KB | 23.88s |
| 要求サイズ | プロンプトトークン | 出力トークン | 合計トークン |
|---|---|---|---|
| 160x600 | 1,107 | 1,381 | 3,151 |
| 300x250 | 1,107 | 1,350 | 2,569 |
| 728x90 | 1,106 | 1,843 | 3,268 |
| 320x50 | 1,106 | 1,296 | 2,883 |
| 300x600 | 1,107 | 1,364 | 2,674 |
| 1200x628 | 1,108 | 1,376 | 3,077 |
| 合計 | 6,641 | 8,610 | 17,622 |
- 合計: 約172秒（約2分52秒）
- 平均: 1バナーあたり約29秒
- 最速: 300x250（22.13秒）
- 最遅: 728x90（49.96秒）
横長バナー（728x90）の生成に最も時間がかかっています。これはアスペクト比の制約を満たせず、モデルが試行錯誤している可能性があります。結果的に1024x1024の正方形が出力されており、指示に従えなかったことがわかります。
- 入力トークン: 約1,100で一定（同じ素材を使用しているため）
- 出力トークン: 1,296〜1,843で変動
- 合計: 6バナーで約17,600トークン
興味深いことに、横長バナー（728x90）では出力トークンが最大（1,843）となっていますが、結果は1024x1024の正方形でした。トークンを多く消費しても、モデルの苦手なアスペクト比を克服できないことを示しています。
- 正方形に近いアスペクト比（300x250など）: 良好
- 縦長フォーマット（160x600、300x600）: 良好
- 緩やかな横長（1200x628）: 概ね良好
- 極端な横長フォーマット（728x90、320x50）: アスペクト比を守れない
- フォントの安定性: バナーによってフォントにバラつきが見られる
- 再現性がない: 生成AIのため、実行するたびに結果が異なる
Nano Banana Proは、極端に横長の画像を生成することが苦手なようです。システムプロンプトで「解像度の順守は最重要」と強調しても、生成される画像は正方形に近づいてしまいます。
また、フォントの選択やレンダリングがバナーごとに微妙に異なり、クリエイティブとして厳しい観点から見ると統一感に欠けます。
さらに、生成AIである以上、決定論的に毎回同じ結果が出るわけではありません。同じ入力でも実行ごとに結果がばらつくため、品質の安定した出力を得るには複数回生成して選別する必要があります。この点も実用化に向けた課題と言えます。
一方で、明示的に指示していないにもかかわらず、AIが自律的に対応してくれた点もありました：
- テキストの配置: サイズに応じて要素を適切に再配置
- カラーの調整: 背景色に合わせた文字色や装飾の調整
- 画像の延長（アウトペインティング）: 背景画像の存在しない領域を自然に補完・延長
キッチンシンクがやたら小さくなるなど、よく見ると違和感はあるものの、こうした「気の利いた処理」を自動でやってくれるのは大きな可能性を感じます。
- プロンプトエンジニアリングでの改善
- 横長バナーは複数回生成して選別
- 後処理（リサイズ・クロップ）との組み合わせ最適化
- 他のモデルとの比較
この実験は一つの検証結果であり、工夫次第で改善できる可能性はあります。
実験を再現したい場合や、別の素材で試したい場合は DEVELOPMENT.md を参照してください。
- 環境構築（Go、APIキー設定）
- 素材の差し替え方法
- spec.yml の書き方
- 内部実装の解説