記事タイトルを入れ替えたらCTR2.6倍--ユーザーの「欲しい！」を明らかにする“ヒートマップ”

テキスト部分は色がつかないとおかしい

ここからは、どう分析していけばいいのかを、いろんな事例をお話ししながら出していきたいと思います。まず、「こういった5つの視点がありますよ」というお話からします。1つひとつ、見ていきますね。

サイトを作るときには「こんなユーザーさんに使ってもらいたい」「見てもらいたい」があると思います。仮説検証では「本当にそのとおりになっているか」を見ます。

例えば、これはスマホサイトのECサイトのトップページです。今、ここで「セールをやってますよ」とうたっていて、ここを押すと、セールの商品一覧が見られます。50パーセントオフなど、セール価格になっている商品ページに飛ぶんですね。

ただ、これは見ていただいたとおり、あまり押されていないですよね。そもそも、押せるかどうかがわからないじゃないですか。そうすると、気付かずに去ってしまうんです。作り手としては、トップページの一番大事なところで「セールやってますよ」とお伝えして、クリックして商品一覧ページへ行き、自分に一番マッチしたものを探してもらいたいと思っている。ただ、それがうまくいかなかったということです。

この場合は、押せるかどうかがわからないので、いかにも「商品一覧ページありますよ」というボタンみたいなものを用意してあげる必要があったんですね。

次は、「美女読書」という、美女が書評するサイトです。僕の友人がやっているサイトなんですけれど。このサイトは以前、ネットで「写真ばかり見られているんじゃないの。書評なんか見られていないでしょ？」みたいなことを言われてしまった。

実際、サイトを見ていただくと、写真ではなく、ちゃんと書評部分がよく見られていることがわかります。仮説どおりになったという話だったんですが、この話をしたかったわけではなくて。

これには、分析の肝があります。画像は、見ればすぐに認識できるものです。テキストは、読むために時間がかかりますよね。つまり、読んでいる場合は、必ず色がつかないとおかしいんですよ。

ただ、なかなかテキストは読んでもらえないケースがあります。もし青くなっているということは「お客さんに対して、この情報を提供できてませんよ」となるんですね。

これは、口コミサービスみたいなものですね。これも、「これぜんぜん読んでもらえてませんね」となります。これに関しては、手書きで書いてもらったものをWebにアップしているんですね。真っ白になっているので、完全に見られてない。

売り手としては「こういった情報があればきっとよろこんでもらえる」「後押しできるか」と思っているものの、まったく読まれていない。購入の補助になっていないということですよね。これ、けっこうあるんですよ。みなさんのサイトを見ていただくと、もしかしたら真っ青になっている部分がある可能性も考えられます。「それって、仮説どおりでしたっけ？」がわかってきます。

ヒートマップで興味・関心をあぶり出す

ユーザービリティについてです。使いやすいかどうかというお話ですよね。先ほどの「ご予約」では、明らかに使いづらいケースでした。なので、「これを直していきましょう」というお話になります。

これはスライドバナーという、3秒や5秒おきに画面を勝手にスクロールしていくものです。「次へ」は、みなさん押しているんですね。「早く先に見たいなあ」と、押している。つまり、「この速度はちょうどいいのか、ちょっと遅いのか？」が考えられます。

一方で、左下のほうを見ていただくと、「戻る」を押しているんですね。スクロールがはやすぎる。「もっと最初のやつみたい」と、この一番左の「戻る」や、1つ目のところを押していたりするんですよ。

つまり、これによって「ユーザーさんが使いやすいかどうか」まであぶり出すことができます。とくにスマートフォンだと、押せるかどうかわからなかったりするので、トップページなどでの使われ方がわかったりします。

2016年で始まった使われ方として、この興味・関心をあぶり出す方法があります。例えば、これはスマホのECサイトのトップページです。スクロールして出てくるのが、ランキングというエリアです。

この一番上の見出しのところに「ランキング」と書かれていて、ちょっとタップされていることがわかります。ほかのカテゴリーの見出しは、ぜんぜんタップされていない。この「ランキング」の見出しだけが、すごくタップされていたんですね。

