crageディレクター勉強会 第5回 ABテストをやってみよう！基礎からコツまでざっくり解説
デザイン×エンジニアリング×ディレクションをベースに「新しい価値観」を創造するクリエイティブ集団、crage（くらげ）株式会社のディレクションチーム城戸（キド）です。
ディレクションチームでは月に一度、勉強会を開催しています！
テーマはジャンルを問わず、メンバー自身がこれまで学んできたことの中からチームに還元できそうなものを持ち込み、プレゼン形式で発表しています。（勉強会についてもっと詳しく知りたい方は以下の記事をどうぞ！）
今回のテーマは「ABテストをやってみよう！基礎からコツまでざっくり解説」です。
「Web制作をしたことはあってもABテストをやったことがない😯」「”作って終わり”になってしまって、効果があったのかわからない🤔」というディレクターは世の中に多いのではないでしょうか。
あるいは、「自社のサイトが芳しくないけれど、どう改善したらいいのかわからない😭」というサイト運営担当者もいらっしゃるかもしれません。
実は私を含めたcrageの一部のディレクターは、パートナーワークとして参画しているサービスサイトでABテストのお手伝いをしています。そこで得られた学びを未経験のメンバーにも展開しよう！と思い、今回はこのテーマを選びました。
勉強会ではたくさんのお話をしたのですが、note化にあたり、要点をギュッとまとめてみました。ABテストをやってみたい方向けの入門ガイドのような感じになっているかと思いますので、ぜひ参考にしていただけたら嬉しいです！
ABテストとは
ABテストとは、AとBの2つのバージョンを比較することでどちらが優れているかを検証する手法です。
例えばボタンの色や文言、フォームの項目、画像などの様々な要素を変更し、「どちらの方がお問い合わせが来たか？」などの数字をモニタリングします。その結果が良かった方を本番ページに反映することで、元のページよりも効果の出るページに生まれ変わらせることができるというわけです。
ちなみに、ランディングページを細かく改善していくことを「LPO（Landing Page Optimization＝ランディングページ最適化）」と呼んだりします。
ABテストは様々なマーケティングに有効ですが、今回は特に「WebサイトでABテストを行う場合」にフォーカスしてご説明していきます。
ABテストの準備
ABテストを行うためには、事前にいくつかの準備が必要です。
■目的の設定
例えばあなたが、あるECサイトを運営しているとします。最近の売上があまり芳しくない状況ですが、商品の内容や価格を変えるのはリスクも高く難しいため、まずは商品を販売しているECサイトの方を改善していこうという話になりました。
このような場合、改善のためにあなたが提案できることとしては何が考えられるでしょうか？
例えばこんな案が挙げられます。
・【案1】購買率（CVR）を上げる
購買率のことをCVR（コンバージョンレート）と言います。
サイトに訪れたユーザー100人のうち1人が購入している（CVR1.0%）とすると、それを100人のうち5人（CVR5.0%）の水準に上げれば売上は5倍になります。
例） 情報の見せ方を変える、コピーを変える、UI/UXを改善する、など
・【案2】特定のページのアクセス数を増やす
既にCVRが高いページに多くのユーザーがアクセスしてくれれば、おのずと売上が上がることが期待できます。
100人のうち1人が購入しているページに1,000人がアクセスしてくれるようになれば、売上は10倍になります。
例） 導線を変えて誘導する、バナーを出す、コンテンツの順番を変える、など
・【案3】1ユーザーあたりの購入数・単価を上げる
「顧客単価」や「LTV（顧客生涯価値）」と呼ばれます。
1人あたり10,000円分の商品を買ってくれている場合、20,000円買ってくれるようになれば売上は2倍になります。
例） 他の商品を見やすくする、より高額の商品へ誘導する、など
もちろん全てを上げることが理想ですが、そのような施策を考えるのはなかなか難しいです。なので、いまの自分のサイトにおいて「どれが一番伸びしろがありそうか？」「どれがすぐにテコ入れできそうか？」という視点で考え、まずは一つの目的に絞ってみるのをおすすめします。
■仮説の設定
・指標を決める
目的が決まったら、ABテストでウォッチする数字（＝指標）を決めましょう。目的によって注目すべき指標は変わります。
前述の例を使うと、このような指標をウォッチするのが良さそうです。
【案1】購買率を上げる
→CVR、クリック率、離脱率など
【案2】特定のページのアクセス数を増やす
→アクセス数、直前ページのURL、直ランディング数など
【案3】1ユーザーあたりの購入数・単価を上げる
→平均購買数、顧客単価、LTV（顧客生涯価値）など
ただし、ABテストで改善できる幅には限界があります。もともとCVRが1.0%だったものを20倍の20.0%にするのには相当な努力が必要ですし、どんなに頑張っても無理な数字である可能性もあります。
1つの指標がある程度改善したら別の指標や別のページに着手したりする方が、かける工数に対しての改善幅も大きく、より効率的に改善を進められると思います。
・仮説を立てる
目的や指標がある程度決まったら、次に仮説を設定しましょう。気を付けていないとよくありがちなのが、やりたいことが先行してしまい、手段が目的になってしまうことです。
例えば、「ページ内のボタンがなんとなく小さいな〜」と感じていたとします。このとき、「じゃあボタンを大きくしてみよう（手段）」というだけでは、「それによって何が良くなることを期待しているのか（目的）」が不明確なテストになってしまいます。
この場合の正しい仮説とは、「ボタンを大きくすることでCVRが向上するのではないか」というところまで考えることです。
よって考える順番としては、「ボタンを大きくしたい」が一番に来るのではなく、次のようになります。
①目的：CVRを上げたい
②仮説：ボタンを大きくすることでCVRが向上するのではないか
③テスト内容：ボタンを大きくする
■ツールの用意
・やりかたを決める
ABテストを行う方法は、大きく2種類あります。
・前後比較
テストパターンをリリースする前後の同じ日数分でモニタリングを行い、両者を比較する方法です。日数は同じでも時期が異なるので正しい比較になるのかがやや懸念ですが、ABテスト用のツールは不要なのが利点です。
・同期間比較（おすすめ）
テストパターンをツールで出し分け、同じ期間に比較する方法です。
おすすめは「同期間比較」ですが、それを行うためには以下で説明しているツール導入の工程が必要になります。
・ツールを導入する
同期間で比較する場合、ABテスト配信用のツールを導入しましょう。
以前はGoogle社が提供する「Google Optimize」というツールが主力でしたが、2023年9月をもってサービス終了となることが発表されています😢
代替として、crageで扱ったことのあるツールの一例をご紹介します。
どれも「テスト配信」と「インサイト（モニタリング）」の両方の機能を持っているため、1つのツールでテスト検証が行えるのが便利です。
・KARTE …ABテスト以外にも様々なWebマーケティングが配信可能。日本の会社なのでサポートも◎
・Ptengine …ヒートマップが便利。月間3,000PVまでなら無料で利用可能
・Optimizely …知識があれば高度な実装が可能。ただし初めはもう少し簡単なツールで良いかも
もちろん他にも色々なツールがありますので、予算、使い道、サポート体制などの条件からご自身の好みに合うサービスを選択しましょう！
******
以上で基本的な準備は完了です。
（お疲れ様でした。だいたいあと半分くらいです☕）
次に、1つのテストの始まりから終わりまでの流れをご紹介します。
ABテスト実施の流れ
ABテストは、「企画/制作→テスト→（勝ち：本番反映）or（負け：テスト停止）→考察」で1サイクルとして回していきます。
■企画
ABテストの内容を考える工程です。
ここまでの準備段階で考えていた目的や仮説などをもとに、「どのような仮説で・どのページにて・どのようなテストを・何を指標にして行うか」の具体案を考えます。
0から考えるのは難しいですし勝率も低いテストになってしまうので、慣れないうちは前のテストの考察で上がったネクストアクションをベースに企画するとやりやすいです。
【ネクストアクションの例】
例） ボタンを大きくするテストで勝った
→別の場所のボタンを大きくしてみよう！
例2） おすすめコンテンツを入れて負けた
→入れる場所を変えてみるor中身を変えてみよう！
■制作
基本的には通常の制作と同様ですが、実装の方法が2種類あります。
・ABテストツール上で実装する
ツール内のエディタで該当箇所のhtml/cssを編集する方法です。簡単な変更をするテストや、複数ページで行う場合に向いています。
・別ページを作成し、リダイレクトする
テスト用のページを用意して、ツールで50%のユーザーをそちらへリダイレクトさせます。フルリニューアルなど実装難易度が高いテストに向いています。別URLを作ることになるので、テストが終わった後の取り扱いに注意が必要です。
使用するツールによっては実装の仕方にクセがあったりするので、特に初めてのエンジニアにお願いする場合はコーディング期間を少し多めに取っておくと安全です。
■モニタリング
テスト期間中は、なるべく毎日モニタリングすることをおすすめします。
日々の結果を追いかけることで、「出ている数値は毎日同じ傾向なのか、たまたま1日だけのブレなのか」などの様子を把握しやすいからです。
また、テスト中に著しく数値が悪くなった場合はすぐに停止の判断を下すこともできます。
ABテストツールには日々の数値を確認できるインサイト機能がついていることが多いため、それを定期的に見に行くだけでも十分だと思います。
もっと本格的にやりたい場合は、確認した数値をスプレッドシートに記録したり、更にそれをグラフ化したりすると、より視覚的に動向が掴みやすくなります。
……さて、そうしてモニタリングをしていると次に疑問になるのが、「結果判断はどうしたらいいのか？🤔」というところですよね。
見ている指標やサイトの訪問者数によって変わるため明確な基準をお伝えするのは難しいのですが、例えば「2、3人のユーザーが片方のパターンに寄った場合に勝ち負けが逆転してしまう」くらいの差ですと誤差の可能性が高いです。
もしくは、日々見ていても負けている日があまりない（＝悪い傾向ではない）ようであれば”勝ち判断”として次のテストに移ってしまっても良いと思います👍
■本番反映
テストパターンが勝ったら、いよいよ本番のページに反映です！
テスト中はABテストツール上で実装していたりテスト用の別ページを作成していたと思うので、それをオリジナルページのソースに反映する必要があります。既にテスト用の実装データがあるため1から新しくコーディングするよりは早いですが、本番反映までにもそれなりの時間がかかるので、ある程度スケジュールを見込んでおきましょう。
「ではそのリリースまでの間、今回しているテストはどうするのか？🤔」というと、2つの選択肢があります。
・より効果を最大化したい
本番反映の実装が終わるまでの間、勝った方のパターンを100%配信にしましょう。これによりユーザーに表示されるのはテストパターンのみとなり、擬似的な本番反映状態にすることができます。
・ギリギリまでモニタリングしたい
勝ち判断にはなったもののもう少し母数を貯めたい場合は、本番反映リリースの直前までテストを回し続けましょう。
■考察
ABテストが終わったら、結果の勝ち/負けにかかわらず考察をしましょう。テストで出た結果をもとに、その原因やユーザー仮説などを考え、言語化していきます。
考察の際にやってはいけないのは、固定観念だけで考えてしまうことです。例えばこんな例がよく起こりがちです。
とある要素をページ内に追加するテストを行い、負けてしまったとします。その原因を考える際に「この要素はあまり目に留めてもらえなかったに違いない」と思い込み、「このテストが負けた原因は、追加した要素が見てもらえなかったからである」という結論で考察を終えてしまいました。
しかし後にヒートマップを見てみると、実はその要素はかなりのアテンション（注目）を集めていたことが発覚したのでした。
テストで挿入した要素がユーザーに見てもらえたのか/そうでないのかによって、次のアプローチも変わってきます。見られているのに負けたならその要素自体が悪い可能性が高いですし、見られていないならデザインや掲載位置を工夫する必要がありそうですよね。
このように、負けたテストからも次へと繋がる知見を得ることができるので、考察は毎回必ず行うことをおすすめします！
******
基本的な流れは以上となりまして、ここからは効果が出るテストを行うためのヒントをいくつかご紹介します💡
より効果の出るテストを行うために
・一度に複数の要素を変えるテストは行わない
例えば、「ボタンを大きくする」「おすすめコンテンツを入れる」という2つのテストを同時にやったとします。結果としてテストは勝ちましたが、これではどちらの要素がどう効いて勝ったのかがわかりません。もしかすると「ボタンを大きくする」はあまり良くなかったけれど、「おすすめコンテンツ」がそれ以上に好影響だったから合わせて勝っただけかもしれないですよね。
そういうわけで、ボタンでテストをするなら、ボタンの部分だけに絞ってテストを行うようにしましょう。
ボタンはボタンでも「大きくする」と「赤くする」など2種類のクリエイティブを試したい場合は、テストを2段階で行うか、「(A)そのまま(B)大きく赤く(C)大きくて色はそのまま」というようにバリエーションパターンを2つ用意してABCテストにしてみると勝ちパターンを選びやすいです。
（時間をかけたくない場合は、「大きく＆赤くする」の一発でテストしても良いと思います👌）
ちなみに、複数要素を変えて行う「多変量テスト」という手法もあるのですが、パターン数が増えることでその分ユーザーの母数も必要になるので、あまりおすすめしません。
・「〜に違いない」ではなく、「〜かもしれない」と考える
テスト前の仮説もテスト後の考察もそうなのですが、状況から見て99%合っていそうなことであっても、人が考えたことである限りは絶対の正解ではありません。よって、「〜に違いない」「〜である」というような断定的な考え方は捨てましょう。
比較的信用できるのは、アナリティクスで出ている数値やテスト中のモニタリングデータなどの定量的な数字です。なので、仮説/考察を立てる際には必ずそれを裏付ける数字をセットで用意すると、あなたの考えた仮説/考察に説得力が増します。
やり方としては理科の実験と同じです。まず、ある程度のデータから推察して仮説を立てる。その仮説を証明する実験をする。実験で取れた定量データをもとに、「仮説通りだった理由」「そうではなかった原因」などの考察をする。
このような考え方を意識づけていけば、固定観念に縛られない客観的な発想で、確度の高いABテストを企画できるようになっていきます。
・回数をこなして知見を貯める
「回数を重ねれば上手くなるのは当たり前だろう」と言われてしまうかもしれませんが、それとはちょっと違います😌。企画者の経験値を上げることはもちろん重要なのですが、それよりも大事なのはそのサイト特有の知見を貯めていくことです。
確かに、「コンバージョンボタンを大きくすればCVRが上がる」など、どのサイトでも効果が出やすいような”普遍的な改善案”は存在します。
しかし、例えば「コンバージョンボタンに添える文言を変えてみる」テストだったらどうでしょうか。安く早いことがウリのファストフード店のボタンに「お申し込みをご希望の方は下記のフォームから……」などと堅苦しく書いてあったら読む気がなくなりますし、高級ホテルのボタンに「まずはここをクリック！」なんて書いてあったらその施設の信用性を疑ってしまいますよね。
上記は極端な例ですが、一方のサイトでは刺さった施策が他方では逆に悪影響だった、ということは珍しいことではありません。あるいは同じサイト内であっても、他のページで刺さっていた訴求を入れたら既存の訴求が弱まったことでCVRが落ちてしまった、なんてことも全然起こり得ます。
繰り返しテストを行い、結果を蓄積し、「ユーザーに求められている情報は何なのか」「このサイトの勝ちパターンは何なのか」などの解像度を上げていく。それによって、”そのサイトに合った効果的な改善案”を考えることができるようになるのです。
最後に
crageのディレクションチームでは、WEBに関する知識だけにとどまらず、幅広く様々な内容を勉強会に取り入れて個々のスキルアップにつなげています。
今後も定期的に勉強会の内容をご紹介していきますので、次回はどのような内容をメンバーが持ちこんだのか、ぜひ楽しみにしてください。
今回もお読みいただきありがとうございました。
crageでは現在メンバーになっていただける方を募集中です。
ご興味ある方はぜひエントリーください。
新たな才能、求めています。