Microsoft Clarityのヒートマップ完全ガイド|使い方や見方、導入方法まで

当ページのリンクには広告が含まれています。

「Microsoft Clarityってどう使うのが正解?」
「画面をぱっと見たらややこしそうで拒否反応がでる…」
「導入したけど実務で全然活かせてない…」

Microsoft Clarityは、無料かつ無制限で使えるヒートマップツールです。クリックやスクロールといったユーザー行動を可視化することで、根拠に基づいたコンバージョン改善が見込めます。

福田卓馬

コンバージョンはたった0.2%改善するだけでも売上へのインパクトが大きいです。

この記事では、200社以上のSEO支援実績を持つEXTAGE株式会社が、Microsoft Clarityの画面の見方から使い方、具体的なコンバージョン改善の手順まで徹底解説します。

本記事でわかること
  • Clarityヒートマップで見える内容と、GA4との役割分担
  • ダッシュボード・各ヒートマップの見方とユースケース別の使い分け
  • CVRを実際に改善する4ステップの運用フロー
  • 導入手順とトラブル時(表示されない・ログインできない)の対処法

本記事を読めば、導入して終わりになりがちなヒートマップを使いこなせるようになるだけでなく、今すぐコンバージョン改善に踏み出せるようになるので、最後までご覧ください。

福田卓馬

サイト改善の全体像をまず押さえたい方は、Webサイト改善のガイドブックを無料でお受け取りください。

\無料でゲット!/

\60P超えのコンテンツを無料配布!/

Webサイト運営に悩む中小企業が、アクセスやコンバージョンを改善するためのポイントをまとめたコンテンツを無料配布!検索順位を上げてアクセスを増やす方法から、サイトデザインを改善して商品の購入やお問い合わせを増やす方法まで、成功事例含めて網羅しています。ぜひ無料で受け取って活用してください。

目次

Microsoft Clarityは無料で使えるヒートマップツール

Microsoft Clarityの公式トップページ
出典:Microsoft Clarity公式

Microsoft Clarity(マイクロソフト クラリティ)は無料で利用できるヒートマップツールです。

そもそもヒートマップとは?

Webサイト上のユーザー行動をデータ化して、サーモグラフィーのように直感的に視覚化した分析手法のこと。

ユーザーがクリックした場所や、ページをスクロールした深さ、領域ごとの見られている割合が確認できます。さらに、ユーザーの操作の録画を見られる「セッションリプレイ」も使えます。

ほかのヒートマップツールには、計測量や保存期間に制限があります。一方でMicrosoft Clarityは無料なのに制限がまったくありません。

項目Microsoft ClarityHotjar
(無料プラン)
料金完全無料無料/有料
計測上限事実上なし月35セッションまで
主要機能ヒートマップ
録画
GA4連携
ヒートマップ
録画
提供元MicrosoftHotjar Ltd.
※プラン仕様は変動するため公式ページで最新情報を確認してください。

月数十セッションしか録画できない無料プランでは、見たいページのデータがたまたま録画されていないケースが頻発します。

中小〜中堅企業のオウンドメディアやコーポレートサイトなら、Microsoft Clarityで十分です。

clarity ヒートマップの見方と使い方|各画面の操作方法

Microsoft Clarityでは、ダッシュボード・ヒートマップ画面・レコーディングといった画面の操作さえ覚えておけば十分です。

本セクションのポイント
  • ダッシュボードで見るべき主要指標
  • ヒートマップ画面の基本操作
  • レコーディング(セッションリプレイ)の活用

それぞれ詳しく解説します。

ダッシュボードで見るべき主要指標

ダッシュボードはClarityにログインしたあと最初に表示される画面で、サイト全体の異常値・改善余地を一目で把握できます。

すべての数値を把握するより、深掘りすべきページを発見するために活用しましょう。

初心者がまず見るべき指標を、実際の画面を用いつつ解説します。

→ スクショ:Clarityダッシュボード画面の上部メトリクス領域。「Sessions」「Dead clicks」「Rage clicks」「Excessive scrolling」の4指標が並ぶカードを赤枠で囲み、デッドクリック・レイジクリックのカードに矢印を引いて「最初に見るべき異常値」と注釈。アラート(赤色バッジや上昇トレンド)が出ている数値があればその指標を優先して構図に入れる

