ABテストとヒートマップを組み合わせよう

2019.05.10

Webサイトを成果の高いサイトにするために活用できるのがABテストです。一方、ユーザーの行動がわかるヒートマップも、Webサイトの改善に役立ちます。ABテストとヒートマップをうまく組み合わせることで、Webサイトをより魅力的なサイトに変えることができます。ここでは、ABテストとヒートマップそれぞれの特徴と、両者を組み合わせた使い方について解説します。

ヒートマップとは

ヒートマップとは、Webサイト訪問者の個々の動きを色で可視化したものです。動きが活発であるほど濃い赤色で表示され、動きが鈍いところは青色で表示されます。あるページの中で、ユーザーが何度もクリックしたところや、長時間見ているところなどは赤く、ユーザーが反応していないところは青く表示されます。ユーザーが、サイトのどこに注目しているのかをひと目でわかるようにしたのが、ヒートマップです。
ヒートマップには、大きくわけて2種類あります。ユーザーのクリックやマウス操作を追うものと、ユーザーの目線の動きを追うものです。前者はヒートマップツールを利用することで実施できます。後者を行うには、アイトラッキングツールと呼ばれる専用のツールが必要となります。一般的にヒートマップという場合は、ヒートマップツールを利用して行う場合です。
ヒートマップの利点は、数字ではなく視覚的にユーザーの動きを把握できることです。Webページを改善するには、ページを構成している個々の要素（クリエイティブ）を見直して、よりユーザーに響くものに変えていく必要があります。しかし、アナリティクスなどで得られるのはデータ（数値）なので、読んで判断するにはそれなりの知識が必要です。一方、ヒートマップはデータをもとに視覚的に色分けしているので、解析の知識がなくても改善点を見つけやすいのがポイントです。たとえば、注目してほしい部分に、実はユーザーがほとんど反応していないことが、ヒートマップではすぐにわかります。思わぬところにユーザーの注目が集まっていることも、ヒートマップを見れば簡単に判断できます。ユーザーの動きを視覚化することで、Webサイト改善を加速化できる便利なツールがヒートマップです。

ヒートマップでできること

ヒートマップでは、いろいろなことが色分けされて可視化されます。たとえば、サイトを訪問したユーザーのマウスの動きを追った「マウストラッキング」が可能です。これは、ユーザーのマウスが多く置かれている箇所を判定するものです。ページの中で、ユーザーの注意を引いている箇所は赤色、引いていない箇所は青色、その中間は黄色で表され、互いの境界はグラデーションで示されます。また、サイトの中のどの部分を熟読してくれているのかを調べることも可能です。
ユーザーがクリックした回数が多い場所がわかる「クリックトラッキング」もあります。ボタンやリンクのクリック数の多さ・少なさがひと目でわかるので、無駄なボタンなどを省く指標になるでしょう。また、ページのどこまでスクロールして見てもらえたのかも、ヒートマップでわかるようになっています。
ヒートマップを使うことで、サイト運営者の予想とユーザーの実際の動きとが違っていることがわかれば、ユーザーの動きに合わせた修正が可能です。ユーザーが期待している通りの動きを見せてくれていることがわかれば、取った施策が正しかったことの裏付けになるでしょう。このように、施策の方向性が正しいのかどうかを、視覚的に簡単に確かめることができるのがヒートマップのメリットです。

ABテストでできること

abテストは、異なる2つのクリエイティブを同時に公開して、どちらがよりコンバージョンにつながりやすいかを検証するものです。クリエイティブとは、ページを構成しているキャッチコピーや画像、ボタンやバナーなどのことをいいます。
abテストの目的は、コンバージョン率（CVR）のアップです。コンバージョンとは、問い合わせや購入など、Webサイトが最終的に目指しているゴールのことをいいます。コンバージョン率とは、サイトの訪問者全体の中で、このコンバージョンに至ったユーザーの割合を示すものです。たとえば、購入をコンバージョンに設定しているサイトで、100人来訪者のうち2人が購入したなら、コンバージョン率は、5÷100＝2%ということになります。一般的に、ECサイトのCVRは1〜2％前後といわれています。
Webサイトを訪問したユーザーは、商品やサービスに興味を持ち、購入へと至ります。もしコンバージョン率が低いなら、このプロセスのどこかに問題がある可能性があるといえるでしょう。そこで、行うのがabテストです。abテストでは、いくつかのパターンのクリエイティブを作り、実際の反応を見ることで、ユーザー心理に響くようなクリエイティブに変えていきます。その結果として、コンバージョンまでたどりつくユーザーを増やし、コンバージョン率を上げていくことができるようになります。

