Microsoftが無料で提供しているClarityが凄すぎます。
ヒートマップが無料なだけで十分凄いのですが、読者の動きを録画して動画で確認できる機能まで無料です。
しかも、登録サイト数やPV数の上限がありません。
ユーザビリティ向上のためには、読者がどのような行動をしているのかを分析する必要があります。
ヒートマップは、読者の行動を分析して、サイト改善をするのに最適なツールです。
今回は、Clarityの機能や使い方についてご説明します。
- ヒートマップってなに?
- Clarityの機能紹介
- Clarityの使い方
![](https://ryulifeblog.com/wp-content/uploads/2020/09/54306f1ddfa8f9ec2a72347cbe571dcd.png)
Clarityがスゴイ!
スゴイのに無料でスゴイ!!
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d045cb03f132e716d3b04122da7c3e6c.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d045cb03f132e716d3b04122da7c3e6c.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d045cb03f132e716d3b04122da7c3e6c.png)
よく分からないけど、スゴイのは分かった
ヒートマップとは?
![](https://ryulifeblog.com/wp-content/uploads/2021/02/undraw_design_stats_ne2k-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2021/02/undraw_design_stats_ne2k-1.png)
ヒートマップは、読者がクリックした箇所や、離脱した箇所がサーモグラフィー状に可視化されたツールです。
読者がどのような行動をしたか分析することで、サイト改善に役立ちます。
前回、プラグインで簡単に利用できるAurora Heatmapについて説明しました。
![](https://ryulifeblog.com/wp-content/uploads/2021/02/ae66eac9cf62caa814087745ee29c50f-300x158.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2021/02/ae66eac9cf62caa814087745ee29c50f-300x158.jpg)
Aurora Heatmapは重い
Aurora Heatmapは簡単に利用できるのがメリットですが、サーバー設置型なのでサイトスピードが遅くなります。
\Aurora Heatmap使用時/
![](https://ryulifeblog.com/wp-content/uploads/2021/02/c8a7c86bbb39d09ffcc01d6065ab5f69.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2021/02/c8a7c86bbb39d09ffcc01d6065ab5f69.jpg)
\Clarity使用時/
![](https://ryulifeblog.com/wp-content/uploads/2021/02/0eeede7c54fe411daeaa3dcf78ce2dad.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2021/02/0eeede7c54fe411daeaa3dcf78ce2dad.jpg)
Clarityならサイトスピードへの影響が小さいです。
Clarityの便利な機能
![](https://ryulifeblog.com/wp-content/uploads/2021/02/undraw_accept_tasks_po1c-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2021/02/undraw_accept_tasks_po1c-1.png)
Clarityには多くの便利な機能があります。
- ダッシュボード
- セッション再生
- クリックヒートマップ
- スクロールヒートマップ
ダッシュボード
ダッシュボードでは、ユーザーのさまざまな動きを一覧で確認できます。
![](https://ryulifeblog.com/wp-content/uploads/2021/02/17.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2021/02/17.jpg)
- Dead clicks
-
リンク以外の部分をクリック
- Rage clicks
-
短時間でクリックを連打
- Excessive scrolling
-
素早くスクロールされて、読み飛ばされた箇所
- Quick backs
-
ページ移動後に、すぐ戻ってしまったセッション
セッション再生
セッション再生では、1ユーザーの動きを動画で確認できます。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/18.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/18.jpg)
読者が
- どこをクリックして
- どのくらいのスピードで読んで
- マウスをどのように動かして
- どこで離脱したか
という動きがすべて分かるのです。
読者のリアルな動きを把握できるのは凄すぎます!!
ちなみに読者のリアルな動きを見ているとこうなります。
「意外と流し読みされてるんだなー」
「あっ、ここクリックされないのね」
「そんなすぐ離脱しないでー」
心の弱いかたは見ない方がいいかもしれません。
「現実を受け入れて、ブログを改善するんだ」というかたのみご利用ください。
動画を見るのは時間がかかります。
動画の再生速度は0.25倍~12倍まで選択できるので、調整しましょう。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/19.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/19.jpg)
クリックヒートマップ
クリックヒートマップでは、読者がどこをクリックしたか分かります。
クリックが多い箇所は赤くなり、少ない箇所は青く表示されます。
「Heatmaps」をクリックして、ヒートマップを見たいURLを入力しましょう。
「PC」「タブレット」「モバイル」ごとに見られます。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/20.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/20.jpg)
スクロールヒートマップ
スクロールヒートマップは、読者がどこまでスクロールしたかが分かります。
赤から青に変わっていくほど、離脱されている場所です。
「Scroll」をクリックすると、スクロールヒートマップに切り替わります。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/21.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/21.jpg)
Clarityの利用手順
![](https://ryulifeblog.com/wp-content/uploads/2021/02/undraw_User_flow_re_bvfx-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2021/02/undraw_User_flow_re_bvfx-1.png)
Clarityのサイトから登録します。
Clarityはこちら
Clarityに登録
「Get started」をクリックします。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/1-6.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/1-6.jpg)
好きな方法でサインインします。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/2-6.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/2-6.jpg)
メールアドレスを入力して「Continue」をクリックします。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/3-5.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/3-5.jpg)
名前やブログのアドレスを入力して「Create」をクリックします。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/4-3.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/4-3.jpg)
セットアップ画面が表示されるので「Copy to clipboard」をクリックします。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/5-2.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/5-2.jpg)
WordPressでコードを貼りつける
<head>タグ内にコードを貼りつけます。
テーマエディターから入力してもいいですが、不安なかたはプラグインを利用しましょう。
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
プラグインが便利
![](https://ryulifeblog.com/wp-content/uploads/2021/02/5b48e54664d5701343689c7f802b4777-300x158.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2021/02/5b48e54664d5701343689c7f802b4777-300x158.jpg)
「設定」「Insert Headers and Footers」「Scripts in Header」にコードを貼りつけて「save」をクリックします。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/6-1.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/6-1.jpg)
「閲覧できません(Forbidden access)」と表示されてしまいました。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/7.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/7.jpg)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/401bacad237b92b4ca3f2122425ef040.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/401bacad237b92b4ca3f2122425ef040.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/401bacad237b92b4ca3f2122425ef040.png)
なんでや?
「閲覧できません」と表示された場合
レンタルサーバー側でWAFの設定を確認します。
以下はConoha WINGの場合です。
「WING」「サイト管理」「サイトセキュリティ」「ログ」をクリックします。
日時から、はじかれたログを見つけて「除外」をクリックします。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/8.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/8.jpg)
「はい」をクリックします。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/9.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/9.jpg)
再びWordPressでコードを貼りつけて実行します。
エラーにならなければオッケーです。
Googleアナリティクスと連動させる
Clarityのセッティング画面の下にある「Get started」をクリックして、Googleアナリティクスと連動させます。
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/10.jpg)
![Clarity](https://ryulifeblog.com/wp-content/uploads/2021/02/10.jpg)
以上で準備完了です。
データが集まるまで待ちましょう。
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2020/09/d160a53f71104dc4e5ed3c300ba3ba79-1.png)
2~3時間は待ってね
まとめ
![](https://ryulifeblog.com/wp-content/uploads/2021/02/undraw_All_the_data_re_hh4w-1.png)
![](https://ryulifeblog.com/wp-content/uploads/2021/02/undraw_All_the_data_re_hh4w-1.png)
Clarityの機能や使い方について説明しました。
- Clarityは無料とは思えない機能
- セッション再生がスゴイ
- ヒートマップが無料で使える
Clarityの凄さに、ただただ驚きました。
セッション再生で読者の動きを完璧に追えることにも驚きましたが、ヒートマップが無料で使えることにも驚きです。
登録が少し手間ですが、手間に見合う価値はあります。
Clarityで読者の行動を分析しましょう。
今日はここまで!おつクラゲ~(:]ミ (:]彡
コメント