Clarityダッシュボードの主要メトリクス画面
指標見るべきポイント
①セッション数セッション数がゼロだと計測できていない可能性がある
②デッドクリック反応しないクリックが多すぎないか
③レイジクリック同じ要素が連打されていないか

とくに「デッドクリック」「レイジクリック」は、ユーザーがページ内で迷っているサイン。数値が高いページはコンバージョンを下げる原因になりやすく、改善候補になります。

アラートがでていたら、右横のレコーディングボタンをクリックして、対象ページを一覧で確認しましょう。

アラート発生時のレコーディング一覧表示

ヒートマップ画面の基本操作

ヒートマップを見るには、画面上部のヒートマップ(火のマーク)をクリックしましょう。

Clarityヒートマップ画面への遷移ボタン

ヒートマップの画面では、対象ページのURLを入力して「ヒートマップを表示」をクリックすると、クリック・スクロール・領域の3種類のヒートマップを切り替えて確認できます。

STEP
対象ページを開く

左メニューの「ヒートマップ」をクリックし、分析したいページのURLを入力します。

ヒートマップ画面で対象URLを入力する画面
STEP
ヒートマップの種類を切り替える

画面右上のタブで「クリック」「スクロール」「領域」を切り替えます。

クリック・スクロール・領域のヒートマップ切替タブ

同じページでも、種類によって読み取れる課題は別物なので、3種類すべて目を通しましょう。

3種類のヒートマップで読み取れる課題と、改善アクションの違いは以下のとおりです。

種類読み取れる課題
クリッククリックされないCTA
意図しない箇所のクリック
スクロールページのどこで読者が離脱しているか
読了率の急落地点
領域ファーストビュー
各エリアの注視率

クリックは「行動」を、スクロールは「読了の途切れ」を、領域は「注目の集中」を見るイメージです。

STEP
セグメントを切って深掘りする

左上の画面から、パソコン・タブレット・スマホといったデバイスごとの表示に切り替えられます。

デバイス別セグメント切替の画面

多くのWebサイトはスマホユーザーが多いので、一番左のモバイルを選ぶとユーザー目線のコンバージョン改善がしやすいです。

とはいえ、BtoB領域などパソコンの割合が高いWebサイトもあります。Googleアナリティクスのレポート>集客>トラフィック獲得でデバイスの比率を確認しておきましょう。

GA4でデバイス別の流入比率を確認する画面
福田 卓馬

「ページを開く→3種類のヒートマップを順番にチェック→セグメント切替」が基本の操作フローです。

レコーディング(セッションリプレイ)の活用

レコーディング機能は、実ユーザーのマウスの動き・スクロール・クリックを動画で再現できる機能です。

ヒートマップが「集計データ」なのに対し、レコーディングは「個別の行動」を見られるのが特徴。離脱の瞬間にユーザーが何をしていたかを、肉眼で確認できます。

使い方は、左メニューから「レコーディング」を選択します。

左メニューからレコーディングを選択する画面

画面左上にある「フィルタ」から「離脱が早かったセッション」「コンバージョンに至らなかったセッション」などに絞り込みましょう。

レコーディングのフィルタで離脱セッションを絞り込む画面

20件ほど目視するだけで、ヒートマップでは見えなかった迷いの瞬間が浮かび上がります。

ただし、全レコーディングを見ようとすると時間がいくらあっても足りません。

福田 卓馬

「離脱率が悪化したページ」「CV経路の途中ページ」など、改善仮説の検証目的で使うのが現実的です。

clarity ヒートマップの具体的な活用方法

ヒートマップは導入したはいいものの、使い方がわからないまま終わってしまいがち。実務で活かすには、何を見るかよりどんな課題をかかえているときに使うかを明確にしておくのがおすすめです。

ユースケースから逆引きできれば、機能を使いこなせるようになります。

