ABテストを結果から「最適なバナーとはどんなものなのか」について考察していきます。
目次
はじめに
現在Web上でバナーのABテストを行なっており、3ヶ月間のABテストの結果が出た為、本記事では、なぜこのような結果になったのか、次のABテストに活かせる改善点を探っていきます。 また本記事は後編となっており、前編ではABテストに用いたHubsspot上で、結果の確認方法をお伝えしています。参考になれば幸いです。 ABテストの結果の確認方法と結果発表!!比較要素は何？
様々なパターンを作成する上で、以下の要素を違いを持たせて複数パターンのバナーを作成しました。 1,背景 – 全体的な色・配色 — 赤系の配色/青系の配色 – 模様(雰囲気) — 機械的な雰囲気(幾何学模様)/明度グラデーション/無地 2,デザイン – 文字の色・大きさ・配置 — 文字の色は白色/背景・枠組に使われている色/会社ロゴに準ずる色 — 文字の大きさは大/小の2種類 — 文字の配置は左揃え/中央揃え – イラストの有無 – 会社ロゴの有無・配置 3,文字 – キャッチコピーの内容 — 会社名の有無 — 事業理念 – 強調したい文章の選定 — 文字数は15字以内/15~20字程度 — 雰囲気のオフィシャル/カジュアル クリック率順にランキング化してみると以下の通りでした。
これらのバナーは生成AIを活用して作成しました！例えばバナーの背景について、すごく良さそうな仕上がりになっていますが、実はこれMidjourneyという画像生成AIを用いて作成し、キャッチコピーについてもChatGPTを使用しています。詳しい生成AIを用い方についてはこちらでお伝えしています。
生成系AIを活用してWebバナーを作成！
なぜこのような結果になったのか考察する！
1,背景に注目 全体的な配色について、クリック率順に1位~4位は赤系の配色であり、5・6位は青系の配色であり、この結果より青系より赤系を使用した方がクリックされる確率が高いと感じました また背景の模様の有無によるクリック率にも注目しようと思います。 上画像のそれぞれ左二つのバナー、そして真ん中二つのバナーはそれぞれ同じ背景を使用していますがそれぞれに与えた特徴は 左二つのバナー背景は – 赤・赤紫(会社ロゴに使用されている色)を基調に、白をハイライトカラーとした幾何学模様 であり、それに対して中央二つのバナーは – 赤色の枠組と白の無地 という特徴があります。それぞれ同じ背景同士で模様の有無がどれだけクリック率に関係するか、 2つの赤幾何学模様バナーの合計クリック率：2つの赤枠無地の合計クリック率＝16:13 であり、当初は背景無地の方が文字に目が行きやすくなり、クリック率も高いと予想していました。しかし実際は模様のある方がWebページ全体で見たときに目を惹くためか、クリックされる確率が高いと感じました。 2,デザインに注目 まずは色の明度に注目してみると面白い違いがあります。 明度とは色の明るさのことで、明度が高いほど色は白に近く、明度が低いほど色は黒に近くなります。 今回全パターンのバナーには白色をハイライトカラーとして用いていますが、1位~4位に使われている色は全体的に明度が低く、5・6位に使われている色の明度は全体的に高いのです。 つまり、明度が低ければ白色との対比効果が強まり、逆に明度が高いとあまり白色とのコントラストを感じにくく、結果的にバナーとしてのインパクトが弱まってしまうようです。 本来は落ち着いた雰囲気を出すため、明度の対比をあまり持たせないようなデザインにしましたが、それだとWebページ全体で見た時に与える印象に差が生じてしまった原因だと感じました。 また文字の配置について、皆さんFの法則を知っていますか？ もしかしたらZ型の方が馴染みがあるかもしれません。これは人が文字を読む時、FやNの書き順に沿って視線が移動することを表した法則です。つまり人は左上の文字から認識し始めるのです。 ここで作成したバナーに注目してみましょう。
あれ、、思った以上に有意な差はないかもしれません。。これについては次回のABテストで要検証ですね！
3,文字に注目
文字の要素に注目しましょう。左の上と下のバナーを見比べてみると、背景や文字の配置は同じであり、２つのバナー間の違いは
– キャッチコピー
– 会社ロゴの有無
の2点であるのにも関わらずクリック率は倍以上の差があります。つまりキャッチコピーの内容や大きさによる対比効果によってクリックされるかが決まってしまうということですね！
今回のバナーパターンからは「問いかけるような雰囲気」のキャッチコピーバナーの方がクリック率が高いように感じました。果たして本当に”問いかけるようなキャッチコピー”の方がクリックされるのか、これも次回検証したいと思います！
