ヒートマップ -完成編-

INDEX

1. ヒートマップとは

WEBサイトを作ったらこちらも導入を推奨しています。大抵のツールでは閲覧エリア・離脱エリア・クリックエリアを分析できます！

ユーザーが「どこを熟読したのか」「どこで離脱したのか」「どこをクリックしたのか」を分析することができます。 WEBページの改善においては基本的に必須であり導入することをおすすめいたします。

ここからはWEBCOACHで一番おすすめしているヒートマップツール「Clarity」(クラリティ)の使い方を説明します。

2. Clarityとは

ClarityとはMicrosoftが2018年にリリースした比較的新しいヒートマップツールです。無料のヒートマップツールの中では圧倒的に機能性が高くおすすめできるツールです。普通の有料ツールと比べても性能が高いと言っても過言ではないと思います。

通常のヒートマップツールだと無料版では分析できるページ数に制限があったりユーザー数に制限があったりしますがClarityではそんなことはなく「永久無料で使用できる」と宣言されています。(2022年8月18日時点)

Clarityはデモアカウントがありデータが既に存在するアカウントでほとんど全ての操作を確認できるのでチェックしてみてください。 (デモアカウントではSettingsなど一部使えない機能もあることにご注意ください。)

1つだけ懸念を挙げるとすれば日本語対応されていないことです。ただ今後英語を使ったツールにも慣れていく必要はあるので頑張って触っていきましょう。

WEBツールは英語圏発祥のものが多いので英語に抵抗感を持たずに学習していく姿勢が重要です。

(翻訳ツールとしてはDeepLがおすすめです。)

→ Clarityデモ画面はこちらから

（表示したい文章）

Clarityの公式ドキュメントはこちら！

→ Clarity公式ドキュメント

たいていのツールは公式ページが一次情報になります。わからないときに公式サイトに当たる癖をつけましょう。基本的に公式サイトに全ての情報があります。

Clarityの始め方

STEP1. まずはアカウント登録

https://clarity.microsoft.com/projectsにアクセスしてください。上図のような画面が出てくるかと思います。

「sign up」を選択してください。

Sign upとは会員登録のことです。Sign inはログインのことを指します。

Sign upの方法はいくつかありますので好きな方法を選んでください。

「Sign up」を押すと図のようにポップアップが出てきて方法を選ぶことができます。

STEP2. プロジェクトを作成する

プロジェクトの名前とWEBサイトのURLを入れてください。

プロジェクトとはSearch Consoleでいうとプロパティに該当します。

基本的に1プロジェクトに1つのWEBサイトが対応します。

インストール方法を選択しましょう！

Install Manually(手動でインストールする)かInstall on a third-party platform(サードパーティプラットフォームを使用してインストールする)のどちらかを選びましょう。

後者についてはShopify, Wix, WordPressなどが対応しています。サードパーティプラットフォームを活用すると各プラットフォームの公式案内に従って、簡単に設定できます。

ただ今回は今後の汎用性を考慮して手動でインストールする方法を紹介します。

手動でのインストールを理解すればどんな場合にも対応できます。

STEP3. Install manuallyの「Get tracking code」を選択する

「Copy to clipboard」を選択してください。以下のようなコードをコピーできるかと思います。

<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", "d9lrsgtvwd");
</script>

JavaScript

こちらはJavaScriptと呼ばれるプログラミング言語で構成されています。

こちらをHTMLタグの<head>タグの中にペーストしていただくと設定が完了します！

WIXの場合どのように設定を行うか？

①の設定ボタンを押して②の「上級設定」> 「カスタムコード」を押してください。
こちらの機能を活用すると任意のコードをheadタグの中に埋め込むことが可能になります。

カスタムコードを追加ボタンを押してください。
(カスタムコードの追加はアップグレードしないとできないのでご注意ください。)

コードを①の箇所にペーストしてください。

ツール名はわかりやすいように「Clarity」と入れるのが良いと思います。

コードを追加するページは全てのページで良いです。追加する箇所はヘッダーにしましょう。

右下の「適用」ボタンを押せば設定は完了です。

以上でWIXへの反映は完了します！

3. Clarityの機能紹介

機能は実際に触ってみないとわからないと思うので以下のデモページを触りながら理解を進めていってください！

→ Clarityデモ

Dashboard