本セクションのポイント
  • クリックヒートマップ|CTA改善や興味位置の把握に使う
  • スクロールヒートマップ|離脱位置や読了率の把握に使う
  • 領域ヒートマップ|ファーストビュー注視の把握に使う

それぞれ詳しく解説します。

クリックヒートマップ|CTA改善や興味位置の把握に使う

クリックヒートマップは、ページ内でクリックされた位置を色の濃淡で可視化する機能です。

CTAボタンが押されているか、または読者の興味がどこに集中しているかを判断するときに使います。

クリックヒートマップでクリック位置を可視化した画面

典型的に効くのは、次のような改善ニーズがあるときです。

クリックヒートマップが効く場面
  • CTAのクリック率が低く、配置や文言を見直したい
  • 記事内で読者がどこに興味を持っているか知りたい
  • リンクではない要素が誤クリックされている疑いがある

EXTAGE株式会社が支援した株式会社SPB様でも、クリックヒートマップの活用により、記事の冒頭・中間にCTAがなくユーザーが行き場を失っていたことが一目瞭然となりました。

福田 卓馬

CTAを記事冒頭・中間・最後の3箇所に配置し直すだけで、CV機会を取りこぼさない構造に変わりました。

スクロールヒートマップ|離脱位置や読了率の把握に使う

スクロールヒートマップは、ページのどこまで読まれているかを縦軸の到達率で可視化する機能。

「ユーザーが本文のどこで離脱しているか」を1ページ単位で特定できる唯一の指標です。

スクロールヒートマップでページ到達率を表示する画面

典型的なユースケースは以下の3つです。

スクロールヒートマップが効く場面
  • 記事の離脱率が高くて原因を知りたい
  • 記事のエンゲージメント率が低くて原因を知りたい
  • 読了率の高いポイントにCTAを置いてコンバージョンを増やしたい

具体的な見方は、画面右側に表示される「到達率」の数値と、ページ上の色グラデーション(赤→緑→青)を組み合わせて読むのが基本です。赤エリア(80%以上)は多くの読者が到達している箇所、青エリア(20%未満)はほぼ読まれていない箇所と判断します。

チェック手順は「ファーストビュー直後→各H2見出し直後→記事末尾」の順に到達率を確認するのが効率的です。

とくに到達率が10ポイント以上一気に落ちている箇所は、その直前のコンテンツに離脱原因があるサイン。リード文・見出し文言・段落の長さを優先的に見直します。

たとえば、ファーストビュー直後で到達率が一気に落ちているなら、リード文や見出しが検索意図とズレているサインです。

逆に、特定の見出しで読者が踏みとどまっている(到達率が高止まりしている)なら、そこに資料請求・問い合わせ・無料相談のコンバージョンを置くと成約に直結する可能性が高いです。

記事の読了率を計測して改善したい方は、読了率を改善する方法の記事もあわせてご覧ください。

あわせて読みたい
読了率とは?GA4での確認方法や読み方、滞在時間アップの7つのポイント 「そもそも読了率って何のこと?」「読了率が向上するとどのような効果があるの?」「PV数は徐々に上がってきたけど、問い合わせにはつながらない…」 Webサイトの分析時...

領域ヒートマップ|ファーストビュー注視の把握に使う

領域ヒートマップは、ページ内のどのエリアにユーザーの視線・操作が集まっているかをエリア単位で示す機能です。

ファーストビューの構成要素のうち、どれが本当に効いているのかを判定するときに重宝します。

領域ヒートマップでエリア別の注視を表示する画面

クリックヒートマップが「点」での可視化であるのに対し、領域ヒートマップは「面」で温度を見られるのが特徴。

たとえば、ファーストビューにメインビジュアル・キャッチコピー・CTAボタンを置いた場合、そのうちもっとも反応されているのはどれかを一目で比較できます。

福田卓馬

ファーストビューの改修ABテストを行うときの「効果がでる箇所」の事前あたりを付けるのにも使えます。

clarity ヒートマップで実際にCVR改善する流れ

ヒートマップはあくまで分析のためのツールなので、コンバージョンを改善するには、実際にコンテンツを改修する必要があります。

「Clarityを入れたのに成果がでない」という相談の大半は、ヒートマップではなく改善実装が止まっていることが原因です。

