はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会。これまで初心者向けに解説してきましたが、第5回は Clarity 活用のキモといえる「フィルター」について深めました。以下のような内容です。

Clarity を効果的に活用するためには、お客様（カスタマー）の理解とウェブサイトの動線把握が重要となります。ここに向き合わないまま Clarity を活用しようとしても、「オモシロイ」以外の感想はなかなか出てきません。シンプルでカンタンだからこそ、顧客理解の有無で得られるものが変わります。要するに、

[ 何のために、誰の動きを見たいのか ]

Clarity の活用は、この一言に尽きます。正解はないからシンドくもあり、楽しくもあり。最近はAIにLP添削をしてもらうことも流行っているので、「このページは、誰のどんな目的で作られ、その人はこのサイトにどんなことを期待していると思いますか？」みたいにお願いしたら提案してくれるかもですね。

まずは、Microsoft Clarity のフィルター機能を知ることをメインに説明しています。これまでも使っているので、気になる箇所は Microsoft Clarity の使い方をまとめた過去の記事も参考にしてください。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

フィルターを使うための大前提

Microsoft Clarity は、ウェブサイトにおける「カスタマー（見込み客も含む）」の行動を分析し、つまずきを減らすためのツールです。

フィルターを使うための大前提は、行動を絞り込む相手、つまり、分析対象となるカスタマーを明確に定義することが重要です。Clarity でカスタマーにならないユーザーを観察しても時間が溶けるばかりですし、SEOにも直結するため、少なくともカスタマーのニーズくらいは想定しておきましょう。マーケティングにおける「誰に」ですから。

この図でいうところの、集客を担う［認知］→［訪問］の部分を改善するのがSEO、実際にウェブサイトの成果につながる［訪問］→［回遊］→［CV（コンバージョン）］を改善するのがCRO（Conversion Rate Optimization＝コンバージョン率最適化）です。

ただし、私（コスギ）としては、CRO＝Customer Relationship Optimization（顧客との関係性を最適化）と捉えています。この方が、ウェブサイトの改善を考えやすいのでオススメです。

例えば、ウェブサイトへの訪問数 10,000 件に対して申込数が 100 件であれば、100/10000＝0.001 で、1% のコンバージョン率になります。このコンバージョン率を 2% にするなら、以下のような2パターンが考えられます。

カスタマーにならないユーザーが多いようなら、集客対象のクエリやコンテンツの動線をカスタマーに最適化する（CRO）ことで、訪問数が減少しても申込数は次第に上がります。カスタマーに最適化されたサイトは、SEOにも効果を発揮し、訪問数も上がります。

ただしもちろん、カスタマーを見誤ってしまうとどちらも減って大爆死してしまうので、覚悟と勇気を持つ前に、しっかりとカスタマーを定義しておくことは必須です。徹底的に顧客理解を深めて実施した施策は、後悔ではなく経験が残ります。次につなげましょう。

Microsoft Clarity で使えるフィルター

ウェブサイト上でユーザーがつまずくポイントは、さまざまです。

ご自身でも、こういったことに少なからず「イラッ」としたことがあるのではないでしょうか。あなたの感じる「イラッ」は、誰かにとっても「イラッ」とします。使い慣れた自分のサイトは盲点になりやすいですが、初心に返って、実機で確認してみてください。このアンテナは、少なからず改善のヒントになります。

さて、Clarity にはたくさんのフィルターが用意されており、こういったつまづきを定量的・定性的にチェックすることができます。「イライラしたクリック」など、GA4では見たこともない、特徴的なフィルターは以下に紹介しています。合わせて参考にしてください。

ちなみに「この条件のユーザーは除外したいんだけどな〜！！」という場合には、一部のフィルターが使えます（すべてではないのですが）。カスタムフィルターは除外対象を設定できるので、使っていくうちに必要になったら思い出してください。「関係者除外」が一番わかりやすい例ではないでしょうか。

フィルターを保存してセグメントにしよう

Clarity では、設定したフィルターを保存したものを「セグメント」と呼びます。保存しておけばいつでも呼び出せるので、よく使うフィルターをセットしておくと良いですよね。

では、よく使うフィルターをどう見極めたら良いかという点で、STP分析を応用すると効果的です。

補足：STP分析とは

STP分析では、まず市場をいくつかのセグメントに分割します (セグメンテーション)。分割の方法でよくあるのが、性別や年令ですが、業種、規模、サービス内容など、ケースバイケースで検討する必要があります。

どのような軸で分割するかによって、求める顧客像が変わります。曖昧なまま進めると、違和感のある顧客しかいなかったり、市場が狭すぎて顧客がいなかったりが起こりますので、納得感のある軸を採用しましょう。

次に、分割したセグメントの中から、どのセグメントをターゲットとするかを決定します (ターゲティング)。

最後に、ターゲットとするセグメントにおいて、自社の立ち位置を明確化します (ポジショニング)。 同じセグメントには競合も存在するため、差別化や共創を図りながら、自社の強みを活かせるポジションを確立することが重要です。

UAV あなたが知らない あなたの会社だけの強み ― 顧客に選ばれ続ける「最強ブランド」のつくり方 #PR

STP分析では物足りないな……自社の強みをちゃんと出していきたい！という方は、UAV（ユニーク・アトラクティブ・バリュー）の思考プロセスを知れるこちらがオススメです。まだ市場ができていない場合は、VPC（バリュー・プロポジション・キャンバス）で考えてみるのもオススメ。PMFの全体像と合わせて、才流さんの記事も合わせてどうぞ。

https://sairu.co.jp/method/13700/

わかりやすい軸で考えてみましょう。たとえば、顧客単価と購入頻度の軸だと「高単価・リピーター」、「高単価・単発購入」、「低単価・リピーター」、「低単価・単発購入」の4つのセグメントに分けられます。すると、B（高単価・リピーター）のアップセルやクロスセルのために Clarity でフィルタリングして確認したり、A（高単価・単発購入）のリピートを促すためにBとの違いを Clarity で探索したり、などが考えられます。

フィルターは「なんとなく見たい切り口」でも使いやすいのですが、戦略に基づいたセグメントでフィルタリングしたほうが、得られるものは大きいのではないでしょうか。ただでさえ、時間が溶けるツールですから……

また、セグメントは、作成した後にウォッチリストに追加することも可能です（フィルターの設定とウォッチリストへの登録手順は動画でも説明しています）。ウォッチリストに追加しておけばいつでも確認できますし、すぐに絞り込むこともできます。期間の設定が含まれてしまうので、それだけちょっとややこしいんですけども。

フィルターの活用ケース

ダッシュボードから使うのが一番カンタンです。ぜひ知っておいてほしいのは、ダッシュボードの中でも「フィルター」と訳されている「ファネル機能」からのフィルタリング。物足りなくなったらカスタムフィルターもどうぞ。

