Data Driven Knowledgebase

みなさんA/Bテストを実際にやったことありますか？A/Bテストとは現在抱えている問題点を解決するとき、様々な策を実行して結果を比較することで、最も効果的な解決策を見つけ「これを改善すればいいんだ」とパターンを知ることもできます。特にWebサイト上のA/Bテストは見た目や文言を少しづつ変えて最適なパターンを見つけ、「この文言で、このデザインならクリック率が上がるんだな」と傾向を掴み、さらに改善していきます。

私も初めてやってみてなかなか手こずったので要点をまとめていきます。試しに一度このページを読み込み直してみてください。右上のバナーが切り替わっていますね？(2023/8/14時点)

以下が作成した画像パターンです。



A/Bテストには様々なやり方があると思いますが、今回はPDCAサイクルに沿ってA/Bテストを行なっていきますのでそれぞれの段階に分けて紹介します。

最初に現状を知ること、そして目標を設定します。ここではバナーのクリック数をあげることが目標であり、そのために今よりもクリックされるようにバナーの見た目を変えて比較することで、どのようなバナーが最適であるのか評価していきます。

目標が決まったところでA/Bテストに必要な工程やツールを洗い出しましょう。A/Bテストは一朝一夕で終わるものではないため、このように洗い出すことでよりゴールが明確に見えるようになります。

バナーは大きく分けて二つの要素「文言」と「デザイン」から構成されており、それぞれパターンを変えて検証する必要があります。例えば求人のバナーの「文言」であれば会社名や事業内容を押し出すのか、働き方や福利厚生を押し出すのか等を複数パターン考えましょう。

デザインであればどんな色・素材感の背景にするのか、文字の色やバナーの形状などもバナーの見た目を変える要因であるものは一つ一つ検討していきます。

例えば商品を購入して欲しい時、考えられる要素のパターンとして

文言：「商品の魅力・使用効果」「どれだけ購入されているか・実績」

「キャンペーン中である」「どんな人が使っているのか・使用例」

✖️

デザイン：「起用モデルが目立つように」「製造ブランドが目立つように」「商品自体の魅力が目立つように」

これだけでざっと12通りのパターンでA/Bテストを行うことが考えられます。

この時必要であるのは目標とターゲットを常に考えておくこと、バナーに書かれている内容やデザインと遷移先のページとの間に違和感がないことです。ターゲットに刺さるような文言であるか、目を引くデザインであるか、は意識してバナー計画を立てましょう。

バナーの文言やデザインをどのようなパターンにするか決まったところで、実際にバナー作成に用いる文言とデザインを決定します。

自分は文言・デザインどちらもセンスに自信がなかったのでの文言の部分はChat-GPTに、デザインの部分は下記の記事を参考にMidjourneyに頼りました。

https://blog.since2020.jp/ai/guide_midjourney/

Midjorneyではブログを読んでくださる技術者の人に好まれるようなデザイン背景を赤紫色(SiNCEの会社名部分の色)と青色(SiNCEのロゴ部分の色)をメインカラーにした二種類の背景作成をお願いしました。

Chat-GPTでは「データ」「DX」等入れたいキーワードや文字数を制限して15個ほど生成したり、その中から組み合わせたりして最終的に3パターンまで絞りました。下記は絞り込み段階での命令文を再現したものです。



Midjorneyから生成されたデザインとChat-GPTで生成した文言をCanvaというツールを使って組み合わせ、場合によっては一部修正を加えてバナーの画像を完成させていきます。今回は文字３パターン、背景３パターンを組み合わせて合計６パターンを作成します。

この時気を付けるべきこととして、文字のフォントや色の組み合わせについてバナーとそれがあるWebページとの間に違和感が生まれないように、CTAボタンとしてバナーをクリックした先のページとも違和感がないように見た目を整えましょう。これは正解があるものではないので、様々なパターンを作成しましょう。

ここまでで複数パターンのバナー画像が作成できましたね！これからはいよいよA/Bテストを実行するための設定に入っていきますので、そちらの手順は後編にて紹介します。後編はこちらから