ヒートマップとは｜ユーザー行動を可視化するサイト改善手法・ツール紹介

「Webサイトに集客はできているが、成果につながっていない」「CVRを改善しようにも、どこを改善したら良いか分からない」とお悩みの方も多いのではないでしょうか。

そのような時に活用したいのが、ヒートマップツールです。ヒートマップツールでは、ページスクロールやマウスの動きから、ユーザーの目線や行動、ページ内のどこに関心があるのかを把握することができます。

これらの分析機能をWebサイトで活用することで、「複数あるCTAのどれがクリックされているのか」「ユーザーに見せたいコンテンツをどこに配置すべきか」などが分かるようになり、サイトやページのパフォーマンス改善につなげることができます。

本記事では、ヒートマップとは何かという基礎情報から基本的な使い方、分析を行う際のポイントを紹介します。

おすすめのヒートマップツールを知りたい方は、まずは「ヒートマップツールおすすめ6選【比較表・無料あり】」からお読みください。各製品について特徴や機能性、料金プラン、実際に利用した人のレビューをまとめています。

ヒートマップツールとは

ヒートマップツールとは、Webサイトの特定ページにおけるユーザー行動を、ヒートマップ（サーモグラフィを模した色分布）で可視化するツールです。

以下のようなデータを取得し、ユーザーの目線や行動、ページ内の関心の強さを把握することができます。

他の解析ツールや数値による分析と違って、視覚で情報を捉えられるため、直感的にユーザー行動を理解することができ、デザイナーやエンジニアなどサイト解析の専門外のメンバーとヒートマップを共有しながら、ページ改善・コンテンツ改善を策定できるでしょう。

しかしながら、ヒートマップ分析は、WebサイトのUIUXやパフォーマンスを改善するための分析手法の一つにしか過ぎず、目的や課題に応じて、アクセス解析ツールやSEOツール、EFOツールなどの他ツールが必要になることもあります。まずは、ヒートマップツールの得意分野や弱点を明確に理解しておきましょう。

メリット：ユーザーの細かい動きを客観的に把握できる

ヒートマップ分析の強みは、Webページ上でのユーザーの動きを客観的に把握できることです。数値からはわからないコンテンツやユーザビリティの改善点を見つけ出すヒントが得られます。

アクセス解析ツールでは、「どのページから」何人が離脱したのかは把握できますが、「ページ内のどのエリアから」離脱したのかまでは読み取れません。ページの滞在時間も同様に、よく読まれているコンテンツはPV数からわかりますが、コンテンツ内のどこが熟読されているのかは、ヒートマップツールに頼ることになります。

デメリット：サイト全体や複数ページにわたる範囲の傾向分析は苦手

ページごとにユーザー行動を可視化する特性の裏返しでもありますが、ヒートマップツールは、アクセス解析ツールが得意とする「Webサイト全体や複数ページに渡る範囲の傾向」は掴むことができません。

つまりは、アクセス解析ツールとヒートマップを併用することで、改善すべきページの改善すべきエリアやコンテンツまで絞り込むことができます。

ユーザー行動の把握やユーザー体験の向上には、Webサイト全体やディレクトリ単位で課題を抽出することも必要になるでしょう。Webサイト全体でネックになっているページは把握できたが、その原因がわからないといったケースで、ヒートマップ分析を実施すると要因が見えてくるかもしれません。

また、ヒートマップでは「ユーザー行動の理由まではわからない」ことにも注意しましょう。熟読エリアと判定された滞在時間の長いコンテンツが、興味深いから熟読したのか、内容が理解しづらくて時間を要したのかは、自身で分析を行う必要があります。

ヒートマップツールで可視化されるユーザー行動と分析ポイント

ヒートマップツールでは、ページ上でのユーザー行動について、主に以下の分析が可能です。

1. 熟読エリアの分析
2. 終了エリアの分析
3. クリック位置の分析
4. スマホ操作の分析
5. より細かいユーザー行動の分析

