A/Bテストを成功させるための“最新”ヒートマップ活用方法

株式会社Ptmind
VP of Sales & Marketing
小原 良太郎氏

「A/Bテストに重要なのは、仮説構築力」だというPtmindの小原氏が「Web担当者フォーラム2016秋」において、「A/Bテストを成功させるための“最新”ヒートマップ活用方法」と題してヒートマップを使った仮説構築のポイントを紹介した。

単純に人を連れてくるだけでは利益率は上がらない

小原氏は、まずCROというキーワードから紹介した。これは、Conversion Rate Optimizationの略で、日本語にするならコンバージョン率最適化だ。日本ではまだあまり馴染みがないが、欧米では大きな市場ができている分野だという。ECサイトの売上げを決めるのは、

で、それぞれの項目が上がれば、売上が上がる。デジタルマーケティングでは流入数を上げることにフォーカスすることが多いが、Ptmindがフォーカスしているのはコンバージョン率の部分だ。

なぜなら、いくらたくさんの人を連れてきても、コンバージョンしてくれなければ意味がないからだ。しかも、もしライバルがコンバージョン率最適化を行っていれば競合サイトでコンバージョンしてしまうかもしれない。流入を増やすにはコストがかかるが、コンバージョン率が上がればその費用対効果が上がる。

コンバージョン率を最適化するための中心的な方法は、サイト改善とA/Bテストだ。A/Bテストを行うには、かつては2種類のサイトやページを作らなければならなかったが、A/Bテストツール登場によって簡単にテストできるようになっている。

とはいえ、A/Bテストツールはコストも高く導入が難しいという課題があった。しかし、グーグルが無料のA/Bテストツール「Google Optimize」の公開を始めたため、それが変わりつつあると小原氏は言う。

これからは、「A/Bテストをやるかやらないか」ではなく、「いかにテストするか」の時代になるということだ。社内でCROの人材を育てることができる企業ばかりではないため、サービスとして提供する企業も出てくるだろう。

A/Bテストツールは、簡単にテストできることがメリットだが、そのため思いつきや勘でやってしまうという落とし穴もある。それでは成功率は上がらない。A/Bテストの成功率を上げるためには、仮説構築が重要で、しっかりした仮説があれば、たとえ失敗しても知見として溜めていく価値がある。その仮説構築をサポートするのが、ヒートマップである。つまり、

というわけだ。

どのように仮説を立てるか、ヒートマップの読み解き方

Ptmindはヒートマップでユーザー行動を分析できるツールを提供しており、そこで利用できる機能には次の2種類ある。

ヒートマップ分析には5つの視点があり、以下のように活用できる。

①仮説検証

サイトを作るには、どのように見てもらうか、行動してもらうかの仮説を立てているはずだ。ユーザーが思った通りに行動しているかどうかを検証するために、ヒートマップを使うことができる。

クリックして欲しい場所（SALE !!）がクリックされていない

この図はECサイトの例で、「SALE !!」と書かれている部分をクリックすると、セール商品一覧に行く設計になっているが、クリックヒートマップではほとんどクリックされていない。これは、「押せるかどうかわからなかったのでは」と考えられる。対処方法としては「セール商品一覧へ」などのテキストを入れればクリックしてもらえるのではという仮説を立てることができる。

また、アテンションヒートマップを見る場合のポイントは、

ということだ。ユーザーに読んでもらいたいと思った場所がきちんと読まれているかを、ヒートマップで確認できる。

②ユーザビリティ

サイトが使いやすいかどうかを知ることができる。

図の旅館サイトの例では、「2大特典」や「ご予約」の文字がクリックされているが、このサイトではクリックしても何も起こらない。「予約したいのに予約できない」状況はユーザビリティとしてよくないので直すべきだということが分かる。

また、スライドバナー（カルーセル）で「次へ」が多くクリックされていればスライドの切り換えタイミングが遅すぎ、「前へ」がクリックされていれば早すぎるといったこともわかる。

③興味・関心

ユーザーが知りたがっているのは何かを知ることができる。

図は、太陽光パネルの商品詳細ページだが、読まれているところと読まれていないところがはっきりしている。太陽光パネルは高額で一生に一度の買い物なので、保証内容が知りたいと考えられるが、そこまで見ている人は少ない。

しかし、そこまで見た人は多くコンバージョンしているというデータがあるので、保証内容のコンテンツをページ上部にもってくるなどの対応が考えられる。また、このように長いランディングページで、アテンションヒートマップで色のつかない部分を削除した結果、コンバージョン率が上がったという事例もある。

このほか、いくつかの例が紹介された。たとえば、サイトトップに3位までのランキングが出ているが、そこが多くタップされているアパレルのスマホサイトでは、「もっとたくさんの順位が見たいのでは」と考えられる。リンク先を用意したり、スライドショーにしてもっと多くのランキングを表示するのがよいのではという仮説が成り立つ。

また、化粧品で何がポイントとして刺さるかわからないので、あえてたくさん表示して、よく見られたものだけを残すといった使い方も一般的だ。スマホサイトであれば、いかにもタップできそうなデザインにすれば、何に興味があるか、ユーザー自身が教えてくれる。

ヒートマップでは、誤クリックを探してUXを改善するという使い方もあるが、よくクリックされているところはユーザーが欲しがっている情報なので、興味・関心に寄り添うために役立てるのは有効な使い方だ。

④どこを改善すべきか

アテンションヒートマップを見れば、よく見られているところと見られていないところが分かる。これにより、どこをA/Bテストすればいいか判断できる。ユーザーが見ていないところをA/Bテストしても意味はない。

⑤比較する

ヒートマップは訪問者全体で見るだけでなく、セグメントを切って比較すると、さらにさまざまなことがわかる。比較するのは、たとえば以下のような切り口だ。

特に、コンバージョンがあったものとなかったものの差分を見ると、どう改善すればいいかがわかりやすい。

図の場合、コンバージョンがあるのは「無添加」の文字を見た人なので、タイトルに無添加を入れるとコンバージョン率が上がるのではという仮説が成り立つ。ファーストビューで何を伝えるからは重要だが、タイトル部分は変更できないというケースもあるので、その場合は情報の順番を入れ換えるなどの方法がある。いずれにしろ、なんとなくで決めず、実際のユーザー行動をもとにロジカルに考えることで、A/Bテストの成功率が上がる。

その他、年代別で比較して、ターゲット年齢に適したサイト構成を探したり、購入回数別で比較して、新規顧客向けには別のランディングページを作る方がいいという仮説を立てる例が提示され、セッションが終了した。