【ヒートマップの基礎知識】種類・メリット・可視化できる内容・注意点などわかりやすく紹介

Webページに訪れたユーザーの動向を可視化できる「ヒートマップ。WebサイトのUI・UXを改善するために欠かせないマーケティングツールのひとつです。

Webページの改善ポイントを可視化したいマーケティング担当者や広報担当者にとっては、気になるツールのひとつではないでしょうか。

本記事では、導入前に知っておきたいヒートマップの基礎知識を解説。また、集計できる内容や導入時の注意点などもあわせて紹介しています。ヒートマップの導入を検討されている担当者の方は、ぜひ本記事の内容を参考にしてみてください。

ヒートマップとは?

ヒートマップは、Webサイトに訪れたユーザーの動きをサーモグラフィーのように色や濃淡で表す分析手法のこと。もっとも多く利用されている部分を赤、利用頻度の低い部分を青で表示し、ユーザーの細かな動きを可視化することができます。

ヒートマップイメージ

サイト全体ではなくページごとにデータの収集ができるため、特定のページのみを改善する際にも役立てられます。すでに多く読まれているページをヒートマップツールで解析し収集したデータを使えば、ユーザーの動きが悪いページの改善にも活かせます。

ただし、PC・スマホ・タブレットなど、デバイスによりユーザーの行動は異なります。Webサイトを利用しているユーザーのデバイス比率を調査した上で、どのデバイスについて調査するのか検討しましょう。

ヒートマップの種類

ヒートマップには、実はさまざまな種類があります。それぞれ分析できる内容が異なるため、目的ごとに使い分けるましょう。次に、5つのヒートマップについて解説します。

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

ひとつ目は、アテンションヒートマップです。ユーザーがページ上のどの部分を熟読しているのかを色によって視覚化しているヒートマップです。滞在時間が長い、よく読まれてい部分は色が赤く、滞在時間が短い、読み飛ばされているところは青く表示されます。

長いコンテンツの場合、どの部分が読まれているのか気になるポイントです。スクロールの途中でどんな箇所が熟読されているのかを判断することもできます。

<アテンションヒートマップで確認できる内容>
・ユーザーが注目しているコンテンツ
・何を読み、読み飛ばされているか

<アテンションヒートマップで確認したいポイント>
ただ、赤く表示される箇所(熟読されている箇所)がすべてポジティブな理由ではありません。読みにくい、意味が読み取れない、画像が粗いなどの理由でユーザーが画面を注視している可能性もあります。

2.クリックヒートマップ

2つ目はクリックヒートマップです。名前の通り、ユーザーがクリックしている箇所を色で示すヒートマップです。多くのユーザーにクリックされた部分は色が赤く表示され、クリック率が少ないと緑色や青色で表示されます。

クリックヒートマップでわかるのは、リンクがクリックしやすい位置に設置されているか、わかりやすい位置にあるかなどです。

<クリックヒートマップで確認できる内容>
・クリックが多い箇所
・リンクやボタンが正しく見つけられているか
・リンクがない場所をクリックされていないか

<クリックヒートマップで確認したいポイント>
リンクがない場所をクリックされている場合は、ボタンやバナーの位置や、コンテンツの見せ方を変えることも検討するとよいでしょう。

3.スクロールヒートマップ

3つ目は、スクロールヒートマップページを訪問したユーザーがスクロールするごとに何%滞在したのかを色やファネルで可視化できます。一般的に訪問ユーザー数が多いと赤く、少なくなると緑や青で表示されます。トップページから下にスクロールすればするほど、ユーザーが減少していく傾向があります。ユーザーがどこまでスクロールし、どこで離脱したかが分析ができるツールです。

<スクロールヒートマップで確認できる内容>
・ページのどの部分で離脱しているか
・ページは下部まで見られているか

<スクロールヒートマップで確認したいポイント>
ユーザーは、情報が理解しにくい、興味がないコンテンツの場合に離脱するだけでなく、欲しい情報を得た場合でも離脱する傾向にあります。

離脱している理由を検討し、コンテンツの順番を改善したり、離脱しやすい箇所に画像を差し込んだり、テキスト内に散乱していた情報を画像でまとめたりと、さまざまな改善が考えられます。

4.マウスフローヒートマップ

4つ目は、マウスフローヒートマップです。デスクトップ用ページを見にきたユーザーが、どのようにマウスを動かしているのかを可視化できます。マウスの動きと視線の動きには関連性があるといわれています。つまり、マウスがよく動かされている箇所は、視線が向きやすい箇所でもあるのです。どこが一番読まれているのか、逆に視線が集まらない場所はどこなのかを可視化し、サイトのレイアウトを組みましょう。

