ヒートマップとは？機能・メリット・見方・活用事例 - サイト改善につなげよう

ヒートマップとは

ヒートマップ（英語：heat map）とは、行列型のデータの強弱を色の濃淡で表し、一目でわかりやすく視覚化できるグラフのことです。数値で見るよりも色で表すことによって視覚的にわかりやすくなり、一目で状況判断ができます。

ヒートマップのルーツ

そもそもヒートマップとは、二次元データの分布を色の濃淡で表し、わかりやすく可視化できるようにしたものを言います。もともとは、遺伝子解析（マイクロアレイ解析）や統計で利用されていました。

近年では、とくにWebページでのユーザー行動を色の違いで可視化するために利用されることが多いものの、それ以外のところでも活用されています。たとえば、気象庁が日本地図を使って気温の高い地域から赤・黄色・緑・青・紫と変化させマッピングしたものも、ヒートマップの1つです。ほかにも、サッカーの行動分析や、株価など幅広い分野で活用されています。

Webサイトでは、ユーザーの動きやクリックされた場所からコンテンツの注目度を分析するために利用されるケースが多いです。読者の行動を直感的に把握できるため、サイトの改善点を見つけるのに有効な手法のひとつです。

ヒートマップの仕組み

ヒートマップは、データをもとに視覚的にわかりやすい配色を設定し、データの動きを色や濃淡のグラデーションによって可視化する仕組みです。

Webマーケティングにおいて活用されるサイトマップでは、ユーザーがクリックした場所やマウスの動き、熟読している場所の滞在時間などの数値を計測し、色でわかりやすく表示します。

たとえば、ヒートマップでクリックされている部分を分析する場合、ユーザーによって多くクリックされた箇所は、一般的に赤色や濃い色、逆にクリックされた回数が少ない箇所は薄い色や青色・緑・灰色などで表示します。ヒートマップを活用することで、ユーザー行動を正しく把握できるようになるため、Webサイトの問題点やユーザーニーズを分析し、改善が可能です。

ヒートマップツールとは

ヒートマップツールは、ヒートマップを簡単な動作で作成できるツールです。プログラミングの知識がなくても使えるので、Webサイト分析に苦手意識がある方にも使いやすいツールといえるでしょう。ヒートマップツールをお探しの方は、有料・無料含めこちらの記事で人気のツールを比較しているのでぜひチェックしてみましょう。

ヒートマップツールのメリット

ヒートマップツールでは、ユーザーの動きを特定できるのがメリットです。サイト上でどのような動きをしているのかを観測することで、課題の仮説を立て、改善へと結び付けられるでしょう。

熟読エリアの特定

代表的なメリットとして挙げられるのが、「熟読エリア」の特定です。

訪問者がよく閲覧する部分を赤、あまり注目されていないコンテンツを青や灰色で色分けしてくれるので、どこがよく読まれているのか一目で判別できます。変更前と変更後を期間で指定して比較すれば、簡易的なABテストにもなるでしょう。

終了エリアの特定

ユーザーがページをどこまで表示したのかを意味する「終了エリア」の特定も可能です。

色が青や灰色に近づけば近づくほど閲覧者数が減っているので、多く減っている部分のコンテンツが不適切か、リンクがしっかり機能している箇所だと判別できます。

とくに縦長のページの場合、どこまで読まれるかはサイトのコンテンツやデザインを考えるうえで重要なポイントです。訪問者に読まれるWebページを作る際に、ぜひ参考にしたいヒートマップデータです。

クリックエリアの特定

どのリンクをクリックしているかから、ユーザーの関心を判断する使い方もできます。

また、間違えて押した画像や文字の場所なども検出可能です。色が濃い部分は、閲覧者が思わずクリックしてしまうインパクトの強いコンテンツであるといった判断ができます。

マウスの動きを特定

Webページを訪れたユーザーが、マウスをどのように操作したかを確認できます。

サイトを訪れた際のマウスの動きは非常に重要で、注目したい文章は思わずマウスを動かしてしまうことはないでしょうか。それだけ、このマウスの動きは閲覧者の行動特性を表しているといえます。

また、複数人の動きも同時に見られるため、ページを訪れるユーザーの閲覧行動を傾向としてとらえるのに適しています。

スマートフォンの操作を特定

ヒートマップでは、スマートフォンでWebサイトを見る際のタップやスワイプ、ピンチイン・アウトなどの動きも可視化できます。近年スマートフォンの普及は進んでおり、スマートフォンからWebサイトを見る人も増加しています。

