弊社ECサイトのABテスト運用方針・成功例紹介

弊社は業務用スチールラックのEC販売を主な事業としておりますが、先日その根幹となるトップページのファーストビューをプチリニューアルし、新旧デザインのABテストをおこないました。

その結果、トップページということもあり短期間で十分なサンプル数と成果が得られましたので、その成功例と判断方針、ABテストの運用法などについて紹介します。

旧デザイン

まず、こちらが旧デザインです。

パッと見、サイドにズラズラ並んだメニューが変に目立ち過ぎ、全体的にごちゃついた印象があります。

また、簡単検索ツールを目立たせたい意識が強過ぎて、看板画像内の訴求も弱く直感的に「何屋さん」かが分かりづらい印象です。

新デザイン

改善後の新デザインがこちら。

看板画像内の要所で訴求ポイントを盛り込み、面積も広く取ることによりパッと見で「何屋さん」かが直感的に情報として入ってきます。

ABテストの成果

詳細データをここで出すことはできませんが、約2週間の期間で十分なサンプル数が溜まり、主要KPIとしていた直帰率が以下のように大きく改善されました。

旧デザイン：31.4%
新デザイン：23.0% (-8.4ptの改善）

セッション数から割り出した直帰率のP値も0.001を下回る値で、この改善結果が偶然によるものではない =「FVデザインを変えたので直帰率が改善した」ことが統計的に証明されました。

ABテストの成果を判断する上で気をつけること

まず、できる限り細かくセグメントを切ることが重要です。

単純にGA4の集計値を見て判断するのは危険で、デバイス（PC/SP）や流入元（広告/自然検索/直アクセス）によって直帰率は大きく変動します。

テストをする際は必ずボリュームの多い属性でセグメントを切ることが重要です。
今回はPC・リスティング広告流入でセグメントを切ってデータを集計し判断しました。

また、注意する点としてはセグメントを細かく切り過ぎても、今度はサンプル数の溜まりが悪く、判断に要する期間がその分増えてテストが長期化してしまうことです。

そもそもアクセスの少ないページでABテストを行う場合は、その辺を割り切ってデバイスのみでセグメントを切るなどの調整が必要かと思います。

弊社でのABテスト運用法

ここからは弊社でどのようにしてCVR改善に向けたABテストを行なっているか紹介します。

ボトルネックの洗い出し

主観や思い付きで「このページを改善したい」などは論外で、データありきで判断します。

まずはGA4のデータを見て、セッション数やCVR、またCV後の案件成約率などから、ランディングページごとの「売上インパクト」を算出します。

売上インパクト = 改善後の売上試算 - 現状の売上
= (改善後の注文売上 + 改善後の見積経由売上) - (現状の注文売上 + 現状の見積経由売上)
= 
(セッション * 注文CVR * 目標改善率 * 注文客単価) + (セッション * 見積CVR * 目標改善率 * 成約率 * 見積客単価）
- 
(セッション * 注文CVR * 注文客単価) + (セッション * 見積CVR * 成約率 * 見積客単価）

式は多少長くなりましたが、要は目標のCVRまで改善した場合の売上への影響度を数値化したものです。

この数値が大きいものほど必然的に改善の優先度が上がります。
式内の「目標改善率」については主観的な仮定値となりますが、ここはこれまでの経験などから仮定値を当てはめます。

弊社ではこうして、セッション数の多いランディングページ全てにこの式を当てはめ、売上インパクトの大きいページから順に改善案を考えるようにしています。

改善対象となるランディングページが決まったら、改善が見込めるKPIを決めます。
今回のテストでは直帰率をKPIとしましたが、CVRでも画面スクロール率でも何でもOKです。
重要なのはKPIと改善対象先が一致していることです。

極端な例ですが、例えばKPIを直帰率としているのに、画面下のボタンのデザインを変更するなど、このようにKPIに直接影響し得ない改善策はNGです。

KPIを直帰率とするなら、まずは誰もが目にするファーストビューの改善を真っ先に行わなければなりません。

改善策の検討・実施

KPIを直帰率、改善先をファーストビューとした場合、看板画像のデザイン変更をするのがわかりやすいと思います。

新デザイン制作にあたって取り組んだポイントはこちら。

【訴求ポイント】
・最短翌日出荷
・10年保証
・国内生産
※老舗の安心感を出したい

【デザイン】
・「スチールラック簡単検索ツール」は重要コンテンツなのであまり画面下に下げたくない
・青・白ベースのシンプルなデザイン（LP色は強く出さない）
・差し色：オレンジ（サイト右上カートボタンと同色）もしくは赤（フッターロゴと同色）
・新規、リピートユーザー双方に違和感のないトーン

こうして完成したのがこちらのデザインです。

ABテスト開始

準備ができたらABテストを走らせます。

弊社のECサイトはLaravelベースで作られているので、以前紹介した下記の記事の方法でリダイレクトテストを行います。

データ集計・分析

A/Bそれぞれ、少なくとも300セッションほど溜まった段階から確認を始めます。

前述の通り、デバイスや流入元など細かくディメンションを切って集計します。

A/Bそれぞれの差を見て判断しますが、この時たとえばAの直帰率が30%、Bの直帰率が25%といった結果が出たとします。果たしてのこの差は本当に正しいのか疑問を持つことが大切です。

この差について、そもそものセッション数が少ない場合は偶然による差である可能性が非常に高く、短絡的にBが良いと判断するのは危険です。
このあたりの判断基準は、弊社ではP値という統計値を算出して判断するようにしてますが、P値を語ると長くなるのでまた別の機会に。

一定のサンプル数が溜まり、統計的に意味のある差（有意差）が見られたタイミングでABテストを終了させます。

まとめ

Webサイトの運用にABテストは付きものです。
ABテストをやるのは簡単なことですが、正しく結果を分析して判断を下すには少々テクニックが必要です。

短期的に見るとAの方が良く見えて、実はもっとサンプル数を増やすと全く別の結果になることも…
上記の例で早期にAを採用してしまうと、知らないところで大きな損失に繋がることなってしまいます。

自分の予想や好みに引っ張られず、データに基づいた判断を下せるかがABテストを成功に導く大きな鍵となりますので、十分なデータを集めたうえで客観的に評価する仕組み作りが重要です。

今後も仮説 → 実行 → 検証 → 改善のサイクルを回しながら、より使いやすく成果につながるWebサイト運営を目指していきます。