ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/324/room ーーーーーーーーーーーーーーーーーーーーーーー

1. スクー講義資料
2013/12/20
ヒートマップで、アクセス解析・仮説検証力を磨く

2. 自己紹介
小原 良太郎
株式会社Ptmind CMO
1983年生まれ。長野県出身。大学を卒業後、OKWaveに
てQ&Aコミュニティの導入や広告を担当する。2010年12
月より中国のベンチャー企業Ptmindの日本法人の立ち上
げに参画。現在は日本でのマーケティング全般、中国・日
本両国における事業戦略も兼任。
株式会社Ptmind
日本、中国、アメリカで展開するデジタルマーケティング・
ツールベンダー。アクセス解析ツール「Pt engine」等を
開発・提供。従業員約50名。大規模データ処理と使いや
すいUIを強みとする。

3. アジェンダ
1
ヒートマップ解析が何故必要か
2
ヒートマップをどのように使うか
3
ヒートマップ解析実践編

4. はじめに
本授業では実際にみなさんにヒートマップを見てもらいながら進めます。
下記のようにURLが出てきた場合、スクーとは別タブでそのURLへアクセ
スしてください。そのURLで表示されている内容を元に進めます。
開く
http://report.ptengine.jp/export/heatmap/
3c040a31401778758373b52b235a1ef3.html

5. ヒートマップ解析が何故必要なのか

6. 質問
みなさんは日常的に、
Webサイトの解析をおこなっていますか？
Yes or No

7. 売上を高めるための要素
流入
CVR
= 売上
リピート
CVR
= 売上

8. 具体的な施策
流入
SEO/SEM
広告
ソーシャルメディア
インバウンドマーケティング
アクセス解析
リターゲティング
ポイント
メールマーケティング
サイトスピード
サイト改善
リニューアル
ABテスト
リピート
CVR

9. 質問
CVRを高める手法として
実施したことがある手法は？
・アクセス解析
・ユーザーテスト
・A／Bテスト
・ヒートマップ解析

10. アクセス解析とは
12:00:00
12:01:03
TOP
製品ページ
検索
広告
離脱
外部リンク
どこから来て、どのページを見て、どこで帰っていったのか
を見える化

11. ページの中での行動は見える化されていない

12. ページ内分析

13. ページ内分析の手法
ユーザーテスト
ヒートマップ
テストユーザーに実際にサイトを利用して
もらい、利用のされ方を見たり、使いづら
ユーザーのタッチやスクロール情報をサー
モグラフィーで見える化。実際にアクセス
い点や課題点をあげてもらう。
したユーザーの情報がわかる。
代表性があるのか？
ユーザーの意図がわかるのか？

14. サイト改善のサイクル
データ計測
分析
仮説
改善

15. これから様々なヒートマップの画像をお見せし、わかったこと、
仮説を紹介していきます。注意点として、これらの内容があな
たの運営するサイトにも当てはまるとは限りません。様々な要
素が影響しあって、その結果としてユーザーの行動が起こって
います。サイト構成や文言が変わっただけで、ユーザーの心に
変動が起こり、ユーザー行動が変わるかもしれません。
!
本授業ではヒートマップに慣れること、そして仮説を立てる筋
力を鍛えること、を想定しています。ノウハウを学ぶ場ではあ
りません。

16. ヒートマップをどのようにつかうか

17. クリックヒートマップ
アテンションヒートマップ
ユーザーがクリック
ユーザーがよく閲覧
した場所が、回数が多
していたエリアが赤く
ければ多いほど赤くな
なります。
ります。
CVしたユーザーは
意図した場所がクリッ
どのエリアを見ていた
クされているか、また
のか、広告ユーザーと
はリンクのないところ
検索からきたユーザー
がクリックされていな
で閲覧していた内容に
いかどうかを把握し、
違いはあるのか。それ
改善に活かすことがで
らを把握して最適なコ
きます。
ンテンツを考えること
ができます。
スクロール率
サイトにアクセスしたユーザーのうち、ど
のくらいの割合の人がそこまでスクロール
をしたかどうか

18. サイトの利用のされ方を大雑把に把握する
直感的に把握
PV等でどのページが利用されているかはわかるが
程度を把握するにはグラフ化しないとわからない

19. 比率で確認する
よくクリックされる場所
たまにクリックされる場所
ほとんどクリックされない場所
単純にクリックを合計してヒートマップ化す
ると、サイトへのアクセスが多いサイトだと
画面が真っ赤になります。そこで自動的に比
率で赤くなる場所を設定しています。その比
率を変更することで、たまにクリックされる
場所も見える化されます。