そのため、スマートフォン用ページがパソコン用のページと比べてどのようにとらえられているを分析可能です。

全エリアクリック情報を特定

ページを訪れたすべての閲覧者のクリック履歴も表示可能です。全エリアクリック情報を取得できれば、閲覧者全体のクリックの動向もチェック可能です。

ヒートマップの見方と改善方法

熟読エリア

熟読エリアは、読んでほしい部分がイメージどおりに注目されているかがポイントです。とくに読んでほしい部分は濃い色か、逆にあまり読まれないと思っていた部分で注目されているところはないか、確認してください。

改善する際は文章が読みにくくないか、ユーザーの求める答えが書かれているかなどをチェックしましょう。図や表を入れることで読みやすくもできます。また注目度の高いコンテンツを、Webページの上部に上げるのも効果的です。

終了エリア

終了エリアで見るべきポイントは、離脱が起こっている場所とコンバージョンの有無です。離脱には、求めているリンクがあったので踏んだといったポジティブな理由もあります。しかし画像が適していない、求めている情報が出てこないなどの理由も考えられます。

改善するには、熟読エリアの場所や内容と比較しページのレイアウトや画像、内容に問題がないか考えてみましょう。たとえば熟読エリアのすぐ上が大きな離脱ポイントだった場合は、求めている情報が出てこないため離脱したと考えられます。

クリックエリア

クリックエリアで注目すべきは、間違ってクリックされている箇所です。読者はクリックしても何も表示されない場合不快感を覚えるため、誤ったクリックから離脱の原因を明らかできる可能性があります。

誤ってクリックする原因としては、リンク先に行きたい、もしくは画像を拡大したいなどが考えられます。改善策として、クリックされている箇所にリンクを設置するか、画像を拡大できるようにしましょう。

マウスの動き

マウスの動きで注意すべきは、マウスがよく動く場所やスワイプが上下に細かく動く場所です。これは熟読エリアの中でもとくに注目度が高いため、ニーズの分析に役立ちます。

ただし、内容が難しく理解に時間がかかっている場合でも同様の動きが起こるため、内容を掘り下げることが重要です。またピンチイン・アウトが頻繁に起こっている場所は、文字や画像が見えにくくないか確認しましょう。

ヒートマップの注意点

一見、ヒートマップがあればWebページの改善のほとんどができるように感じてしまいますが、もちろんできないこともあります。ユーザーテストの内容も交えながら、ヒートマップでの注意点についても解説します。

Webページ外のコンテンツの良し悪しは判断不可

ヒートマップは、あくまで「ページ内に存在するコンテンツが見られているかどうか」をチェックできる手法です。「ページ内に存在しないコンテンツの良し悪し」についての情報は得られません。

よく比較されるユーザーテストでは、実際にユーザーに試してもらってフィードバックを受けることで、現在ウェブサイトにないものの閲覧者がアクションを起こすのに必要な情報を得られます。「このような情報が欲しい」といった要望をユーザーから提供を受けられます。

Webページ自体の良し悪しの判断も不可

ヒートマップでは「この文章や画像が見られている」まではわかるものの、「なぜ、このコンテンツが見られるか」についてはわかりません。

「このコンテンツのここがよい」もしくは「このコンテンツはここが悪いから見ない」などは、直接ユーザーの声を聞くしかありません。必要なコンテンツと既存コンテンツについては、ユーザーテストと組み合わせて判断する必要があるでしょう。

ヒートマップの種類

ヒートマップツールは、1つのツールですべてのエリアや動きを確認できるわけではありません。それぞれの種類ごとに役割が異なるため、ツールを選択する場合は、どのエリアや動きに対応しているか確認してから選びましょう。

• アテンションヒートマップ…ページの滞在時間を表示（熟読エリア）
• スクロールヒートマップ…どこまでスクロールし離脱したかの割合を表示（終了エリア）
• クリックヒートマップ…ページのどの部分をクリックしたかを表示（クリックエリア）
• マウスフローヒートマップ…パソコンのページでマウスが描いた軌道を表示
• タッチアクションヒートマップ…スマートフォンのタッチ操作の動きを表示

またWebサイトの分析には多角的な視点が必要であるため、複数の種類のヒートマップを組み合わせて分析を行うのがおすすめです。

ヒートマップの活用事例

ヒートマップのデータからは、ページコンテンツ改善のヒントを得られます。また、改善策の効果があったかどうかも検証できます。サイトにおける訪問者の閲覧のムラを発見し、改善し続ける。このサイクルを回すことで、ウェブサイトの質は確実に向上します。