ヒートマップ×ABテストでここまでわかる

ヒートマップもabテストも、コンバージョン率を上げるという目的は同じです。ただし、できることがそれぞれ違います。2つを組み合わせることで相互補完し合うことができ、Webサイト改善のスピードアップがはかれるでしょう。
ヒートマップとabテストの最大の違いは、アクションが数字で示されるか、色で示されるかという点です。abテストでは、オリジナルページと修正したページを比べて、コンバージョン数の違いやコンバージョン率の改善度が数字で示されます。つまり、abテストでは運営者が設定した修正の是非を数字で確かめられるだけで、ユーザーの細かな動きまでは捕捉できません。一方、ヒートマップは、ユーザーの個々の動きを可視化できます。ユーザーの注目が多く集まっている箇所がわかりますし、逆に、アクションがまったく行われていない箇所も一目瞭然です。ユーザーが反応していない箇所もわかるというのが、ヒートマップのメリットともいえるでしょう。
ヒートマップはユーザーの実際の動きを検証するのに役立つツールです。一方、abテストは、クリエイティブ施策の是非を確かめるのに有効なツールです。abテストは仮説を試すテストですから、まず仮説を立てなければなりません。その際に、ヒートマップが大いに役立ちます。たとえば、来訪者はそれなりに多いのに、コンバージョン率が低いサイトがあったとします。コンバージョン率改善のために、CTAボタン（コンバージョンに至るアクションを促すボタン）の配置場所を見直すと仮定しましょう。ここで、ヒートマップでユーザーがよく注目している箇所があることがわかれば、そこにCTAボタン置くことで、コンバージョン率を上げることができるかもしれません。このように、ヒートマップとabテストの異なる機能を上手に活かすことで、サイト改善をより効果的に進めることができるようになるのです。

ヒートマップ×ABテストによる改善事例

実際に、ヒートマップとabテストの両方を使って、Webサイトの改善をした例について紹介します。ある化粧品の事例では、記事広告の効果があまり出ていませんでした。ヒートマップを使って調べたところ、広告の文言のうち、メディアに掲載多数という部分より、商品の斬新さを訴求している部分が注目されていることがわかりました。そこで、広告の文言の順番を入れ替えたところ、コンバージョン率が約1.5倍になったといいます。
あるサイトでは、ヒートマップでリンクがないところにたくさんのクリックが集まっていることがわかりました。そこで、その箇所にリンクを貼ったところ、リンクのクリック数をアップすることができたそうです。また、ある会社では、上位に置いていた製品情報は思ったほど読まれておらず、主に保証にユーザーの注目が集まっていることがヒートマップで判明しました。そこで、順番を入れ替えたところ、コンバージョン率が改善されたといいます。
サイトの作り手がよいと思っている構成やクリエイティブでも、ユーザー目線に立つとあまり意味がなかったり、興味が薄かったりするということはよくあることです。ヒートマップとabテストを組み合わせることで、このような齟齬（そご）を見つけることが容易になります。

技術を駆使したABテストで効果的な改善を！

Webサイトは作りっぱなしでは意味がありません。ユーザーの動きをリサーチしながら、売れるWebサイトへと作り上げていく努力が必要です。現代では、Web施策を効率的に行うために、アナリティクスサービスもあれば、ヒートマップやabテストなど技術を駆使したツールもあります。こうした便利な環境をフルに活かせば、コンバージョンを達成できるよりよいWebサイトに育てていくことが可能です。上手に利用して、効果的な改善をしていきましょう。