でも、「ランキング」の見出しは、タップしてもなにも起こりません。本来、タップするとランキングページに切り替わるのが一番わかりやすい事例です。タップされている理由は、当然ですが、ランキング内容をもっと知りたいからなんですね。

このサイトの場合、実はこのページ上では、3位までしかランキングが載っていないんですよ。ランキングページに移動させるのもいいけれど、スライドすると横からランキングが出るようにしたり、10位まで出したりすれば、満足させられるんじゃないかということになります。

「なにがほしいか」がわかれば、コンバージョンは上げられる

なぜそこを押したのか、タップしているのか。そこに、ほしい情報があるからですよね。その情報をサイトにどう載せていくのか、方法はたくさんあります。それをやっていけばいいのです。そこで重要なのが、「なにがほしいか」です。どの情報が求められているかがわかれば、一番楽じゃないですか。

こちらもそうですね。英会話のリスニング教材のページです。ランディングページのこのあたりに書かれている部分では、「リスニング教材を隙間時間に使おうよ」とうたわれています。見てみると、一番左側の「通勤中に」がクリックされている。逆に「ランチに」「寝る前に」はあまりクリックされていないことがわかります。

ここからなにを判断できるのか。「このサイトに来る人は『通勤中に使いたいな』と思っている人が多いんじゃないか」です。

それがわかれば、ここで押し出していくべきことは、通勤中に使っている風景、吊革につかまっている風景で聞いている、実際に通勤中に使っている人たちがコメントを残しているなどの情報です。それを提示できれば、おそらくコンバージョンレートは上がります。逆に、「寝る前に聞いてる」「ランチのときにやってる」はあまり興味を持たれない可能性がありますよね。

この場合では、通勤に使ったコンテンツを増やしていくことで、コンバージョンレートを上がる可能性がある仮説が成り立ちます。

先ほどの「予約」みたいに、「そこにリンクをつけましょう」と気づくための使い方が多かったんですが、そうではなくて、「なんでそこを押してるのか？」「押しているということは、そこの情報を欲しがっているよ」なので、「では、その情報をなんらかのかたちで伝えましょう」となる使い方が増えてきているのです。

伝え方はいろんな方法があるので、それは工夫していただきたいと思います。でも、「なにがほしいのか」がわかれば、コンバージョンで効果を上げられますよね。

これまでのものはクリックでしたが、アテンションでも同じことをいえます。先ほどまで「製品の特徴じゃなくて保証内容を伝えていくべきですよね」とありましたが、見られるゾーンじゃないところもいっぱい出てくることがあります。

これは「いろんな雑誌とかメディアに取り上げられてますよ」を強くうたってるサイトなんですが、あまりそこが見られていない。また、販売するクレンジングに関して「3つのポイントがありますよ」とありますが、そのうちのポイント1はあまり見られず、ポイント2はしっかり見てもらっている。でも、ポイント3はぜんぜん見られていない。「肌にダメージを与えません」などは、興味を持ってもらえなかったということなんですね。

ここで言えるのは、ポイント2は「刺さっている」。逆に、強く打ち出していた「雑誌に取り上げられてます」は見られなかった。

すべての要素を出し、検証する

では、この結果をどう施策に回したのか。

ポイント2は「新発想クレンジング」という内容がたくさん書かれていたんですね。ここのランディングページに対する流入元は、すべて記事広告でした。その記事広告のタイトルが、もともとは「メディア掲載多数の新発想クレンジング」だったんです。しかし「こっちのほうが絶対に見られてるな」と、タイトルの順番をクルッと変えたんですね。

こんなにも単純なことをやっただけで、コンバージョンレートやCTRが上がるんですね。結局、「なにに一番興味持っているのか」を見つけ出すことができれば、人を連れてくることもできます。

もちろん、うまくいかないケースもあると思います。でも、なにに興味を持っているのかが、一番わかりやすいじゃないですか。「これをどんどん発展していきましょう」と、最近ではさらに進んでいます。

