WD Online

集中企画一覧 Web Designing 2015年11月号

ユーザー行動を見える化する「ヒートマップツール」導入ガイド(1/4) Chapter01:「ヒートマップツール」で何ができるのかを知る

「ヒートマップツール」とは、Webサイト内のページにおける「ユーザーの動き」をサーモグラフィのように可視化する解析ツールのことだ。本企画では、「できること」と「できないこと」、他のツールとの違いと連携など、その特長と活用法を紹介していこう。

まずは冒頭の2ページで、ヒートマップツールの特性を学びながら、「できること」と「できないこと」を把握しよう。

 

アクセス解析ツールと何が違う?

Webマーケティング市場では、元来はキャンペーンなどの「新規サイトの制作」や「広告」がビジネスの中心だった。だが、Webサイト自体はすでに多くの企業が持っており、そのサイトのデータを用いた改善こそがより求められるようになっている。改善のためのもっとも一般的なツールはGoogleアナリティクスなどのアクセス解析ツールだが、ヒートマップツールにも注目が集まっている。

理由は大きく二つある。一つは、アクセス解析では把握しづらい「ページ単位」の「ユーザーの動き」がわかることだ。アクセス解析のデータだけでは該当ページの離脱率はわかっても、該当ページ内でユーザーがどう動いたかは把握できない。もう一つは、アクセス解析では得られない直感的なデータが手に入ることだ。たとえば、アクセス解析ではページ下部にマウスの動きが集中しているといった傾向を捕捉できないが、ヒートマップだと可視化してくれる。

 

ヒートマップで得られる3つのデータ

ヒートマップツールは、個々のユーザーの「クリック」や「マウスの動き」をリアルタイムで取得し、得られた複数人の大量なデータをページ上にマッピングすることで、サーモグラフィのように可視化する。これらのデータから大きく三つのことがわかる。 

一つ目は、「ページのどこがクリックされているか」だ(01)。

 

0010a25114b557700c3c5d0490e387c1.jpg
01 「クリックヒートマップツール」の表示画面(提供元:Ptengine)。クリック箇所が色で変化。リンクを配置していない箇所をクリックしたかも計測できる。ほかに、マウスオーバーの回数や時間、クリック率も表示できる

 

Webユーザビリティの世界では、「一目でクリックできるところかわかるか」という点は非常に重要視されるが、「押せるところがわからない」「押せると思ったら押せない」というサイトも多い。もし「押せない要素なのにクリックしている」ことがわかれば、その箇所をリンク設定できるように変更するなどで使い勝手を改善することができる。

二つ目は、「ページのどこが見られているか」だ(02)。

 

1aa60b02385f4389e576daa1254aa88f.jpg
02 「アテンションヒートマップツール」の表示画面(提供元:Ptengine)。ユーザーがページ内のどの箇所に関心(視線)を持っているかを濃淡で表示する。よく見られている場所ほど赤くなる(囲み部分)

 

「見てほしい要素がちゃんと見られている」ことの確認や、「あまり重要と思っていなかった情報が実は見られている」といった気づきの発見が可能で、要素やレイアウト変更などに活用できる。なお、実際のヒートマップツールのデータは、アイトラッキング(視線を追う機器)ではなくてマウスの動きとなるが、サイト閲覧時の「目線の動き」と「マウスの動き」は85%も一致しているという研究データの裏づけ※がある。

三つ目は、「ページがどこまでスクロールされているか」だ。リスティング広告で用いられる「縦長のランディングページ」などでは、ユーザーのスクロールの度合い(≒どれほど興味を持ったか)が非常に重要だ。これがわかれば「この広告から来たユーザーはスクロールしていない(興味が薄い)」「画面上部のメッセージの興味づけが足りていない」といった仮説を立てられる。

 

ヒートマップでは得られないデータ

一方で、ヒートマップツールだけではわからないこともある(03)。

 

451f85de1986ff6fe34e77057b17dc86.jpg
03 フィリップ・コトラーによると、マーケティングのデータは大きく「行動データ(behavior)」と、その裏にある「心理データ(attitude)」があるとされる

 

その一つが、「なぜ注目しているか(クリックしているか)」という要因だ。予想外の要素が注目されていたとしても、それが「その要素に興味を持ったから」なのか「単に内容がわからなかったから」なのかや「ポジティブなのか、ネガティブな印象なのか」といった心理面の状態を得るのは難しい。

二つ目は、「そもそも存在しない要素の要否」もわからない。Webサイトの改善コンサルティングを行う際に、たとえば「該当ページにユーザーが求めているコンテンツがない」というケースはあるが、ヒートマップツールでその判断はできない。

 

7ce13917fd6e9d72de249bcae1e370d4.jpg
04 Webサイトやアプリの分析を、アクセス解析、ユーザーテスト、ヒートマップの3手法を用いた改善までのフロー。各手法を連携して使うことで、分析の精度を高めることができる

※「マウスの動き≒目線の動き」として考える場合が多い  https://www.ctale.jp/product/Mouse_Move.php

 

つまり、ヒートマップツール単体で改善策を考えると、要素の位置やリンク設定といった個別の機能に留まりがちだ。ヒートマップツールをはじめアクセス解析ツールが導き出すのは、「現状に対するユーザーの行動データ」にすぎない。サイト内の「ユーザーの心理」や「新しいアイデアや要素の良し悪し」を検討したい場合は、ユーザーテストやアンケート、A/Bテストといった他の手法との併用が望ましい(04)。

 