<マウスフローヒートマップで確認できる内容>
・ユーザーの利用動向
・注目度の高い画像やテキスト

<マウスフローヒートマップの注意点>
スマホ用ページは分析できません。また、マウスの動きを視覚化するタイプのヒートマップはさまざまなツールがあり名称も異なるため、マウスの動きがわかるツールか確認するようにしましょう。

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

5つ目のタッチアクションヒートマップは、スマホやタブレット専用のヒートマップタップやスワイプ、ピンチイン(縮小)、ピンチアウト(拡大)の動作がページ上のどこに集中しているのかを可視化できます。

これらの動作を分析することで、ユーザーが興味・関心を持っているコンテンツや、読みにくいテキストや見にくい画像などもわかります。

<タッチアクションヒートマップで確認できる内容>
・ユーザーの興味を集めているコンテンツ
・読みにくいテキストや画像のチェック

<タッチアクションヒートマップで確認したいポイント>
特に指標となるのは、ピンチイン・ピンチアウトの操作です。操作が行われている理由としては、興味があるだけではなく、見にくいから拡大しているなどがあげられます。

ヒートマップがユーザビリティの悪さを示している場合は、視認性の改善を検討してみてください。

ヒートマップで可視化できる4つのこと

ヒートマップには様々な種類があるため、獲得したい情報にあわせて複数のヒートマップを使い分けることが必要です。可視化したい内容や、改善したいポイントにあわせて、必要なヒートマップを導入するようにしましょう。

1.クリックエリアの特定

クリックエリアの特定は、クリックヒートマップを利用します。

ページ内に配置されているリンクに対して、ユーザーがどれくらい関心を持っているかがわかります。リンク以外に、画像やテキストなどに対するクリックの動向もわかるため、ページ内でユーザーが有益だと感じる情報の指標にもなるでしょう。

2.熟読エリアの特定

熟読エリアを特定し、分析するにはアテンションヒートマップを利用します。

ページを訪問したユーザーの滞在時間から、読まれやすいエリアを特定することができます。コンテンツ内で注目を集めている部分は、Analyticsなどのデータでは可視化しにくいデータのため、ヒートマップが役に立つでしょう。

ページ内の改善施策を行う前後にデータを取れば、簡易的なABテストとしても使えて便利です。

3.終了エリアの特定

ユーザーがコンテンツのどこまでを読んだのか、どこで離脱したのかを知りたい場合は、スクロールヒートマップを利用しましょう。

特に、縦長のページを最後まで読んでほしい際は、離脱箇所の分析が役に立つでしょう。ECサイトであれば、決済画面で離脱しているユーザーが多い場合、改善点が見つかるかもしれません。

4.マウスの動き

デスクトップ用ページのみですが、ページを訪問したユーザーが行ったマウスの動きは、マウスフローヒートマップで可視化きます。ツール上では、マウスの軌道を番号を付けて表示され、ページごとのユーザーの動向の傾向が読み取ることができます。

コンバージョンにつながったユーザーと、離脱してしまったユーザーでは、どのような違いがあるのか、ユーザーごとの特徴を掴むことで、コンバージョンを改善するために役立ちます。

ヒートマップを導入する3つのメリット・活用方法

ヒートマップによるWebサイトの分析は、サイトの改善点を見つけるために大きな力になってくれるツールです。次に、ヒートマップを導入することによる3つのメリットをご紹介します。

サイト改善イメージ
Close up of female hands working on keyboard and media interface o screen

メリット1.ユーザーのサイト上の細かい動きを把握できる

ヒートマップを導入する1つ目のメリットは、ユーザーの細かい動きを把握できることです。Google analyticsやGoogle Search Colsoleなどのツールでは計測できないユーザーの動向を、ヒートマップでは細かく把握できます。

例えば、スクロールヒートマップを使えば、どこまでページをスクロールしたのかがわかります。ほかにも、マウスの動きがわかるヒートマップでは、デスクトップ専用ページを検証可能。

Analyticsなどのツールでは、クリックされた数は把握できるものの、クリックヒートマップで分析すれば、リンク以外の場所のクリック数を集計できます。クリックされやすいテキストや画像なども把握でき、それらの情報からCVRの改善に有効な改善策を考えることができるでしょう。

メリット2.ユーザビリティの向上からSEO改善につながる

ヒートマップを導入する2つ目のメリットは、ユーザービリティの向上、それによりSEO改善につながることです。