このページには「ポイントは3つあります」とあります。そのポイント3つは、要素がいくつかあるなかで、担当者がいいと思って出した3つなんですね。でも、興味を持ってもらえなかったのが1と3でしたね。つまり、なにが刺さるかが正直わからなくなってきてしまっている。

最近の方法としては、例えばページなどにすべてのポイントを出しちゃうんですね。10あれば10出してしまう。そうすると、見られるところとそうじゃないところが必ず出てきます。本当によく見られた特徴、つまり、お客さんが一番興味を持っている特徴だけを残していきましょうという、マーケティングリサーチ的な使い方をする。

アンケートをとる方法もいいんですが、こちらのほうが本当に興味を持ってサイトに来た人たちの行動なので、濃度の高い情報なんですね。

そこで、「これをもとに今度は人を集客しましょう」となっています。「すべすべが見られていたから、すべすべを中心に広告のクリエイティブを作りましょう」などやっていくことが必要だったりします。

最近聞いた話では……その内容をリターゲティング広告のクリエイティブの内容にすると効果が高まることもあったりします。

先ほど「どこ見られているのか」というお話でしたが、クリックヒートマップでもできるんですね。スマホでいかにもタッチできそうなものをいっぱい作るんです。すべすべがタップされるんですが、この情報に「やはりすべすべに興味を持ってもらえるので、すべすべ押しでサイト構成を見直そう」となります。

おもしろいところだと、Webでは一切販売しなくて、店舗でしか販売しないケースありますよね。そのときの店舗のポップを、「このポップの内容、『すべすべ』なのか『つるつる』なのか？」の判断はけっこう難しいじゃないですか。効果測定が難しい。それを1度、Webで試してしまうんです。

そして、「『すべすべ』がクリックされているから、じゃあ、ここは『すべすべ』でいきましょう」という使い方もあります。これをくり返していくと、見られる。先ほどのものはけっこうスカスカだったんですが、すべてを見られるサイトになってくる。そうすると、やはり購入率も高まってくる。

僕らの、ある事務系のお客さんでは、顧客を獲得していかなければならないときに、「CMでも効果があった」がありました。こういったことをやっていたほうが効果があった、というお話もいただいていたりします。

ここまで興味・関心、「なにに興味を持っているかがわかったらいいですよね」、そして「どこを改善するべきか？」。これまたLPですが、すごくスカスカですよね。ただ、すごく見てもらっているところもありますね。

見てもらってるところで抽出したのが右側です。すべてこういったキーワード、キャッチコピーが書かれているんですね。このサイトで購入する・しない、申し込む・申し込まないは、ここの内容に影響を受けているんですね。逆に、見られていないところは、ぜんぜん情報を見ていない。だから、大事なのは「見られてるところ」です。

つまり、ここの内容をA／Bテストすると効率的なんですね。ここの文言を少し変えることで効率が上がるかもしれないし、下がるかもしれない。いずれにせよ、見ている人は、この部分に興味を持っている。

A／Bテストは一気にすべてできることじゃないので、特定の部分だけやっていくことになります。この長いLPのなかでどこをやるかべきか、選定が難しいんですね。

そのため、まずはユーザーからよく見られているところを見つけましょう。そこが一番影響力が大きい。だから、そこをA／Bテストしていきましょう。そうすると打率が上がっていきます。そんな使い方になります。

どうやって人を連れてくるかで、行動が変わる

最後に「比較する」です。いろんな比較方法があると思うんですが、僕らが一番、情報として推しているのは、購入した人、コンバージョンした人・していない人、つまり購入した人がどのコンテンツを一番見ていたのかです。

あとは、広告の流入元でどう違うのか、商品によっては地域なのか、新規・リピーターだとかなど。いろんなセグメントがあり、それぞれで切っていくと、先ほどのヒートマップも見方が変わってきます。

例えば、この広告流入元には2つクリエイティブがあります。左側がよくあるディスプレイ広告で「オンライン英会話ですよ」の情報だけがある。右側が、……こんなクリエイティブあるのかという話なんですが、細かい内容が書かれているんですね。