ダッシュボードから使う（まずはここから）

「ダッシュボード」は、Clarity を開いてさまざまな数字が書かれている最初の画面のこと。「定性分析ツールじゃないんかーい！」とツッコみたくなるような、ウェブサイトのアクセス状況やユーザーの行動に関する様々なデータが表示されています。

問題のありそうなユーザー行動を絞り込んで分析したい場合、ダッシュボード上で該当する項目をクリックするだけで、簡単にフィルターを適用することができます。たとえば、デッドクリックが多い場合は、「デッドクリック」の項目をクリックすることで、デッドクリックが発生したセッションに絞り込むことができます。この辺は動画でも説明していますので、合わせてどうぞ。

さらに、Microsoft 社の AI である Copilot が搭載された「Clarity Chat」を使うことで、分析のヒントを得ることも可能です。カンタンな質問、たとえば、「過去7日間で、モバイルでタップの問題が起きているページを教えてください」と入力すると、Clarity Chat はデッドクリックが多いページを提案してくれます。また、「過去30日間のデータをもとに、トップページの改善ポイントを教えて」という依頼には、いくつかの指標から提案してくれます。コンサル的にアドバイスしてくれるというよりは、「ヒントはこの辺」と提示してくれる感じですね。

まだ回答精度は不安定ですが、たまに構ってあげると成長している印象はあります。

ファネル機能で使う（初級〜中級者向け）

（和訳では「フィルター」となっている）「ファネル機能」は、Microsoft Clarity のイチオシ機能です。

Clarity には、GA4の「キーイベント」のようにコンバージョンポイントを「設定」画面から設定すれば、それを追っていけるような仕様とはちょっと異なります。「スマートイベント」として設定することは可能ですが、ファネル機能でユーザーが目標達成までに通過するステップを定義し、各ステップにおけるユーザー数を可視化できると効率的に分析しやすいです。

ファネル機能はユーザーの直線的な動線分析に使いやすいです。ウェブサイトにフォームがあったら、ぜひ使ってみてください。動画では、弊社の公式サイトにあるショッピングカートでのファネルを確認し、レコーディング機能で何が起きているのかを確認して考察するまでを説明しています。

カスタムフィルターを使う（中級者以上向け）

Clarity には、デフォルトで用意されているフィルター以外にも、カスタムフィルターを作成することができます。カスタムフィルターは、デフォルトのフィルターでは取得できないデータを分析したい場合に役立ちます。だんだん物足りなくなってくるんですよ。

カスタムフィルターには、汎用的に使えるカスタムタグ以外にも、ログインユーザーを分析しやすいカスタムユーザーID、カスタムセッションID、カスタムページIDのセットがあります。カスタムラベルもありますが、レコーディングの判別に使用するものなので、大別すると2種類のカスタムフィルターが使えます。

カスタムタグは、Googleタグマネージャー (GTM) を使用することで、簡単に設定することができます。取得したいデータを変数に設定すれば、Microsoft Clarity 公式タグの Custom Options に設定するだけ。

上記で設定しているカスタムタグの変数は、以下のページで説明していますので参考にどうぞ。

GA4と自動的に連携できているわけではないので、GA4用に設定した変数があれば Clarity にも使えますね(/･ω･)/

Microsoft Clarity のフィルターに関するよくある質問

ダッシュボードの右上と枠内に「フィルター」があるのですが？

「フィルター」は「絞り込み」の意味ですが、下記のような違いがあります。

英語版なら「Filters」「Funnels」になっているのですが、和訳がわかりにくいだけです……

コンバージョンページのURLが変わるのですが、Microsoft Clarity で取得する方法は？

正規表現を使って対応できます。

正規表現がわからない場合は、ChatGPT などに教えてもらいましょう。

「ページサイズを変更しました」というフィルターはどう使えば？

重要度は高くないため、参考程度で問題ありません。

「ページサイズを変更しました」という指標で絞り込んでみると、モバイルの割合が高いことがわかります。これにより、ユーザーが画面を（指で）拡大するような動きの可能性が考えられます。ユーザーにとってはコンテンツが小さいのかもしれませんね。スマホの縦横を変えたことが示唆されていますが、個人的には疑問が残ります。

ただし、Clarity の指標は定義が曖昧なものが多く、レコーディングを見て問題なければ気にする必要はありません。テキストを選択しながら読んでいる行動がデッドクリックとして見なされるのと同じようなものと考えておいても良いのではないでしょうか。

あまりに多いなら、表示されている文字が小さい可能性があります。また、画像を拡大しようとしたりする行動が見られるなら、視認性を改善する余地があるかもしれません。

クリックヒートマップで、デッドクリックのみを絞り込む方法は？

フィルターの一覧ではなく、クリックヒートマップ → クリックの種類から選択します。

ヒートマップを表示して、クリックの種類のドロップダウンメニューを開くと、「すべて」「停止（デッドクリック）」「激怒（イライラしたクリック）」「エラー」「最初（ファーストクリック）」「前回（ラストクリック）」などから選べます。

クリックの種類や意味は、以下の記事からどうぞ。

https://clarity.kosgis.com/blog/microsoft-clarity-seminar-03/#index_id6

カスタムタグを設定するには？

カスタムタグの設定には、Googleタグマネージャー（GTM）の使用が推奨されています。

Clarity 公式が提供しているGTM用のタグを設定することで、簡単にカスタムタグを取得できます。上記のカスタムフィルターの設定も合わせてご確認ください。変数でKPIを取れるといいですよね。

Microsoft Clarity のカスタムタグは、GA4 の連携できない？

Clarity と GA4 の連携は限定的です。

Clarity 上で GA4 のデータを見れるタブはありますが、フィルターやキーイベントの連携はなく、基本的な指標が見えるだけとなっています。当然、カスタムタグも GA4 とは連携できません。

2024年12月現在、Microsoft Clarity 公式ドキュメントGA4 Integration でも以下のように記載されています。高基数は「データがめっちゃ多いから (other) としてまとめとくわ」みたいな処理をされるほど値が多いこと（意訳）を指します。つまり、再生URLが膨大になると (not set) になってしまって意味がなくなるので、やめたそうなんですよね。

• Currently, Clarity doesn’t support segments in GA4.
  （現在、Clarity は GA4 のセグメントをサポートしていません。）
• Clarity doesn’t send playback URL to GA4 as it cannot accept High Cardinality rows.
  （Clarity は高基数の行を受け入れることができないため、再生 URL を GA4 に送信しません。）

「カスタム」がついている「カスタムイベント」はどうやって使うのですか？

スマートイベントで利用できます。

スマートイベントはコードを書かなくても使えますが、イベントAPIを使用することで自由にカスタマイズして設定できます。これが、「カスタムイベント」。