20. どこが閲覧されるエリア
ファーストビューが見られていない
一番上に来ているのは製品の要約文章ですが、そちらが閲覧されず下の画像内の小さな説明をチェックしています。
画像と要約文章を入れ替えたほうが良い可能性があります。ユーザーはサイトに遷移後、そのページが自分の意図していたページ
かどうかをファーストビューで瞬間的に判断するため、文章より画像のほうが良いと思われます。
製品の特徴が読まれていない
このページにきたユーザーは製品の特徴を求めていないのかもしれません。このエリアにてユーザーが20%ほどスクロールをする
のをやめてしまっています。
配置を変えるだけでCVRが上る可能性が高い
商品ラインナップと保証内容がよく見られています
このエリアが急に閲覧されるようになっています。ユーザーが求めている情報にラインナップと保証内容があると考えられます。
この部分を製品の特徴より前にすることで、最適な情報提示となるため、CVが高まる可能性があります。
事例写真がよく見られています
事例写真をたくさん見たい可能性があります。施行例がユーザーのイメージを掻き立てCVに貢献する可能性があります。
施行例を画面上部に持ってきたり、充実化させることが考えられます。
ユーザーが求めている情報がわかる

21. ファーストビューからアクションしてもらえるか
PCサイトでは必要な情報ほぼすべてがファーストビューで確認できるが、
スマートフォンではより的確に必要な情報を集約かつ魅力的に
PCサイトにはあるがスマホサイトにはない情報

22. フッターリンク
なんのために用意していますか？
1
ユーザービリティ
サイトの下まで来た人が次に見たいページに容易に遷移できるようにするため
2
SEO
クローラビリティの向上

23. フッター
フッターが
よく利用されている

25. フッターに関する仮説
フッターデザインに力を入れれば回遊性が向上するかも？
誘導させたいページヘのリンクをサイト下部で目立たせ
ると、そのページに遷移してくれるかも？
グローバルナビゲーションが追いかけてくるようにすれ
ば、そちらでも回遊してもらえるかも？
フッターに認知して欲しい情報を入れておけば見てもら
えるかも？

26. フッター スマホだと
PCよりは
利用されていない？
このサイトはレスポンシブWebデ
ザインのため、フッターがそのま
まスマホでも利用されている。少
し押しづらいかもしれない。また
ここまで到達したユーザーがそも
そも少ない。

27. ユーザービリティを確認する
「こちらから」という文言に引っ張られて
ユーザーが間違えてクリックしてしまっている。
クリックしたくなるけど、遷移しないパターン
4,980円！！
価格はよく押されるけど遷移しないことが多いです。
ログイン
登録

28. 機能を検証する
ページ下部のページ移動においては、基本
的には次のページを閲覧したいというユー
ザー行動が見える。4ページ目以降ではす
でに見たページにお気に入りの商品があっ
たのか、戻ろうとする行動が見えた。
!
次のページを見たいというユーザーの希望
を叶えるために、ページ下部に行った場合
は、オートページャーにする方法が考えら
れる。
!
もしくは「次へ」「前へ」のみにして使い
やすくする

29. 機能を検証する
２０１４年は滅亡すると言われるスライドバナー

30. 押されやすい配置を検討する

32. 記事の評価
単純にPVだけが指標ではない。
質の高さが重要視される場合の
指標としてのヒートマップとスクロール率
インバウンドマーケティング
コンテンツマーケティング
一般メディア
記事広告
スクロール率で実際に記事を最後まで読んだ人数が
わかる。

33. バナー評価
正しいバナーの評価ができるようになります。
例
今まで
CTR = Click ÷ PV
CTR=100 10,000= 1%
PV=10,000
Click=100
これから
CTR = Click ÷ In-View IMP
= Click ÷（ PV × 到達率）
CTR=100
旧CTR=100 10,000
=1%
2,900=3.4%
新CTR=100 2,900
=3.4%

34. バナー評価
さらに
ヒートマップ情報を考える。
赤（よく見られている）のにCTRが低い
→目に留まるクリエイティブだが、アクションまで至らせられない
内容の理解に時間がかかる
→クリックしやすい、したくなるデザイン
!
青（よく見られていない）でCTRは高い
→クリックしたくなるデザイン