1. 熟読エリアの分析

熟読エリアの分析では、Webページ内のどのエリアがよく読まれているのかを可視化します。アテンションヒートマップとも呼ばれ、マウスが通った位置や滞在時間などから、熟読度・注視度が高いほど濃い色で表示されることが多いです。

「読んでほしい箇所なのに、ユーザーの目を惹けていない」といった課題をコンテンツの改善に繋げたり、興味を持たれている情報から思いもよらないユーザーニーズを発見できたりすることがあります。

2. 終了エリアの分析

終了エリアの分析では、ユーザーがWebページのどの部分で離脱しているのかを可視化します。ヒートマップ上での表現方法はさまざまですが、ページをいくつかの区分に分けて読み進めたユーザーの割合を表示することが多いです。

たとえば、上図はこのページに訪問したユーザーの50%が、その50%と記載されている位置まで読み進めたことを意味するスクロールヒートマップですが、区画を碁盤目状に分割して計測するものもあります。

終了エリアと熟読エリアのヒートマップを見比べてみることも重要です。必ずしも熟読されている部分まで多くのユーザーが読み進めているわけではないことに気づくかもしれません。たとえば、熟読度が高いコンテンツが終了エリア10%や20%のラインにある場合は、興味があるはずの情報にたどり着く前に離脱している可能性があります。

3. クリック位置の分析

クリック位置の分析では、ユーザーに画面上のどこがクリックされているのかを可視化します。クリックされた回数（クリックしたユーザー数）が多い部分ほど、濃い色で表示されることが多いです。

クリックできない画像やテキストを間違えてクリックした場合も反応するため、周りのコンテンツに埋もれて見つけづらくなっていたり、ボタンのサイズが小さすぎて誤クリックが発生していたりといったパーツの配置やデザインの不具合を発見できます。

また、ツールの仕様によりますが、「最後にクリックした箇所」だけに絞って表示することができれば、離脱の要因検証に役立てられるでしょう。

4. スマホ操作の分析

スマホ操作の分析では、タップやスワイプのほか、フリック、ピンチイン／アウトといったスマホ特有のアクションを可視化する「タッチアクションヒートマップ」を利用します。

• スワイプ：画面に指を触れた状態から、上下左右に滑らせる操作
• フリック：画面に指を触れた状態で、上下左右に素早く弾く動作
• ピンチイン／アウト：指で拡大／縮小する動作

最近では、訪問者の大半がスマホユーザーというサイトも多く、スマホユーザーがコンテンツをどのように捉えているかを分析することは必須です。タッチアクションヒートマップをこれまでにご紹介したヒートマップと組み合わせることで、スマホ向けWebページの利便性や注目コンテンツを異なる切り口で分析することができます。

スマホはさくさくとスクロールしてコンテンツを読み飛ばしやすいため、アテンションヒートマップのみでは熟読エリアが大まかな区画でしかわかりません。しかし、滞在時間の短いエリアでも、一部のコンテンツにピンチインの操作が集中して発生しているということもあり得るのです。

また、熟読エリアの中で上下の細かいスワイプが多数見られる場合は、特に注目度の高いコンテンツであることがわかります。ただし、興味のある情報だから読み返しているのか、内容が難しくて理解に時間がかかっているのか、動作の根拠まで掘り下げて仮説を立てる必要があることに注意しましょう。

5. より細かいユーザー行動の分析

mouseflowの「セッションリプレイ」などの機能を使うと、サイトに訪問したユーザーの「クリック」「マウスの動き」「スクロール」といった行動を録画動画で可視化することができます。

ここまで紹介したさまざまなヒートマップ分析よりも詳細に、ユーザー行動を把握できるツールと考えれば良いでしょう。

ただし、ユーザーごとに一連の流れを全て動画で確認する必要があるので、分析に時間がかかってしまうデメリットがあります。

ヒートマップを活かしたユーザー行動分析の総合的アプローチ