他のWebページ検証手法と組み合わせ、詳細な検証が可能に

ヒートマップ以外の手法やツールを併用することで、Webページに対してより有効なインサイトを得られます。

前述したように、ヒートマップだけでは良し悪しを正確に判断できません。そのため、ユーザーテストやGoogle アナリティクス、SEOツールなども含めて多角的に分析することで、正確な分析結果を導き出しましょう。

たとえばGoogle アナリティクスは、ページ単位でユーザーのアクセス数や滞在時間、どのような経路でページにたどり着いたか、またどこへ移動したかなどがわかります。つまり、サイト内での行動をGoogleアナリティクス、ページ内での行動をヒートマップで分析することで、動きの全体像を把握でき動きの意図も理解しやすくなると考えられます。

ABテストの整合性を取る

よくある活用事例の一つとして、ABテストとの組み合わせで活用するケースがあります。

たとえば、上のキャッチコピーを変えると、同時に下にあるコンテンツがよく見られるようになったとします。結果、サイトが改善されるだけでなく、キャッチコピーのどの要素に効果があったか、といった知見を深められるでしょう。

また、成功した知見だけでなく、失敗した知見もきちんと深めておくと以降のWebページ改善が効率的になります。ABテストとヒートマップツールを組み合わせは、Webページの改善に大きな力を発揮することでしょう。

外部の人とページの内容を検討する

ヒートマップツールの結果は、社内だけでなく、Webページを制作する協力会社とも共有するのがよいでしょう。ヒートマップの結果を見て、協力会社の方からもよいアイデアを受けられるかもしれません。

また協力会社も、Webサイトのどこを改善するとよいか見当がつきやすいため、制作作業を進めやすくなります。

ヒートマップをExcelで作成する場合

ヒートマップは、Excelを使っても作れます。

まずは、いつもと同じように縦軸・横軸に項目、それぞれのセルに数字を入力して表を作成しましょう。

次に数字の部分をすべて範囲選択し、上のタブから「ファイル」→「条件付き書式」→「カラースケール」→「好きな色の組み合わせ」を選択します。色は好みのもので問題ありません。

すると、自動で数値の大きさに合わせてセルに色が着色され、ヒートマップが完成します。ただし、これらは簡易的なものであるため、より詳細な分析が必要なWebサイトの分析・改善にはヒートマップツールがおすすめです。

おすすめの色分け方法

Excelをはじめとするツールで、ヒートマップの色を設定・カスタマイズする場合は、適切な勾配（色の変化）をつけましょう。気温の例を見てもわかるように最高値は赤に設定し、中間値は青、最低値を灰色に設定するのが、一目で差がわかりやすいヒートマップと言われています。

Webページを改善するために、ヒートマップを有効活用しよう

ヒートマップの特徴は、結果が直感的にわかりやすく表示されることです。数値だけでは分析に時間がかかったり、改善が手探りになったりする可能性があります。

そこにヒートマップをうまく組み合わせることで、新たなヒントを得てより有効な改善策を打ち出せます。

しかし、ヒートマップだけではわからないことがあるのも事実です。「Webページで欲しいコンテンツや、すでにあるコンテンツの良し悪し」などの体験は、ユーザーに直接聞かないとわかりません。

デジタルで得られるヒートマップやアクセス解析の情報と、アナログなユーザーの声を活かすことがWebページを改善する最適なアプローチといえるでしょう。

BOXILとは

BOXIL（ボクシル）は企業のDXを支援する法人向けプラットフォームです。SaaS比較サイト「BOXIL SaaS」、ビジネスメディア「BOXIL Magazine」、YouTubeチャンネル「BOXIL CHANNEL」を通じて、ビジネスに役立つ情報を発信しています。

BOXIL会員（無料）になると次の特典が受け取れます。

• BOXIL Magazineの会員限定記事が読み放題！
• 「SaaS業界レポート」や「選び方ガイド」がダウンロードできる！
• 約800種類のビジネステンプレートが自由に使える！

BOXIL SaaSでは、SaaSやクラウドサービスの口コミを募集しています。あなたの体験が、サービス品質向上や、これから導入検討する企業の参考情報として役立ちます。

BOXIL SaaSへ掲載しませんか？

• リード獲得に強い法人向けSaaS比較・検索サイトNo.1^※
• リードの従量課金で、安定的に新規顧客との接点を提供
• 累計1,200社以上の掲載実績があり、初めての比較サイト掲載でも安心

^{※ 日本マーケティングリサーチ機構調べ、調査概要:2021年5月期 ブランドのWEB比較印象調査}