35. 広告効果
どちらが効果の高い広告クリエイティブでしょうか？
A
B

36. テキスト広告はユーザーにサービスの特色を事前に説明できていた
A
B

37. 細かい施策毎でのヒートマップ抽出
クリエイティブX
メディアA
出稿先、クリエイティブ、ランディングページ
それぞれでヒートマップ分析
LP1
LP1
クリエイティブX クリエイティブY
メディアA
AX
AY
メディアB
LP2
メディアB
BX
BY
クリエイティブY
メディアA
LP1
LP2
クリエイティブX クリエイティブY
メディアA
メディアB
AX
AY
メディアB
BX
BY
LP2
良かったところに集中投資する、というだけでなく、何故うまくいかなかったのか、
理由を知りノウハウをため改善していく

38. ここまではあくまでヒートマップを見ただけ
見える化
分析
仮説
セグメントをして、更に深い分析も・・・
・新規/リピーター
・流入別（広告、キーワード、参照サイト）
・CVあり/なし
・地域
・OS,ブラウザ
改善

39. ヒートマップ解析 実践編

40. 1
2
2,3分、ヒートマップをみて考えてもらいます
何が読み取れるのか、どんな仮説が立つのか、どんな施策が考え
られるか、発言してもらいます
3
みんなでディスカッション
4
解答例

41. 実践1
製品案内ページ
製品 詳細案内ページ｜Pt engine
目的：登録してもらう
URL：http://www.ptengine.jp/products/
クリック
開く
http://report.ptengine.jp/export/heatmap/3c040a31401778758373b52b235a1ef3.html
アテンション
http://report.ptengine.jp/export/heatmap/24cc7883df4bf8e4d7fe0ccaba2d5eb5.html

42. 実践1 読み取れること
ヘッダーナビゲーションが利用されている
スライドバナーの利用状況と使われる場所

43. フッターリンクがよく利用されている。
Facebookは利用されるがtwitterはされていない。
・人気機能はヒートマップ、リアルタイム、ページグループ
→これらのコンテンツを上に持ってきたほうが良いかもしれない
!
・スクロール率がファーストビューから一気に70%まで減ってしまっている。
そこから先はゆっくりな減り方。
→ファーストビューが問題になっている。
!
・サイト下部の登録画面が閲覧されていない
→ABテストでテキストやデザインを検討する

44. 実践2
ECサイト
韓国ファッション通販サイトfrem（フレム） スマホサイト
目的：購入してもらう
URL： http://frem.jp/
クリック
開く
http://report.ptengine.jp/export/heatmap/11e96ce0138ac1394bccaa4c9fc10039.html
アテンション
http://report.ptengine.jp/export/heatmap/7cef40b040d85d01f2fad62ec88de00a.html

45. 実践2 読み取れること
スライドバナーの右側が押されまくりだが写真のクリックはされていない
→スライドでギャラリーを見て詳細ページに行くわけではない
→見て楽しみはするが、自分ほしいものは別途探している様子
謎めいたクリックが発生。

46. プラスボタンが利用されている。
文字とかぶっているので、誤クリックが発生している可能性がある。
スペースのある右側が押されている。
・スペースがあると押しやすいのかもしれない。
・手の配置場所

47. ランキングが誤クリックされている。
ランキングは3位までしか用意していないがモット見たいのかもしれない。

48. PCサイトの表示リンクが押されている。
一部ユーザーには使いづらいと思われているかもしれない。

49. サイト下部のニュースで新商品リリースにクリックが集まる。
スタイリングより新着商品のほうがよく見られている。
→順番を変えると良いかもしれない。

50. まとめ
データ計測
分析
仮説
ユーザーの行動を見える化し
データを元に改善しよう！！
改善

51. 今日使ったツール
スマホからPCまで解析できるヒートマップ解析ツール｜Pt engine
http://www.ptengine.jp
無料から利用できます！

52. 課題
韓国ファッション通販サイトfrem（フレム）のデータを元
に、どのようにすれば「より購入してもらえるようになる
か」を考えてレポート欄に投稿してください！
ECサイト
韓国ファッション通販サイトfrem（フレム）
目的：購入してもらう
URL： http://frem.jp/products/detail.php?product_id=1245
開く
クリック
http://report.ptengine.jp/export/heatmap/9cf164dd813cb53db129b4777a003a88.html
アテンション
http://report.ptengine.jp/export/heatmap/de606e32db11a702a0f07093ffb51525.html