ヒートマップツールとは、Webサイト上のユーザー行動をサーモグラフィーに模した色で色付けをして、
直感的に確認するツールのことです。
特にLP(ランディングページ)の効果測定や改善に用いられることが多く、
LP内でユーザーがどのボタンを多くクリックしたのか、
どこまでスクロールしたのかなどを可視化できるのが特徴です。
ヒートマップツールを導入し、ユーザーにとって魅力的なLPを訴求することで、
CVR(コンバージョン率)の最適化にも貢献します。
しかし、ヒートマップツールを導入したとしても、
その結果を読み解き改善に活かせなければ、宝の持ち腐れになってしまうのも事実です。
そこで本記事では、ヒートマップツールで抽出した結果をどのように改善に活かせば良いのか、
効果的な読み解き方や、実践的なアプローチを紹介します。
すでにヒートマップツールは導入しているけれど、
どのように改善施策を立案すれば良いかわからないマーケティング担当者も参考にしてみてください。
目次 [ 非表示 表示 ]
ヒートマップとは、Webサイト上のユーザー行動をサーモグラフィーに模した色で色付けをして、
直感的に確認する技法のことです。
出典:マーケティングツールMIERUCA(ミエルカ)公式ホームページ
ヒートマップを取り入れたヒートマップツールは、上の画像の通り、
色の濃淡(濃いエリアがよりユーザーの関心が高いと判断)によって、
ひと目でユーザー行動が可視化されます。
例えば、よりクリックされているエリアの近くにCTA(コールトゥアクション)を設置する、
関心が薄いエリアは導線を見直すなどの、改善施策につながります。
ユーザーの興味関心が高いエリアにCTAを設置することで、
より多くのクリックを獲得でき、CVRも高まることは言うまでもありません。
ただし、色が濃いエリアのユーザーの関心が高いことは事実ですが、
関心の高さを示す理由が全てポジティブではあるとは限りません。
なかには、ネガティブなインパクトが強く、
より多く反応しているだけというパターンも考えられます。
そのため、ヒートマップツールによって抽出されたデータはユーザーにとってポジティブなのか、
もしくはネガティブなのか、心理状態も含めて慎重に検討する必要があります。
一口にヒートマップツールと言っても大きく分けて5つほど種類があります。
ここでは、ヒートマップツールの種類ごとの特徴と読み解き方について解説します。
出典:無料で使えるヒートマップとは?|User Heat公式ホームページ
クリックヒートマップとは、LP内でユーザーが「何を」「どの程度」クリックしているのか、
判別し可視化する機能のことです。
画面上にユーザーがクリックした箇所が色の濃淡で示されます。
具体的には、クリック頻度が高い箇所は赤色、低い箇所は青色のようなイメージです。
赤色に近づくにつれてクリックされた頻度が高いため、有効なCTAだったかどうか、
逆にネガティブな要因からクリックされているのかを判断する材料として活用できます。
またLP内に設置したCTAがあまりクリックされていない場合は、
レイアウトやデザインを変更する、または導線を見直すなどの改善施策を検討できます。
【確認ポイント】
・クリックが多い箇所はどこか(またその特徴や傾向は?)
・設置したリンクやCTAはユーザーから視認されているか
・テキストのみで構成された部分のみをクリックしていないか
【読み解き方】
リンクやCTAが設置されているエリアにクリックが集まらない場合、
ユーザーにとって魅力的なテキストやデザインを採用できていない可能性があります。
ボタンやバナー、テキストの見せ方を工夫するのも一つです。
また、リンクやCTAが設置されている付近に、
注目を集めてしまう画像やコンテンツがある場合は、
どちらを優先すべきか検討し直す必要があるかもしれません。
LP内における熟読箇所を色の濃淡で示す機能のことです。
出典:無料で使えるヒートマップとは?|User Heat公式ホームページ
ユーザーの滞在時間が長い箇所は赤色で示され、滞在時間が短い箇所は青色で表されます。
例えば、LP内のファーストビューに設置しているCTAが濃い赤色で示されている場合、
仮説としてCTAのデザインやテキストが魅力的だから滞在時間が伸びていると、
判断できるかもしれません。
このように、アテンションヒートマップを導入することで、
ユーザーがLP内のどこに注目しているのか、
何を読み飛ばしているのかが判別し、可視化できます。
【確認ポイント】
・注目されているコンテンツはどの部分か
・何に注目し、何を読み飛ばしているか
【読み解き方】
ユーザーが何に興味を持っているのか、どのようなコンテンツを訴求すれば
よりページ滞在を増やせるのかを判断するのに役立つでしょう。
例えば、LPのボディ部分の滞在時間が短い場合、自社商品・サービスがユーザーに
与えられる効果やベネフィットを、うまく訴求できていない可能性もあります。
その商品やサービスがどのようにユーザーの役に立つのか、
例えば裏付けとなるデータや数値を記載するなどの対策が必要かもしれません。
➤アテンションヒートマップ分析を更に知りたい方:ヒートマップのアテンション分析で解き明かす!LPOを成功に導くコンテンツ最適化の秘訣
LP内において、ユーザーがどのセクションまでスクロールしたかを色の濃淡で示すのが
スクロールヒートマップです。
出典:無料で使えるヒートマップとは?|User Heat公式ホームページ
基本的にはファーストビューの訪問ユーザーは多いため赤色で表され、
下へスクロールするたびに、訪問ユーザー数が少なくなるため、スクロール率も低下し青色で示されます。
LP内でユーザーがどの部分までスクロールしたかを「%」で確認できるのが、
スクロールヒートマップの特徴です。
例えば、スクロール率が極端に低い箇所を見つけられれば、
ページの離脱箇所を把握でき、UI(ユーザーインターフェース)や
UX(ユーザーエクスペリエンス)の改善にも役立ちます。
また、そもそもスクロール率が極端に悪い場合、
ページ下部までスクロールさせないファーストビュー完結型のコンテンツが有効かもしれません。
戦略の構築から実行まで、データを活用してサポートする株式会社WACULのB2Bサイトにおける、
ランディングページのベストプラクティスに関する調査は、非常に興味深い内容です。
具体的には、B2BサイトのLP30件を無作為に抽出し、
デジタルマーケティングの勝ちパターンをデータドリブンで自動提案する「AIアナリスト」で分析。
その結果、「LPの縦の長さとCVRは無関係」
「LPをファーストビュー完結型にすることでCVRが1.64倍」という、
これまでの定石を覆す内容となりました。
このように、固定観念にとらわれないWebマーケティング施策を実行するためにも、
スクロールヒートマップの情報は参考になります。
参考:縦長LPはコンバージョンに寄与するのか?BtoBにおけるランディングページ(LP)のベストプラクティスに関する調査|株式会社WACUL
【確認ポイント】
・LP内のどの部分からスクロール率が低下しているのか
・LP内で具体的にどの部分まで見られているか
【読み解き方】
基本的にLPの下部へスクロールすればするほど訪問ユーザー数が減少するため、
スクロール率も低下します。
しかし、ユーザーにとって有益な情報が得られた段階でページを離脱する可能性も考えられるため、
ページ下部の離脱率が高いからと言って全て改善が必要とは限らないのも事実です。
つまり、スクロール率が低くてもCTAをしっかりクリックし、
CV(お問い合わせや資料請求などの成果)も取れているのであれば、
そこまで意識する必要もないでしょう。
LP内でユーザーがどのようにマウスを動かしているかを可視化する機能のことです。
マウスと視線の動きは連動しているとも言われており、
マウスの動きを追うことで、LP内でどのような視線移動をしているかを判断できます。
出典:無料で使えるヒートマップとは?|User Heat公式ホームページ
LP内のどこに視線が集まるのか、
もしくはどの部分には視線が集まらないのかを可視化することで、
LPのUIやUXの改善に役立ちます。
なお、視線誘導のパターンは、主に以下の3通りです。
・Z型:Webページの画面左上→右上→左下→右下へZを描くように移動する視線レイアウト
・F型:Webページの画面左から右へ視線を移動しながら、Fを描くように下に向かう視線レイアウト
・N型:Webページの右上→右下→左上→左下に視線を移動しながら、Nを描くような視線レイアウト
このうち、LPではZ型かF型が採用されることが多い傾向にあります。
マウスフローヒートマップを活用し、あまりにも複雑に視線が動いていると感じたら、
視線誘導の考え方を用いて、LPのレイアウトパターンを再検討してみるのもおすすめです。
なおマウスフローヒートマップは、デスクトップのみでしか使用できないため
注意してください。
【確認ポイント】
・LP内のユーザーの視線はどのように動いているか
・視線が集まるエリアとそうでないエリアの特徴に違いはあるか
【読み解き方】
LP内で視線が集まるエリアとそうでないエリアの特徴を分析し、
視線が集まらないエリアのデザインやレイアウトパターンを再考する対策が必要です。
また繰り返しますが、マウスフローヒートマップはスマホ用ページの分析はできません。
スマホやタブレットなどの端末において、タップ・ピンチイン(縮小)・
ピンチアウト(拡大)・スワイプの動作を可視化する機能のことです。
最近ではモバイルデバイスに対応したプロダクトやサービスをローンチするのは当然であり、
モバイルでのユーザー行動を無視することはできません。
タッチアクションヒートマップなら、モバイルでのユーザー行動から、
どのコンテンツがピンアウトされて興味を持たれたのか、
逆に読みにくいコンテンツはないかなどを可視化できます。
【確認ポイント】
・ピンチアウトやタップなどの動作から、ユーザーが興味を持っている箇所はどこか
・テキストのフォントサイズや画像など、ユーザーから視認されにくい箇所はないか
【読み解き方】
ユーザーがモバイルページで、ピンチインやピンチアウトするには当然ながら理由があります。
読みにくいコンテンツだからピンチアウトしていると仮説する場合、
フォントサイズをより大きく、デザインも見やすいものに変更する必要があります。
一方で、興味・関心が高いコンテンツだからこそピンチアウトしている可能性も考えられますので、
判断は慎重に行いましょう。
ここからは、ヒートマップツールを導入した事例をもとに、
どのようなアプローチでLPを改善していったのか具体的なヒントを紹介します。
デジタルコンサルティング、Web制作、アプリ開発などのデジタルコンサル制作や
デジタルマーケティング推進支援など、幅広いサービスを展開する株式会社キャンバス。
ヒートマップ導入前は、Googleアナリティクスを用いて、
滞在時間の指標からページ内のどの部分にユーザーが残っているかを推察していたそうです。
しかし、実際にどの範囲までスクロールしているか判断材料が乏しく、
ページの改善施策に苦慮されていたそうです。
そこでシンプルで使い勝手も良く、
自動キャプチャ機能などの独自機能も備えていた「ミエルカヒートマップ」を導入。
アテンションヒートマップを活用すると、料金プランがよく読まれていることがわかり、
さらに料金プランの見やすさに磨きをかけていったそうです。
また、ページ下部にホワイトペーパーダウンロードの動線を設けていましたが、
あまり熟読されていないことから、「ユーザーに気づかれていないのでは?」と仮説を立てて、
目立ちやすいCTAを実装。
その結果、CTRが4%も上昇したそうです。ほかにもさまざまな施策を実行されたそうですが、
アテンションヒートマップだけでも、非常に多くの効果が期待できると理解できます。
熟読箇所を可視化し、仮説を検証し続けることで、効果的な結果が得られた典型的な事例です。
そのほか、2ヵ月でCPA50%減、CV250%増加という素晴らしい結果も叩き出しています。
参考:【B2B事例】ヒートマップ初導入でCV250%増&CPA50%削減できた株式会社キャンバス様の運用の秘訣とは?|ミエルカヒートマップ
「より良いスポーツ品とスポーツの振興を通じて社会に貢献する」を経営理念とし、
総合スポーツ用品メーカーとして確固たる地位を築き上げてきた「ミズノ株式会社」。
EC事業にも力を入れているミズノ株式会社では、スポーツに強みを持つ社員が多数在籍する一方で、
デジタルに精通している人材が限られてしまい、デジタルデータの活用に課題を抱えていたそうです。
すでにデジタルツールは活用されていたものの、
デジタルの専門家しかデータの深掘りができないことに課題を感じ、User Insightを導入。
2022年6月に導入・運用をスタートされたそうですが、「誰でも使いやすく、
グラフもヒートマップも直感的にデータを見える化してくれる」と好評です。
ヒートマップツールをLP内で導入し、より熟読されている箇所を可視化。
機能を知った上で商品詳細ページへ遷移できるよう、LINE UPを紹介するコンテンツの場所を変更する、
タップされている画像にリンクがついていない不具合を可視化するなどの対策を講じました。
その結果、LP直帰率が92.9%→70.8%と改善されたそうです。
参考:ヒートマップでLP直帰率が20%以上改善!「誰でも利用できる」ツールが組織のDX推進に。手軽にリアルタイムデータやSEO分析データを社内共有|User Insight
紹介した事例にもある通りヒートマップツールは、
デジタルマーケティングを苦手とする方にも、ユーザー行動がひと目で判断できるのが特徴です。
熟読箇所の可視化からよりユーザーに見られているコンテンツの順序を入れ替える、
気づいていないCTAのデザインを変更するなど、難しく考えることなく改善施策を実行できるのが最大の強みでしょう。
ここからは、自社に最適なヒートマップツールを選定するためのポイントを紹介します。
LP改善に必要なヒートマップツールを探す際の参考にしてみてください。
LPを改善する場合、クリックやスクロール、熟読箇所の把握は必須です。
前章で紹介した改善事例でも、熟読箇所を見える化したことによって
高い改善成果を得られていることがわかります。
そのため、ヒートマップツールの導入にあたり基本的な機能である、
以下の3点はしっかり押さえておきましょう。
・クリックされた箇所を可視化する「クリックヒートマップ」
・ユーザーの熟読箇所をつかめる「アテンションヒートマップ」
・ユーザーがスクロールした箇所や離脱した箇所を把握する「スクロールヒートマップ」
また、スマートフォンやタブレットなどモバイル端末向けのサービスを展開している企業にとっては、
タッチアクションヒートマップも検討してみてください。
ユーザーがどの部分でピンチアウトしたのか、タップしたのかを可視化して、
ユーザビリティの向上やCVRの改善につなげましょう。
事例でも紹介しましたが、マーケティングの専門知識を保有している社員が
LPの改善を担うとは限りません。
業界や事業内容によってはマーケティング担当者が在籍していないケースも考えられます。
このような点を踏まえれば、デジタルマーケティング領域において初心者であっても、
容易に扱えるツールかどうかが重要です。
ヒートマップツールの多くは、無料トライアルを用意しているため、
関係する社員に使い心地を確かめてもらいましょう。
使用する社員が使いやすいUIか否かで、
その後の効率的なLP改善につながるかどうかが決まります。
LPを改善するにあたり、施策実行前と後で、ひと目でデータを比較できると便利ですよね。
例えば、ミエルカヒートマップには「キャプチャ自動取得」と呼ばれる機能が用意されています。
ページデザインや内容の変更前後のデータを保管でき、
いつでも見返せる便利な機能で、LPの改善結果を比較する際に重宝します。
このように、各ツールにはそれぞれに独自機能がありますので、
LPの改善にどの程度使えるかどうかを判断してみてください。
ヒートマップツールのなかには、ツールの使い方だけでなく、
活用方法や改善提案まで対応してもらえるサポートが充実しているプランもあります。
例えば、LPの改善をしようと思っても、
ツールから抽出されたデータをどう改善につなげれば良いか悩みが生じることもありますよね。
このような状況下で、デジタルマーケティングに精通したプロに改善提案をしてもらえれば、
社内に知見も蓄積し、効率の良い運用と改善を両立できます。
料金だけで判断するのではなく、
社内のノウハウとそれに見合ったサポートがあるかどうかも検討してみてください。
優れた機能が用意されたヒートマップツールであっても、
普段から使う社員がうまく操作できなければ意味がありませんよね。
ヒートマップツールには、無料トライアルが用意されていることがほとんどですので、
一度無料で使い心地を確かめることをおすすめします。
実際に社員が使ってみた上で、操作しやすいボタンがあるかどうか、
データを見やすいかどうかを検討してみましょう。
ツールのなかには、登録するドメイン数やアクセス数、データ保存期間によって
料金が変動するタイプもあります。
ドメイン数やアクセス数が多くなればなるほど、
料金プランも高くなりますので、注意してください。
なお、ヒートマップツールのなかにはアクセス数やドメイン数に制限を設けずに、
利用できるタイプもあります。
ここからは、具体的にLP改善におすすめの機能があるヒートマップツールを3つ紹介します。
それぞれ料金プランや特徴が異なりますので、比較検討してみてください。
なお各ツールの機能や料金などは、2024年3月時点の情報を参考に掲載しておりますので、
あらかじめご了承ください。
導入企業数累計1,300社を突破しているミエルカヒートマップには、
LPの改善施策に特化した機能が充実しているのが特徴です。
出典:ミエルカヒートマップ公式ホームページ
アクションヒートマップ・スクロールヒートマップ・クリックヒートマップはもちろん備えていますが、
それ以外にも以下の通り充実の機能があります。
LP向けの主な機能 |
特徴 |
ABテスト機能 |
コンバージョンを増やすために、ボタンの色やテキストの内容などを比較できるABテスト機能を新規リリース。専任のコンサルタントによるABテストの設計支援が無料で付属。 |
クリックリンク確認機能 |
ページ内のリンクやボタンがどのくらいクリックされているかを、一覧で表示。 |
自動キャプチャ保存 |
ページの状態を毎日自動でキャプチャ保存可能。ページ変更前後で容易に比較できます。 |
ポップアップ機能 |
キャンペーンやクーポンなどを誰でも気軽にページ内に表示でき、コンバージョンの促進対策も実施できます。 |
ヒートマップを基にした改善提案サポート |
料金プランによっては、導入時のレクチャーや活用方法だけでなく、ヒートマップを基にした改善提案サポートもあります。 |
ミエルカヒートマップを検討する際の注意点としては、
登録サイト数や計測PV数に応じて、料金プランが決まっている点です。
しかし、料金プランは非常に充実しており、ビジネスプラン以上になれば
登録サイト数や計測PV数は無制限で利用できるため、企業向けにはおすすめできます。
また、ABテスト機能の利用を検討する場合は、
ファーストプラン以上の契約が必要ですので注意してください。
➤ミエルカヒートマップを更に知りたい方:ミエルカヒートマップとは?サービス概要、利用料金、導入事例を紹介
User Heatは、株式会社ユーザーローカルが運営する無料ヒートマップ解析ツールです。
出典:User Heat公式ホームページ
無料版においても基本的な5種類のヒートマップが用意されており、
EFO機能やGoogle Search Consoleとの連携による検索ワードの可視化、
テキストマイニング機能も備えています。
なお企業向けには有料版のツールも用意されており、ヒートマップは10種類以上、
絞り込みは25種類以上と機能も豊富です。
LP向けとしては、ABテストの比較検証機能もあり、
AとBどちらのクリエイティブのCVRが高いか、その結果も分析可能です。
そのほか、導入後には「オンボーディング」「設定勉強会」「活用勉強会」
「個社別活用法提案」など、4段階のサポート体制が用意されています。
基本的な操作だけでなく、データの読み解き方や改善方法の考え方まで、
レクチャーしてもらえるので、マーケティングに詳しくない担当者でも安心できますね。
➤User Heatを更に知りたい方:User Heatとは?メリットとデメリット、主な機能を紹介
SiTestは、株式会社グラッドキューブが運営する、オールインワンLPOツールです。
出典:SiTest公式ホームページ
最大の特徴は、ユーザー行動分析・ABテスト・パーソナライズなどが、これ一つで完結する点です。
ヒートマップとして使う際には、スクロールヒートマップ・マウスグラフィ®︎・
クリック/タップヒートマップ・タッチアクションと、主要な機能は全て完備しています。
さらに、ヒートマップ解析のロジックを強化する定量データを、数値とグラフで可視化できるのも特徴です。
期間ごとにヒートマップと定量データを比較できるだけでなく、
サイト訪問者の属性・アクセス環境・テストパターンなど、さまざまなセグメントで比較できます。
また、無料で使えるフリープランもあるため、使い心地を確かめたい場合にもおすすめです。
さらに、専門資格を持つプロのコンサルタントが改善を伴奏してくれるコンサルティングプランもあり、
効率良くLPのCVを高めたいシーンで重宝します。
➤SiTestを更に知りたい方:SiTestとは?主な機能、導入事例を紹介
ここで紹介させて頂いたヒートマップツール以外にもさまざまな会社が提供しております。
さまざまなヒートマップツールに興味のある方:ヒートマップツール15選:無料から有料まで徹底比較と選び方ガイド
コンサルティングサービスを利用する場合は別ですが、
ヒートマップツールを用いて自社でLPの分析を行う場合、
どのようにLPを最適化すれば良いのかわからない担当者も多いはずです。
ここでは、具体的にLPのどこに着目して最適化を行えば良いのか、
主要なプロセスをステップバイステップで解説します。
なおこの場合の最適化とは、CVRアップのための最適化を意味します。
ファーストビューとは、ユーザーがLP訪問時にスクロールせずに見えるエリアのことです。
ヒートマップツールを導入することで、
ユーザーがどの程度ファーストビューにとどまっているかを可視化できます。
例えば、スクロールヒートマップを用いてファーストビューの離脱率を調べた結果、
約半数がファーストビューから次のセクションへ移動せずに離脱してしまったとしましょう。
この場合、ファーストビューがユーザーの求める情報に合致していない可能性が仮説として考えられます。
メインビジュアルを変更したり、広告クリエイティブとLPの関連性を高めたり、
フォントサイズを見やすい大きさに工夫したりと、改善が必要です。
ファーストビューの離脱率を改善するだけでも、
LP内にとどまるユーザーが増えるわけですから、CVRの上昇に期待ができます。
アテンションヒートマップを用いれば、LP内の熟読箇所を可視化できます。
そのため、LP内のコンテンツの順番についても検証可能です。
例えば、ボディコンテンツに「商品の基本情報」→「商品から得られる効果」の順に
掲載されていたと仮定し、アテンションヒートマップを活用すると、
基本情報よりも効果のほうがより多く熟読されていたとします。
この場合、ユーザーにはまず商品から得られる効果を知りたい、
というニーズがあるかもしれません。
つまり、商品から得られる効果→商品の基本情報の順に入れ替えることで、
CVRがアップする可能性があります。
このように、アテンションヒートマップを活用すれば、
コンテンツの順番についても最適化できます。
ファーストビューの離脱率もそこまで悪くない、
LP内での滞在時間もそれなりに確保できている場合、
CTAのクリックについても可視化してみると良いでしょう。
ヒートマップツールのなかには、クリックヒートマップだけでなく、
ユーザーがクリックしたリンクの回数を計測する機能を備えているツールもあります。
例えば、これらのツールを使うことで、
設置したCTAがどのくらいクリックされているのか、回数とクリック率も分析できます。
クリック率が低い場合は、
以下のネガティブな要因はないかを見直してみてください。
・CTAが複数ありどれをクリックすれば良いのか迷いが生じている
・ボタンの色が目立たない
・テキストがユーザーの行動を喚起させるものではない
・デザインがボタンだと気づくにくい
・スマホで見るとボタンをタップしにくい
・テキストのフォントサイズが小さい など
マーケティングにおいてヒートマップツールの活用は、LP内のCVRをアップさせるため、
そしてトレンドや時代背景に応じたユーザー行動を把握するために欠かせません。
例えば、ヒートマップツールによって一度最適化したLPであっても、
ユーザーの好みや行動が変化すれば、過去の施策は通用しなくなります。
つまり、LPは常にPDCAサイクルを回して最適化しなければなりません。
ABテストを実施し定期的にLPを最適化する、「
LPO(Landing Page Optimization)=ランディングページ最適化」を実施する際に、
真価を発揮するのがヒートマップツールです。
さらに、ヒートマップツールだけでなくGoogle アナリティクスや
Google Search Consoleをはじめとした解析ツールとも連携すれば、
より精緻なユーザー行動を把握できます。
ぜひ、本記事を参考にヒートマップツールの機能を使いこなし、
LPのCVRを改善してみてください。
なおヒートマップツールのおすすめを全14ツールまとめた以下の記事も、
自社に適したツール選びの参考になります。
各ツールの特徴を記載しておりますので、ぜひ比較検討してみてください。
➤ヒートマップツールを知りたい方:ヒートマップツール15選:無料から有料まで徹底比較と選び方ガイド