個人的に、カスタムイベントはウェブサイトよりもモバイルアプリでの活用シーンが多いんじゃないかと考えています。

Microsoft Clarity 勉強会の今後の予定

これで一連の Microsoft Clarity に関するノウハウはまとまったので、定期的な勉強会は一旦終わります。これまでの勉強会の内容は、以下をご参照ください。

はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第4回は「レコーディング」の機能を詳しく扱いました。まとめると、以下のような内容です。

レコーディング機能はユーザーの行動が録画されているものなので、実際に動いている画面を見ないことには「どういうこと……？」とわかりにくいかもしれません。勉強会でも動画で説明している部分が多いので、ヒートマップ同様、デモやご自身の Clarity の画面を実際に動かしてみてください。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

「レコーディング」機能で知っておきたいこと

実は、“録画” しているわけではない

動画として録画すると膨大なデータ量になってしまうため、ページとアクションの情報を記録して再現しているだけです。エコですね。ただしその分、時々情報が足りなくて読み込みがおかしかったり、コケることがあります。

Clarity session recordings aren’t video streams of users interacting with your site. Instead, this is how they work: Clarity records all the page information a user sees (the DOM content) and the actions they take as they browse your site. A session recording is an animation that captures all user actions across devices, such as mouse movements, clicks, scrolls, and more.

（意訳）Clarity のセッション録画は、ユーザーがサイトとやり取りしているビデオストリームではありません。その代わり、このように動作します：Clarityは、ユーザーがサイトを閲覧する際に表示するすべてのページ情報（DOMコンテンツ）とユーザーのアクションを記録します。セッション録画は、マウスの動き、クリック、スクロールなど、デバイスを介したすべてのユーザーアクションをキャプチャするアニメーションです。

via. Frequently asked questions | Microsoft Learn

だからこそ、一部の情報をマスク（秘匿）することができるのですよね。ほら、動画形式だとボカシとかモザイクになっちゃうじゃないですか。

データのマスク設定は最初にやっておくべし

Clarity には、個人情報などのデータを保護するマスク設定（データを秘匿する機能）があります。このマスク設定は、設定した時点から有効になるため、マスクしていなかったデータをあとからマスクすることはできないことに注意が必要です。マスクされていない情報は Microsoft に送信されることを認識しておきましょう。

フォームのデータはデフォルトでマスクされるため、最低限の個人情報保護はできています。しかし、確認画面でマスクされないことは少なくありません。特に、独自開発したツールなどは Clarity 側で自動対応できない場合が多いです。サイト内でフォームを使っている箇所は洗い出しておきましょう。

Q&Aでも言及していますが、一度取得したデータは最長13ヶ月は削除されないことも大きいです。

レコーディングの画面でできること

レコーディングのデータは簡単に時間を溶かしてしまうので、分析を効率化できる方法を知っておきましょう。

レコーディングの要約

Clarity のレコーディング機能は、特定のデータや上位10個までのデータを要約表示できます。長時間のデータや特定のセグメントをまとめて分析したい場合に役立ちます。

私（コスギ）は長時間のデータ（10分以上など）はセッション分析と合わせていますし、フィルタリングしたセグメントの精度が高ければまとめて要約してもらうこともあります。ただ、コンテンツと合わせて観察しているので「倍速で見たほうが結果的に早い」ということは少なくありません。

セッションリストの確認

レコーディングデータの一覧であるセッションリストでは、データの表示順を、日付の新しい順、ページ閲覧数、クリック数、セッション発生日時など、様々な条件で並べ替えることができます。これにより、特定のページを多く閲覧したセッションや、特定期間に集中したセッションなどを抽出できます。

また、セッションリストには、「ライブユーザー」として、現在サイトを閲覧中のユーザー情報もリアルタイムで確認できます。ライブユーザー情報では、直近5分間のデータが表示され、ユーザーID、地域、デバイスなどの情報が含まれます。

セッション情報とイベントタイムライン（詳細）

セッション情報では、選択したセッションのデバイス情報、行動データ（クリック数、ページビュー数など）、訪問経路（エントリーページ、離脱ページ、参照元）などの定量的なデータを確認できます。イベントタイムラインでは、ユーザーの行動を時系列で可視化し、各イベント（クリック、スクロール、ページ遷移など）がタイムライン上に表示されます。イベントの詳細情報として、イベント発生時間や対象要素などを確認でき、カスタムタグを設定している場合は、イベントタイムライン上で該当イベントを確認することができます。

レコーディングの再生（インラインプレイヤー）

選択したセッションのユーザー行動を動画として再生できます。再生速度の変更や任意の時点への移動、ヒートマップの表示などができます。これにより、スクロール速度や特定要素への滞在時間、マウスの動きなどを視覚的に把握できます。再生中には、デッドクリックや非表示ページへの遷移など、イベントの詳細情報が表示され、クリックすると該当イベント発生時点へジャンプできます。ヒートマップでは、再生中のセッションにおけるクリックの集中箇所を可視化します。

……なんて、画像で説明はしていますが、YouTube 動画の 8:18 頃から見たほうがわかりやすいです。

レコーディングを活用するコツ

機能そのものは、直感的にわかりやすくて理解しやすいですよね。ただ、活用するには「コンテンツの理解」と「ユーザーの理解」の両方が必要です。

レコーディングはセッションとユーザー単位で活用する

Clarity のレコーディングは、セッションとユーザー単位で分析することが重要です。ヒートマップはページ単位なので、補完関係にありますね。以下のようなポイントで使うことが多いです。

ユーザーがサイトに訪れてから離脱するまでの行動を時系列で追うことで、ページ単位での分析では見落とされる可能性のある、ユーザー体験上の問題を特定できるのが、このレコーディング分析の醍醐味。

たとえば、フォーム入力時の離脱や、CTAボタンのわかりにくさ、エラー発生時の行動などを、その前後の行動と関連づけて分析することで、改善策のヒントを得られます。よくA/Bテストをしているなら、使わない手はないでしょう。

レコーディングのデータを分析する流れ（コスギの例）

Clarity は問題発見ツールではなく、すでにある問題に対して解決策を探るツールです。つまり、定期的に観察するよりもアドホックな利用に適しています。そのため、最初は解決すべき問題の設定が重要です。

ページのスクショと気づいた点をメモして生成AIに分析を依頼してみても、得られる事があるかもしれません。

気づいた点をまとめて施策にし、優先順位を定める

YouTube 動画ではレコーディングを見ながらウンウンカンヌン言っているのをざっとお見せしてますが、気づいた点をまとめたものが以下です（クラリティ3分クッキング）

これを「すぐできる」「やるべき」の2軸に並べるとこうなりました。なお、の項目はすでに終わっています。

緊急度と重要度にまとめても良いですが、個人的にはそこにこだわってもしょうがないので、このくらいざっくりとしています。

