絞れば、出てくる、アイディア。

Microsoft ClarityのWordPressサイト・ブログへの導入方法と使い方

Microsoft Clarityの
WordPressサイト・ブログへの導入方法と使い方

Google AnalyticsやGoogleサーチコンソールは使っているけれど、「ヒートマップツール」はまだ使ったことがない、という方は意外と多いのではないでしょうか。

私自身も、ブログ運営を始めた頃はアクセス数やクリック数といった「数字」ばかりを追いかけていて、読者の方が実際にページの中でどう動いているのかまでは見えていませんでした。

今回ご紹介する「Microsoft Clarity(マイクロソフト クラリティ)」は、そんな方にこそ試してほしい無料のヒートマップツールです。

この記事では、Clarityがどんなツールなのかという基本から、WordPressサイトへの導入方法、実際の見方までを、初めての方でも迷わず進められるように解説します。
ぜひ参考にしてみてください👀

↓ブログ運営者必見!ブログのPV(ページビュー)を確認する方法はこちら↓

1. Microsoft Clarity(マイクロソフト クラリティ)とは?

Microsoft Clarity

Microsoft Clarity(マイクロソフト クラリティ)は、Microsoftが提供している無料のユーザー行動分析ツールです。

名前の通りMicrosoft社が開発・運営しているサービスで、有料プランは用意されておらず、機能制限なく無料で使い続けられるのが大きな特徴です。

「Google Analyticsやサーチコンソールと何が違うの?」と思われるかもしれませんが、簡単に言うと役割が異なります。

  • Google Analytics/サーチコンソール:
    何人来たか、どのページが見られたか、どんな検索キーワードで来たかという「数字」を見るツール
  • Microsoft Clarity:
    訪れたユーザーが実際にページの中でどこをクリックし、どこまでスクロールし、どんな動きをしたかという「行動」を見るツール

Google Analyticsやサーチコンソールで「どのページが伸びているか」を把握したあと、「そのページの中で読者が実際にどう動いているか」を確認するのがClarityの役割です。

この2つは競合するツールではなく、組み合わせて使うことでサイト改善の解像度がぐっと上がります。

2. Clarityでできること

Clarityにはさまざまな機能がありますが、まず知っておけば十分なものを3つに絞ってご紹介します。最初からすべての機能を覚える必要はありません。

2-1. ヒートマップ分析

ページ内でユーザーがどこをクリックしたか、どこまでスクロールして読んだかを色の濃淡で可視化してくれる機能です。

「せっかく書いた記事の後半が全然読まれていない」「クリックしてほしいボタンがスルーされている」といった気づきが、感覚ではなくデータとして見えるようになります。

ヒートマップ分析

ヒートマップ分析の具体的な使い方については記事の後半で詳しく紹介します。

2-2. セッションレコーディング

実際のユーザーの操作を録画のような形で再生できる機能です。

ヒートマップが「全体の傾向」を見るものだとすると、レコーディングは「一人ひとりの動き」をそのまま追体験できるイメージです。

↑セッションレコーディングの画面(例)
画面上に再生ボタンが表示され、実際のユーザーのマウスの動きやクリックを確認できます。

2-3. ダッシュボードでの分析

Dead click(反応がないのに押されたクリック)やRage click(同じ場所を連打するクリック)といった、ユーザーのストレスサインを自動で集計してくれる機能もあります。

数値として一覧できるので、どのページから優先的に見直すべきかの判断材料になります。

ダッシュボードの画面(例) 「イライラしたクリック」や「デッドクリック」、「過剰なスクロール」などユーザーエクスペリエンスに関する指標を確認できます。

↑ダッシュボードの画面(例)
「イライラしたクリック」や「デッドクリック」、「過剰なスクロール」などユーザーエクスペリエンスに関する指標を確認できます。

3. Clarityの始め方(アカウント登録〜プロジェクト作成)

Clarityのアカウント登録からプロジェクト作成までの流れを解説します。

① アカウントを登録(サインアップ)する

Clarityのトップページで「使い始める」をクリックする

↑Microsoft Clarityの公式サイトにアクセスし、「使い始める」から登録を進めます。Microsoftアカウント(またはGoogleアカウント)があれば、それを使ってすぐに始められます。

「Clarityでサインアップする」と言う画面が表示されたら、Microsoft・Facebook・Googleのいずれかのアカウントでサインアップします。

↑「Clarityでサインアップする」と言う画面が表示されたら、Microsoft・Facebook・Googleのいずれかのアカウントでサインアップします。

② プロジェクトを追加する

アカウントのサインアップが完了したら、計測したいWEBサイトの情報を入力してプロジェクトを作成します。

↑アカウントのサインアップが完了したら、計測したいWEBサイトの情報を入力してプロジェクトを作成します。

WEBサイトの名称、URL、種類を入力して「新しいプロジェクトを追加する」をクリックします。