それぞれをクリックした人たちがサイトでどう見ているのか、どんなヒートマップになってるのか。結果は、こんな感じです。

左側のディスプレイ広告ですね。オンライン英会話だと、上のほう見ているんです。しかし、先ほどの細かく書いてあったほうは、上へと飛ばされているんですね。

これは、なぜなのか。ここのファーストビューに書かれている内容が細かい。逆にオンライン英会話、左側のほうだけだと、もっともっと詳細が知りたいので、最初の部分を見ていたということなんですね。

つまり、どうやって人を連れてくるかによって、行動が変わることがわかります。やるべき内容を変えていかなければならない。もしかしたら、特定の流入元にはこういったクリエイティブで解決しなきゃいけないと考えるきっかけになったりします。

また、これは年代比較が、左から40、50、60、70代となっています。50代・60代で見方が変わってますよね。

「60代・70代の方々が上のところに興味を持ったのか」、もしくは「そこの情報がすぐに理解できなかったんじゃないか」を考えられるので、「年代別に、ここだと50代60代のところを境目にやることを変えるべきなんじゃないか？」であったりします。

アパレルのECサイトの購入回数でも、1回の方と1回以上の方と0回の方では、ぜんぜん行動が違います。とくにアパレルなので、1回でもその商品や服を買った場合、そのブランドに対するロイヤリティが高まります。そういった方々であれば、1回でも購入すればしっかり次以降商品をしっかり探してくれる。見てくれる。

ただ、1回も買ったことない人は、あまりロイヤリティが発生していないので、スーッと見てしまいますよね。つまり、購入回数が0回と1回以上では、やるべき内容を変えなければならない。

実は、メールで飛ばした先はこういうページになってるんですが、0回の方にはもっとオススメの商品を出すべきだったんじゃないか。いきなり商品一覧を出すのではなく、一番オススメのものを出すべきだったんじゃないか、と考えることができます。

タイトル・キャッチコピーをニーズに合わせて変更する

最後に、コンバージョンあり・なしの話です。唐突にヒートマップが実例ではなく申しわけないんですが……。ここでは、コンバージョンした人としていない人で分析しましょうという話です。

左側がコンバージョンしなかった場合のヒートマップだと思ってください。ファーストビューがよく見られたことがわかります。右側はコンバージョンした人で、「無添加です！」にすごく興味を持っていることがわかりました。つまり、ここの内容がお伝えできるかどうかが肝になるんじゃないかと。

先ほどもお話しましたが、スクロールする人の率ですね。ファーストビューはだいたい100パーセントで当たり前ですが、このへんに来るとたいていのサイトは50パーセントになっています。つまり、5割の人たちは、ここにたどり着けていなかったりするんですよ。離脱してしまうのか、ほかの誘導リンクで行っちゃったのかわからないですが。

この情報が伝えられない方々がいたとしたらどうなるでしょうか。「この方々にどうやって情報を伝えるべきなのか」を考えることになるじゃないですか。

その方法として、よくあるのが、ポップアップで「無添加です！」と出す方法かもしれないし、これを上に持ってくる方法もあるかもしれない。いろいろあるなかで、1つおもしろいのが「タイトルを変える」という方法です。タイトルやキャッチコピーを変えるんですね。

先ほど、「人気のクレンジング」というキーワードにしていたんですが、「無添加です！」に興味を持っているのであれば、そこへ誘導すればいいんじゃないかということですよね。タイトル部分を「無添加ですよ」とうたうことによって、引きつけられて、そこまで見ようとするんですよ。ファーストビューの最初の文言をなににするのか。それによって、そのあとの行動を変えることができます。

この場合は、「無添加ですよ」というキーワードに入れましょうという方法になります。ただし、これが100パーセントうまくいくかというと、そうではなかったりします。地道にやっていく必要はあるんですが、そういった傾向があったりします。