「すぐ終わるなら、やらないよりやったほうが良い施策」は、拍子抜けするほど数字には表れません。道端の小石を拾うような作業なので、固執せずに粛々と進めましょう。

だからこそ、やるべき課題を見つけたら、KPIを設定してプロジェクトとして進めることが大切です。これは道を整備するようなものなので、しっかりと取り組みましょう。私の例でいえばコンテンツの追加なので、回遊ページが増えて滞在時間が伸びる、もしくはリピーターが増えることが想定されます。

公式のケーススタディも参考にしてください。すべて英語ですが、ページごと Google 翻訳にかければすぐに読めます。レコーディングを活用した事例は多いですよ。

Microsoft Clarity のレコーディングに関するよくある質問

ヒートマップの使い方とも重複するため、Microsoft Clarity のヒートマップに関するよくある質問も合わせてご参照ください。

Microsoft Clarity 勉強会の今後の予定

次回は Microsoft Clarity 活用のキモ、フィルターとセグメントを扱います。日本語環境だと「フィルター」は「絞り込み」と「ファネル機能」の2つがあるのですが、両方取り上げる予定です。

お申し込みは以下からどうぞ

7回目以降の勉強会、どうしようかな……？アーカイブなしの、ざっくばらんな質問雑談会にしましょうか。

はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第3回は「ヒートマップ」の機能について詳しく説明しています。まとめると、以下のような内容です。

動画では実際に動いている画面を紹介していますが、文章だけでは説明しにくい（特に機能説明の箇所は動画のほうがわかりやすい）ため、ご自身の Clarity の画面を実際に動かしてみてください。理解してから手を動かすより、手を動かしながらのほうが理解しやすいです。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

ヒートマップとは

Clarity における「ヒートマップ」とは

ウェブサイト上のユーザーの行動、特にクリックやスクロールの状況を、色や濃淡を用いた視覚的な表現方法です。 天気図のように、多くのデータを含む情報をわかりやすく表示するために用いられます。

Clarity では、主に3種類のヒートマップが提供されています。

• クリックマップ
  ユーザーがページ上のどの要素をクリックしたかを視覚化します。クリックの種類ごとに絞り込むことも可能です。
• スクロールマップ
  ユーザーがページをどの程度スクロールしたかを視覚化します。どの部分が読まれずに離脱されているかなどを分析できます。
• エリアマップ
  選択したエリア内での合計クリック数を視覚化します。特定のエリアにおけるクリック数を数値で把握できます。

Clarity のヒートマップならではの機能

クリック種類の絞り込み

通常のクリックだけでなく、「イライラしたクリック」「デッドクリック」「エラークリック」「最初のクリック」「最後のクリック」など、クリックの種類に基づいて絞り込み表示が可能です。 これにより、ユーザーの行動をより深く理解し、ウェブサイトの改善に役立てることができます。

ヒートマップの比較

異なるセグメント（例：1ページしか閲覧していないユーザーと複数ページ閲覧したユーザー）のヒートマップを比較することで、ユーザー行動の違いを分析できます。

スクリーンショットの変更

ヒートマップを表示する際のスクリーンショットを、過去の異なる時点のものに変更できます。 図のように、メニューが表示されてコンテンツが隠れているままだと（スクロールマップはともかくクリックマップで）分析しにくいため、この画面を変更することができます。

Copilot による要約 (Heatmaps Insights)

Microsoft の AI である Copilot（コパイロット）が、クリックマップとスクロールマップの両方の情報を分析し、ユーザー行動の要約と改善提案を提供します。

以上が基本機能ですが、大事なのはこれをどう活用するか、ですよね。

ヒートマップを活用するコツ

ヒートマップを活用するための最重要事項は、明確なCTAを定めておくことです。

CTAとは「Call to Action」の略で、直訳すると「行動喚起」を意味します。ウェブサイトやマーケティングにおいて、ユーザーに特定の行動を促すための要素のことを指しますが、簡単にいうと「そのページにアクセスしたからには、確実にクリックしてほしいリンク（ボタン）」のこと。

「今すぐ購入」「無料で試す」「詳細を見る」といったボタンやリンクを見たことはあると思いますが、これらが一般的なCTAです。これらは、ユーザーに次の行動を明確に示し、サイトの目的（商品の購入、会員登録、資料のダウンロードなど）に向けて誘導する役割を果たします。

ビジネスで Clarity を使うのであれば、成果につながる重要な要素としてCTAの定義は絶対です。一般的な文言で効果が出なければ、ユーザーとのマッチングを徹底的に考えてみましょう。

ヒートマップを活用できる、7つのポイント

ヒートマップは「閲覧ページ」単位で、以下の項目が基本です。資料請求フォームへ遷移するボタンや購入を促すボタンなど、「成果につながるボタン（リンク）のあるページ」のヒートマップを開いて確認してみてください。

ヒートマップを活用する際の注意点

ただ「面白い」だけでなく、「成果につながる」こと、そして「改善施策を実施する」ことが肝心です。好奇心のまま見ているだけではわかった気になるだけで、何の成果も得られません。当たり前のことですが、意外と盲点なんです……

ヒートマップの機能別・主な活用シーン

①クリックマップ：クリック率が低い要因を考える

Clarity のクリックマップで最優先で確認したいのは、CTAがクリックされているかどうかです。クリックしてほしいのにクリックされていない場合、ページ内のリンクの量と重要性、前後の文脈を見直しましょう。

ページを読んでくれたユーザーに対して、つい、アレもコレもとリンク先を増やしがちになってしまいますが、リンクの重要性が不明確な場合、ユーザーを混乱させてしまい、結果的にクリックされない可能性が高まってしまいます。次にどこに行けば良いのかがわかるよう、エスコートするくらいがちょうどいいのですよ。

また、周囲のコンテンツと関連性の低いリンクやボタン、特に、バナー画像のように作り込んでいると浮いてしまい、広告と見なされて無意識のままスルーされます。コンテンツの文脈に合わせて、自然なテキストリンクにしたほうがクリックされやすいことも少なくありません。

大きな変更でなくても効果が大きいので、小さくチャレンジしてみたいですね。

②スクロールマップ：スクロールされない要因を考える

ユーザーがページを訪れても、そのページの下まで読まれることは、そんなに多くはありません。

次のページへ遷移（回遊）したのか、ページを完全に離脱したのかで考え方が変わりますが、まずは Clarity のスクロールマップでCTAまでスクロールされているのか、されていないならどこでスクロール率が大幅に落ちているのかを確認しましょう。色が急に変わっている箇所がポイントです。わかりにくければ数値も合わせて確認しましょう。