EXTAGE株式会社では、ヒートマップを起点にしたCVR改善を、以下4つのステップで標準化しています。

本セクションのポイント
  • ステップ1 分析基盤を正しい順序で構築する
  • ステップ2 ヒートマップでユーザー行動を可視化する
  • ステップ3 離脱ポイントから改善仮説を立てる
  • ステップ4 CTA配置と訴求文言を最適化する

それぞれ詳しく解説します。

ステップ1:分析基盤を正しい順序で構築する

分析基盤の構築には、GA4設定 → イベント計測の実装 → ヒートマップツール導入が必須です。「なぜその箇所で離脱しているのか」を判断するには、流入経路・直帰の裏付けとなるデータが必要になります。

STEP
GA4の初期設定とコンバージョン計測

GA4のプロパティを作成します。

画面左下の管理>イベント>キーイベントから、計測したいコンバージョンをキーイベントとして登録します。

GA4でキーイベントを登録する管理画面
STEP
Googleタグマネージャーでイベント計測を実装

GA4の「拡張計測機能」をオンにするだけで、スクロール(90%到達)・離脱クリック・サイト内検索などの基本イベントは自動計測されます。

GA4の基本的な設定方法から知りたい方は、Googleアナリティクス(GA4)の使い方の記事もあわせてご覧ください。

あわせて読みたい
Googleアナリティクスの使い方入門|画面の見方〜改善施策の立て方まで解説 「GA4を導入したけど、専門用語が多くてどこから見ればいいかわからない」「PV数やユーザー数は見れても、サイト改善にどうつなげればいいかわからない」「データを眺め...
STEP
Clarityを導入してGA4と連携

最後にClarityを導入し、GA4と連携。これでヒートマップ上に「コンバージョンしたセッション」「直帰したセッション」をフィルタリングできるようになります。

福田 卓馬

Microsoft Clarityだけだと、見えるデータが断片的になって、うまく施策に落とし込めません。

ステップ2:ヒートマップでユーザー行動を可視化する

分析基盤がそろったら、優先順位をつけてヒートマップを確認していきます。

「全ページを満遍なく見る」のは時間の浪費になるため、コンバージョンしやすく、流入が多いページから順番に深掘りしましょう。

EXTAGE株式会社が支援現場で実際に使っている優先順位は次のとおりです。

優先度対象ページ主に見るヒートマップ
フォーム前
料金ページ
クリック
スクロール
流入トップ10の記事スクロール
領域
その他必要時のみ

たとえば、GA4の「レポート>エンゲージメント>ページパスとスクリーンクラス」から、直近28日間の月間表示回数が上位10位の記事のうち、コンバージョンが極端に少ない記事を3つ特定するだけでも大きな成果です。

GA4のページパスとスクリーンクラスのレポート画面

月間PV上位10記事のうち、CTAクリック率が極端に低い記事を3つ特定するだけでも、改善対象は十分絞り込めます。

可視化の段階で「課題が大きいページ」をまず3〜5本ピックアップし、次のステップに進めましょう。

ステップ3:離脱ポイントから改善仮説を立てる

ヒートマップで離脱箇所を特定したら、なぜそこで離脱したのかという「仮説」を必ず言語化します。

仮説を立てずに改修すると、効いた要因がわからず再現性のない施策になってしまいます。

仮説立ての切り口は3つに絞ると整理しやすいです。

離脱仮説の3つの切り口
  • 検索意図とのズレ(タイトル・リード文の問題)
  • コンテンツの質(情報量・構成のわかりにくさ)
  • UI/UX(CTA配置・画像表示・テキスト密度)

たとえば、ファーストビュー直後で離脱が急増している場合、検索意図とのズレを最優先で疑います。

記事中盤の特定見出しで離脱しているなら、そのセクションの構成・情報量を見直す。仮説の切り口を分けることで、打ち手が明確になります。

直帰率の改善観点もあわせて押さえておきたい方は、直帰率を改善する方法の記事を参考にしてみてください。離脱との連携理解が深まります。