つまり、今のロジックは、どこに興味を持っているのかをまず見つけましょう。「あ、ここの無添加です」に興味をもらえるとわかったら、そこをどう見せてあげればいいのか。その方法として、タイトル部分、キャッチコピーの部分を変える。ニーズのある内容に寄せたりできます。

いろんな方法があるんですが、先ほどのような情報の画面はA／Bテストでやりやすくなりますよね。

今お話しした内容をまとめますと3つになります。ヒートマップ分析をすると、満足しているか・していないかが出てくるんですね。スカスカの見られていないサイトは満足させていない、しっかり見られているということは満足している。情報をしっかり提供できていることになります。

もう1つは、「なにに興味を持っているか見つけましょう」です。最初の活用方法なんですが、先ほどのマーケティング・リサーチ的な使い方をあえていっぱい出して、「なにが一番見たいのか」「これが見られるということは、それを中心に人を連れてくるところも変えましょう」とすること。

最終的には、それらをもとに施策をやらないと意味がないので、サイトを改善します。A／Bテストをしたり、広告のクリエイティブを変えたりするのも、けっこう使えます。

コツコツ続けることで、インテリジェンスがたまる

最後にお伝えしたいのが、マーケティング・インテリジェンスという言葉です。自分たちの商品を売っていくなり、作っていくなりするとき、いろんなお客さんの情報を取得する必要があります。

先ほどお話した、「ヒートマップで興味を持っているところを見つけましょう」もそうです。しかしA／Bとなりますと「A／Bテストをしてみました。でも、なんか失敗しました」と終わりにしちゃうケースが多いんです。

なぜ失敗したのか、なぜこの方法でうまくいったのかをしっかり蓄積していく必要があるんですね。たいてい、こういった情報は数少ない担当者が持っていて、ぐるぐる回しています。もしその担当者が辞めてしまったら、そのインテリジェンスも消えてしまうじゃないですか。本来であれば、会社の組織はそれを残しておくべきことなんです。でも、それをしっかりやっていく組織体系や文化は、しんどいですよね。めんどくさいですし。

こういった情報を、「A／Bテストやりました。Aのクリエイティブ、Bのクリエイティブをそれぞれエクセルに入れておきます」「その結果をヒートマップに入れておきます」「コメント入れておきます」をやるのは、なかなか大変。「失敗した事例とか嫌だし」があるんですが、それをコツコツやるかどうかが先ほどの企業間の差につながってくるんですね。

コツコツと続けている企業は、ノウハウとかインテリジェンスがたまっていくので、新しい商品の開発や新しいキャンペーンやるときは、そのノウハウを使うことができる。あとから入ってきた人でも、それを見て考えることができるんです。

それをなんとなくで個々人に任せてしまうと、できません。けっこうしんどくてめんどくさいことなんですが、やれるかどうかが肝になっていると思っています。

今日はひたすらいい話だけをしているんですが、実際には簡単な話じゃなくて、地道な部分もあります。正直、うまくいってる企業さんの裏でもあったりするんですが、これをやっていかないと差がつけられてしまうと最近、感じております。

いろいろとヒートマップのお話させていただきました。僕らのツールだと1ページだけであればヒートマップを無料でできたりしますので、まずは試してもらうのがいいと思います。

最後に、ツールの話として。先ほどお話したGoogle Optimize、こういうA／Bテストツールというのは連携しないとできないんですが、僕らのツールとは連携します。たぶん年内には連携が完成すると思います。なので、ヒートマップとA／Bテストを掛け合わせてやることができる予定です。

あと「ヒートマップツールどう選んだらいいのか？」などの質問もよくあるのですがヒートマップツールは、いろいろと出ていまして。どれを選んでもいいかなと思うんですが、とくに差が激しいのは、こういうふうにずれちゃうんですね。

精度が高いかどうか問題があります。とくにこういったスマホサイトでは、ここでタップしたのにずれちゃうことがけっこうあるんですね。それがちゃんと担保できてるかどうかをチェックしてみてください。

というところで、みなさんA／Bテストをしっかりやっていただきたいと思っております。ご清聴どうもありがとうございました。

（会場拍手）