dashboard画面では様々な指標を確認することができます。こちらに表示されている15個について解説していきます。

1. Sessions

トータルのセッション数、ユニークのセッション数が表示されます。

2. Pages per session

1.17 averageというのは1セッションあたり平均して1.17ページ閲覧されているということです。これは回遊率という言い方をすることもあります。この数字は高ければ高いほど良いです。1回のセッションあたり多くのページを見られているということはそれだけサイトがユーザーにとって魅力的であることを意味します。

3. Scroll Depth

Scroll Depthは読了率を表します。54.06%とはつまり平均してページの上から54%の位置までスクロールされているということです。これがあまりに低い場合はページのコンテンツ内容がユーザーの期待と乖離していると考えられます。

4. Time Spent

Activeはユーザーがサイトをアクティブに閲覧していた時間の平均です。 inactiveはサイトを開いてはいるものの別のタブで別サイトを見ている場合などが該当します。

5. Dead clicks

Dead Clicksはユーザーがクリックしたにもかかわらずページ上でアクションが実行されなかったクリックを指します。クリックしたもののリンク先に遷移しなかった場合や、ボタンではない箇所をボタンと勘違いしてユーザーが押している場合などがDead Clicksに該当します。 Recordingボタンを押すとDead Clicksが行われたレコーディングを閲覧することができ、具体的にどこで発生したか確認できます。

6. Rage Clicks

Rage Clicksは短時間で連打するようなクリックのことです。クリックの連打とは、ユーザーが思い通りに反応しないため同じ箇所を何度も押していることを示します。Recordingボタンを押すとRage Clicksが行われたレコーディングを閲覧することができ、具体的にどこで発生したか確認できます。

7. Excessive Scrolling

標準的なスクロールスピードよりも速い速度でスクロールしたことを示します。読み飛ばされているコンテンツエリアがわかります。

8. JavaScript errors

JavaScriptのエラーが発生したセッション数を示します。Recordingsでどこでエラーが発生しているか確認することができます。

9. Quick Backs

ユーザーが別ページに移動した後すぐに前のページに戻った割合を示しており、Recordingで確認可能です。すぐに戻ってくるということは遷移後のページがユーザーの期待に添えていなかったことを示すので大きな改善のヒントになります。

10. Popular Pages

人気のページランキングが表示されています。セッション数が多い順に掲載されておりそれぞれ個別ページごとにヒートマップとレコーディングを確認可能です。

11. Referrers

リファラーと呼びます。参照元のことを意味します。サイトに訪問したユーザーがサイトに訪問する直前に閲覧していたWEBページのことをリファラーと言います。どの流入経路でWEBサイトに来ているかを分析することは非常に重要です。リファラーによってユーザーの動機・行動特性は大きく異なります。デモではChromeの利用が最も多くなっていますね。

12. Countries

どの国からの流入が多いのかを表示しています。デモではアメリカ、ブラジル、インドの順にサイト流入が多くなっています。

13. Browsers

どのブラウザでのサイト閲覧が多いか表しています。デモではChromeが最も多くなっています。

14. Devices

どのデバイスからの流入が多いかを閲覧可能です。デモではPCが92%となっていますが、実際のWEBサイトでは多くの場合、モバイルからの流入が多くなります。

15. Operating Systems

どのOSを使っているユーザーが多いかを閲覧可能です。デモではWindows、MacOS、Linuxの順に多くなっていますね。

Recordings

下の動画のように操作が可能です。
まずは動画を見てみてください。

【作業動画】ヒートマップ -完成編- 1-1

Recordingsタブに移動した後、左のサイドバーからレコーディングを選択すればレコーディングが流れます。

レコーディング機能を無料で使えるツールは限りなく少ないためこの機能はClarityの圧倒的な強みです。

実際のユーザーのページ操作の映像ほどサイト改善する上で重要な情報はありません。

サイト改善する際にはClarityのRecordingsを見ることで様々な改善アイデアが浮かぶと思います。

Heatmaps

まずは動画をご覧ください。

【作業動画】ヒートマップ -完成編- 1-2

Heatmapsのタブを選択してください。

ヒートマップを見たいページを選択して「View heatmap」を押しましょう。
PC・Tablet・Mobileからどのデバイスのヒートマップを見るかをまず選択できます。

Click・Scroll・Areaについて説明します。