あわせて読みたい
直帰率改善の方法5選!平均値や高すぎる原因まで徹底解説 「自社サイトの直帰率が高いのか低いのか分からない」「直帰率を改善したいけど何から手をつければいいだろう?」 直帰率の数字だけに一喜一憂し、手当たり次第に改善策...

ステップ4:CTA配置と訴求文言を最適化する

仮説が立ったら、CTA配置と訴求文言の改修にとりかかります。

EXTAGE株式会社の支援現場でとくに効果が高いパターンを紹介します。CTAを記事冒頭・中間・最後の3箇所に配置し、文言を「ベネフィット訴求型」に刷新する方法です。

具体的な改善ポイントは以下のとおり。

改善ポイント内容
配置場所記事冒頭・中間・最後の3箇所
文言の方向性行動誘導型→ベネフィット訴求型に刷新
UIスマホで見やすい・タップしやすいサイズ
緊急性「今なら限定特典」など期間訴求の追加

株式会社SPB様の支援では「LINE登録はこちら」というテキストを「無料で恋愛コミュニケーションの秘訣を学ぶ」に刷新しました。ベネフィットを訴求したことで、月間CV数が1〜5件から40件まで伸びました。

福田卓馬

「ボタンの場所と文言」を変えるだけで、CV数が一桁変わるケースは珍しくありません。

サイト全体の集客改善まで踏み込みたい方は、ホームページで集客できない原因と改善法の記事もあわせてご覧ください。CTA改善の上位文脈である集客改善の全体像を学べます。

あわせて読みたい
ホームページで集客できない原因11選|改善ロードマップと成功事例 「ホームページを作ったのに問い合わせが全然ない…」「ブログを書いてもアクセスが増えない…」「検索しても、同業他社ばかりで自社が出てこない…」 ホームページの集客...

clarity ヒートマップを活用したサイト改善の実績

EXTAGE株式会社では、Microsoft Clarityのヒートマップを軸にサイト改善を進めています。複数の支援先で大幅なCVR改善を実現しました。

「ヒートマップ単体ではCVRは上がらない」スタンスで、改善実装まで踏み込んだ運用がポイントです。

本セクションのポイント
  • マッチングアプリ系メディアでCVR 10倍/月CV 40件達成
  • スクール事業で4ヵ月で月間4,000PV・LINE登録月15件達成

それぞれ詳しく解説します。

株式会社SPB様|CVR10倍にアップ

株式会社SPB様の支援では、Microsoft ClarityのヒートマップとGA4イベント計測で、コンバージョンへの導線を可視化し、CTA配置とコンテンツ構造を最適化しました。

結果として、CVRを0.1%から1%超に約10倍引き上げ、月間コンバージョン数を1〜5件から40件まで伸長させました。

指標Before
(支援前)
After
(支援後)
CVR0.1%1%超(約10倍)
月間CV数1〜5件40件(約8〜40倍)
CTA文言LINE登録はこちら無料で恋愛コミュニケーションの秘訣を学ぶ
CTA配置記事末尾のみ記事冒頭・中間・最後の3箇所

支援前のSPB様は、記事の最後にしかCTAが配置されていませんでした。最後まで読み切ったユーザーしかCTAを目にできない構造になっていたのです。

ヒートマップで読了率の実態を見ることで、初めて「途中離脱で取りこぼしているCV機会」が数値として可視化された形です。

支援前の課題
  • CVR 0.1%・月CV 1〜5件で停滞、改善の打ち手が見えない
  • 記事末尾のみCTA配置で、途中離脱ユーザーを取りこぼしていた
  • 「ユーザーがどこで興味を失っているか」が言語化できていない

EXTAGE株式会社は、まずヒートマップとGA4イベント計測の基盤を整え、離脱ポイント・成約率の高い記事の特定から着手しました。

続いて、CTAを記事冒頭・中間・最後の3箇所に配置し直し、訴求文言を「行動誘導型」から「ベネフィット訴求型」に刷新。

スマホで見やすいボタンサイズへの最適化と、緊急性訴求も同時に実装しました。

