#29 サイトに最適化する広告自動生成ツールを作ったら感動できた

はじめに

このブログでは、AIだけで、どこまで開発ができて、できないのか？という試行錯誤をする企画 をしています。その第29回です

今回は、前回作ったサイトURLと商品情報を元に広告を自動作成するツールを作った際に、「できたっちゃ、できたが、品質はそこまで高くない」と悔しい思いをしました。

結果はこんな感じ

以前の試行錯誤の内容
https://zenn.dev/acntechjp/articles/175b838396a01f

そこで今回は、こちらの広告自動生成ツールを改善し、広告作成ツールv2.0を作ろうと思います！

では、やりましょう！

最終的に作ったもの

最終的につくったものは
特に太字の箇所を重点的に、前回と変えています。

1. サイトのURL、商品内容を入力した上で、広告制作する商品の画像を添付
2. 入力されたサイトを分析
3. 2で分析した内容と、添付された画像からGeminiでキャッチコピーを生成
4. 2で分析した内容と3で作ったキャッチコピー、添付された画像からGeminiがGemini 2.5 Flash Imageのプロンプトを作成
5. プロンプトをGemini 2.5 Flash Imageに連携し、画像生成

動画でもご覧ください！
https://youtu.be/dXHSvUiAkRs

ツールで作った広告たちのご紹介

上記のように、広告掲示したいURLと、商品の簡単な紹介、商品画像を載せるだけで掲示先に合わせて画像生成された広告は以下のような感じです。

ミッキーぬいぐるみの広告

以下の商品の広告をまずは作ります！

ミッキーぬいぐるみのZennのサイト向け広告

zennのサイトをテクノロジー関連と見事に読み取り、テクノロジーなミッキーのぬいぐるみを生成しました。元の商品から乖離があるので、広告としてこれでいいのか？という話はありますが、高い品質ですね。

ミッキーぬいぐるみのマクドナルドのサイト向け広告

マクドナルドについては、ちゃんとマクドナルドの製品も生成して、ミッキーのぬいぐるみを置いてくれました

ロクシタンのシャンプーの広告

シャンプーのような商品画像以下でもやってみます

ロクシタンのシャンプーのZennのサイト向け広告

ロクシタンがZennに広告を出すとしたらというテーマです。Code & Repair というキャッチコピーがなんだかいいですね。

ロクシタンのシャンプーのマクドナルド向け広告

続いてマクドナルドに広告を出すとしたら？です。ハンバーガーではなく、フランスらしくクロワッサンにしながらも、ハンバーガーのイラストなどでマクドナルドを表現してますね。

ビッグマックの広告

最後は、みんな大好きビックマックです。

ビッグマックのZennのサイト向け広告

ビッグマックの広告をZennに出すとしたら、テクノロジーの中にビックマックが配置されてる感じになりました。Tech Favorite Fuelという、コピーも秀逸です。

すごい、、、と思うのは私だけですか？
少なくとも明らかに、前回のものとはクオリティが変わっていますよね。

前回からの変化

前回からの修正ポイントは主に3つです

1. 日本語を諦める
2. Geminiでコピー作成→nano-bananaで文字入れ込み指示
3. プロンプト生成依頼プロンプトの改善

日本語を諦める

前回は日本語の文字化けや配置の問題をクリアするために、文字だけを入れた白背景の画像を作って、それを合成させました。
しかし、その結果文字配置は別で決まってしまうので、画像を考慮した、文字の配置ができませんでした。
そこで、日本語を一旦諦め、文字化けしない英語でチャレンジをしました。
いずれ日本語でも対応できるように試行錯誤を今後もします。

Geminiでコピー作成→nano-bananaで文字入れ込み指示

続いて、コピーはGeminiで生成し、nano-bananaで生成したコピーを入れるように指示しました。前回は、文字化け回避のため、先に文字だけを入れた画像を作ってのは先の通りです。
前回と構造は変わりませんが、nano-bananaのプロンプトにコピーを英語入力して、この文字を入れるようにと指示できていることで、コピーを考慮した広告画像作成をできるようになり、文字と画像の破綻が少なくなりました。

プロンプト生成依頼プロンプトの改善

さて、ここまでで何となくお気づきかと思いますが、今回の広告で大切だったのはプロンプト、そこで、以下のサイトのプロンプトを参考に指示文を書くようにGeminiに依頼しました。

nano bananaのプロンプト参考サイト
https://github.com/JimmyLv/awesome-nano-banana

こちらの以下のプロンプトを参考にしました。

A minimalist and creative advertisement set on a clean white background.
A real [Real Object] is integrated into a hand-drawn black ink doodle, using loose, playful lines. The [Doodle Concept] interacts with the object in a clever, imaginative way. Include bold black [Ad Copy] text at the top or center. Place the [Brand Logo] clearly at the bottom. The visual should be clean, fun, high-contrast, and conceptually smart.

※Note: Replace [Real Object], [Doodle Concept], [Ad Copy], and [Brand Logo] in the prompt with specific details. For example: [Real Object]: coffee bean [Doodle Concept]: The giant coffee bean becomes a space planet, with a small astronaut planting a flag on its surface [Ad Copy]: "Explore Bold Flavor" [Brand Logo]: Starbucks logo

このプロンプトは比較的、広告が上手く書けていたので、例として用いて、サイトURLや商品概要によって広告の雰囲気やイメージの文章を変えるように指示しました。

これにより、今回のような綺麗な広告が出せているので、ぜひ参考にしてください。

おわりに

いかがでしたか？
今後は以下をトライしてv3.0を作ろうと思っていますので、ぜひウォッチしてください。

1. 広告とWebサイトの自動マッチングをした上での広告自動生成（適切な商品を適切なサイトに割り当てる）
2. 日本語広告の作成

また、nano-bananaの品質は結構プロンプトでも大きく変わる印象なので、作りたいものがあれば、ぜひプロンプトにこだわってください。

AIだけでツールを作る挑戦を今後も続けていきますので是非是非お気軽にご覧ください。