WEBサイトの情報を計測するためには「計測コード」の設置が必要です。

今回は「WordPressにプラグインを追加」してインストールする方法を紹介します。

4. WordPressサイトへの設置方法【プラグインを利用】

ここからは、実際にWordPressで作成したWEBサイトへ「プラグイン」を利用してClarityを導入する方法をスクリーンショット付きで紹介します。

まずはClarityをインストールしたいWordPressにログインし、画面左側メニューのプラグイン→プラグインの追加をクリックします。

↑まずはClarityをインストールしたいWordPressにログインし、画面左側メニューのプラグイン→プラグインの追加をクリックします。

プラグインの検索欄に「Clarity」と入力します。 青い三角形のマークが目印の「Microsoft Clarity」が表示されたら「今すぐインストール」をクリックし、続けて「有効化」をクリックします。

↑プラグインの検索欄に「Clarity」と入力します。
青い三角形のマークが目印の「Microsoft Clarity」が表示されたら「今すぐインストール」をクリックし、続けて「有効化」をクリックします。

サインインの方法が表示されるので、Microsoft、Facebook、Googleのいずれかのアカウントでサインインを行います。

↑プラグインを有効化すると、メニューに「Clarity」が追加されます。
サインインの方法が表示されるので、Microsoft、Facebook、Googleのいずれかのアカウントでサインインを行います。

プロジェクトの選択画面でWordPressのサイトが表示されるので選択し、「開始する」をクリックします。

↑プロジェクトの選択画面でWordPressのサイトが表示されるので選択し、「開始する」をクリックします。

「Clarityをどのように設定しますか?」の画面が表示されたら「Clarityのみ」を選択して「続行」をクリックします。

↑「Clarityをどのように設定しますか?」の画面が表示されたら「Clarityのみ」を選択して「続行」をクリックします。

※Clarity with Brand Agents(上部の選択肢)はWordPressで作成したWEBサイトにAIチャットボットのような機能を追加できる設定方法です。

ここまで設定できれば、WordPressへのClarityの導入は完了です。

5. ヒートマップツールの使い方

設置が終わったら、データが溜まるまで数日〜1週間ほど待ちましょう。
データが集まったら、まずは次の2つだけ見れば十分です。

5-1. クリックヒートマップの確認方法

ページ内でクリックが多い箇所ほど赤く、少ない箇所ほど青く表示されます。

「思っていた場所がクリックされていない」「想定外の場所が押されている」といった発見があれば、そこが改善のヒントになります。

クリックヒートマップの見本

↑こちらは実際のweblemonの記事(https://weblemon.space/how-to-use-foriio/)のクリックヒートマップです。

「foriioを無料で始める」と言うボタンに色がついています。
また、目次内の「foriio(フォリオ)の使い方」の箇所が赤くなっている(=多くのクリックがある)ことから、「具体的な使い方を知りたい」人が多く流入してきているのではないかと考えることができます。

↓実際にヒートマップ分析を行った記事はこちら↓

5-2. スクロールヒートマップの確認方法

ページのどこまでユーザーが読み進めているかが色の濃淡でわかります。

記事の後半になるほど読者が離脱している様子が視覚的につかめるので、「そもそも後半まで読まれていない記事に、時間をかけて追記する必要があるか」といった判断にも使えます。

スクロールヒートマップの例

↑実際のweblemonの記事(https://weblemon.space/notes-quoting-sns-post/)のスクロールヒートマップです。

記事やWEBサイトの「どこまで」を「どれくらいの割合のユーザー」がスクロールしたかを確認できるので、クリックして欲しいボタンや読んでほしい箇所の配置箇所の参考にすることができます。

まとめ🍋

今回の記事では、無料でヒートマップが使える「Microsoft Clarity」のWordPressサイトへの設置方法を中心に紹介しました。

WordPressへの設置はプラグインをインストールするだけで簡単に導入することができます。
特にクリックヒートマップとスクロールヒートマップは、すぐにサイトやブログの改善やリライトに活かすことができます。

ぜひMicrosoft Clarityを導入して、実際のユーザーの動きを確認してみてください👀

2026-10-09
Friday

weblemonの筆者

YUKINKO

20代後半のWEBマーケター
新卒で商社に入社しWEBマーケターとして勤務後、
カナダに渡航し現地企業のWEB制作と
マーケティング支援を行う。
現在は帰国し某企業でWEBマーケターをしています。

 自分がWEBマーケター・WEBデザイナーとして
仕事をしているときに気になった事を
調べた経緯を残しておきたいなという思いと、
それを誰かのお悩み解決に
役立てることができたらいいなと思っています。

“ネコとレモンのWEBマーケ&デザインブログ”
みたいな感じで覚えてもらえたら嬉しいです😺🍋

POPULAR POST

LATEST POST

スポンサー広告