支援後の成果
  • CVRが0.1%から1%超へ約10倍に改善
  • 月間CV数が1〜5件から40件へ最大40倍に伸長
  • 「離脱ポイント」「興味を失う箇所」が組織で初めて数値化された

「ヒートマップで気づきを得る」だけで終わらず、CTA改修・文言刷新・UI調整を同時に走らせたことが、CVR一桁改善のレバーになっています。

株式会社GRIID様|LINE登録月15件達成

株式会社GRIID様は、ClarityヒートマップとGA4の分析基盤構築を起点にメディアを立ち上げました。支援開始から4ヵ月で月間4,000PV、SEO経由のLINE登録コンバージョンを月15件まで獲得しています。

指標Before
(支援前)
After
(支援後)
月間PV0(ブログなし)4,000PV(4ヵ月)
7,000PV(6ヵ月)
SEO経由LINE登録0件月15件
(4ヵ月時点)
分析基盤未整備GA4・ヒートマップで離脱・コンバージョン導線を可視化

ヒートマップを導入しただけでなく、毎月の定例MTGで細かくデータを分析。ユーザー行動をチェックして改善を進めたことで成果がでました。

担当者様からは「記事単位でどこで離脱しているのか、どこがクリックされているのかを細かく見られるようになった」とのお声をいただきました。

福田卓馬

「ゼロから4ヵ月で月15件のCV」というスピード感は、分析基盤を最初に正しい順序で組んだからこそ実現できた成果です。

成功事例に共通しているのは、ヒートマップで得られた気づきを生かし、CTA改修からコンテンツの見直しまで同じ担当者が一気通貫で実施していることです。

とはいえ「自社で改善実装まで回しきる自信がない」「ヒートマップを入れたが施策に落とし込めない」という方も多いはず。

そんな方は、EXTAGE株式会社のSEOコンサル無料相談をご活用ください。200社以上の支援実績をもとに、御社のサイトに合わせた改善方針を整理します。

福田卓馬

「ヒートマップから先の施策が止まっている」状態を、まずは無料相談で言語化するところから始めましょう。

\初回無料/

\60P超えのコンテンツを無料配布!/

集客に悩むBtoB企業が、リード獲得するためのポイントをまとめたコンテンツを無料配布!マーケティング投資の判断から戦略立案、コンテンツ改善のポイントまで網羅しています。ぜひ無料で受け取って活用してください。

clarity ヒートマップの導入方法【4ステップ】

まだMicrosoft Clarityを導入できていない方でも、Microsoftアカウントさえあれば最短10分で設定が完了します。手順を4ステップに整理しました。

本セクションのポイント
  • アカウントの作成
  • プロジェクトの作成とサイトURL登録
  • トラッキングコードの設置
  • Googleアナリティクス(GA4)との連携

それぞれ詳しく解説します。

STEP1:アカウントの作成

Microsoft Clarity公式サイトにアクセスし、画面右上にある「サインアップ」をクリックします。

Microsoft Clarity公式サイトのサインアップ画面

Microsoftアカウント以外にも、FacebookやGoogleアカウントでもログイン可能です。

社内で複数人が管理するなら、個人のアカウントではなく会社用の共通アカウントを用意しておきましょう。

Microsoftアカウントなどでログインを選択する画面

STEP2:プロジェクトの作成とサイトURL登録

ログインしたら、トップページで「使い始める」をクリックします。

Clarityのトップページで「使い始める」を表示する画面

ポップアップが表示されるので、Webサイトの名前・URL・業種を入力して、新しいプロジェクトを作成します。

新規プロジェクトの作成ポップアップ画面

プロジェクト名・サイトURL・サイトのカテゴリの3項目を入力するだけで完了です。

STEP
プロジェクト名を入力

サイト名はわかりやすい命名にします。複数サイトを運用するなら「会社名_サイト名」など識別しやすい形が無難です。

STEP
サイトURLを入力

計測したいサイトのトップページURLを入力します。サブドメインを含む場合は、計測範囲もあわせて確認しておきましょう。

STEP
サイトカテゴリを選択

業種を選択して「Add new project」をクリック。プロジェクトが作成され、トラッキングコードの取得画面に遷移します。

STEP3:トラッキングコードの設置