ヒートマップ分析は単体でも強力なツールですが、より包括的なユーザー行動分析の一部として活用することで、さらに深い洞察を得ることができます。

Googleアナリティクスなどのマクロ解析ツールではサイト全体のトラフィックやコンバージョンの流れを把握し、ヒートマップなどのミクロ解析ツールでユーザーの具体的な行動を観察するという組み合わせが特に効果的です。

実際の分析現場では、「なぜユーザーがこのページで離脱するのか」という問いに対して、マクロ分析では「どのページで」という情報を、ヒートマップでは「ページのどの部分で」という詳細を把握できます。

この両方を組み合わせることで、サイト全体からページ内の特定エリアまで、あらゆる階層での問題点を特定し、効果的な改善策を打ち出すことが可能になります。

このアプローチを取り入れるメリット：

• マクロとミクロの両視点から分析することで、見落としがちな問題点を漏れなく把握できる
• 異なる分析ツールからの洞察を組み合わせて、より確実性の高い改善策を立案できる
• 限られたリソースの中で、最も効果的な改善ポイントを優先的に特定できる

成功事例で見るヒートマップ分析の実践テクニック

ヒートマップを活用し、Webサイト（LP）やコンテンツのパフォーマンス改善に成功した3つの事例をご紹介します。

事例1. リリースした記事がどう読まれているかをヒートマップで評価

経済ニュースメディアを運営する株式会社ニューズピックスは、PV数に代わる新しい指標によってコンテンツを評価することで、「各記事がどのように読まれているのかを知りたい」と考えていました。

これまでも内製の解析ツールを用いて記事へのコメントやメディア内での回遊率を評価してはいたものの、記事単体の本文がどのように読まれているかまではわからなかったといいます。そこで読者の行動を見える化するため、ヒートマップ機能を搭載したWebサイト運営プラットフォーム「Ptengine」を導入しました。

熟読エリアが可視化されたことで、「どのようなインフォグラフィックであればじっくり読んでもらえるのか」「記事の中でもっとも伝えたかった情報がきちんと読者に伝わっているか」を分析可能になりました。ヒートマップで得られた結果は、記事構成の改善や、画像の枚数・配置の調整まで、幅広く役立てられています。

参考）株式会社ニューズピックス活用事例｜複数の部署で活用する人が増えてきた｜Ptengine

事例2. ヒートマップに基づくLP改善で「CVR250%増」と「CPA50%減」を実現

デジタルコンテンツの制作やマーケティング支援事業を展開する株式会社キャンバスは、コロナ渦におけるオンライン集客の強化する対策の一環としてヒートマップツールを導入。

以前は、Googleアナリティクスを用いてLP広告の運用改善を行っていましたが、それだけでは、特定ページ内での課題を特定するには至らなかったといいます。そのため、担当者の経験や直感に頼った改善策しか打ち出せず、目に見える成果を得られませんでした。

そこで、「正確なデータに基づく仮説の立案」を目指し、ヒートマップツール「ミエルカ ヒートマップ」を導入しました。

熟読エリアを分析したところ、「料金プランの熟読度が高い」とわかりました。そこで「詳細な料金プランを知りたいユーザーが多い」という仮説を立て、各プランの違いがはっきりとわかるようにレイアウトを変更し、プランごとの解説も充実させました。

また、「熟読度が低く、クリック数の少なかった資料ダウンロードのボタン」を、ページベースカラーの緑と対照的な赤に変更して視認性を高め、さらにページ下部から上部に配置しました。これらの施策に取り組んだ結果、ツール導入後2ヶ月でコンバージョン率250％増を達成し、顧客獲得単価の50％削減にも成功したのです。

参考）【B2B事例】ヒートマップ初導入でCV250%増＆CPA50％削減できた株式会社キャンバス様の運用の秘訣とは？｜ミエルカヒートマップ活用事例