特に、モバイル環境での最適化は、意外と見落としやすいです。バイアスに注意して、実機で確認しながら印象を確かめましょう（ほろ酔いくらいの思考力で見てみるくらいがちょうど良いかもしれません）。パソコンで見ているだけでは見落としてしまいがちなことも多いです。

スクロールされないコンテンツには、ページ内リンクも有効です。ブログの記事などには多く見かけるようになった、「目次」がその役割を果たしているといえるでしょう。

スクロールされないコンテンツは、ユーザーの導線として適切な場所にない可能性もあります。そのコンテンツがユーザーのどのフェーズで必要になるのか、考え直して配置換えするだけで、効果が出る可能性は十分にありますよ。

③エリアマップ：人気の項目からインサイトを考察

クリックマップを見てもわかりにくな、と思ったときに使っていただきたいのですが、「とはいえ、どうやって使えばよいのかわからない」という方は少なくない、このエリアマップ。ページ内の並列の要素それぞれの人気度を視覚的に把握するのに役立ちます。

エリアマップで重要なのは、要素の価値が並列であり、位置や文言が影響を与えにくいこと。Microsoft の公式では、Clarity のログイン方法として Microsoft アカウント・Google アカウント・Facebook アカウントの3つがあり、そのどれがクリックされているかをエリアマップで確認できる事例があります。

クリック率の高い要素と低い要素を比較することで、それらを選んだユーザーの背景から、コンテンツの改善に活かしましょう。コンテンツの提供者であれば「それが選ばれた意味」がわかるはずです。

④イライラしたクリック：クリック時の挙動を確認

イライラしたクリック（Rage Clicks）は、連続でカチカチしたクリックのことを指します。

イライラしたクリックのみに絞り込んで状況を確認してみると、問題があるかないか、すぐにわかります。何を当たり前のことをと思われたかもしれませんが、解析で「わかりやすく問題が見つかる」のはあまりないんですよ。

問題が起きている場合、文字どおりユーザーが「あれ？」という混乱と共にフラストレーションを高めています。

• ボタン（リンク）が反応しない
• 画像が拡大されない
• コンテンツの表示が遅い
• ポップアップ画面を閉じにくい
• スライダーやカルーセルが機能しない
• フォームの送信ボタンが機能しない
• 「もっと見る」ボタンが機能しない
• 「検索する」を押しても画面が変わったように見えない
• ドロップダウンメニューが正しく開かない
• フォームの入力欄にフォーカスしにくい

……一部、ずいぶん具体的なものもありますが、そういうことです。「イライラしたクリック」を観察することで、比較的カンタンにページの問題点を洗い出せますので、初心者さんはまずここから試してみてください。

なお、上記の画像にもあるとおり、文章を選択したり画面の端をカチカチしたりしながらコンテンツを読む方は一定数存在します。そのような場合は問題ではありません。ただ、問題ないことが多いと問題を見逃してしまうことには注意しましょう。

⑤デッドクリック：ユーザーの期待を考察

デッドクリック（Dead Clicks）は、リンクではないテキストなど、何も反応しないところのクリックのことを指します。テキストを選択されるときもデッドクリックと見なされやすいですが、そもそも反応を意図していないため、問題ないことも多いです。

では、どんなときに勘違いされて問題になりやすいかというと、以下のようなケースがあります。

• アクションを促されるのにクリックしても変わらない画像（「詳しくはこちら」などが入っている）
• 下線が入っていて、リンクのように見えるテキスト（何も起きない）
• サイトのヘッダーにあるロゴが、トップページへのリンクになっていない
• パンくずリストがリンクになっていない
• アイコンがクリック可能に見えるが、機能していない（白抜きになっているなど）
• 画像がクリックで拡大できそうに見えるが、拡大できない
• SNSのアイコンがクリックできず、ただのデザインになっている
• 製品名がクリック可能に見えるが、詳細ページへのリンクになっていない

……これも、ずいぶん具体的なものもありますが、そういうことです。デッドクリックに関しては、デザイン時には意図していなかったユーザーの行動に直面することがよくあります。レコーディング（録画）のデータも合わせ、めげずに改善していきましょう。

⑥最初のクリック：最初の興味関心ポイントを考察

「最初のクリック（First Click）」は、そのページに訪れた際に最初に興味を持ったポイントを直接的に示しています。

ユーザーがどのような情報に最も関心を持っているのか、具体的に把握することができます。例えば、多くのユーザーが最初に特定の製品カテゴリーをクリックしているのであれば、その製品への高い関心を寄せている可能性があるわけです。それが意図どおりのものでなければ、改善する糸口になりそうですね。

なお、この「最初」はあくまで訪問時なので、新規ユーザーと再訪ユーザー（リピーター）が存在していることに注意してください。

さらに、新規ユーザーとリピーターの行動を比較してみると、最初のクリックの位置が異なることがあります。

新規ユーザーは、ページの上から順に確認していく傾向があり、メニューや目次などの要素を最初にクリックする可能性が高いです。一方、再訪ユーザーは（以前の内容を覚えていて）特定の目的を持って訪れることが多いため、直接目的のコンテンツに向かう傾向にあります。

つまり、新規ユーザーには全体的な概要や導入情報をより目立つ位置に配置し、再訪ユーザーにはアクセスしやすいショートカットを提供するなどの施策が考えられます。他にも、新規ユーザーがアクセスするページ、再訪ユーザーがアクセスするページのそれぞれから、特定のページ内の需要の高い項目にリンクしておくこともできますね。

⑦最後のクリック：そのページの目的を果たせたかを考察

「最後のクリック（Last Clicks）」は、ユーザーがそのページでの目的を達成したか、あるいは別のページに移動する必要性を感じたかを示す重要な指標です。

例えば、特定の箇所に最後のクリックが集中している場合、その箇所がユーザーにとってページの「終点」と認識されている可能性があります。これが外部へのリンクではなく、CTAであってほしいところ。

ページの構成によりますが、最後のクリックがCTAではなく、他の要素に集まっているようなら、動線に改善の余地ありです。直接CTAにアクセスさせなくても良いのなら、そのための動線を確保しておきましょう。

また、最後のクリックが「関連商品」など、他の情報を知りたがっているようなら、その箇所のボリュームを増やすことで回遊を促せます。モバイルなら横スクロールで選べるようにしてもいいですよね。

サイト内での滞在時間を伸ばすことは、そのサイトの影響力を高めることになります。とはいえ、ムダにページを分けてもストレスを与えてしまうため、サイトマップをつくって適切な動線を設計しましょう。

公式のケーススタディも参考にしてください。すべて英語ですが、ページごと Google 翻訳にかければすぐに読めます。

Microsoft Clarity のヒートマップに関するよくある質問

<script>
if (!sessionStorage.getItem('landing_page_url')) {
  sessionStorage.setItem('landing_page_url', window.location.pathname);
  clarity("set", "landing_page_url", window.location.pathname);
}
</script>

