ポップアップのA/B テストがしてみたい
こんばんは。
今日は、仕事で携わっているポップアップバナーのA/Bテストについて、以前参考になりそうなサイトを見つけたので、自分のメモ用にこのnoteに書き留めたく、記録します✏️
A/Bテストを行う要素・対象
1.バナーの画像やテキスト
集客が目的となるバナーも、目立ちやすい画像と製品やサービスをアピールするための文言など、いくつかの要素が合わさって構成されています。
どんな画像を設定するか、またテキストの文言や文字数、大きさや位置などについて変更を加え、複数のパターンのバナーに対して「ABテスト」を実施する事で、最もコンバージョンに効果的なバナー広告の組み合わせを見つけることができます。
バナー画像の内容
テキストの文言や文字数
バナー画像・テキストの大きさ
バナー画像・テキストの位置
2.CTA（コールトゥアクション）
CTAとは「ユーザーへの行動喚起」という意味があり、ユーザーに起こしてほしい行動のことを意味します。例えばECサイトのCTAの一例としては”メールリスト登録”や”商品の購入”があります。
コンバージョン獲得に繋がるCTAも下記の要素により、クリック率が大きく変化します。
CTAボタンそのもののレイアウト変更、表示位置の変更、テキストの変更など複数のパターンについて「A/Bテスト」を実施すれば、どのCTAボタンが最も成果を上げるのかが判別できます。
ボタンの表示位置
ボタンの形状
ボタン上の文言
クリックに繋がりやすいポップアップのCTAボタンの色と形状
では、上記の要素２個目のCTAのボタンの色や形状について、具体的にはどんな違いがあるのか記載します。
CTAボタン 赤色 / 緊急性を伝え、行動を喚起する
赤は強い緊急性を感じさせ、ユーザーに即座の行動を促します。視覚的に非常に目立つため、重要なアクションを示すのに適しています。
また、赤はエネルギーや情熱を象徴し、決断を即させる効果があります。
CTAボタン 緑色 / 安心感や自然な印象を与える
緑は安心感を与え、自然な選択を促します。自然環境や健康に関連するイメージを持ち、穏やかでリラックスした気持ちを与えます。
また、緑は「進む」「許可」の象徴としても使われ、ポジティブなアクションを連想させます。
CTAボタン オレンジ色 / 活力と楽しさの印象
オレンジは活力や楽しさを感じさせ、行動を促進します。エネルギッシュでフレンドリーな色であり、積極的な行動を誘導する効果があります。
エンターテインメントやアクティビティ関連のアクションに適しており、ポジティブで明るい印象を与えます。
CTAボタン 黄色 / 注意を喚起・明るさを伝える
黄色は注意を引きやすく、明るさを感じさせます。楽観的でポジティブなイメージを持ち、幸福感や創造性を連想させます。
また、黄色は注意喚起の色としても使われ、重要なメッセージやオファーを強調するのに適しています。
CTAボタン 紫色 / 高貴さと創造性を連想
紫は高貴さや創造性を象徴し、エレガンスやミステリアスな雰囲気を与えます。
クリエイティブなプロジェクトや高級ブランドのアクションに適しています。また、精神性や直感を刺激する効果もあります。
CTAボタン ピンク色 / 優しさや愛情を表現
ピンクは優しさや愛情を象徴し、親しみやすくフレンドリーな印象を与えます。
美容やファッション、女性向けサービスに適しています。また、ポジティブで楽しい気分を誘う効果があります。
CTAボタン 黒色 / 洗練性や高級感が漂う
黒は高級感や洗練を象徴し、力強さやエレガンスを感じさせます。
高級ブランドやプロフェッショナルなサービスに適しており、強い印象を与えます。また、シンプルでモダンなデザインを好む場合にも有効です。
CTAボタン 白色 / 純粋さや清潔感、シンプルさ
白は純粋さやシンプルさを象徴し、清潔感や透明性を感じさせます。ミニマリストなデザインやクリーンなブランドイメージに適しています。
また、他の色と組み合わせることで、コントラストを強調し、視認性を高める効果があります。
CTAボタン グレー色 / 中立性やバランスを示す
グレーはバランスや中立性を象徴し、落ち着いた印象を与えます。控えめでプロフェッショナルな印象を持たせるため、ビジネスやテクノロジー関連のアクションに適しています。また、他の鮮やかな色を引き立てる効果もあります。
CTAボタンの形状が与える印象
丸みを帯びた形状 親しみやすさと柔らかさ
丸みを帯びた角のボタンは、柔らかく親しみやすい印象を与えます。
人間工学的に心地よい形状であり、クリックしたくなる心理を誘発します。特に、ユーザーに対してフレンドリーでウェルカムな印象を与える場面で有効です。
ピル型の形状 モダンさとシンプルさ
ピル型のボタンは、モダンでシンプルな印象を与えます。
流線型のデザインは視覚的にすっきりとしており、現代的なウェブデザインにマッチします。特に、シンプルで洗練された印象を与えたい場合に適しています。
四角型の形状 力強さやプロフェッショナルさ
四角形のボタンは、力強さとプロフェッショナルな印象を与えます。
直線的なデザインは信頼性と堅実さを象徴し、重要なアクションを示すのに適しています。特にビジネスや公式な場面での使用に向いています。
CTAボタンの配置位置
目立ちやすい位置へ配置・サイズも考慮する
ポップアップのCTAボタンは、ユーザーの視線が自然と向かう位置に配置することが重要です。
一般的にはポップアップの中央や下部に配置することで、視認性を高めます。また、スクロールしないで見える範囲に配置することも効果的です。
またCTAボタンのサイズは、44×44ピクセル以上が推奨されます。
これにより、モバイル環境での指でのタップやクリックが容易になります。特にタッチスクリーンデバイスでは、48×48ピクセル以上のサイズが快適です。大きすぎない適度なサイズを選ぶことで、ユーザーが自然とクリックしたくなるデザインに仕上げます。
ポップアップの「A/Bテスト」実施のポイント
より多くのデータを参照する
”有意差”とは2つのパターンの間で生まれた差が偶然とは考えにくく、統計的に意味を成す明らかな差であることを示す言葉です。
例えば運営サイトで「ABテスト」を行う際、コンバージョン数がA＝100とB＝103ではその差が僅かであり、実際に有意な差であるかは判断が難しいと言えます。「ABテスト」の結果を判断する際は時期を変えて測定する、測定回数を重ねるなど、より多くのデータを元に判断しましょう。
大きな変更ほど効果を計りやすい
ユーザーのアクセス数がまだそれほど多くないサイトの場合、設置するポップアップの「ABテスト」を行う際は、ボタンの形状やテキストといった小さな箇所の変更ではなく、画像や全体的なデザインといった大きな変更を行う方が、よりユーザーに認識されやすいため、効果が計りやすくなります。
最後に：ポップアップの表示に必要な準備項目
結局、ポップアップ施策を回していきましょうとなった時に、必要なことはなんなのか？となりますので、要はこの５つの要素！ということをまとめておきます。
いつ：配信日時
誰に：ターゲットリスト
どこで：配信場所（画面のどこに出すか）
どんなポップアップを：デザイン
どうやって表示するか：ここは配信ツールを使って実現可否のテストをしたい
（引用元）
この記事が気に入ったらサポートをしてみませんか？