ClickではClickされた箇所に番号が振られています。
番号が1のものが最もクリック率が高いものです。

番号ごとにクリック数とクリック率を見ることができます。
一般にボタンは1ページの中に何個も設置するためこれを見ることによってどのボタンが最も押されているか分析することができます。
クリック率が低すぎるボタンは改善したり、削除したりといったアクションが可能になります。

Scrollでは読了率を見ることができます。
ページのどこまで読了されているかを確認することが可能です。
特に離脱が激しいページの箇所を特定し改善することが可能になります。

AreaではClickが多いエリアを特定することが可能です。
左のサイドバーではClickが多いエリア順に表示がされています。

Filters・Segments機能で分析を効果的に行おう

ClarityではFilters・Segmentsという2つの機能によって分析が行いやすくなっています。

ざっくり言うとデータをいくつかの基準に基づいて絞り込んで分析ができる機能になります。

それぞれ詳細に説明していきます。

Filters

Filtersボタンを押すと下の写真のようなポップアップが表示されます。フィルタ機能を使うと特定の基準に沿ってデータを絞って閲覧することができます。それぞれ簡単に説明していきます。フィルタをかけたい基準を入力して右上のApplyボタンを押すとフィルタをかけたデータを見ることができます。

■ User info

Time frame：期間指定ができます。
Device：PC、Tablet、Mobile、Otherからデバイスタイプを選べます。
Browser：ブラウザ指定ができます。Chromeのユーザーだけに絞って見ることができるということです。
Operating System：OSの指定ができます。
Country：国の指定ができます。

Insights：Rage clicks, Dead clicks, Excessive scrolling, Quick backsなどを絞ってデータを見ることができます。
Actions：カーソル移動、テキスト入力などのアクションで絞ってRecordingの確認をしたい時に便利です。
Clicked text：クリックされたテキストの情報で絞ることができます。
Page scroll depth：min percentage と max percentageを入力可能です。読了率によってデータを絞って閲覧できます。

■ Path

Entry URL：最初に訪れたページ
Exit URL：離脱したページ
Visited URL：訪れたページ

以上の観点から絞り込みが行えます。例えば商品の購入を行った人のデータだけを見たい場合はVisited URLに商品購入完了ページのURLを入れると絞り込んで分析が可能になります。

■ Traffic

Referring site：参照元のWEBページ
Source：流入元のWEBサイト
Medium：流入元のタイプ
Campaign：流入元のキャンペーンID
Channel：Direct、Organic Search, Paid Searchなどの種類

流入経路ごとにフィルタをかけてWEBサイトの分析を行うケースは非常に多いため、この機能は非常に重要です。流入経路をまとめてWEBサイトの分析を行うことは、多くの場合効果的ではありません。なぜなら流入経路によってユーザーのモチベーションや行動特性が全く異なるからです。 Trafficによるセグメンテーションは、WEBサイトの分析でよく使うので覚えておきましょう。

■ Session

Session duration：ユーザーがWEBサイトに滞在した時間のこと
Session click count：1回のセッションでクリックした回数のこと

ユーザーのモチベーションによって区切って分析が可能になります。例えば1ページしか見ずに離脱したユーザーに絞って効率的にデータ分析ができたりします。

■ Page

Page duration：1ページに滞在した時間
Page click count：1ページ内でクリックした回数
Visible Page：ユーザーがページを実際に閲覧していた時間
Hidden Page：ページが非表示だった時間（サイトを開いたものの別タブで他のサイトを閲覧していた時間が該当）
Errors：JavaScriptやImageのErrorがあったかどうか
Page size：ページの縦横の大きさによって絞り込みができる
Screen Resolution：スクリーンの大きさによって絞り込みができる

■ Custom Filters

Custom tagの設定は応用編であり、使用頻度は高くありません。 WEBページの中に任意のタグを仕込むことによってそのタグに応じて分析をかけられます。
参考ヘルプ→ https://docs.microsoft.com/en-us/clarity/custom-tags

Segments

SegmentsはFiltersを使用して作成したフィルタをセグメントとして保存し後から簡単にアクセスできるようにする機能です。

例えば「過去7日間」「モバイル」「日本」という条件でフィルタをかけてみたい場合に、毎回Filtersからチェックをつけてみるのは面倒ですよね？そこを効率化するためにこの機能が存在します。