【初心者向け】AIでつくるバナー入門 | ABテスト用バリエーションも一瞬で大量作成

バナー作成の悩みをAIで解決

こんにちは、SPENDAの高橋です。

バナー作成についての悩みは、Web広告運用担当にとって尽きないものではないでしょうか。

なぜなら、バナーは基本Web広告運用担当者以外に依頼して作成するからです。

「外注するたびにコストがかさむ」

「修正のやり取りに時間がかかる」

「ABテストを回したいけど、バナーを複数パターン作る余裕がない」

こういった悩みは、広告運用者にとって大きな問題でした。

しかし、いまはAIツールでバナーを生成すれば、この悩みが解決できるのです。

本記事では、Web広告運用担当者がAIをつかってバナーを制作し、さらにABテスト用のバリエーションまで用意できるようになる実践的な方法を解説します。

バナーにかける費用や時間を節約したい、ABテストを高速で回したいけれど、、、といった悩みがあるWeb広告運用担当者、必見です。

AIで行うバナー作成の流れ

AIで行うバナー作成の流れは次の通りです。

なお、当記事では、バナー生成にはChatGPTを、ABテスト用のバリエーションを作成するにはGeminiを使っています。

バナー作成におけるおすすめのAI使い分け方法です。

無料では使用回数制限がありますが、ぜひ試してみてください。

では。それぞれ見ていきましょう

【STEP1】ChatGPTでバナーを作成する

まず、バナーそのものをChatGPTで作成します。

１から生成すると、現段階では日本語フォントがおかしくなることが多いので、元素材を用意したうえで合成してもらう形にします。

元素材もそれぞれChatGPTに合成してもらいます。

まずは、メインビジュアルになる女性の画像です。

ここでは、以下のプロンプトを打ちました。

左下の「＋」マークから、「画像を作成する」を選択したうえで、プロンプトを実行してください。

出来上がった画像が以下のものです。これをベースにバナーを生成します。

バナーのテキスト・ロゴ・CTAなどの配置は、簡単なアウトラインを作ってChatGPTに指示を出します。

今回は以下のアウトラインを使いました。

アイキャッチにはロゴのPNGファイルを使います。

すべての素材がそろったら製作開始です。

先ほどと同様に、左下の「＋」マークから「画像を作成する」を選択したうえで、プロンプトを実行してください。

今回は以下のようなプロンプトで進めます。

出来上がったのが以下のものです。

しかし、テキストが切れているのでこのままでは使えません。

ChatGPTと対話しながら修正し、以下のような完成形になりました。

メインコピーの文字数が多いため、CTAはChatGPTが位置を調整してくれました。

このように、こちらが指定した内容でうまくいかない場合には、ChatGPTが最適な配置に直してくれます。

ただし、「無料相談」の文字が間違っていました。

現段階ではChatGPTの日本語出力能力はまだまだ足りてなく、中国語フォントのような変な文字になることがよくあります。

そのため、この原型データをもとに、細部を手動で調整してする必要があります。

【STEP2】Windowsのペイントで修正する

細部の修正にはCanvaを使う方法がよく紹介されていますが、今回は、初心者でも簡単に扱うことができるWindowsのペイントを使用しました。

ChatGPTの出力でエラーが出やすいのは文字関連ですので、

「スポイトで文字周辺の色を拾い、表示がおかしい文字を消す」→「再度テキストを手入力する」

という方法で進められます。

出来上がったバナーが、次のものです。

このバナーと同じデザインで、他のサイズのバナーも作成します。

例として、300×300のバナーを作成します。

同じチャットの続きで、以下プロンプトを打ち込みました。

何回か対話して、このような形が出来上がりました。

これでバナーが出来上がりました。

【STEP3】Geminiで様々なバナーバリエーションを量産

先ほどまでの手順で、バナーが生成されました。

このバナーをそのまま広告に掲載するのもよいでしょう。

ただしより高い広告効果を出すには、バナーのABテストが欠かせません。

ABテストによって「実際にクリックされるバナー」を見つけることが、広告効果を高める最短ルートだからです。

CTRが20〜50%向上するケースもあるといわれ、ABテストは広告パフォーマンスの最大化にとってとても重要な位置を占めています。

そのABテストに必要なバナーバリエーションも、AIを使うことで、すぐに作ることができるのです。

ABテスト用のバナーバリエーションづくりは、Geminiを使います。

手順はいたってシンプルで、先ほど生成したバナーをそのままGeminiにアップロードし、背景を変えてほしい、服装を変えてほしいなどの指示をするだけです。

以下、実際にGeminiで生成したバリエーションの一部です。

背景をオフィス＆背景のみ少しトーンを落としたもの

女性をガッツポーズさせたもの

女性をスーツ姿の男性ビジネスマンにしたもの

このように様々なパターンを作り、ABテストを繰り返すことで、バナーの勝ちパターンが見えてくるでしょう。

AIでバナーを生成する際の注意点

ここでは、AIでバナーを生成する上での注意点について紹介します。

日本語が文字化けするときは手作業で修正を

ChatGPT・Geminiともに起こりやすいのが、バナー内の日本語テキストの文字化けです。

中国語のような変なフォントになったり、そもそも文字として認識できなくなる時もあります。

このようなときは、CanvaやWindowsのペイントで文字を消し、テキストを手入力することで修正しましょう。

縦横比の指定がうまくいかないときがある

1:1、16:9のようなメジャーな縦横比以外は、指定してもその通りに作ってくれないことがあります。

その場合は手作業で上下左右の空白を削除する修正をすることになりますが、上下左右の空白が少ない場合は調整が難しい場合もあります。

あらかじめバナーに入れる情報量を少なめにして、情報を中央に寄せるような指示を出しておくのも一つの手です。

まとめ

本記事では、ChatGPTとGeminiを活用したバナー作成の実践的な手法をご紹介しました。

外注コストや制作時間、ABテストのためのバリエーション不足といった、Web広告運用担当者が抱える課題は、AIツールの適切な活用によって大幅に改善できます。

ChatGPTでベースとなるバナーを生成し、Windowsのペイントなどで細部を調整、さらにGeminiでABテスト用のバリエーションを量産するという一連の流れを実践すれば、これまで数日かかっていた作業が数時間で完結します。

日本語の文字化けや縦横比の調整など、現時点では手作業での修正が必要な部分もありますが、AIの進化は日々加速しています。

今のうちにAIを活用したバナー制作のワークフローを確立しておくことで、広告運用の生産性を飛躍的に高め、より戦略的な施策立案に時間を使えるようになるでしょう。

ぜひ今日からAIバナー制作に挑戦してみてください。