ヒートマップとは？6種類のヒートマップと活用事例をご紹介 ｜ SiTest (サイテスト) ブログ

ヒートマップ解析とは、ウェブサイトの解析方法の一つです。

ネットで集客をする場合、SNS の利用や広告の配信、SEO 施策など集客方法は様々ですが、最終的なリンク先はウェブサイトであることがほとんどです。
しかし、ウェブサイトのコンテンツの質が悪いと、せっかく集めたアクセスが成約に結びつかず無駄となってしまいます。
ヒートマップを活用することで、アクセスしたあとに、なぜユーザーが離れてしまうのか、その理由を導きだすことができます。

サイトの訪れたユーザーのページ内行動を視覚化

ヒートマップとは、数値データを色に変換することでデータを視覚化したものです。
さまざまな業界、分野で利用されていますが、ウェブサイト解析におけるヒートマップとは、サイトに訪れたユーザーがページ上でどのような行動をとったのかを視覚化します。

ページ上での行動とは、クリックやスクロール、スマートフォンでいうとタップやスワイプなどのことです。
これらを視覚化することで、「ユーザーがどのようなコンテンツに興味を持っているのか」といったページ内コンテンツの評価や、「ユーザーが快適にページの閲覧を行えているか」といった UI / UX の検証を行うことができます。

ヒートマップ解析は、ウェブページの改善に対する仮説立案に有効です。

アクセス解析との違い

ウェブサイトの解析というと、代表的な解析手法がアクセス解析です。
では、ヒートマップ解析とアクセス解析は何が異なるのでしょうか。

ヒートマップ解析とアクセス解析の違いは「解析の対象」です。
アクセス解析では、サイト全体の解析がメインです
サイトへの訪問数や閲覧数、どのページから流入しているのかといった流入元など、サイト全体のアクセス状況について「誰が・どこから・どの経路で・何をしたのか」を計測し解析を行います。
アクセス解析を行うことで、「どのページを改善するべきか」や「どのページに誘導すれば成約が増えるか」といったことが分かります。

一方でヒートマップ解析は、それぞれのページを解析します。
ユーザーがページのどの部分に興味があるのか、どのコンテンツで離脱が発生しているのかを計測することで、「ページのどこを改善するべきか」が分かります。

ヒートマップと一口に言っても、いくつかの種類があります。
それぞれの種類によって、視覚化しているデータが異なり、活用方法も異なりますので、目的や確認したいことに合わせて選ぶ必要があります。

スクロールヒートマップ

（画像引用（一部編集）：（左）ヒートマップ分析の使い方 – アクセス解析ツールのユーザーインサイト(User Insight)、（右）5分で理解・ヒートマップツールとは？（英: Heat map）仕組みと活用方法を解説｜【無料】ヒートマップ解析＆コンバージョン改善ツール （スマホ分析可）- ミエルカヒートマップ）

スクロールヒートマップは、どの部分までスクロールしているのか、その位置を色やファネルで視覚化しています。
視覚化の方法はツールによって異なりますが、一般的に、ユーザー数が多いほど赤く、ユーザー数が少ないほど青く表示されます。
また、SiTest では「ユーザーがどこまでスクロールしたか」や「どこで離脱したか」といったスクロールヒートマップのデータを棒グラフや数値で確認することができ、より客観的な分析ができます。

スクロールヒートマップを見ることで以下の2点が確認できます。

• ■ どのコンテンツで多く離脱が発生しているのか
• ■ ユーザーはページのどの部分まで見ているのか

離脱が多く発生している場所の前後のコンテンツを変更することで離脱数が減り、成約に結びつくユーザーが増える可能性があります。
また、ユーザーの目に触れていないコンテンツをいくら変更しても、改善は見込めません。
スクロールヒートマップは、改善幅の大きい場所を確かめたいときに利用できます。

アテンションヒートマップ

（画像引用（一部編集）：（右）【Ptengine】スクロール到達率でユーザーの動きを把握しよう！）

アテンションヒートマップは、ページの場所ごとの滞在時間（ディスプレイにページが表示されていた時間）を視覚化したものです。
一般的に、滞在時間が長いほど色が赤く、滞在時間が短いほど青く表示されます。