Microsoft Clarityでデータを計測するには、Webサイトに計測タグを設置する必要があります。

計測タグの設置方法は3つあるため、サイトの環境に応じて選択しましょう。

設置方法向いているケース
WordPressプラグインWordPressサイトで最短に終わらせたい
Googleタグマネージャー(GTM)すでにGTMで他タグを管理している
直接コード設置独自CMS/HTMLサイトを使っている

WordPressサイトで運用しているなら、Microsoft Clarity公式の専用プラグインを使うのがもっとも簡単です。

プラグインをインストールしてプロジェクトIDを入力するだけで設置完了。直接<head>タグに貼る必要はありません。

<!-- Microsoft Clarity 計測タグ(直貼りの場合は</head>直前に設置) -->
<script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "YOUR_PROJECT_ID");
</script>

設置後、Clarity管理画面の「Setup」タブで計測ステータスが「Tracking」に変われば成功です。

反映までは数分〜2時間程度かかるのが一般的なので、即時表示されなくても焦らずに待ちましょう。

STEP4:Googleアナリティクス(GA4)との連携

最後にGA4と連携させて、Clarity上で「コンバージョンしたセッション」「直帰したセッション」を分けて閲覧できるようにします。

これでヒートマップ分析の精度が一気に上がります。

STEP
Settingsから「Integrations」を開く

対象のプロジェクトにログインします。

画面上部メニューの「設定」をクリックしたあと、次の画面で左メニューから「セットアップ」を選択してください。

Clarity設定画面でセットアップを開く画面
STEP
対象GA4プロパティを選択

Googleアカウントで認証し、連携したいGA4プロパティとデータストリームを選択します。

STEP
連携完了を確認

連携完了後、ヒートマップ画面のフィルタに「コンバージョンユーザー」「直帰ユーザー」などのGA4側セグメントが表示されるようになります。

福田 卓馬

連携できると、Clarityが「単独のヒートマップツール」から「CVR分析プラットフォーム」に格上げされます。

よくある質問

clarity ヒートマップの使い方を実務で活かすコツは?

CV直前ページと流入トップ10記事に絞って見るのが鉄則です。全ページを満遍なくチェックする運用は時間が足りなくなり、結果的に分析が止まります。

具体的な活用ステップは、本文「clarity ヒートマップの具体的な活用方法」のセクションで解説しています。あわせて「clarity ヒートマップで実際にCVR改善する流れ」もご確認ください。

clarity ヒートマップの見方が難しい場合の押さえどころは?

「赤い箇所=注目/青い箇所=見られていない」の2色原則から覚えるのがおすすめです。クリック・スクロール・領域いずれも、赤→緑→青のグラデーションで温度を表現しています。

慣れてきたら、ファーストビュー直下のスクロール率と、CTA周辺のクリック密度の2点だけを見るルールにすると、判断が早くなります。

Microsoft Clarity ヒートマップは導入してからどのくらいで反映される?

通常数分〜2時間程度で初回データが反映されます。タグ設置直後にすぐデータが見えなくても、しばらく時間を置けば計測が始まっているケースがほとんど。

2時間を超えても反映されない場合は、トラッキングコードの設置ミスや他プラグインとの干渉を疑い、Setup画面で「Tracking」ステータスを再確認してください。

Microsoft Clarityはプライバシー的に問題はない?

公式仕様としてGDPRとCCPAに準拠しており、入力フォームのテキストやパスワードは自動マスキングされる設計です。

とはいえ、サイトによってはCookie同意バナーやプライバシーポリシーの記載追加が必要になります。法務・コンプライアンス部門がある組織では、導入前に運用ルールをすり合わせておくと安全です。

clarity ヒートマップが表示されない・見れないときの対処法は?

「Tracking」ステータスの確認・タグ二重設置のチェック・対象URLの再入力の3点を順番に試してください。多くのケースはこのいずれかで解消します。

まずClarityの「Setup」画面で計測ステータスが「Tracking」になっているかを確認し、次にWordPressプラグイン+直貼りの両方で設置していないか(タグ二重設置)をチェック、最後にヒートマップ画面のURL入力欄でhttp/httpsの指定間違いを見直します。それでも解消しない場合は、ブラウザ拡張(広告ブロッカー)が計測タグをブロックしている可能性があるため、シークレットモードで再アクセスして検証しましょう。

