SiTest(サイテスト)の使い方を知ろう!~ヒートマップ編~ | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

SiTest(サイテスト)の使い方を知ろう!~ヒートマップ編~

こんにちは、コンサルタントの林です。

「SiTestを導入してみたけれど、どうやってデータを見れば良いの?」
「SiTestの機能がいっぱいありすぎて、何をどう使えば良いの?」

と聞かれることがあります。
確かに、全部を使いこなそうとするとそれだけで一日が終わってしまうのではないか、というほどたくさんの機能があります。また、マーケティングや解析について勉強しながらお使いになられている方も多いですし、ぜひ分かりやすく整理しお伝えできればと思います。

スポンサーリンク

【お知らせ】
今年5月に行われました、ウェブ解析士協会との共催セミナー動画を特別公開致します!
「SiTestセミナー ヒートマップ解析・ABテストが1画面で出来るSiTest を使ってみよう」

SiTestの導入方法、ヒートマップの操作・活用、ABのテストの設定を初心者向けに説明したものです。是非一度御覧ください。

ヒートマップについて

ヒートマップとは、データ行列を色として表現した可視化グラフの一種です。一般的によく使用されているのは「生態ヒートマップ」と呼ばれるもので、DNAマイクロアレイ(DNAマイクロチップ:細胞内の遺伝子発現量を測定するために多数のDNA断片を基板上に高密度に配置した分析装置)から得られた多くの比較標本から遺伝子発現レベルを表示するために、分子生物学分野で使われているものです。
ヒートマップ(参考:株式会社セルイノベーター マイクロアレイ解析(ゲノム解析)
その後、様々な分野で活用され始めました。

例えば、
「カーステーションヒートマップ」
カーシェアのステーションの密集具合を、色によって表したものです。黄緑色⇒黄色⇒赤色になるほど、相対的にその地域にステーションが密集していることを表しています。今回は、弊社がある大阪市中央区近辺のマップを参考とさせていただきました。
ka-sute-shonnhi-tomappu(参考:カーシェア徹底活用宣言

「リアサカLIVE Jリーグ」
Jリーグ観戦をしながら、リアルタイムで最新データを見ることができるセカンドスクリーンアプリです。各チームごとのプレイエリアをヒートマップ表示する機能があります。
riasaka(参考:Microsoftストア「リアサカLIVE Jリーグ」

その中で、Webアクセス解析にも使用されるようになってきました。これにより、サイト内の各ページに訪れたユーザーの動きを色で可視化しユーザーがどの情報に興味を持っているのか、どのくらい熟読しているのか、どこをよくクリックしているのかなど、Google Analyticsとはじめとした今までのアクセス分析ではわからなかった情報を視覚化し、簡単に把握することができるようになりました。まるで、ユーザーテストを画面の中から見ているかのようにユーザーの動きを把握することができるのです。

それでは、実際にSiTestの各機能を見ていきましょう。

1.スクロール解析

function_heatmap_scrollanalysis
ユーザーが、ページのどの部分までスクロールしたのかをヒートマップにて表したものです。滞在時間が長い(=熟読エリア)は赤く、滞在時間が短くなるにつれ青色へ近づいていきます。ユーザーがページのどこに興味を持ち、どこで興味をなくして離脱したのかを併せて見ることができるのも特徴です。もちろん、スマホ・タブレットも対応。

2.マウスグラフィ

function_heatmap_mousegraphy
ユーザーの視線とマウスポインタの位置は、およそ85~90%の確率で一致する、というアメリカのカーネギーメロン大学の研究から、マウスポインターの位置を座標で取り、その滞在時間が長いほど赤く表示されます。
じっくりとコンテンツを見ようとしたり、詳細情報が知りたくてリンクを探していたり、といった時には人は無意識にマウスを注目ポイント付近にホバーさせていたりします。本人でも気づいていないようなそうした動きも、マウスグラフィなら逃さずデータとして取ることができます。もちろん、スマホ・タブレットも対応。

3.マウスクリック(クリック解析)

function_heatmap_clickanalysis
ユーザーが実際にページ内のどこをクリックしたかを表示します。実際にデータを取ってみると、想定外のところのクリックが多かったり、意図しない箇所(リンク等がない箇所)がよくクリックされていたり、と新たな発見があります。
ユーザーがクリックするということは、何かしらの意図があります。表示速度が遅い、もっと詳細な情報が知りたい、すぐに申し込みたい、などのユーザーの意図を類推しながら確認すると良いですね。

4.マウスムーブ

マウスポインターの位置やクリックの位置がわかったところで、もっとユーザーの動きを詳細に見たいという際に最適です。ユーザーのマウスポインターの動きを録画し、再生することができます。赤い丸はユーザー離脱ポイント、青いピンはユーザーがクリックした場所を表します。

5.ゲイズプロット

ユーザーがマウスポインターを動かした順序を数字で、マウスポインターの滞在時間の長さを円の大きさと色で表示します。個別ユーザーIDごとのデータを見ることができ、順番と滞在時間の因果関係を読み取ることにより、ページ構成の再考に役立ちます。マウスグラフィとマウスムーブの良いとこどりをしたような機能です。

6.タップ解析

function_heatmap_tapanalysis
スマートフォンやタブレットのユーザーがタップした箇所を表示します。ユーザーが誤タップしていないか、押そうとしているボタンの大きさは適切か、ユーザーの動きは滑らかか、などPCユーザーとは違った動きをするスマホ・タブレットユーザーにとって操作しやすい構成となっているかを確認する機能です。

7.タッチアクション

function_heatmap_touchactionanalysis
スマホ・タブレットユーザー独特の動きである「タップ」「フリック」「スワイプ」「ピンチイン」「ピンチアウト」が、ページのどこで行われたのかを表示したものです。フリックばかりが多い=読み飛ばされていると考えられるコンテンツや、ピンチイン・ピンチアウトが多い=文字等が小さくユーザーが読みにくいと思っているコンテンツなど、スマホ・タブレットユーザーを意識したページ構成の再考に役立ちます。
 
 
 
いかがでしたでしょうか?今回は、SiTestで見ることのできる各ヒートマップについてお伝えいたしました。
※ヒートマップ操作ガイドのDLはこちら
※ヒートマップ活用ガイドのDLはこちら

次回は、A/Bテストについてご紹介できればと思います。最後までお読みいただき、ありがとうございました!