Microsoft Clarity 勉強会の今後の予定

次回はレコーディング（録画）機能について解説しつつ、活用のポイントを見ていきましょう。

お申し込みは以下からどうぞ

はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。

無料で使えるユーザー行動分析ツール「Microsoft Clarity」の勉強会、第2回は「ダッシュボード」がテーマでした。「ダッシュボード」とは、複数のデータをひとつの画面にまとめて表示する機能のこと。まとめると、以下のような内容です。

ダッシュボードには Microsoft Clarity で使用している指標の（カスタムタグは除いた）すべてが入っているので、クラリティの機能を網羅できますよ。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

Microsoft Clarity の主要な指標と意味

基本的なパフォーマンス指標は、画面の上部にあります。

• セッション数
  ユーザーがウェブサイトに訪問した回数です。Microsoft Clarity では、ボットによるアクセスは除外されます。Google アナリティクス（GA4）とは数値が異なる場合があるので、どちらを基準にするかを決めておくことが重要です。私はクラリティの数値を見ています。
• セッション別のページ数（平均値）
  ユーザーが1回の訪問で閲覧したページ数の平均値です。「会社概要を見に来ただけ」「調べ物をしたらたどり着いた」「スマホで見つけたからあとでパソコンでじっくり読みたい」など、ユーザーの背景（インサイト）によって、訪問時に閲覧するページ数が大きく異なる場合があることを想定しておきましょう。
• スクロールの奥行き（平均値）
  ユーザーがページをどれだけスクロールしたかの平均値（％）です。 この数値が30%を下回る場合、画面の上部で次のページに遷移しているか、離脱しているかしているので、理由を調べてコンテンツを改善する必要があるかもしれません。
• アクティブに費やした時間（平均値）
  ユーザーが実際にページを閲覧していた時間の平均値です。 別のタブを開いている間などは閲覧時間としてカウントされません。 これはクラリティ独自の指標です。

これらの指標は、ユーザーがウェブサイトに訪問し、滞在したり回遊したりする際に重要な指標とされています。ただ、平均値は中央値とは限らないことには注意しましょう。アクティブに費やした時間の平均値が1分でも、数秒見ていたユーザーと、30分見ていたユーザーとに分かれていることも少なくありません。指標はひとつのみではなく、複数組み合わせて考えましょう。

Microsoft が公開しているベンチマークも合わせてどうぞ。あくまで参考として、「ここまではイケるんだな」くらいに思っておくのがオススメです。

Microsoft Clarity の各ウィジェットでわかること

ユーザー関連情報

1. ライブユーザー
   過去10分以内にウェブサイトにアクセスしたユーザーの数です。多少タイムラグはあるものの、リアルタイムで変化します。Microsoft Clarity を開いているときにアクセスがあると、お知らせもしてくれます。
2. 新規ユーザーとリピーター
   ウェブサイトへのアクセスが初めての新規ユーザーと、2回目以降のリピーターの比率です。新規ユーザーとリピーターは、アクセスに利用したデバイスが変わると、同一人物でも別人としてカウントされることがあります。理想的な比率は、ウェブサイトの目的や業種によって異なります。
3. 上位ユーザー
   セッション数が多い、つまりウェブサイトに何度も訪問している（ウェブサイトに興味や関心を持っていると考えられる）ユーザーです。上位ユーザーの行動を分析するには、ユーザーIDカードのようなアイコンをクリックしてみてください。いつ何回アクセスしているのかがわかります。

この「上位ユーザー」に関係者や自分自身が表示されないよう、事前に「設定」から関係者の除外設定を行っておきましょう。

インサイト機能

これは Microsoft Clarity 独自の機能なので過去にも説明していますが、とてもわかりやすく使いやすい指標です。

1. イライラしたクリック
   ユーザーが短い間に同じ場所を連続で「カチカチカチカチ」とクリック（タップ）している状態です。これは、ページの反応が遅い、リンク切れ、期待する動作をしないなどの問題を示している可能性があります。
2. デッドクリック
   ユーザーがリンク以外の場所をクリックしている状態です。ユーザーがテキストを選択してコピーする行動も含まれますので、デッドクリックの発生率は他の指標と比べて高めです。
3. 過剰なスクロール
   ユーザーがページを一気に最下部までスクロールしている状態です。 これは、ページが短すぎる、表示エラーが発生している、またはユーザーが目的の情報を見つけられずにスクロールを続けているなどの問題が起きていることに気づきやすいです。
4. クイックバック
   いわゆる「直帰」、つまりユーザーがページを開いた直後に前のページに戻ってしまう状態です。 これは、ユーザーがページを間違えたか、またはページの内容が期待と異なっていたことが原因として考えられます。

上記の項目から録画を確認することで、緊急性が高く対処もしやすい改善点を見つけやすいです。たとえば、「イライラしたクリック」の録画から、リンクがうまく動作していなかったことに気づいたり、「過剰なスクロール」の録画から、エラーページが表示されていたりなどがわかります。

トラフィック分析

このあたりは、GA4で馴染み深いかもしれません。

1. 参照元
   ユーザーがウェブサイトにアクセスする直前に閲覧していたウェブサイトのURLが表示されます。例えば、”https://www.example.com” のリンクをクリックしてウェブサイトにアクセスした場合、参照元は “www.example.com” となります。ウェブサイト内での回遊の場合は、自ドメインが表示されます。
2. チャネル
   参照元をいくつかのカテゴリに分類したものです。代表的なチャネルは以下の通りです。
   • Organic Search
     Google、Yahoo、Bingなどの検索エンジンからのアクセス。
   • Direct
     ブラウザに直接URLを入力してアクセスした場合や、ブックマークからのアクセス、メールやチャットツールなどのリンクからのアクセスなど、参照元が明確でないアクセス。
   • Referral
     X（Twitter）、FacebookなどのSNSや、他のウェブサイトからのリンクからのアクセス。
   • Other
     上記以外の参照元からアクセスがあった場合。
3. キャンペーン
   広告などの特定のキャンペーン経由でウェブサイトにアクセスした場合に、そのキャンペーン名がこの指標に表示されます。 Google 広告やYahoo! 広告などの広告キャンペーンを設定している場合に特に役立ちます。
4. ソース
   キャンペーンを設定していない場合は、参照元と同じ情報が表示されます。キャンペーンを設定している場合は、キャンペーンのソースに関する詳細情報（例えば、特定の広告グループやキーワードなど）が表示されます。

これらの指標を分析することで、どのチャネルから集客できているか、どのキャンペーンが最も効果的かなどを把握することができます。

Microsoft Clarity では、各チャネルや参照元ごとにヒートマップや録画を分析できるのが大きなメリット。たとえば、X（Twitter）から流入したユーザーを閲覧ページビュー数などで更に分類し、ウェブサイト内でどのような行動を取っているのかを具体的に把握することができます。

