バナーのCTR改善にはABテスト！実際におこなったデザインのABテスト事例をご紹介します。 | 株式会社LIG

2015.05.12

バナーのCTR改善にはABテスト！実際におこなったデザインのABテスト事例をご紹介します。

佐藤タカアキ

こんにちは、最近体調を崩して3キロほど痩せました、デザイナーの佐藤タカアキ（@sato_tkaaki）です。
現役時の体重を下回り始めたので、嫌いな筋トレにもそろそろ挑戦しようと思います。よろしくお願いします。

さて、僕の主な業務は一眼レフカメラで撮影した写真をPhotoshopで画像合成をするグラフィックデザインで、このLIGブログ内のバナーも全てデザインしています。
バナーのデザインって結構難しいですよね。単に綺麗でもだめ、かっこいいだけでもだめ、かわいくても派手でもだめ。

「じゃあ何が重要なの？」って、そう全てはクリック率（CTR）です。もちろんバナーをクリックした後に、クライアントが求めるコンバージョンを考えますが、まずはクリックしてもらわないことにはどうにもなりません。
そこで、今回はバナーのクリック率を上げるためにLIGがおこなっているABテストについて、実例を交えて紹介したいと思います。

ABテストとは

A/Bテストとは、異なる2パターンのWebページを用意し、実際にユーザーに利用させて効果を比較するテストのこと。Webページのデザインやレイアウト、サイト内導線の最適化をはかるために用いる。split testing、ABスプリットテスト、スプリットランテストということもある。

引用元：コトバンク
https://kotobank.jp/word/A/Bテスト-13664

と、まあWebページじゃなくてもバナーの方が2パターン用意しやすいし、わりと簡単にABテストを導入できますよね。

LIGのバナーでおこなったABテスト

ここ最近、LIGのバナーでおこなってきたABテストをご紹介させていただきます。
それではいってみましょう。

男性と女性のバナーでABテスト

atgs-c

男性と女性のバナーでABテストをした場合、女性の写真を使用したバナーの方が男性の写真を使用したバナーよりも3倍以上高いCTRとなりました。
LIGブログユーザは男性が多いためか、女性の写真を使用したバナーはCTRが高くなる傾向にあるようです。

カラーを変えてバナーのABテスト

マクロミル

赤を基調としたAバナー、白と黒を基調としたBバナーでABテストを実施し、赤を基調としたAバナーのCTRが高いという結果となりました。
赤色は「進出色」と呼ばれ、前方に飛びだしているように見える色だと言われていますね。それでBバナーより目立っているように見え、CTRが上昇したのだと考えられます。

モデルの人数を変えてバナーのABテスト

willgate

モデルの人数を変えてABテストをすると人数が多いバナーのCTRが2倍以上の高い結果となりました。
「人の顔」というのは無意識に注目してしまうと言われていますよね。
モデルや配置などにもよるとは思いますが、今回のケースは人数を増やしたことで注目度が上がったと考えられます。（しかしこんなに差がつくとは）

写真とイラストでバナーのABテスト

kingprinters

写真とイラストでABテストをした結果、イラストで作成したAバナーのCTRが高い結果となりました。
A枠という小さい枠ではインパクトあるバナーがクリックされやすい傾向があります。今回のバナーで使用したイラストは配色がはっきりしていて目立ちやすく、LIGメンバーをモデルにしたイラストだったことからCTRが高くなったと考えられます。

全くデザインの違うバナーのABテスト

similar

文言は同じものを使用していますが、デザインは全く違うバナーでABテストをしてみました。
CTRがなかなか上がりにくい場合は、思いっきり違うデザインで試してみます。上記の結果ではBバナーのCTRが高いので、今後はBバナーに寄せたデザインでABテストをしていきます。
それでもCTRが改善されなかった場合はまた違うデザインのバナーを作成させていただきます。
（A枠バナーに関しては、新しいバナーデザインの制作は3ヵ月に1回とさせていただいております。）

同じポーズだけど性別の違うバナーのABテスト

ptengine

同じポーズで性別の違うモデルを使用したバナーでもABテストをさせていただき、BバナーのCTRが高い結果となりました。
やはりLIGブログでは女性のモデルを使用した方がCTRが上昇しやすい傾向のようです。（にしてもやっぱりまゆこは絵になるな）

おもいっきり加工を入れたデザインとシンプルに写真をベースにしたバナーのABテスト

green

加工を加えた写真とシンプルな写真を使用したバナーでABテストをした結果、AバナーのCTRが高い結果となりました。
上記はGreenさんのバナーですが、もともとGreenさんが掲載しているバナーは写真ベースのものが多かったため、弊社のブログでもGreenさんらしいAバナーのCTRが高くなったのだと考えられます。

映画ジャケットをイメージした同テイストのバナーのABテスト

creative_survey

映画ジャケットをイメージした同テイストのバナー広告でABテストをした結果、わずかにCTRに差が出ましたが、大きな差は生まれませんでした。
上記のバナー広告はB枠という広告枠ですが、B枠はサイズが大きめなので映画のジャケットのようなデザインをさせていただくことが多いです。（そろそろ飽きてきた）

よくわからないけど何か危機感溢れてるバナーのABテスト

jpbcan

バナーデザインのテイストを「危機感溢れている」バナーでABテストをした結果、AバナーのCTRが高い結果となりました。
このようなデザインテイストして、ユーザに与えるインパクトが強いバナーを残していきます。
~~縛られてる女性ってとこがポイントだったんでしょうか。~~

同じキャッチコピーでデザインの違うバナーのABテスト

passion

キャッチコピーは同じものでも、デザインを大きく変更してABテストをおこないました。
ABテストをする場合、デザインや文言の一部を変更することが多いと思いますが、たまにデザインを大きく変更してABテストをすることがあります。
小さな変更ではなかなかCTRが改善できなかった場合にこのようなテストをおこないます。
デザインを変更し、CTRが改善された場合は新しいデザインで文言やデザインの一部を変更するといった小さな変更をおこないます。

まとめ

LIGではご紹介させていただいたように、さまざまなABテストをおこない、CTRの改善に努めています。また、クリエイティブの面でもあまり広告感が出過ぎないバナーデザインにしています。
LIGの社員が全面に出ているバナーが多いのは、ユーザの方にはバナーも1つのコンテンツとして楽しんでいただきたいと考えているからです。
これからもLIGだからできるバナーデザインを心がけていきたいと考えています。

【ABテストで結果にコミットする】

※ サイト改善にも使える！バナーをABテストし、効果を検証してみた

※ A／BテストでECサイトのコンバージョン率を120％改善させたグロースハック

※ ABテストツール「Visual Website Optimizer」でWebサイトの改善をしよう【導入編】