どうも、Webマーケター兼中小企業診断士のトーマツです。
ブログ運営をはじめて早2年ですが、おかげさまで多くの方々から「○○の記事が役にたったよ～。面白かったよ～」と言って頂けております。
その一方、少なくない親しい方々から「ここの記事のこの部分が読みづらい」など、ユーザー体験上の指摘を受けることがあります。。。（大変ありがたいです）。
こういった指摘を受けるたびに、ブログやホームページを改善していくには「読者が媒体上でどのような行動を取っているか？」を知ることが重要であることを痛感しますが、同じような課題感を持っておられる方々も多いのではないでしょうか？
そこで使えるのが「ヒートマップツール」。
ヒートマップツールとは、ユーザーがサイト上の「どこを見ているのか？または、どこを見ていないか？」など、読者のマウスの動きもトレースしながら解析できる超便利ツールです。
今回はそのヒートマップツールの中でも、無料かつ多様な機能を持っており、「控えめに言って最強」の呼び声が高い「Microsoft Clarity（クラリティ）の使い方や導入方法」について解説したいと思います。
サイト改善に携われている方であれば、知っておいて絶対に損はしませんので、ぜひ最後まで読み進めてみて、実際に導入してみて下さい（設定は数分で終わります！）。
- ブロガー・アフィリエイターの方
- 企業のWeb担当者の方
- 中小企業コンサル（中小企業診断士など）の方
Microsoft Clarity（クラリティ）とは？
Clarity（クラリティ）とは、Microsoft社が2020年10月にリリースした無料ヒートマップツールです。
私自身これまで、Userheatやミエルカ等を使っておりましたが「無料でここまで出来るか。。。」とただただ感動しました。
控えめに言って神ツールですので、導入していない方はすぐに導入しましょう。
何ができるの？
Microsoft Clarityでは主に以下の３つの分析が行えます。
- ダッシュボード（Dashboard）上で重要指標のチェック
- レコーディング（Recordings）による読者行動の分析
- ヒートマップ（Heatmaps）による読者行動の見える化
1つずつみていきましょう。
①ダッシュボード（Dashboard）上で重要指標のチェック
ダッシュボード（Dashboard）では、サイト全体の重要指標を一目で把握することができます。
例えば、下記。
- Scroll depth（スクロール深度）
スクロール深度（読了度）が分かる - Engagement（セッション時間）
セッション時間（アクティブ時、非アクティブ時）が分かる - Dead clicks（デッドクリック）
遷移先のない箇所へのクリック率が分かる - Rage clicks（レージクリック）
繰り返しクリックの発生率が分かる - Quick backs（短期離脱）
セッション開始後、すぐに離脱された割合が分かる
また、Filter機能を使うことによって、個別ページにおけるデータも抽出可能です。
Quick backs（短期離脱）が多かったり、Engagement（セッション時間）が短すぎる場合、読者の検索意図に沿った記事が作成できていない可能性がありますので、リライト対象としておくことをお勧めします。
上記に加えて、セッション情報、人気ページ、デバイスなど、Google Analyticsで得られるデータも把握することができます。
②レコーディング（Recordings）による読者行動の分析
レコーディング（Recordings）では、読者のマウス操作やタッピング操作の状況を動画として再生することが可能です。
UX向上に向けたリライト指針を立てるために、下記のようなポイントを抽出することをお勧めします。
- 意図せぬクリックの状況把握
- じっくり読んで欲しいのに、読み飛ばされた箇所の抽出
- 記事内で行ったり来たりが生じていないか？の把握
など
ヒートマップで得られる情報も多いですが、実際に読者の捜査状況を動画でみるのとでは情報量に雲泥の差があります。
ぜひ、レコーディング機能を用いてUX向上を目指しましょう。
無料でありながら、セッション数に制限がないレコーディングツールはClarity以外にありません。
③ヒートマップ（Heatmaps）による読者行動の見える化
ヒートマップ（Heatmaps）では、読者が「どこをクリックしたか？」と「どこまで読み進めたか（スクロールしたか）？」を把握することができます。
デフォルトではクリックヒートマップになっておりますが、「Scroll」をクリックすることで、下図のとおりスクロールヒートマップに切り替えることができます。
スクロール深度が低い記事群は、読者の検索意図に答えられていない可能性が高いため、リライト対象としておきましょう。
他ヒートマップツールとの違い
無料ヒートマップツールには、「User Heat」「Mouseflow」「MIERUCA HEATMAP」等、Clarity以外のものも幾つかありますが、基本的に有料オプションにつなげるためのお試し版という側面が強いです。
一方、Clarityは無料ツールながらも、他社ツールで提供できている機能を、PV数、ドメイン数、ページ数等の制約もなく「無制限に活用可能」です。
欠点として読者の熟読部を可視化する「アテンションヒートマップ機能が無いこと」、それから「日本語対応がないこと」が挙げられますが、前者に関しては他の機能で代替できますし、後者に関してはブラウザの翻訳機能を使えば気になりません。
他社ツールを無料トライアルで利用中の方は、これを機に、Clarityに乗り換えましょう。
Microsoft Clarityの導入方法
では、ここからはClarityの導入方法を見ていきましょう。
1. Microsoft Clarityサイトにアクセス
2. 任意のソーシャルログインアカウントでサインイン
次に、メールアドレスを記入し、利用規約にチェックを入れ、Continueをクリック
次に任意の分析名を記入し、対象ドメインのURLを記入。カテゴリはなんでもOKです。
3. トラッキングコードをコピー
4. トラッキングコードをWordPressの<head>セクションに埋め込む
埋め込み先はGTMでもOKです。
5. Clarityを利用開始する
トラッキングコードの埋め込みが完了したら、数時間後にはヒートマップが利用開始できます（私の場合は30分ほどでした）。
Let’s get startedをクリックして利用開始しましょう。
作業時間はたったの5分。利用しない理由はないですね！
Microsoft Clarityの使い方
ここからはMicrosoft Clarityの目的別使用例を２つ紹介したいと思います。
- スクロール深度改善 ⇒ 検索意図抽出・リード文改善
- デッドクリック改善 ⇒ 外部リンク追加
①スクロール深度改善 ⇒ 検索意図抽出・リード文改善
スクロール深度が低い記事はリード文がピンボケしており、「読者の検索意図を適切に拾えていない可能性が高い」です。
これはSEO的にもよろしくないので、是非改善していきましょう。
1. スクロール深度が低い記事を抽出
まずは改善対象の「スクロール深度が低い記事」を探しましょう。
Max percentageで上限を定めることによって、最後まで読み進めてもらえなかった記事を抽出できます。
ここでは一例として「20％」を用いております。
「検索意図が合致しているか否か？」を把握したいので、内部リンクからのアクセスではなく、検索エンジンからの流入ページのみを抽出すべきです。
そのために、「Session page count」は「1」とし、「Organic Search」にチェックマークを入れます。
直前のリファラーにGoogleやYahooのURLを打ち込む方法でもOKです。
2. 抽出結果から改善対象ページを選ぶ
Filterが適用できたら、「Popular pages（人気のページ）」から改善対象ページを選びます。
トップページはややこしいので、記事ページの中で最もアクセス数の多いものを選びましょう。
今回の例では「キャッシュフロー（間接法）の覚え方」という記事が選ばれました。
3. 記事をリライトする
記事が選択できたらあとは簡単です。
今回の事例記事では「キャッシュフロー 覚え方」というキーワードで対策をしているので、改めてこのキーワードの検索意図を見直し、リライトを進めていきます。
リライト実施後のスクロール深度の結果を分析しましょう。
改善していたら施策成功です。悪くなっていた場合は、改善できるまで試行錯誤していきましょう。
②デッドクリック改善 ⇒ 外部リンク追加
デッドクリックが頻発している記事は、デッドクリックが発生しているポイントに適切なリンクを添えてあげるだけで、読者体験価値が向上する可能性があります。
という訳でデッドクリックが発生している記事を抽出しましょう。
1. デッドクリック発生記事を抽出
2. 抽出結果から改善対象ページを選ぶ
今回はPopular pagesの中から最もページ数の多い記事である「フォローしておきたい「マーケティング業界の有名人」12選【Webマーケター必見】」を選択します。
本当はDead Clicksの発生回数が多い順でFilterできると良いのですが、その機能は現時点では無さそうです。
3. クリックヒートマップからデッドクリック発生個所を特定
クリックヒートマップを用いて、デッドクリックが発生している箇所を抽出しましょう。
今回の事例では、記事中で取り上げている著名人の最終学歴（神戸大学大学院）に対してデッドクリックが発生していました。
この場合には、著名人の関連データに対する興味・関心があることが分かりますので、神戸大学の情報のみならず、他の情報（過去勤務先、等）に対してもリンクを添えた方が良いですね。
以上のように、ヒートマップを使うことで読者体験改善につながる施策を立案可能です。
まとめ
以上、本記事では「無料ヒートマップツールのMicrosoft Clarityの使い方」について解説させて頂きましたが、いかがでしたでしょうか？
もし本記事の内容でご質問ある方は是非コメント欄に書き込んで頂けると幸いです。
お答えできる範囲で答えさせて頂きます。
それではまた！