ユーザー環境分析

安定した運営を続けていれば、大きく変わることは（ほとんど）ありません。ユーザーの環境と提供側の環境とのギャップがあるか、ユーザーの環境で問題ないかを確認しておきましょう。

1. ブラウザー
   ユーザーがウェブサイトを閲覧する際に使用しているブラウザーの種類が表示されます。例えば、Google Chrome、Microsoft Edge、Apple Safari などです。制作者（提供者）は、自分たちが普段使用しているブラウザーとユーザーの使用ブラウザーが違う場合、ユーザーの使いにくさに意識が向きにくいことがあります。チェックしておくに越したことはありません。
2. デバイス
   ユーザーがウェブサイトにアクセスした際に使用しているデバイスの種類が表示されます。例えば、スマートフォン、パソコン、タブレットなどです。この3つの環境で見比べた際、大幅に低い指標を見つけたら、早めに改善しておきましょう。
3. オペレーティングシステム
   ユーザーが使用しているデバイスのオペレーティングシステム（OS）が表示されます。例えば、iOS、Android、Windows、macOSなどです。たいていの場合は気にしなくても問題ありませんが、エラーが発生した場合などに絞り込み条件として活用すると便利です。

人気コンテンツ分析

1. 人気上昇中のページ
   ページビュー数の多い順にページが表示されます。これにより、ウェブサイトの中で最もユーザーの注目を集めているページを簡単に把握することができます。ページの並び替えを逆にすることで、アクセス数の少ないページを把握することも可能です。
2. 人気の商品
   ECサイト内にある商品の、ページビュー数の多い順に表示されます。 ECサイト以外では、あまり利用する機会がない指標と言えるでしょう。

クラリティには基本的なパフォーマンス指標にページビュー数は含まれていませんが、サイト全体のページビュー数より、ページごとのページビュー数のほうが有益だと判断されているのでしょう。実際、ほとんど見られていないページには他のページからの動線がないことも想定されますので、閲覧を増やしたいページには動線を確保しましょう。

なお、「人気の商品」を表示させるには、商品スニペットの構造化データを追加することで対応できますが、Eコマース用のシステムに実装されている場合がほとんどです。Eコマース機能があるのに表示されないときは、以下の Google のドキュメントを参照してください。

パフォーマンス分析

ユーザーがウェブページを快適に表示できるかを把握できる「コアウェブバイタル（Core Web Vitals：CWV）」の指標を元に、ウェブサイト全体や個々のページのパフォーマンスを把握することができます。

1. パフォーマンスの概要
   Google の PageSpeed Insights (PSI) と同様の機能で、コアウェブバイタルの指標として、ウェブサイト全体のパフォーマンスを100点満点のスコアで確認できます。
   スコアは、「良い」「改善が必要」「良くない」の3段階で評価され、スコアをクリックすると、改善点に関する詳細情報が表示されます。
2. URLのパフォーマンス
   ページごとの PSI 結果をスコアで確認でき、スコアが低い順に並べ替えることができます。これにより、パフォーマンスの低いページを特定し、改善すべきポイントを絞り込むことができます。

これらの指標を分析することで、ユーザーが快適にウェブサイトを閲覧できるよう、パフォーマンスの改善に役立てることができます。Google がコアウェブバイタルを提唱したのが2021年の6月で、2024年3月以降、「FID」は「INP」に置き換わっていますが、クラリティでは「FID」が使われています。

「パフォーマンスを向上させる方法の詳細情報」から詳細を確認しようとしても英語のページなので、より深めたい方は、コアウェブバイタルそのものを確認することをオススメします。

JavaScript エラー

このウィジェットでは、ウェブサイトで発生している JavaScript エラーを確認できます。「クリックエラーのみを表示する」をオンにすると、ユーザー体験に悪影響を与えている可能性のあるエラーに絞り込むことができます。

エラーが発生した時のユーザーの行動は、録画で確認できます。エラー発生時にユーザーがデッドクリックなどをしている場合は、早急に修正する必要があります。また、パソコンでは問題なく表示されていても、スマートフォンでは読み込みが遅くなったり、表示が崩れていたりすることにも気づきやすいです。

とはいえ、JavaScript エラーは環境やタイミングによって再現しにくい場合が少なくありません。致命的なエラーが発生している場合を除き、JavaScript のエラー修正に固執するよりも、ウェブサイトの本質的な改善を優先する方が良いでしょう。

ダッシュボードで特殊なウィジェットを表示させるには

クラリティのダッシュボードには、デフォルトで用意されているウィジェット以外にも特殊なウィジェットがあります。

コンテンツウィジェット

コンテンツウィジェットは、ブログ記事などのコンテンツ（本文）に対するユーザーの行動を詳細に分析できる機能です。data-clarity-region="article" で囲まれた箇所が対象になり、対応しているCMSもあります。

1. 閲覧者の種類
   一度のセッションで何ページ閲覧したかによって、ユーザーを「一度で完了」「カジュアル」「重度」の3つの種類に分類します。
   • 一度で完了：1ページのみ閲覧
   • カジュアル：2〜3ページ閲覧
   • 重度：4ページ以上閲覧
2. 閲覧動作
   記事を最後まで読んだのか、途中で離脱したのかを「関与」「ヘッドラインで破棄」の2種類に分類します。
   • 関与：記事を最後まで読み終えた
   • ヘッドラインで破棄：ほぼ直帰（見出しを表示しただけ）

たとえば「カジュアル」で絞り込むと、3ページくらいは読んでいるのにコンバージョンに進まない、などのもどかしいユーザーのインサイトを探ることができます。ユーザーの行動を見ると、何度か来てくれていることがわかったりもするんですが。

なお、別タブで記事を開いているなど、アクセスしているのにアクティブになっていない場合は、「ヘッドラインで破棄」と判定されるのではないかなという印象はあります。公式ドキュメントは以下に。

ECウィジェット

Shopifyと連携し、ユーザーの購買行動を分析（ECサイト向け）できるウィジェットです。購入割合の指標は Shopify の Clarity プロジェクトにのみ対応しており、一般的なECサイトでは使用できません。また、Shopify Plus サイトの Clarity プロジェクトなら、購入完了前に離脱したユーザーを支払いステップごとに細かく絞り込むことができます。公式ドキュメントは以下に。

Shopify ユーザーなら使ってみる価値はありますが、個人的にはファネル機能（日本語では「フィルター」と表示されている機能）を設定することで似たようなウィジェットを作れると思います。以下も参考にどうぞ。

その他にも、レシピサイト向けのウィジェットや Hubspot との連携など、かゆいところに手が届くような改善が進んでいるので、今後もどんな機能が出てくるか楽しみですね。

おまけ：Clarity Copilot も始まっています