事例3. クリック率の高い箇所を中心にLPOを行い「CVR2.5倍」「CPA48%減」を実現

ライフライン系サービスを販売する企業の、リスティング広告の改善事例です。

広告運用を長期間行っている中で、管理画面を見た数字をもとにした調整だけでは、成果を改善できない状況でした。

そこでLPの改善施策を実施。主に行ったのはヒートマップツールを活用した、ユーザーインサイトの分析と改善です。クリック率が高い箇所をヒートマップ情報を元に特定し、以下のような仮説を立てて施策を実施しました。

これらは施策の一部ですが、このような改善施策を行った結果、CVRを2.6倍に、CPAを48％削減することに成功しました。

参考）LP改善／CVR 2.6倍、CPA 48%低下。 | 株式会社オンジン

ヒートマップツールの選び方・比較のポイント

ヒートマップツールを比較する際のポイントは以下4点です。

あらかじめ分析対象や可視化したい情報を明確にしておきましょう。

1. ヒートマップの種類

ヒートマップにはいくつかの種類があり、それぞれ役割や可視化の対象が以下のように決まっています。

複数のヒートマップを組み合わせて、1つのWebページを多角的に分析することができます。同じ種類のヒートマップでも、細かい仕様がツールによって異なるため、デモや無料版を使って、要件を満たしているか確認しておきましょう。

2. ヒートマップ以外のサイト分析機能

ヒートマップはWebサイトのUIUX改善を目的とした分析手段の一つです。サービスによっては、ヒートマップそのものだけでなく、ユーザー行動の分析をサポートする機能が備わっています。

たとえば、以下のような機能が挙げられますが、Webページ／Webサイト改善における課題や分析対象に合った機能を見極めることが重要です。

• セグメンテーション機能
• ABテスト機能
• 入力フォーム分析機能（EFO）
• 分析・改善提案レポート

セグメンテーション機能では、ユーザーを年齢や性別、興味・関心などの属性でグルーピングし、グループ（セグメント）ごとに行動データを抽出する機能です。「コンバージョンに至ったユーザー」と「至らなかったユーザー」でセグメントを作って、互いの行動を比較したりするといったこともできます。

また、ヒートマップはツールの特性上、入力フォーム上のユーザーの動きを正確に取得することが難しい場合があります。問い合わせや決済などのフォームを分析したい場合は、入力フォーム分析機能（EFO機能）が必要です。あるいは、EFOツールとの併用を視野に入れておきましょう。

3. 計測範囲とデータの保存期間

ヒートマップツールは、計測可能なページ数やデータ量の上限、また計測結果の保存期間が定められていることがあります。

Webサイトの規模や計測したいページによって異なるかと思いますが、以下3つの項目を確認しておきましょう。

• 計測可能なページ数
• 計測可能なページ当たりPV数
• 取得データの保持期間

料金プランで各項目の上限が変動するのが一般的です。また、PV数が少なすぎるとデータが分散し、正確な傾向が得られないことに注意しましょう。最低でも100PVは計測することを推奨します。

4. サポート体制

いくら高性能な解析ツールでも適切な使い方ができなければ、思ったようにデータ分析やページ改善が進みません。

ヒートマップツールには、初期設定や操作レクチャー、運用サポートが付帯しているサービスもありますので、自社のWebサイト解析に関する知識や人材レベルに応じて、サポートの有無や内容も確認しておくとよいでしょう。

中には、計測結果に基づく施策立案やWebサイト改善のアドバイスを行なってくれるコンサルティング付きのサービスやプランもあります。

ヒートマップツールおすすめ6選【比較表・無料あり】

1. ミエルカヒートマップ｜3種のヒートマップ表示でユーザー行動が見えやすい

2. Ptengine｜Webサイト改善サイクルを誰でも直感的に行える

3. mouseflow｜感覚的に使いやすいサイトデザインでCVアップを促進

4. CONTENT ANALYTICS｜コンテンツ単位で課題やゴール貢献度を可視化

