For web marketers and site designers to get actionable insight, we believe using two tools at the same time is highly effective. Those tools are Google Analytics and ClickTale. In the presentation, we show a use case.

1. 『高機能ヒートマップツー
ルClickTaleによる改善アク
ション』
2012年4月
株式会社プリンシプル
Web解析チーム

2. はじめに
弊社で2012年3月29日に開催したセミナー
は、幸いにしてご好評頂きました。（次項にアン
ケート結果を記載しています。）
セミナー中でも高く評価いただいた「ヒートマッ
プから得られる知見をどのようにアクションに導
くか」の実例をスライドとして公表致します。
2

3. セミナーのアンケート結果について
マーケティング分野に携わるセミナー参加者が下記回答！
84％が仕事に役立つと回答 セミナー参加者の100％が人に勧めたいと回答
2012年3月29日実施 ・ サンプル数35
97%が講師をGAの達人と回答

4. ヒートマップツールとは？

5. ヒートマップとは？
ヒートマップとは？
サイト訪問者のページ内での動きを、マウスの動きとクリックを通じて「見
える化」することにより、「ページ内で興味を持った内容」、「熟読した場
所」などのユーザー心理を明らかにすることにより、
ページ改修を通じて
コンバージョン率を改善するためのツール
※マウスが滞留した
時間が長い場所が
赤く表示されま
す。
※視線とマウスの動
きは85%程度一致す
るという実験結果
があります。
5

6. ClickTale
私たちプリンシプルが利
用するヒートマップツー
ル：
イスラエルClickTale社が
提供するASP型高機能
ヒートマップツール
「ClickTale
」
http://www.clicktale.com/ 6

7. ClickTaleの特徴
ClickTaleの特徴は以下の通りです。
マウストラッキング
• 解析対象ページにJavaScriptを埋め込み、マウスの動きをト
ラッキングする、ASP型ツールです。
高機能
• 4種類のヒートマップの他、フォームのどの項目で脱落し
たのかがわかるフォーム分析が可能です。
リーズナブルな価格
• 機能制限のないプランが月額3万円というリーズナブルな
価格で導入できます。
7

8. 導入顧客
世界では、70,000社が導入しています。
日本の導入企業例
8

9. 多様なヒートマップ
4種類のヒートマップが提供されます。
■マウスムーブ ■クリック
← 複数の訪問者 ← 複数の訪問者
について、ク について、ク
リックした位 リックした位
置だけでな 置をトラッキ
く、マウスが ングします。
滞留した位置 クリックし
を含めてト た場合のジャ
ラッキングす ンプ先が同一
るため、ク ページでも正
リッカブルな しく識別でき
場所以外で ます。
も、訪問者の クリック
興味関心を可 位置はドット
視化できま で表現される
す。マウスが 他、パーセン
長く滞留した テージでも表
場所が赤くな 示されます。 9

10. 多様なヒートマップ
4種類のヒートマップが提供されます。
■アテンション ■スクロールリーチ
← 複数の訪問者 ← ページのどこ
について、 までスクロー
ページのどの ルしたかを、
高さの要素で 直感的にビ
マウスが滞留 ジュアルに表
したかをビ 現します。
ジュアルに表 スクロール
現します。個 されていない
別の文言や 場合、ファー
キーワードで ストビューに
はなく、縦方 重要な要素を
向への要素の 盛り込む、
配置の最適化 FoldingLineで
に利用しま コンテンツを
す。 切らない等の
対策を実施し
ます。 10

11. ヒートマップ⇒アクション
事例
プリンシプル開催セミナー
ランディングページ

12. GA：目標到達プロセスレポート
1. フォームに到達した人
（13訪問）は、比較的
高い確率で申し込みを
完了してくれている。
（9訪問｜69%)
2. 直帰率が高い
(81/94=86%)のがボトル
ネック
3. 直帰率を下げるのがコ
ンバージョン数アップ
に直結する可能性が高
い
12

13. セミナー申し込みLP
このランディングページの
直帰率を下げるため、マー
ケターであるあなたならど
んな施策を実施しますか？
13

14. 直帰率改善アイデア 14
アイデアは多数でますが、実際にページの各要素を変化させて、直帰
率の変化を検証することになります。
メインビ メインのコ
ジュアルが ピーが弱い
受け入れら のでは？
れていな
い。
講師の経歴 Call to Action
を全面に出 のボタンの
したらよい 色が悪い！
のか
も・・・
「直帰率を下げる」ことを実現するまでに、手
間も時間もかかります。

15. アテンションヒートマップ
1. アテンションヒートマップ
分析を実施しました。
2. 講師経歴に興味が集まって
います。
3. 一方、講師経歴はファース
トビュー（右図赤枠が高さ
800ピクセルのファースト
ビュー）に入っていませ
ん。
4. 講師経歴をファースト
ビューにレイアウトすると
いう施策が効果を出しそう
です。
15

16. マウスムーブヒートマップ
マウスムーブヒートマップで更に、興味の高いゾーンを分析
します。
1. 講師の、タ
イトル、学
歴、Google
Analytics関連
活動歴が関
心を集めて
います。
2. 関心を集め
ている点を
ファースト
ビューに表
示すること
が有効そう
です。 16

17. クリックヒートマップ
クリックヒートマップでクリック
A を分析します。4つあるフォームへ
の遷移ボタンのクリック率は以下
B
のとおりでした。
A : 3%
B : 3%
C : 0%
D : 12%
C 1. Aは、ファーストビューという「一
等地」にありますが、あまりク
リックされておらず、もったいな
ことになっています。
D
2. 他の要素で代替しても問題なさそ
うです。
17

18. ヒートマップツールで分かったこと
■Google Analyticsで分かったこと。
① 直帰率の高さがコンバージョン数が増えない原因の一つ
■ヒートマップツールで分かったこと。
① 講師経歴に興味を持つ人が多い。
② 講師経歴がファーストビューに入っていない。
③ ファーストビュー右上のフォーム遷移ボタンは余り使
われていない
④一番使われているフォーム遷移ボタンは、ページ最下部
にあるもの。
これら知見から取りうる、合理的なアクション
とは？ 18

19. 導かれるアクション
次回、LPを作るとしたら、、、
→ ファーストビューから余り使われていないCall
to Actionをトル
→ 右上の赤枠に、講師のGA関連活動訴求部分を掲
載する。たとえば、、、
この講座は講師がスゴイ！
GAユーザー最後の駆け込み寺、
『Google Analytics公式ヘルプフォー
ラム』で1,000回以上の回答をし、
フォーラム唯一のレベル10ユーザー
である木田 和廣氏が登場。
Google Analyticsの達人は、今何を語
るのか？
GAは入れているがコンバージョン
率が上がらないというマーケターに
お奨めの講座です。
講師の詳細な経歴はこちら。
19

20. ハイブリッドWEB解析
ClickTale
Google Analytics
20

21. ハイブリッドWeb解析
プリンシプルでは、「Google Analytics」 と「ヒートマップ」
の併用で、マーケターは最短ルートで確率の高い解にたどり
着くことができると考えています。
Google • ボトルネックの発
Analytics 見
ClickTale • 精度高い解の発見
ハイブリッドWeb解析
21

22. 私たちにお任せください
株式会社プリンシプル
Web解析チーム
info@principle-c.com