Microsoft Clarityにログインできないときはどうすれば?

サインアップ時と同じ認証方法(Microsoft/Google/Facebook)でログインしているかを最初に確認してください。別プロバイダで再ログインしようとしている誤りが、もっとも多い原因です。

パスワード忘れの場合は、各プロバイダ(Microsoft・Googleなど)のパスワードリセットを行えば復旧します。共有アカウントで管理者が変わったケースなら、組織内でアクセス権を引き継ぐ手順も確認しておきましょう。

clarity ヒートマップはGA4と併用すべき?役割分担は?

GA4は「数値ベースの全体傾向」、Clarityは「ページ内のユーザー行動の質」を担う役割分担で併用するのが正解です。どちらか片方では分析が片手落ちになります。

GA4の使い方をより詳しく知りたい方は、Googleアナリティクス(GA4)の使い方の記事をご覧ください。

あわせて読みたい
Googleアナリティクスの使い方入門|画面の見方〜改善施策の立て方まで解説 「GA4を導入したけど、専門用語が多くてどこから見ればいいかわからない」「PV数やユーザー数は見れても、サイト改善にどうつなげればいいかわからない」「データを眺め...

clarity ヒートマップとサーチコンソールはどう組み合わせる?

サーチコンソールで「流入クエリと検索意図」を、Clarityで「流入後の行動」を見る使い方が王道です。両者を突き合わせれば、検索意図とコンテンツのズレを特定できます。

サーチコンソールの初期設定から知りたい方は、サーチコンソール設定方法の記事をご覧ください。

あわせて読みたい
サーチコンソールの設定方法を5ステップで解説【初心者向け】 「サーチコンソールの設定って難しそう…」「専門用語が多くてどこから手をつければいいか分からない」 サーチコンソールはWebサイトの改善には絶対必要なツールなのです...

clarity以外におすすめのサイト改善ツールはある?

GA4・サーチコンソール・PageSpeed Insightsの3点セットに、Clarityを足すのが王道。これだけでサイト改善の8割は回ります。

サイト改善に役立つ他のツールも把握したい方は、SEOツールおすすめの記事をご覧ください。用途別にツールを整理しています。

あわせて読みたい
【2026年最新】SEOツールおすすめ比較18選|失敗しない選び方と活用事例 「SEOにはどんなツールが必要?」「高額な有料ツールは必要なの?」「自社に必要なツールの選び方を知りたい…」 SEO対策に取り組みはじめたものの、ツールはどのくらい...

Microsoft Clarityは無料で使える強力なツールですが、「導入して終わり」では成果は出ないのが現場のリアルです。

ヒートマップで気づきを得たあと、CTA配置・訴求文言・コンテンツ構造の改修まで一気通貫で回しきる体制が必要。そこまでやってはじめて、CVRは数倍単位で動きます。

本記事を参考に、サイト改善のPDCAを回す次のステップとして、Webサイト改善のガイドブックもあわせてご活用ください。

基礎から実践まで、改善の進め方を網羅的にまとめています。

福田卓馬

「ヒートマップから先の改善打ち手をまとめて学びたい」方は、ぜひ無料で受け取ってみてください。

\無料でゲット!/

\60P超えのコンテンツを無料配布!/

Webサイト運営に悩む中小企業が、アクセスやコンバージョンを改善するためのポイントをまとめたコンテンツを無料配布!検索順位を上げてアクセスを増やす方法から、サイトデザインを改善して商品の購入やお問い合わせを増やす方法まで、成功事例含めて網羅しています。ぜひ無料で受け取って活用してください。

監修者
福田 卓馬
EXTAGE株式会社 代表取締役社長
SEO歴10年。上場企業を含む200社以上のSEO・Webマーケティング支援を実施。KADOKAWA社より『文章で金持ちになる教科書』『Webライターが5億円稼ぐ仕組み』を出版。
>>詳しいプロフィールはこちら