WordPressで無料ヒートマップ解析!Microsoft Clarityの設定ガイド
Warning: Undefined array key 0 in /home/wpcloset/kontaworks.com/public_html/wp-content/themes/swell/classes/Utility/Get.php on line 805
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2022/10/konta-2022-10.jpg?fit=1080%2C1080&ssl=1)
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2023/12/screenshot-clarity.microsoft.com-2023.12.11-10_14_47.png?fit=1497%2C869&ssl=1)
ヒートマップ解析はウェブサイトのコンバージョン率向上に欠かせないツールのひとつですよね。
ただ、ヒートマップ解析を行うためのツール「ヒートマップツール」は有料無料問わず、国内外でさまざまな企業から出ていたりプラグインも多数存在しています。
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2022/10/困ったに解答A.jpg?resize=80%2C80&ssl=1)
ヒートマップを使うと、サイト上でのユーザー行動が色分けされて表現されます。
閲覧してくれたユーザーがどのようにウェブサイトを利用しているのか、利用してほしいコンテンツが利用されているか、などを分析することができますよ!
Microsoft 社が提供している無料のヒートマップツール Clarity (クラリティ)もその一つです。
今回は、Clarityの概要や機能の特徴を紹介しながら、設定方法を解説してきますね!
Microsoft Clarity(クラリティ)とは
Microsoft 社が提供する無料のヒートマップツール
Clarityを私自身は最近まで知らなかったのですが、Microsoft 社が2018年に提供を開始した、無料のヒートマップツールだったみたいです。
多くのヒートマップツールと違い有料版はなく、すべての機能が制限なく無料で使用できます。
また、ヒートマップ解析だけでなく、セッションのレコーディング再生など複数の解析機能が搭載されていました!
- ヒートマップの生成
- セッションのレコーディング
- インサイトダッシュボードの生成
- 各種インテグレーション
- ライブ拡張機能
Clarityのすごさは、アクセス数が無制限なこと
一般的にヒートマップツールはページビュー数や、セッション数などアクセスに応じた従量課金が多いものです。
WordPressプラグインなどでも、トップページのみの利用は無料だったりというものもあるし、本格的な機能性の高いマーケティング企業がだしているものだと月額数十万するものまであります。
一方で、Clarity はアクセス数が無制限で無料で使える!
これはフリーランスや個人事業主にとっては嬉しいですよね。
そして、データの保存期限の上限なども定められていませんでした。
これはほんとにすごい!
ただ、実際の機能はためしてみないとわからないなってことで私も導入してみたいと思います。
Clarityの設定方法はこの手順
- Clarityのアカウントを作成する
- 新規プロジェクトを作成する
- WordPressにMicrosoft Clarityのプラグインをインストールする
- WordPressとClarityプロジェクトを連携
- Google アナリティクスと連携する
それではそれぞれの詳しいやり方を説明していきます!
ここではWordpressを利用した設定方法を解説していますのでご了承ください。
STEP1.Mirosoftアカウントへ登録する
Clarityを使用するにはMicrosoftのアカウントが必須となるので、公式サイト(https://clarity.microsoft.com/)からアカウントを作成しましょう。
※すでにアカウントをお持ちの方はSTEP2へ進んでください。
まずは『使い始める』をクリック!
![Clarityを使用するにはMicrosoftアカウントへ登録](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/01-1.jpg?resize=1024%2C590&ssl=1)
アカウント登録には、以下いずれかのアカウントを使う必要があります。
- Microsoftのアカウント使う
- FaceBookのアカウントを使う
- Googleのアカウントを使う
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2022/10/困ったに解答A.jpg?resize=80%2C80&ssl=1)
最終的にGoogleアナリティクスとの連携を行うので、私としてはアナリティクスの設定がしてあるGoogleアカウントの選択をおススメします!
![Clarityにサインアップ(登録)する手順1](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/02.jpg?resize=1024%2C538&ssl=1)
チェックボックスにチェックを入れて『Continue』をクリックします。
![Clarityにサインアップ(登録)する手順2](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/03.png?resize=1024%2C639&ssl=1)
STEP2.新規プロジェクトを作成する
次に新規プロジェクトの設定です。
各項目は以下の通り設定します。
- タブはWebsiteを選択
- Name:ウェブサイト名を入力
- Website URL:ウェブサイトのURLを入力
それぞれ入力出来たら『Add new project』をクリックします。
![Clarityで新規プロジェクトを作成する手順1](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/05.png?resize=1024%2C663&ssl=1)
STEP3.ワードプレスにMicrosoft Clarityのプラグインをインストールする
次はワードプレスの設定です。
ワードプレスのダッシュボードから『新規プラグインを追加』をしていきます。
![ワードプレスにMicrosoft Clarityのプラグインをインストール](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/07.png?resize=216%2C223&ssl=1)
検索窓に「Clarity」と打ち込むとMicrosofClarityが一覧に出てくるので『今すぐインストール』をクリック。
ボタンが「Activate」に代わるので、もう一度クリックすると有効化が完了します。
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/06.png?resize=1024%2C515&ssl=1)
STEP4.ワードプレスとClarityプロジェクトと連携
次にワードプレスとMicrosoftClarityで作成したプロジェクトを連携していきます!
まずはワードプレスのメニューからClarityを開き、Clarityプロジェクトを選択します。
ワードプレスのメニューは青い三角のアイコンです
![ワードプレスとClarityプロジェクトと連携](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/08.png?resize=174%2C85&ssl=1)
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/09.png?resize=888%2C585&ssl=1)
『接続』ボタンを押してしばらく待つと連携が完了すると、こんな画面になります。
この画面になったらワードプレスの設定は終了です!
※数値は数時間降に反映されます
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/11.png?resize=952%2C637&ssl=1)
STEP5.Google アナリティクスと連携する
Microsoft Clarityに戻ってGoogleアナリティクスとの連携をしていきます。
歯車マークの設定からセットアップを選択し、「Googleアナリティクスの統合」から『開始する』ボタンをクリックします。
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/12.png?resize=1024%2C605&ssl=1)
連携させたいGoogleアカウントを選択しましょう。
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/13_1-1.png?resize=968%2C682&ssl=1)
「すべて選択」にチェックを入れ『続行』をクリック。
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/14.png?resize=690%2C944&ssl=1)
接続するサイトから該当のプロパティを選択して『保存』をクリックします。
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/15-1.png?resize=964%2C583&ssl=1)
この画面になったらGoogleアナリティクスとの連携完了です!
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/16.png?resize=762%2C335&ssl=1)
Clarityツアーからこんな設定も出来る!
Clarityには初期設定が簡単に出来るように「Clarityツアー」が用意されています。
最低限の設定が簡単に出来るのでぜひお試しください!
ここでは設定しておくべきポイントを2点だけご紹介します。
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/17.png?resize=1024%2C751&ssl=1)
プロジェクト設定
サイトカテゴリーを選択することが可能です。
サイトに最適なカテゴリーを選択しておきましょう!
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/18.png?resize=573%2C767&ssl=1)
IPブロック
IPブロックをしておくと自分のアクセスを追跡させないようにすることが可能です。
「現在のIPをブロックする」にチェックを入れると自分の行動が追跡されなくなるので設定しておきましょう!
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/19.png?resize=989%2C578&ssl=1)
Clarityを使ってみて感じたサイト改善に役立つ機能
MicrosoftClarityを使ってみて、たくさんある機能の中から実際に私が「これはサイト改善に使える!」と思った機能を紹介しますね。
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2022/10/困ったに解答A.jpg?resize=80%2C80&ssl=1)
どんな便利なツールも役立てられなければ宝の持ち腐れ
せっかく設定したClarityを有効活用してサイト改善に役立たせていきましょう!
レコーディング
レコーディングは、ウェブサイトへの来訪者がどのページをどんなふうに閲覧していたか、ユーザー行動を録画してくれる機能です。
特に以下の3つの項目に注目して気になるユーザー行動をチェックしてみましょう!
- 期間:ウェブサイトにいた時間
- クリック:ウェブサイト内でクリックした回数
- ページ数:ウェブサイト内の閲覧ページ数
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/20-1.png?resize=1024%2C621&ssl=1)
スクロール
スクロールはユーザーがページのどこまでスクロールしたか分かる機能です。
もしスクロールがページ下部まで行かずに離脱されている場合、ユーザーの検索意図とページの内容が不一致を起こしている可能性があるので、改善の指標になりますね!
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/21.jpg?resize=1024%2C740&ssl=1)
イライラしたクリック・デッドクリック
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2024/01/22.png?resize=491%2C542&ssl=1)
イライラしたクリック
ユーザーが連続してクリックを行った箇所が分かります。
同じ場所で何度も「カチカチカチカチッ」とクリックしていることがレコーディングデータから確認ができます。
これは「クリックがしにくい場所」や「ページ遷移が遅い場所」や「クリックできるように見えて実際はクリックできない場所」など様々な原因が考えられるので、レコーディングデータを確認してページの改善に役立てられそうですね!
デッドクリック
一定時間内にアクションが返ってこなかったクリックが分かります。
イライラしたクリックと同様に「ページ遷移が遅い場所」や「クリックできるように見えて実際はクリックできない場所」などの原因が考えられます。
レコーディングデータを確認してページの改善に役立てましょう!
![](https://i0.wp.com/kontaworks.com/wp-content/uploads/2022/10/困ったに解答A.jpg?resize=80%2C80&ssl=1)
実際に自分でも同じページを開いて確認すると改善点が明確に分かるかも!
最後に
Microsoft Clarityは無料で提供されているヒートマップとは思えないほど高機能なツールです。
もちろん無料のサービスの為、有料のヒートマップと比較すると機能が劣る面があったり、突然機能が使えなくなったり有料化される、などの懸念点はありますが、ヒートマップをお試しで使ってみたい人には十分おススメできると感じました。
もしMicrosoft Clarityを導入してみたいけど、自分で設定するのは難しそう…と感じた方はこんたホームページ製作所で導入のサポートも可能です!
お気軽にお問合せください!