アテンションヒートマップを使用することで以下の2点が確認できます。

• ■ ユーザーがどのコンテンツに注目しているのか
• ■ 読み飛ばされているコンテンツがあるかどうか

滞在時間が長いということは、ユーザーがそのコンテンツに興味・関心を持っていると読み取ることができます。
注目されているコンテンツは、成約に結びつくコンテンツである可能性が高いです。
そのようなコンテンツがページ下部にあり、ユーザーの目に触れていない状態である場合には、ページ上部へ移動することで成約率改善が見込めます。

クリックヒートマップ（タップ解析ヒートマップ）

クリックヒートマップは、ユーザーがページ上のどこでクリックしたのかを視覚化したものです。
タップ解析ヒートマップは、クリックヒートマップのスマートフォン版のようなもので、スマートフォンでアクセスしているときに、ユーザーがどこをタップしているのかを視覚化しています。
一般的に、多くのクリックが発生している場所ほど色が赤く、クリックの発生が少ない場所ほど青く表示されます。

クリックヒートマップを使用することで、以下の2点を確認できます。

• ■ ボタンやリンクをユーザーが正しく見つけられているか
• ■ ボタンやリンクと勘違いされているコンテンツ、デザインはないか

クリックヒートマップは「ユーザーにとって使いやすいページデザイン・レイアウトになっているか」つまり、ユーザビリティの検証に適しています。

ウェブサイトにおいて、問合せのボタンや商品の購入ボタンは非常に重要なパーツです。
ボタンのデザインは、ユーザーからひと目でボタンだと分かるデザインが好ましいです。
しかし、デザインによっては周りのコンテンツに埋もれて気づかれず、クリックもされないという問題が発生します。
そのような状態は多くの機会損失を発生するため、改善が必要ですが、その検証を行えるヒートマップがクリックヒートマップです。

また、ボタンもリンクもない部分にクリックが集中していることもあります。
それはユーザーがそのコンテンツに対して「リンクがあるかも」「クリックしたらなにか起きるかも」と感じているためです。
なにか起きると思ってクリックした結果なにも起きないということは、ユーザーにとってはストレスとなるのでこちらも改善が必要です。

マウスグラフィ

（画像引用（一部編集）：（右）ヒートマップの基礎：Movement Heatmaps（ムーブメントヒートマップ））

マウスグラフィは、マウスポインターの動く道筋を視覚化したものです。
一般的に、マウスポインターが多く通った場所ほど色が赤く、マウスポインターが通る回数が少ないほど青く表示されます。

ある研究によると、人の視線とマウスポインターの位置は約7割一致するとされています。
つまり、マウスグラフィはマウスの動きを視覚化することで、擬似的にユーザーの目線の動きを視覚化しているのです。

マウスグラフィを利用することで、「注目度の高いテキスト・画像がなにか」を確認することができます。
例えば、横に並んでいるバナーリンクの中でどのバナー画像が最も注目されているのかなど、アテンションヒートマップよりも細かい視点でユーザーの興味・関心を分析できます。

補足ですが、マウスの動きを視覚化するヒートマップはツールによって名称が異なります。
例えば、Mouseflow では「ムーブメントヒートマップ」、Clicktale では「マウスムーブ」と呼びますが、SiTest では「マウス」と「サーモグラフィ」をかけ合わせた「マウスグラフィ」という名称を使用しています。

タッチアクションヒートマップ

タッチアクションヒートマップは、スマートフォン・タブレット専用のヒートマップです。
スマートフォンで行われるタップやスワイプ、ピンチイン（縮小の動き）、ピンチアウト（拡大の動き）がどこで発生しているのかを視覚化します。

タッチアクションヒートマップを使用することで、以下の2点を確認できます。

• ■ ユーザーが興味を持っているコンテンツはなにか
• ■ ユーザーにとって小さすぎて読みづらいテキスト、画像がないか

タッチアクションヒートマップで特に利用される指標が縮小の操作である「ピンチイン」と拡大の操作である「ピンチアウト」です。
ユーザーがサイトを閲覧している間、「もっと詳細に見たい」と思った画像やテキスト付近でピンチアウトの動きが発生します。

