Tweet

こんにちは。nex8事業部の脇本です。
皆さんは、熱量に応じて赤や青に色が変化するサーモグラフィーをご存知でしょうか。
TV番組の実験などでも使われていたりしているので、よく見かけるのではないかと思います。

実はこのサーモグラフィーのように、Webサイト上のユーザーの行動データを色で可視化することが出来るヒートマップというものがあります。
今回はヒートマップについて概要や出来ることをお話していこうと思います。

※なお今回の記事では、ユーザーローカル社の提供する無料版ヒートマップ「User Heat（ユーザーヒート）」を使っています。

ヒートマップについて

ヒートマップとは

百聞は一見にしかず、なのでまずはどういったものか見てみましょう。

ヒートマップは、Webサイト内でユーザーがよく見ていた箇所やクリックが多くされる箇所を赤く、そうでないところは青く表示されたグラフのことを指します。

サイト画面に重ねてユーザーの動向がグラデーションで表現されるので、一目でユーザーがあなたのサイトページの中の何に興味を持ち、どこまでの内容を見ていたか、どこをクリックしたかなどが分かります。
「ユーザーの興味関心の強弱を可視化できるサービス」という事も言えますね。

仕組み

ではどうやって色分けをしているのでしょうか。

ヒートマップを構成するためのユーザーデータの取得方法として、人の目の動きから推測をする「アイトラッキング」という方法と、サイト内にタグを入れることでマウスカーソルの動きやクリックを読み取り、そこから推測する方法の2つがあります。
今回の記事ではマウスカーソルの動きやクリックから推測する方法で説明しています。

この方法の場合、あくまでもマウスやクリックの動きからの推測であるため、実際のユーザーの動きと異なる可能性があるということは注意しなければなりません。

例えば私はWebサイトで文章を読んでいる時、マウスのカーソルは右端などに置いたままで、文章をカーソルで追って読むということはあまりしません。
このようにマウスカーソルの位置情報では正確なユーザーの動向を表現することは難しいのですが、ある程度のユーザー数で傾向がつかめれば精度の担保はされることが多いようです。

ヒートマップで出来ること

ヒートマップツールを提供しているサービスは様々ありますが、大きく次の4つを可視化することにより、あなたのサイト内での課題発見につなげることが出来ます。

では少し具体的に考えてみましょう。
例えばGoogleアナリティクスのようなアクセス解析ツールを使うと、あなたのサイトのページAについて離脱が多いということが分かったとします。

ですが、基本的にアクセス解析はサイト内での遷移数や離脱数など、大局的に見ることに適しているので、離脱が多かった場合、ページAのどこで離脱が起きているのか、ページ内の課題について見つけることは難しいです。

そこで役に立つのがヒートマップです。
ページAでの離脱が多かった理由が、「クリック箇所」を見ると実は次のページへの遷移ボタンが全く押されていない、「離脱エリア」を見るとボタンに到達するまで読まれていない、などといった事を見つけられるんです。

課題発見だけでなく、「熟読エリア」を見ると運営者側では特に意識していなかったコンテンツでも、実はユーザーが本当に良く見ていたものが見つけられるなんていうこともあるのです。

つまりヒートマップの結果を分析することで、アクセス解析では出来なかった「ページ単位での構成やデザインの修正点・改善点を見つけること」が出来る、ということですね。

ただしここで気を付けなければいけないことがあります。
ユーザーのページ内での動きは分かるのですが、それがどうして起きたのか、ユーザーの心理的な部分はここからは分かりません。
もし見たい情報がないために遷移ボタンの前で離脱してしまっていたとしても、何が見たい情報だったのかは想像するしかないのです。
実は分かりにくいコンテンツだったために熟読されていた可能性だって考えられます。

ユーザー心理を踏まえ、それがなぜ起きているか、どう直せばよいかという事については、実際にサイトを使ってみて考えたり、第三者に使ってもらって感想を聞いたり（ユーザーテスト）するとよいでしょう。

活用方法

ここからはヒートマップの読み解き方についてnex8ブログのTOPページを一例としてお話していきますね。

• まずは左側の離脱エリアを見てみましょう。
  記事一覧の上から3～4つ目までは多くのユーザーが見てくれているようですね。
  ですが、それ以降の記事を表示するユーザーは徐々に減っていく傾向にあり、5つ目の記事まで表示するユーザーはほとんどいないという結果になっています。

  続いて熟読エリアを見てみると、ページ上部のおすすめ記事や最新記事がしっかりと読まれているということが分かりますね。（ちなみにこれは先ほどの「離脱エリア」からも考えることが出来ますね）

  3つ目以降でも離脱は起きてはいますが、熟読率にそれほど変化は見られません。
  また人の視線の動きの特徴でもあるF字型に沿って記事に目を通していることも分かります。

• 

この2つから、TOPページの記事は5つまでにしたほうがよい、またはよく離脱が起きる箇所までにサイトの長さを縮める構成に変更することで読み手にしっかりとコンテンツを見てもらったり、リンクをつけて遷移を促してみたりするのでも良いかもしれません。

閲覧者がページから離脱する前に、押さえておきたいポイントや伝えたい内容をしっかり掲載することが大切ですね。

• 最後にクリック箇所についても見てみましょう。
  おすすめ記事や最新記事については多くクリックされていることが分かります。
  また記事詳細を見る時はどうやらアイキャッチ画像をクリックすることが多いという事も分かりますね。

  ただ、記事一覧の下にあるカテゴリやタグのボタンについては、あまりクリックされていないようです。

  このボタンに気付いていない場合もあるので、もう少し目立たせてみるのでもよいですね。
  先ほどのTOPページを縮めることに関連して、記事一覧の掲載数を5つくらいにして、カテゴリページに遷移させる少し大きめのボタンをつけてみるのでもよいかもしれません。

  ここではTOPページのみでしたが、さらに奥の階層でも解析を行うことで改善点がさらに見つかってくると思います。

  まずはアクセス解析をして、サイトを俯瞰して見た時に問題のある箇所を見つけましょう。
  そこからヒートマップを利用して、ページをさらに解析することでより深い考察をしていくことが出来ます。

  ツールを利用し適切にサイト環境に整えていくことで、ユーザーはあなたのサイトを快適に使えるようになります。
  運営者側はより意味のあるサイト作りができている、ということになりますね。

• 

まとめ

いかがでしたでしょうか？
ヒートマップは目に見えづらい事実を可視化することで気づけなかった改善点が見えてくる、とても面白いサービスだと考えます。
サイト運営事業を担当されている皆さんのなかで、ヒートマップをまだ利用した事がなく、サイト改善に頭を悩ませているタイミングであれば、是非活用してみるのもいかがでしょうか？

なにか一つでも考察できるものが見えましたら幸いです。
最後までご覧いただきありがとうございました。
この記事を気に入っていただけましたら、シェアしていただけますと嬉しいです。

Tweet

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

脇本奈津

nend事業部での営業サポートを経て、2015年よりnex8事業部で営業・運用を担当。 お客様からのお喜びの言葉を頂けるよう日々精進しています。 四国出身なので本当は西訛りなのですが、標準語が上手くなり過ぎて東京出身と思われ始めたことに自画自賛する近頃です。

最新記事 by 脇本奈津 (全て見る)

• ～見たらわかるすごいやつ～ ユーザー行動を可視化できるヒートマップとは - 2017年2月9日
• バナー改善に必要なA/Bテストの基礎知識～検証方法と具体的な改善ポイント - 2016年12月27日
• ～いまさら聞けない～　アドネットワークを調査した件 - 2016年11月28日