※この記事にはプロモーションが含まれています
「サイトのアクセス数はあるのに成果につながらない」
「ユーザーがどこで離脱しているのか分からない」
「Googleアナリティクスだけでは具体的な改善点が見えない」
僕はこれまで企業のWebサイトや自社メディアの改善を数多く経験してきました。そうした中で訪問ユーザーの気持ちになりきるには、サーチコンソールやGoogleアナリティクスだけでは限界がある、ということです。そこで役立つのが、Microsoftが提供する無料ヒートマップツール「Clarity」。
Clarityが凄いのは無料で使えるのにヒートマップとしての機能だけでなく、セッション録画まで見れるんです。訪問ユーザーがサイトをどんな風に閲覧しているか、どこをクリックし、どこで迷い、なぜ離脱したのか、感情的に共感できるんですね。アクセス解析に迷っている方でも、直感的に理解できるのが大きな特徴といえます。
この記事では、Clarityの導入から活用法までをざっくりと解説していきます。
目次
Microsoft Clarityとは？
Microsoft Clarityは、Microsoftが提供する無料のアクセス解析ツール。Webサイトの運営者が「ユーザーがサイト内でどう動いているのか」を直感的に理解できるように設計されています。
従来の解析ツール、たとえばGoogleアナリティクスでは「どのページが何回見られたか」「どの経路で流入したか」などの数値的な情報は確認できます。しかし「どこをクリックしたのか」「どの位置までスクロールしたのか」「なぜ離脱したのか」といった行動の理由までは把握するには限界があります。
Clarityがユーザーの感情レベルまで把握できるとする理由は、この「行動の可視化」にあります。代表的な機能として、以下の2つが挙げられます。
- ヒートマップ
ユーザーがどこをクリックしているか、ページのどこまで読んでいるかを色分けで表示。赤や黄色が「よく見られている部分」、青や緑が「見られていない部分」を示します。 - セッション録画
ユーザーがサイト内をどのように移動したのかを動画として確認できます。ページ遷移やスクロール、クリックの位置などがそのまま再現されるため「生の行動データ」を得られます。
これらを組み合わせることで、ユーザーの行動の背景から感情まで、深く洞察できるようになるんですね。
Clarityの導入方法
Clarityの導入はそれほど難しくありません。専門的な知識がなくても、10分ほどでセットアップできます。ここでは、登録からデータ確認までの流れを整理してみますね。
STEP
Clarityのアカウント登録
STEP
プロジェクト作成
プライバシーポリーに同意すると、プロジェクトを作成するウインドウが開くので、以下の情報を入力します。
- 名前（自分で分かりやすいものを設定）
- WebサイトのURL
- Webサイトの業種
入力が終わったら保存し、プロジェクトを作成します。
STEP
トラッキングコードを設置
Clarityから発行されたスクリプトコードを、自分のWebサイトの <head> タグ内に貼り付けます。コードは数行のシンプルなJavaScriptなので、コピー＆ペーストだけで大丈夫です。
ちなみに、Googleタグマネージャーを活用しているサイトならさらに簡単です。
STEP
データ収集を待つ
コードを設置して保存すれば準備完了です。
ただし、すぐにヒートマップや録画が表示されるわけではありません。Clarityがデータを収集して処理するまで、通常は数時間〜1日ほどかかります。
僕が初めて導入したときも「ちゃんと動いているかな？」と不安でしたが、翌日には数十件のセッション録画が反映されていました。もし2〜3日経ってもデータが反映されない場合は、コードが正しく設置されているか再確認するのがおすすめです。
ヒートマップの使い方と活用ポイント
Clarityの導入ができたら、ヒートマップを見てみましょう。ヒートマップを見れば、ユーザーがページのどこを見て、どこをクリックして、どこで離脱しているのかを「色」で直感的に把握できます。赤や黄色に近いほど注目度が高く、青や緑に近いほど注目されていないことを意味します。
Googleアナリティクスの数値では「離脱率が高い」という事実までは分かりますが、「どの位置でユーザーが興味を失ったのか」は見えません。ヒートマップを使えば、数字の裏側にあるリアルな行動を具体的に把握できるんですね。
分析したいサイトを選択したら、右上の三本線メニューをクリックすると、サイドメニューが開くので、「ヒートマップ」をクリックします。
パソコン、タブレット、スマホと、デバイスごとに確認できます。特にパソコンと、スマホでは、熟読しているところや、離脱ポイントがまったく違うので、ターゲットユーザーの属性がどんな行動をとるのか、リサーチ数と良いと思います。
ヒートマップの種類
Clarityのヒートマップには3種類あります。それぞれの特徴を理解すると、分析の幅が広がるので把握しておきましょう。
クリックヒートマップ
- ページ内でユーザーがクリックした場所を可視化
- ボタンやリンクが適切に使われているか確認できる
- 意図しない箇所（画像やテキスト）がクリックされていないかも分かる
スクロールヒートマップ
- ページのどこまでスクロールされているかを表示
- 下まで読まれていない場合、重要情報やCTAの位置を調整する判断材料になる
注意（アテンション）ヒートマップ
- マウスの動きや滞在時間を分析
- どのエリアに注意が集中しているかを把握できる
ブログ記事を分析するのか、ランディングページを分析するのかによっても違いますが、これらを日ごろから定点観測するだけでも、訪問ユーザーが何を求めて、何に期待し、そして、どんなことにガッカリしているのか、わかります。
ヒートマップ活用の具体例
では、実際にどのようにヒートマップを活用できるのかをコンサル先で成果を上げた具体例でご紹介しますね。守秘義務があるので、リアルな画面はお見せできないのですが、改善のヒントになると思います。
例1：CTAボタンの位置改善
あるサービス紹介ページで、スクロールヒートマップを確認したところ、訪問ユーザーの70％がページの半分までしか読んでいませんでした。しかし、CTAボタン（問い合わせボタン）がページ下部にしかなく、多くのユーザーが見ないまま離脱していたのです。
そこでCTAボタンをページ上部と中盤にも配置したところ、問い合わせ率が約1.5倍に増加しました。まあこれは、ヒートマップを見るまでもない改善ではあったのですが、クライアント様の意識は、それほど多くのユーザーが中盤までしか読んでいないことを、把握していなかったのですね。それはヒートマップを見なければわからなかったことです。
たったこれだけの改善で、1.5倍の問い合わせになるのですから、馬鹿にできませんよね。
例2：意図しないクリックの発見
ランディングページの分析をしているときに、クリックヒートマップで、本文中の「強調文字」がリンクのように何度もクリックされているのを発見したことがあります。もちろんそこはリンクではないので、ユーザーは「反応しない」ことにストレスを感じ、離脱の原因になっていることが想像できました。
そこで、強調文字にリンクを設けて、関連サービスへ飛ばしてみたんですね。そうしたら、関連サービスのページをしばらく閲覧して、ふたたびランディングページに戻ってきてくれたユーザーが現れました。より深く、サービスについて理解してもらえただけでなく、離脱率も改善しました。
例3：意外と熟読されていたコンテンツ
長い記事ページの場合、狙いとは違うところを熟読してくれているケースが多々、あります。下記は、当社の記事で、WEBサイトにおけるロゴの役割を解説した記事のアテンションヒートマップですが、「え、そこなんだ…」と意外に思った一例です。
ロゴサイズや種類について、メインで解説していたのですが、マーケティング的に意外と重要だけど補足的に加えたコンテンツが、記事の中でもっとも熟読されている部分だったんですね。
ヒートマップを使うときの注意点
ヒートマップは便利ですが、使い方を誤ると誤解を招くこともあります。僕が実務で意識しているポイントをまとめます。
- サンプル数を確保すること
データが数件しかないと、偏った結果になることがあります。最低でも数百セッションは集めてから分析するのがおすすめです。 - デバイスごとに見ること
PCとスマホではユーザー行動が大きく異なります。特にスマホユーザーが多いサイトでは、スマホ専用のヒートマップを確認することが欠かせません。 - 時間と共に変化することを意識する
ヒートマップはあくまで一定期間の行動を可視化したものです。新しいキャンペーンやデザイン変更を行った場合は、必ず比較して確認する必要があります。
セッション録画の使い方と分析法
Clarityのもうひとつの大きな特徴が「セッション録画」です。これはユーザーがサイトを訪問したときの操作を、動画で実況してくれる機能です。これが、ほんとにすごい。
スクロールの動き、クリックの位置、ページ遷移の順番などが記録されるので、まるでユーザーの肩越しから行動を覗いているかのように確認できます。数字では把握できない“リアルな動き”を知ることで、改善のヒントを直接得られるのが最大の強み。ひとりひとりの行動を観察するのは、とても面白いですし、ユーザー理解に役立ちます。
セッション録画で分かること
録画データからは、次のような行動を把握できます。
- ユーザーが迷っている箇所
→ 同じボタンを何度もクリックしている、リンクに見えない部分を押している - 離脱の瞬間
→ フォーム入力中に止まってそのまま離脱した、ページが読み込めずに閉じた - 予想外の行動
→ 広告や画像ばかりをクリックして肝心の本文を読んでいない - デバイス特有の操作
→ スマホでスクロールが急に止まる、タップ範囲が狭く操作しづらそうにしている
数値データだけでは「離脱率が高い」ことは分かっても、「なぜ離脱したか」は見えません。録画を確認することで、その理由が目に見える形で理解できます。
具体的な活用シーン
僕がこれまでにClarityの録画機能を使って得た改善事例をいくつか紹介します。
例1：フォーム離脱の原因を特定
あるBtoBサイトの資料請求フォームで離脱率が非常に高かったケース。録画を確認すると、多くのユーザーが「電話番号」入力欄で止まっていました。実は入力形式が厳密すぎて、全角入力でエラーが出ていたのです。こうしたケアレスミスは、意外とたくさんあるものです。
この入力制限を緩和したところ、フォーム完了率は大きく改善しました。もし録画がなければ、原因の突き止めまでもっと時間がかかっていたでしょう。
例2：スマホ操作の不便さを発見
ECサイトでスマホユーザーの録画を確認した際、ある共通した行動に気づきました。商品画像を拡大しようとして何度もタップしたりしているのですが、拡大されずにストレスを感じ、最終的に離脱していたのです。クライアント側は、操作性の悪さから、拡大できないほうが良いと考えていたのですが、もっと商品の細部を見たい、というユーザーのニーズが意外と多いことが推測できたんですね。
そこで、画像拡大機能を実装したところ、案の定、商品ページの滞在時間が増え、購入率も改善しました。
例3：リンク構造の問題を発見
録画を見ていると、時折、読み込みが遅くなっているデバイスがありました。ユーザーの環境によるものかとも思われましたが、通信環境を見ると「Mobilesafari」の場合だけ、遅くなっています。それで、よくよく調べてみると、特定のJS（JavaScript）が「Mobilesafari」の環境下で影響していることがわかりました。
最近は、デバイス幅も幅広いですから、レスポンシブ設計で表示させている場合、こうしたJSの読み込みエラーや、CSS崩れはいくつもの環境で確認しないとわからないケースがあります。古いスマホデバイスや、ブラウザでは表示できないこともあるので、制作側はできるだけ確認した方が良いですね。
効率的に分析するコツ
録画データは膨大に溜まるため、ただ眺めているだけでは時間がいくらあっても足りません。僕が実務で意識している効率的な分析のコツを紹介します。
- 直帰セッションを優先的に確認
→ 何が原因で最初のページから離脱したのかを探る - CV未達成のユーザーを確認
→ 購入や問い合わせに至らなかった理由を把握する - デバイス別に見る
→ スマホとPCでは操作が大きく違うため、分けて分析する - 共通点を探す
→ 1人の行動だけではなく、複数ユーザーの録画を比較して共通パターンを見つける
これらを意識するだけで、数十件の録画を見れば十分な改善ポイントが抽出できます。
セッション録画を使う際の注意点
便利な機能ではありますが、以下の点には注意が必要です。
- 入力内容は記録されない
個人情報保護の観点から、フォームに入力した内容は録画されません。ユーザーが入力欄で迷っていることは分かりますが、何を入力したかまでは確認できない設計になっています。 - 全セッションが保存されるわけではない
ランダムに抽出されたセッションが記録されます。そのため「たった1人の動き」にこだわりすぎず、あくまで全体の傾向を見ることが大切です。 - 通信環境の影響もある
ページが途中で止まったり遅延したりする場合、それが必ずしもサイトの問題とは限りません。ユーザー側の回線環境の可能性もあるため、複数の録画で傾向を確認する必要があります。
まとめ
ホームページやランディングページを本気で改善しようと思うと、アクセス解析の数字を追いかけるだけでは不十分です。数字の裏側にある「ユーザーがなぜそう動いたのか」その思考回路を理解してこそ、本質的な改善が可能になります。
Microsoft Clarityは、その「なぜ？」の仮説の精度を高くしてくれる強力な無料ツールです。
当社も、効率的に制度の高い改善をするためにClarityを導入してから、欠かせないツールとなりました。改善効果が見えるまでのスピード感には毎回驚かされます。しかも無料で使えるため、コストをかけずに導入できるのも大きな魅力です。
さらに詳細な分析をするには、Googleアンリティクス（GA4）を併用する必要がありますが、Microsoft Clarityだけでも相当なことがわかりますよ。ぜひあなたも、「ユーザーの思考回路を理解する」ことから始めてみましょう。