私の環境ではプライベートプレビューにアクセスできたので、Clarity Copilot の機能も使えています。

たとえば「過去7日間の、イライラしたクリックが一番高いページの具体的な改善例を教えて」と、時期を指定して具体的な回答を依頼すると、以下のような回答が返ってきます。録画やヒートマップを確認しやすくなりますが、もうちょっと、ページのコンテンツに合わせたアドバイスが欲しいところですかね。

過去7日間でイライラしたクリックが一番高いページは、こちらのページで、合計52回のイライラしたクリックが発生しています。以下に具体的な改善例をいくつか挙げます。

改善例

1. ページの読み込み速度を改善する:
   • 画像や動画の最適化
   • 不要なスクリプトの削除
   • キャッシュの利用
2. ユーザーインターフェースの改善:
   • ボタンやリンクの配置を見直し、クリックしやすい位置に配置する
   • フォームの入力フィールドを簡潔にし、必要最低限の情報を求める
3. コンテンツの明確化:
   • 重要な情報を目立たせるために、見出しや箇条書きを使用する
   • 誤解を招く表現を避け、ユーザーが求める情報を迅速に提供する
4. フィードバックの提供:
   • ユーザーがクリックした際に、即座にフィードバックを提供する（例：ロード中のインジケーターを表示する）
   • エラーメッセージをわかりやすく表示し、次に取るべき行動を示す

これらの改善を行うことで、ユーザーのイライラを軽減し、より良いユーザー体験を提供することができます。

公式ドキュメントは以下。

Microsoft Clarity のダッシュボードに関するよくある質問

Microsoft Clarity 勉強会の今後の予定

次回はヒートマップを徹底的に活用する予定です。

お申し込みは以下からどうぞ

はい、ごめんください。Microsoft Clarity（クラリティ）大好きコスギです。先日開催した、第1回 Microsoft Clarity 勉強会を記事化しました。内容は以下のとおりです。

実際の画面を触ってみたデモも動画にありますので、合わせて参考にしてください。Microsoft Clarity を知りたいのなら、実際にデモ画面を触ってみるのが一番です。登録なども不要ですし。

Clarity の活用サポートも行っています。勉強会は記事にまとめる意図もあって聴講スタイルですが、ワークをしながらのセミナーのほうが得意なので、一緒に画面を見ながら進めていきましょう。

Microsoft Clarity の基本：できること・注意点

Microsoft Clarity（クラリティ）は無料で利用できるユーザー行動分析ツールです。ホームページに訪れたユーザーの行動を詳細に把握し、改善に役立てるための機能が充実しています。

主な機能と活用方法

1. クリックヒートマップ
   ページ内のどこがクリックされたかを視覚的に表示します。 グローバルナビゲーションのクリック率や、ページ内の特定要素への関心の度合いを把握できます。
2. スクロールヒートマップ
   訪問者がページのどこまでスクロールしたかを色分けして表示します。 ユーザーが離脱しやすいポイントを把握し、重要な情報が適切な位置に配置されているかを確認できます。
3. エリアヒートマップ
   ページ内の特定エリアへのクリック率を分析できます。 クリックヒートマップでは散らばってしまうクリックデータを集約し、ボタンやバナーなどの要素に対する反応を正確に把握できます。 ただし、使いどころが難しい側面もあります。
4. レコーディング機能
   訪問者の実際の行動を動画で再現できます。 マウスの動き、クリック、スクロールなど、ユーザーがサイト上でどのように行動したかを詳細に把握できます。 レイジクリック（怒りのクリック）などの問題行動を発見し、改善につなげられます。
5. 多様なフィルター機能
   ユーザーの行動を様々な条件で絞り込み、分析できます。 レイジクリック、デッドクリック（無効なエリアへのクリック）、過剰なスクロール、クイックバック（短時間でのページ離脱）など、特定の行動パターンに絞り込んで分析できます。
6. AIによる自動要約
   MicrosoftのAI「コパイロット」が、ヒートマップやレコーディングデータの概要を自動でまとめてくれます。 ユーザー行動の概要把握、改善のアドバイスなどを提供します。 すべての分析結果が正確とは限りませんが、分析時間の短縮に役立ちます。

Clarity を導入する前の注意点は、以下の記事を参考にしてください。

Clarity と他ツールとの比較：GA4、サーチコンソールとの違い

Clarity と Google Analytics 4（GA4）、Google サーチコンソールとの違いを比較します。

定量データと定性データを、自社サイトの内外で評価しましょう。ユーザーインタビューやアンケートも大切なので、Microsoft Clarity を使う際には他のツールも合わせて使いましょう。視野が狭くなりかねません。

Clarity のインストールと設定：登録方法と設定項目

Microsoft Clarity の導入手順と設定項目について解説します。

アカウントを登録

Microsoft アカウント、Facebook アカウント、Google アカウントのいずれかを使用して登録します（Google アカウントでの登録が人気のようです）。

メールアドレス＋パスワードでの登録はできませんので、上記3つのどれかのアカウントが必要です。

インストール方法

アカウントを登録できれば、自社サイトに導入するのはそれほど難しくありません。ただ、ウェブサイトの管理権限がない場合は担当者（ウェブサイトの管理業者）にしてください。

WordPress ユーザーなら、Microsoft Clarity のプラグインをインストールするだけです。JavaScript でタグを設定することもできますが、管理画面で Clarity のデータも確認できるのでプラグインを使うのが間違いありません。

中級者以上なら、Google タグマネージャーを利用するのがオススメです。なお、タグマネージャーのテンプレートギャラリーには Clarity 用の非公式タグも存在しており、カスタムタグを使う際にちょっと便利です。以下の記事も参考にしてください。

設定を確認しておく

Clarity の「設定」で、以下をチェックしておくのがオススメです。

• Google アナリティクスとの連携
  GA4 のデータで絞り込めるまでには至っていませんが、基本的な指標を確認できるので設定しておきましょう。
• マスク設定
  フォームの入力内容は自動的にマスクされますが、確認画面やサンクスページなどで個人情報が含まれる可能性のある要素には、必ずマスク設定を行いましょう。
• IPブロック
  関係者のアクセスデータを除外するために、IPアドレスをブロックします。IPアドレス以外のブロック方法を検討する余地もあるんですけどね。
• Chromeアドオン「Clarity Live」
  Clarity の動作確認や簡易的な分析に役立ちます。入れておいて損はないかな、くらい。

Microsoft Clarity に関するよくある質問

Microsoft Clarity 勉強会の今後の予定

当初は、勉強内の内容をそのまま YouTube に掲載できれば良いなと思っていたのですが、想像以上にパソコンが追いつかないことがわかったことで、動画は撮り直しています。同様の方法で続けるのは再考の余地がありますが、テーマとしては以下の内容で行っていく予定です。