cdf0ad806238af2d827236fb7e92db1e.jpg
Text:池田朋弘
(株)ポップインサイト 代表取締役社長。(株)ビービット在籍時、ユーザーテスト/ユーザー行動観察を軸にしたコンサルティングなどに従事。2013年1月にユーザーテストなどを扱うポップインサイトを創業、2年半で調査実績は2,000件以上。 http://popinsight.jp/

掲載号

Web Designing 2015年11月号

Web Designing 2015年11月号

2015年10月17日発売 本誌:1,559円(税込) / PDF版:1,222円(税込)

実践的コンテンツマーケティング講座/ヒートマップツール導入ガイド

サンプルデータはこちらから

■ 特集:Web担当者のための実践的コンテンツマーケティング講座
 手法やツールではない、概念であり戦略だ! その秘訣、教えます。

■ 集中企画:ユーザー行動を可視化する「ヒートマップツール」導入ガイド
 ユーザー行動を探りながら、より来たくなるWebサイトを作ろう

■ WD SELECTION
 WDが選ぶ注目のデジタルコンテンツ
  写プライズ/それでも、わたし。 - niko and …/MY MINTIA MAKER/BAO BAO MUSIC/リアル脱出ゲーム「呪われたオーディション会場からの脱出」/ロッテ Fit’s presents みんなでつくろう! ウォーリーのせかい!/A DAY WITH THE ANGELS VOGUE GIRL/Hello, New World./SLICE OF HEARTLAND ハートランドビール/光文社創立70周年記念コンテンツ『360° PARTY』/TYO-ID TYO INTERACTIVE DESIGN

 ナビゲーターが選ぶ注目のデジタルコンテンツ
  [バズ施策]緻密なPR視点がキモ!:The Extreme Minuet?  眞鍋海里
  [デジタルプロモーション]行列エンターテインメント:HelixGame  築地 Roy 良
  [Webサービス]感染する情報:Plug**   仲暁子
  [IoT]実家の課題解決サービス:まごチャンネル  神谷憲司

■マーケティング・プロモーション
 □ サイト改善基礎講座
  アクセスログ解析を使った現状把握で見るべき項目

 □ ハギハラ総研
  国勢調査のオンライン回答率は、なぜ東京が低いのだろうか

 □ デジタルプロモーションの舞台裏
  テーマパークの来場者数増加を呼んだ、サンリオキャラクターが作れるサイト

 □ 行動デザイン塾
  人を動かすための18の「ツボ」

 □ 課題解決のためのU実装講座
  追従要素を工夫してスマホユーザーのストレスを軽減する

 □ 解析ツールの読み方・活かし方
  解析結果からモバイル最適化を行う


■ビジネス・EC
 □ ECサイト業界研究
  オムニチャネル:集客に必要なタッチポイント

 □ 月刊店舗設計
  ぐらこころ:写真をシェアする時代のアイデア商品「おうち写真館」

 □ モバイルビジネス最前線
  MOTTAINAIマーケット:新旧事業の社内ジョイントベンチャーが価値を作る
  
 □ 知的財産権にまつわるエトセトラ
  引用の範疇

 □ Bay Area Startup News
  カギの開け閉めをスマートフォンでワンタッチ! 勤怠管理や入室者制御もできるスマートロック

■クリエイティブ
 □ モノを生むカイシャ
  東京ピストル:「編集力」で遊べる会社!

 □ 清水幹太の「Question the World」
  Zolty(BREAKFAST):NYで最も注目される男との、やたらと落ち着く会話

 □ ツクルヒト
  保坂俊彦(サンドアーティスト):砂から生まれ、砂に還る巨大彫刻

 □ 最果タヒの「詩句ハック」
  第17回 モノローグスタンプ

 □ デザインにできることMonologue
  Vol.142 本をつくる

 □ エキソニモのドーン・オブ・ザ・ボット
  出会った女性はBOTばかり! 情報漏洩事件で判明した悲しき実態とは?


■インフォメーション
 □ Topics
  Illumicap/電撃戦-SPEED CHESS-

 □ Movement&News
  ドイツ銀行の“現代写真”コレクション/杉本博司の大規模展/「原子力」をテーマにしたシャンデリアによるインスタレーション/オモチャや廃材から創り出す“シャンデリアアート”とは?/全長100mもの超絵画大作を披露する村上隆の個展
  Facebookと違うユーザー傾向に注目! Instagramユーザー生態調査/政府が企業の世界進出を支援するフランスの試みとスタートアップたち/Twitterのタイムラインに動画広告、アプリインストールの促進剤に ほか

編集部よりお詫びと訂正のお知らせ

特集「Web担当者のための実践的コンテンツマーケティング講座」にて、P029「情報を拡散しやすい」に誌面のデータに誤りがあり、本文が読めない状態となっていました。お詫びするとともに、以下に正しい内容を掲載いたします。

▼画像をクリックすると拡大表示します。
WD1511_P29.png

また、WDオンライン版では、こちらで該当記事を含むページを無料公開しています。あわせてご参照ください。

編集部からのおすすめ記事

この記事を見た人はこんな記事も見ています