5. User Insight｜ヒートマップ機能を搭載したアクセス解析ツール

6. Sitest Lite｜ヒートマップ解析に特化した小規模サイト向け分析ツール

無料のヒートマップツールも条件次第ではおすすめ。有料版との違いは？

ヒートマップツールの中には、期限なしに無料で利用できるものが以下の2パターンあります。

1. 完全無料で利用できるクラウドサービス
2. 有料版とは別で用意されている無料プラン

無料＝低品質というわけではありませんが、多くの場合は以下のような制限をかけることによって有料版との明確な差別化を図っています。

• 計測対象のサイト数やページ数、計測セッション数に上限がある
• データの保存期限が短い
• ヒートマップの種類や分析機能に制限がある
• 電話やチャットのサポートを受けられない

上記のような制限下でも、自社のサイト分析・改善の目的を満たせるのであれば、無料ツールでも何ら問題はありません。

ただし、無料だからと言って計測セッション数を落とすのは禁物です。あまりにもセッション数が少ないと、データが大きくバラつき、統計的に妥当性のない分析結果となってしまいます。

また、Webサイト全体の改善・最適化を行うには、最終的にはヒートマップだけでなく、さまざまな視点から分析を行う必要があることも覚えておきましょう。

完全無料だけど優秀なおすすめヒートマップツールのご紹介

以上の留意事項を踏まえ、ここでは完全無料（永久無料）で使えるヒートマップツールの中から、計測ページ数やセッション数の上限がない、または比較的余裕のあるサービスを厳選してご紹介します。

7. User Heat｜月間30万PVまで、全ヒートマップが無料で使える

有料版にあたるのが、同社が提供するアクセス解析ツール「User Insight」です。ヒートマップに加えて、EFO分析やセグメンテーション、広告効果測定といった機能を備えたWebサイト改善の総合ソリューションとなっています。

8. Microsoft Clarity｜無料だけどPV数・ページ数の制限なし

ヒートマップの種類は、スクロールヒートマップとクリックヒートマップのみですが、計測ページ数やPV数の上限がなく、完全無料で利用することができます。

また、オープンソースでありながら、個人データ保護規則であるGDPRとCCPAにも準拠しており、信頼性の高さはMicrosoftならではといったところでしょう。

数少ないネイティブアプリ対応のヒートマップツール

ここまででご紹介したヒートマップツールは、すべてマルチデバイスに対応していますが、Webブラウザベースでの解析となっており、ネイティブアプリ※には（まだ）対応していません。

※ネイティブアプリとは、App StoreやGoogle Playなどのアプリケーションストア経由で、端末にインストールして使用するアプリです。

ネイティブアプリの改善を検討する際に、ヒートマップ解析を行いたい場合は、次のようなアプリ解析ツールを利用する必要があります。

9. Contestsquare｜PC / モバイル / アプリの全チャネルで顧客体験を可視化

10. appsee｜ヒートマップ付きの次世代アプリ解析ツール

まとめ｜ヒートマップ分析からサイト改善のヒントが得られる

本記事では、ヒートマップ分析を実施できる10サービスについて、それぞれの特徴や価格、利用レビューとともにご紹介しました。

ヒートマップツールは、他の解析ツールや数値のみでは捉えられない、ページ上のユーザー行動を可視化し、Webサイトのパフォーマンスやコンテンツの改善に役立てることができます。

ただし、ヒートマップ分析は、WebサイトのUI/UXやパフォーマンスを改善するするための手段の一つに過ぎず、必ずしも最適解ではないということも理解しておきましょう。

目的や課題に応じて多角的な分析ができるよう、各種ヒートマップのほか、アクセス解析やEFO機能、広告効果測定など総合的なソリューションを提供するサービスが主流となってきています。比較表記載の分析機能と選び方のポイントを参考に、ぜひ最適なツールを見つけてください。

よくある質問とその回答