ヒートマップを使いユーザーの導線を把握し、適切な改善を行うことは、ユーザビリティが高いページを作ることにつながります。例えば、離脱率が高いページをスクロールヒートマップで分析し、原因を追求し改善へ導くこともできます。ユーザーが使いにくい、見にくいと感じる点をさまざまなヒートマップで洗い出すことにより、適した改善案を実行できます。

ユーザビリティが高いページを作ることは、SEOでも重視されている項目のひとつ。ヒートマップを導入して、適切な改善をすることで、結果的にSEO改善にもつながるといえるでしょう。

メリット3.CVR向上施策を検討できる

ヒートマップを導入する3つ目のメリットは、CVR向上施策を検討できることです。ヒートマップによる分析では、つい改善するべき点に注目してしまいますが、よい点を活かした施策を考えるのもひとつの手です。

クリックヒートマップで分析を行えば、クリックされやすいリンクのデザインの傾向なども把握しやすくなります。ユーザーの動きがよいなど、好感触なページの傾向を他のページにも展開し、CVR向上の施策も検討して見てください。

ヒートマップを導入する前に知っておきたい4つの注意点

ヒートマップは導入すれば自然と改善がのぞめるというものではありません。あくまでも、ユーザビリティ向上に適した施策を見つけやすくするサポートツールです。

効果的に利用するには、ヒートマップで可能なことと不可能なことを正しく知っておく必要があります。最後に、導入する前に知っておきたい4つの注意点を解説します。

注意点1.ヒートマップの導入のみでユーザーの行動心理は把握できない

1つ目の注意点は、ヒートマップの導入のみでは、ユーザーの行動心理までは把握できないことです。ヒートマップは、あくまでもユーザーの行動に焦点を当てて計測するツール。そのため、ユーザーの行動心理は推測でしか判断できません。

5種類のヒートマップを使えば、ページのどの箇所に時間をかけて読んでいるのか、クリックやタップ、スクロールなどを使ってどんな動きをしたのかはわかります。

ただ、それらの行動が「なぜ」行われたのかをデータとして収集することはできません。集計したデータをもとにさまざまな推測を立て、Webサイトの改善につなげることを意識しましょう。

注意点2.ヒートマップツール単体でサイト全体の傾向を把握するのは難しい

2つ目の注意点は、ヒートマップツール単体で、サイト全体の傾向を把握するのは困難ということです。

ヒートマップは基本的に、ページごとのユーザーの動向しか解析ができません。そのため、ページをまたぐコンテンツの分析や、サイト全体のアクセス傾向を知りたい場合は、Google Analyticsなどの別の分析ツールと組み合わせる必要があります。

注意点3.必要な機能を吟味する

3つ目の注意点は、機能を吟味することです。

ヒートマップツールは導入する際、サイト規模に対して機能を持て余したり、不要な機能が多かったりと、コストに対するメリットを感じられない場合も考えられます。

「とりあえず収集」したデータは、使い道がないケースもあります。「何を目的として導入するのか」「そのためにはどのような機能が必要なのか」を検討し、導入に必要な機能があるものを選びましょう。

また、ヒートマップを導入して改善案を実行した際のインパクトを算出し、導入する意義があるのかを検討できるとよいでしょう。

注意点4.解析できるデータの量や保存期間には制限がある

4つ目の注意点は、解析できるデータの量や保存期間に制限があることです。

ヒートマップツールは、さまざまな製品があり、解析可能なデータ量や保存期間に制限が設けられているものもあります。導入前にどの程度の解析が可能なのか、保存可能な期間は事前に確認しておくと安心です。

ヒートマップはWebサイトを成長させ、よりよいユーザー体験を生み出す手助けになるツール

ヒートマップツールは、Webサイトを改善する際に役立つ手法のひとつです。「熟読されている部分を知りたい」「離脱されている場所が知りたい」といった場合は、ヒートマップが役立つでしょう。

Analyticsなどの解析ツールではわかりにくいユーザーの動きを可視化できるヒートマップツールは、様々な種類やプランがあります。自社のWebページの分析に必要な機能がついたヒートマップを導入し、Webページ改善のヒントを見つけるきっかけにしてみてはいかがでしょうか。

この記事のライター

佐藤杏樹

フリーのライター・編集者。PR TIMESに新卒入社しメディア事業部にてコンテンツ編集者・SNS運用・イベントなど担当。現在も執筆業に携わりながら広報・PRの仕事もしています。広報実務を通して得た知見や実践しやすい広報ノウハウ、最初に知っておきたい広報の基礎など、みなさまに分かりやすくお伝えします。

この記事に関連する記事

今注目の記事