完全無料の ヒートマップツール！ Microsoft ClarityをWordPressで導入する方法

こんにちは。広報担当の横尾です。
 
製品のLPサイトやホームページのコンバージョン改善に活用できるヒートマップツール。ユーザーがどこを熟読しているか、どこを読み飛ばしているか、ページのどこをクリックしたのかなど、様々な情報を読み取ることができるので、サイト改善におすすめです。
 
今回は無料で利用することができて、導入も簡単なMicrosoft Clarityの導入方法をご紹介したいと思います。

ヒートマップとは

ヒートマップとは、ユーザーがWebページ上でとった行動や反応を確認できるツールです。 ページのどこが見られているのか、ページ上のどこでクリックやタップをしているのかが色や図形で表示されます。 また、ユーザーのスクロール状況、離脱ポイントの可視化も可能です。

Microsoft Clarityのアカウントを作成する

1. Microsoft Clarityのサイトの「使い始める」をクリックします。
    
   

 

2. サインアップの方法は、Microsoft、Facebook、Googleの3種類から選択可能です。お好きな方法を選択してください。
    
   

 

3. サインアップ後に、メールアドレスを入力し、1つ目のチェックボックスにチェックを付けてContinueボタンをクリックします。2つ目のチェックボックスは、サービスからのメール受信を希望するかどうかです。不要な場合はチェックボックスを外してください。
    
   

アカウントの作成は、以上で終わりです。

プロジェクトを作成する

1. Name（名前）には、プロジェクト名を入力します。自身が分かりやすい名前で大丈夫です。Website URL（WebサイトURL）にはヒートマップを設定したいサイトのURLを入力します。入力したら、Add new project（新しいプロジェクトを追加する）をクリックします。
    
   

 
必要があれば、このタイミングで言語設定を日本語化しておくと作業がしやすくなります。
Microsoft Clarityを日本語化する

サイトにMicrosoft Clarityの設定をする（WordPress）

1. 計測したいサイトのWordPressのサイドメニューからプラグインをクリックします。
    
   

 

2. 新規プラグイン追加ボタンをクリックします。
    
   

 

3. キーワードに「Clarity」と入力し、結果に表示されたClarityの今すぐインストールボタンをクリックします。
    
   

 

4. インストールが完了したら有効化ボタンをクリックします。
    
   

 

5. 有効化すると、サイドメニューに「Clarity」が表示されるので、クリックします。
    
   

 

6. サインインボタンをクリックし、Microsoft、Facebook、Googleから作成したアカウントを選択します。
    
   

 

7. 作成したプロジェクトを選択し、接続ボタンをクリックします。
    
   

 

8. Microsoft Clarityに戻り、下記画面が表示されたら設定完了です。設定が反映されるまで4～5時間くらいかかるみたいです。
    
   

 

9. クリックのヒートマップの場合、こんな感じです。この記事はExcelの関数まとめの記事なのですが、SUM関数が他の関数よりも見られていることが分かります。
    
   

Microsoft Clarityを日本語化する

1. 右上のアカウントボタンをクリックします。
    
   

 

2. Manage Accountをクリックします。
    
   

 

3. Languageで日本語を選択します。選択すると、自動でページが再読み込みされ日本語で表示されるようになります。
    
   

まとめ

いかがでしたでしょうか。
 
ブログ記事でも、製品サイトでもこうしてどこが見られているかを知ることによって、欲しい情報やいらない情報の精査ができます。
 
Clarityには、ヒートマップ以外にも機能があるので（そのどれもがサイトの質向上に活かせるものばかり）、使いこなしてご紹介していきます。