つまり、ピンチアウトが多く発生しているコンテンツはユーザーの興味・関心があるコンテンツと考えられます。
一方で、拡大をしなければ詳細な情報がわからないような「ユーザビリティの悪さ」を示している可能性もあります。
ピンチアウトが多く発生しているコンテンツでは、文字サイズの拡大など視認性の改善を検討してみて下さい。

前述の通り、ヒートマップはそれぞれ視覚化している指標が異なるので、ヒートマップ解析からどのように改善につなげるか、改善施策にも違いがあります。
この章では、異なるヒートマップ解析を用いた施策での成功事例をご紹介します。

【アテンションヒートマップでコンテンツの順序最適化】株式会社 Sakaseru 様

株式会社 Sakaseru 様は、スマートフォンやパソコンからオンラインでオーダーメイドの花を依頼できるサービス「Sakaseru」を運営されている会社様です。

ウェブサイトからの問合せや会員ユーザーの獲得を増やすためにプロモーションを行っていましたが、当時はトップページの直帰率が課題となっていました。

アテンションヒートマップを確認すると、ユーザーの多くがファーストビュー（ページの一番上、最初にユーザーが目にするコンテンツ）以降で滞在時間が短くなっていました。
離脱のポイントがファーストビュー下の部分だと考え、そのコンテンツの順番を入れ替えた結果、直帰率は改善し注文完了率も改善しました。

アテンションヒートマップを利用することで、適切な場所でページの改善施策を実施することができます。

成功事例の詳細はこちら
株式会社Sakaseru 様｜A/Bテストでサービスサイトの注文完了率が 25％ アップ！

【タッチアクションヒートマップでコンテンツ精査】アヴァンス法務事務所 様

アヴァンス法務事務所様は過払い金請求や個人再生、自己破産と言った借金問題の解決をサポートしています。

広告運用を行っていく上で、ランディングページの改善が課題となっていました。
中でも、画像内の文字サイズなど視認性についての課題があり、タッチアクションヒートマップを確認したところ、ピンチアウトがファーストビューを含むページの各所に見られました。

ヒートマップ解析の結果をもとにファーストビューにおける訴求の視認性を改善したところコンバージョン率が改善前と比較して125%まで改善が見られた事例です。

成功事例の詳細はこちら
アヴァンス法務事務所 様｜ヒートマップでランディングページの課題を発見。A/Bテストでコンバージョン率が125.1％向上。

5種類のヒートマップと活用事例について紹介しました。
さまざまなヒートマップがありますが、ヒートマップのメリットは視覚的にユーザビリティやコンテンツ内容の課題を把握できることです。

しかし、本当にサイト改善するためには、ヒートマップだけでは不十分です。

実は、ヒートマップ解析だけでは改善につながらない

ヒートマップを使用することでサイトの課題点を明らかにすることができます。
しかし、ヒートマップで解析しただけではサイトの改善にはなりません。
課題を解決する具体的な施策を、効果検証する必要があります。

その効果検証の方法として、ABテストという手法があります。
ABテストとは、一部のコンテンツまたは全体を変更したページを2つ用意して、アクセスしたユーザーをそれぞれのページにランダムで配分しコンバージョン率などを基準にパフォーマンスを評価するものです。

一般的にこのABテストを実施する際には、2つの異なるURLを持つページを用意する必要があります。
ただし、この手法ではページを複製する手間やコーディング知識が必要となり実施までが困難です。

そこでABテストのツールが必要になりますが、月額10万円ほどとかなり金額が高くなってしまいます。
加えて、本記事で説明したヒートマップのツールも用意すると月額15万円ほどになり、費用対効果は期待できません。

ヒートマップ×ABテストを軸にしたサイト改善ツール SiTest（サイテスト）

当社が開発、運営を行うサイト改善ツール SiTest（サイテスト）は、本記事で説明したヒートマップ機能に加えて、ABテストも実施することができます。
ツール内のエディターでページの内容を編集できるため、ABテストのページの複製もコーディング知識も不要です。

ヒートマップとABテストを同時に使用できるため、ツールを複数契約する必要がありません。
ご興味のある方は、こちらからツールの概要資料・価格表などの資料請求ができます。

ぜひお気軽にお問合せください。