生成系AIを活用してABテスト用Webバナーを作成！

2023/11/13

末川愛梨

生成系AIを活用してWebバナーを作成！

本記事ではABテストに用いるWebバナー作成について、CharGPTとMidjourneyの活用方法をお伝えしています。

はじめに

WebバナーのABテストについて、これまでいくつか記事を書いてきましたが「生成系AIを使ったバナー作成過程について、もっと詳しく教えてほしい！」という声があったので思い切って記事にしてみました。

・Webバナー作ることになったけど、1からデザインする自信ないかも…
・生成系AIに興味がある、触ってみたい！
・気軽にABテストを試してみたい！

このような方へ是非読んでいただきたい記事になっており、私自身AIやデザインについてほぼ初心者状態でしたが、なんとか形にすることができたのでとても参考になると思います！それでは本編いきましょう！

ChatGPT-キャッチコピー作成-

キャッチコピーを作る上で、まずはWebバナーは

・誰に向けたもの？
・何を伝えたい？

という大枠を把握しましょう。これは今後複数バナーを作成するとなっても変わらない絶対条件であり、複数のバナーパターンであっても共通している要素です。それに対して

・どんな伝え方をする？
・キャッチコピーはバナーのどこに置く？

など「決定していないもの」「複数パターン考えられるもの」についてはABテストの対象要素であり、複数バナーで異なっている要素です。

筆者は今回バナーにおいて

・データエンジニア・データサイエンティスト向け
・データに携わる様々な職種で募集していることを伝えたい

は全バナーで共通しています。それに対してキャッチコピーについて

1,企業理念なのか、事業内容なのか

2,”募集”の文言を入れるか否か

等比較要素があるため、これを検証していきます。

はじめに筆者は「エンジニアはどのような文言に興味を惹かれるのか」ChatGPT先生に聞いてみました。

エンジニアの皆さん、どうでしょうか？個人的には「技術・創造・自己成長」といった言葉は、エンジニアの特徴を良く捉えているように感じました。

続いてSiNCEのPURPOSEである「データで、世界をもっと革新的に」に関連した文言を5つほど生成してみましょう。

・「~~しよう」と問いかけるような口調
・入社した際、どんなふうに活躍できる場所なのか
はパターンの内の一つとして盛り込みたいと思います。そして先ほどの比較要素を考慮し、最終的なキャッチコピーとそれに付随する本文は以下の6パターンになりました！

ちなみに以下は実際のバナーパターンです。キャッチコピーに注目して見てみてください！

ChatGPT-プロンプト作成-

実はChatGPTを使ってプロンプトを作成することができます。少しややこしいですが「こういう感じのプロンプトを作って欲しい」というプロンプトを投げ、ChatGPTより最適なプロンプトを出力していきます。

今回は画像生成AIツールに投げるためのプロンプトを作成します。ChatGPTに投げるプロンプトには以下の情報を入れます。

1,何のために画像生成を行うのか

→今回は会社の採用を行なっているバナー作成が目的

2,どのような詳細情報をプロンプトに含ませて、出力させたいか

→今回は出力言語や画像生成AIに作って欲しい画像の詳細(色使いや模様など)を指定

これでプロンプトを作成できました！

Midjourney-バナー背景作成-

Midjourneyとは画像を生成するAIです。バナーを作成する上で、少しデザインの凝ったパターンのバナーも作成してみたかったのでMidjourneyにお任せすることにしました。

Midjourneyの使い方については、以下の記事を参考にしました！

【AIエンジニア必見】Midjourneyを使って「スターウォーズの世界のスターバックスコーヒー」を生成してみた

ではMidjourneyに上でChatGPTに作ってもらったプロンプトを投げてみましょう！

いい感じですね！色のコントラストがあって、幾何学的なダイナミックな模様が出力されました。

上画像からヒントをもらって、今度は幾何学的でコントラストのある背景を出力してもらいました。

このデザイン、すごく良いですね！これは最終的なバナーの背景に使用しています♪