見出し画像

広告バナーをAIで最適化｜分析＋改善案を最短38秒で提案

ふじわらこうすけ

こんにちは！
今回は、広告用バナーの最適化案をAIを使って提案するアプリを作ってみます。

大まかな流れ

1.バナーの要素を分解し、データベースに格納

2.格納されたバナーの要素を踏まえて、最適化案を提案

今回は、シナリオを２つに分けています。
使い方次第では1つのシナリオにまとめることもできますが、幅を持たせるには分けておいた方がオススメです！

バナーの要素を分解し、データベースに格納

シナリオの1つ目の主役は、Google CloudVisionのモジュールです。

Run Label Detection within an Image

画像内のエンティティに関する情報を、幅広いカテゴリーグループにわたって検出・抽出する。

Run Text Detection (OCR) within an Image

テキスト検出／光学式文字認識（OCR）を実行し、画像からテキストを抽出します。画像がドキュメントの場合は、フラグをチェックして、高密度の検出を最適化します。

Compute Image Dominant Colors and Iterate the Result Array

画像内のドミナントカラーの配列を計算し、繰り返し処理します。

ザックリやってることをまとめると
バナーに含まれる「要素」「テキスト」「メインカラー」を抽出しています。

抽出した内容をデータベースへ格納

ちょっと見辛いですが、こんな感じで格納しておきました。

今回は、スプレッドシートをDBがわりに使っています。

make側の内容はこんな感じ。

番外編として、ぜひ使っていただきたいのは取得した画像をスプレッドシートのセルに突っ込める関数です。

=image("https://drive.google.com/uc?id={{18.id}}&.JPG")

注意点としては、Google Driveのフォルダ共有権限を「全体向け」にしている必要があります。

これで、Google Driveに格納しておいた画像の要素をGoogle SpleadSheetsに格納することができました！
日々の運用では、このシートにCTRやCVRを追記しておくことをオススメします。

格納されたバナーの要素を踏まえて、最適化案を提案

AIに学習させるバナーを抽出する

下記画像では、とりあえず全てのバナーを抽出するようにしていますが
CTRやCVRの高い上位3件を抽出する！とかにしましょう。

抽出した要素を持たせて、ChatGPTで最適化案を提案してもらう。

プロンプト文が長くなったので、全文を別途記載しておきます。

下記は広告用のバナーの要素をGoogleVisionを用いて解析したものです。
３つのバナーを参考にして新しいバナーを作る場合、どのような要素を含めば良いかを提案してください。
なお、要素の英語は日本語に翻訳してから出力してください。

- 前提条件
バナーサイズ：300*250

* バナー1

{{3.array[1].`1`}}
{{3.array[1].`2`}}
{{3.array[1].`3`}}
{{3.array[1].`4`}}
{{3.array[1].`5`}}
{{3.array[1].`6`}}
{{3.array[1].`7`}}
{{3.array[1].`8`}}
{{3.array[1].`9`}}
{{3.array[1].`10`}}

{{3.array[1].`11`}}

{{3.array[1].`12`}}

* バナー2
{{3.array[2].`1`}}
{{3.array[2].`2`}}
{{3.array[2].`3`}}
{{3.array[2].`4`}}
{{3.array[2].`5`}}
{{3.array[2].`6`}}
{{3.array[2].`7`}}
{{3.array[2].`8`}}
{{3.array[2].`9`}}
{{3.array[2].`10`}}

{{3.array[2].`11`}}

{{3.array[2].`12`}}


* バナー3
{{3.array[3].`1`}}
{{3.array[3].`2`}}
{{3.array[3].`3`}}
{{3.array[3].`4`}}
{{3.array[3].`5`}}
{{3.array[3].`6`}}
{{3.array[3].`7`}}
{{3.array[3].`8`}}
{{3.array[3].`9`}}
{{3.array[3].`10`}}

{{3.array[3].`11`}}

{{3.array[3].`12`}}


デザイナーにイメージを伝えられる状態の文章で、新規バナー案を出力

提案内容を確認！

いよいよ、提案内容が抽出されます。

新規バナーの提案： バナーサイズ：300*250
要素：
1：Azure（紺碧）
2：Font（フォント）
3：Electric blue（エレクトリックブルー）
4：Logo（ロゴ）
5：Brand（ブランド）
6：Output device（出力デバイス）
7：Gadget（ガジェット）
8：Sharing（共有）
9：Circle（円形）
10：Graphic design（グラフィックデザイン）

テキスト内容： "PROMPT MAKER" "by FINKICK"

メインカラー：RGB (55, 157, 202)

新しいバナーの要素は紺碧とエレクトリックブルーの溶け込み感を活かして作成してください。
ロゴとブランド名は中央に配置し、出力デバイスやガジェットの図案を周囲に散りばめる形をイメージしています。
円形のデザインを取り入れてダイナミックな印象を与えつつ、全体的に共有感を強調するように配置してください。
テキスト内容は"PROMPT MAKER"と"by FINKICK"を使用し、フォントは表示が鮮明で視認性の高いものを選んでください。
メインカラーはRGB (55, 157, 202)を用いて、エレクトリックブルーを基調としつつもより鮮やかで視覚的な印象を強める仕上がりとしてください。

最終提案文章は改善余地がありそう。
だけど、使えそう！

おそらく、この文章だけを渡されてもチンプンカンプンだとは思うので
口頭補足は必要になりそうですね。

試しに、midjourneyで生成してみた。

これ…レスポンシブ広告とかだとそのまま使えるかもなあ…
バナーの共通点を見つけて、次のバナー制作のヒントを与えてくれるので、上手く使える可能性も高そうです。

実際に何かで使ってみる

広告用バナーでも良いし、SNSとかの投稿写真の最適案を探す方法になるかもしれないです。
実際に何かに使ってみます！

Twitterでご希望いただければ、blueprintをプレゼントします。


この記事が参加している募集

#AIとやってみた

27,472件

この記事が気に入ったらサポートをしてみませんか？