26:Nano-Bananaと作るバナー広告自動生成ツールを作ってみた

はじめに

このブログでは、生成AIだけを使って、ツール開発をして、AIに何ができて、何ができないのか？を探る企画の第26回です。
今回は、前回、nano-bananaを用いて、漫画制作ツールを作ったのですが、その際に「広告などの在り方が変わるのでは？」と書きました。
前回記事はこちら
https://zenn.dev/acntechjp/articles/d5bc45df13b9af

そこで、今回はそのお試しとして、「バナー広告を自動で作るツール」を作ってみようと思います！

成果物

成果物としては以下のようなものを想定しました。

1. サイトのURL、商品内容を入力した上で、広告制作する商品の画像を添付
2. 入力されたサイトを分析
3. 分析した内容と、添付された画像から適切なバナー広告画像をGemini 2.5 Flash Imageで生成
4. Geminiで、キャッチコピーを生成し、キャッチコピーをバナー広告サイズの白字キャンパスに配置し、画像化
5. 生成した広告画像とキャッチコピー画像をGemini 2.5 Flash Imageで合成

これにより、高品質なバナー広告を作成することを目指します！

そんなイメージで、作ったのが以下です。
https://youtu.be/yqbdZa_6cCc

以下画像と、zennのURL、そして、商品説明としての「ディズニー100周年のプレミアムなぬいぐるみ」という商品説明を記載

すると、こんな感じの広告イメージを出力してくれました！

こういうこと？ですかね？

今回の学び　文字の重ね合わせの難しさ

今回の最大の困難は文字化けと、文字の配置でした。
それぞれ以下のような問題がありました。

• 文字化け
  →画像を合成する際に、日本語文字が化けてしまい、読めない広告画像が生成されてしまう。
• 文字の配置
  →文字を配置する際に、余白を狙って配置するが、唐突な折り返しをしたり、文字が全て入らないなど、自動で文字の配置がうまくできない

これらの問題は当初、作った広告画像に対して、文字を入れ込むことをしていたことが主な要因になっていました。
そこでこの問題をクリアするために「バナーサイズの無地のキャンパスに文字を記載した上で先に画像化し、その画像を生成画像と合成する」というやり方をとりました。

これにより、先に文字を書いて、文字の配置を決めているので、文字化けしないし、自然な配置
かつ、生成画像との合成側で自然になるように調整して合成することで、品質の維持
ができ、これが最適解でした。

今回の学び ClaudeCodeとの協業

今回、コード生成にClaudeCodeだけだと、非常に詰まったので、Codexも利用しました。
この際、以下のような分担をしました

• ClaudeCode:バックエンドの難しいポイントや初期開発など開発力を活かしたタスク
• Codex:要件の理解力を活かした、細かい修正

これにより、ClaudeCodeの開発力と、Codexの理解力をうまく住み分けて今回のツールを開発しました。この辺りは、もう少し研究したい部分です。

終わりに

いかがでしたか？
高品質かどうかはさておき、画像に文字を置きたい場合、先に文字ベースで画像化しておいて、画像合成のタイミングで合わせにいくというのは、生成AIは文字化けしがちなので、なかなか他にも応用できる考え方なのではないでしょうか。
また、CodexやClaudeCodeそれぞれの強みを活かした開発というのは今後も研究していきたいです。

引き続き、AIだけで何ができて、何ができないのか？を研究していきますので、ぜひご覧ください。