記事を検索

並び順

· HARUBOUYA · analytics · 12 min read

Microsoft Clarityの使い方:導入手順と、最初に見る5つの視点

アクセス数は分かるのに、なぜ読まれないのかが分かりません。無料のClarityで訪問者の動きを見る方法を、導入手順、画面の用語、見るべき5つの視点、よくある失敗の順にまとめます。

「Microsoft Clarityの使い方」の文字と、植物やノートパソコンを描いた北欧風のイラスト

アクセス数は毎日確認しています。それでも、問い合わせが増えません。どこで帰られているのかが分かりません。

足りないのは、訪問者がページの中で何をしていたかの情報です。Microsoftが無料で提供している「Clarity(クラリティ)」を使うと、クリックやスクロールの様子を、色の地図や再生映像で見られます。

導入の手順と、最初に見るべき視点をまとめます。

公式サイト:Microsoft Clarity

問題:アクセス数だけでは「なぜ」が分からない

分かることアクセス解析(GA4など)Clarity
何人来たか得意おおまかに分かります
どこから来たか得意分かります
ページのどこまで読まれたか一部のみ得意
どこがクリックされたか設定が必要設定なしで分かります
訪問者が迷った場所分かりません得意

たとえるなら、アクセス解析は店の入口の「来店者カウンター」、Clarityは店内の「防犯カメラ」です。**数を知るのと、様子を見るのは別の道具です。**両方そろうと判断しやすくなります。

仕組み:Clarityでできること

機能内容使いどころ
レコーディング1回の訪問ごとに、マウスの動き・スクロール・クリックを動画のように再生迷った理由を確かめます
ヒートマップよくクリックされた場所、よく読まれた範囲を色で表示。赤いほど多いですページ全体の傾向をつかみます
ダッシュボード訪問数と「困っているサイン」を数字で一覧最初に全体を見ます
AIの要約・チャット傾向を文章で要約。質問すると答えが返ります忙しいときの当たりづけ

ヒートマップは3種類です。

種類分かること
クリックマップどこがよく押されたか
スクロールマップページのどの位置まで、何%の人が読んだか
エリアマップ区画ごとの反応の大きさ

料金はかかりません。アクセス数が増えても無料のままです。パスワードなどの入力内容は、自動で隠して記録されます。

やること:導入の4ステップ

手順操作補足
1. アカウントを作ります公式サイトで「サインアップ」を押し、Microsoft・Google・Facebookのどれかでログイン新しいパスワードは不要
2. サイトを登録します「新しいプロジェクト」を押し、名前とURLを入力して「新しいプロジェクトを追加」名前は自分が分かればよいです
3. 計測用のコードを入れます下の表から、サイトに合った方法を選びますここが一番の山場
4. 待ちますデータが出るまで2時間ほど翌日に開くくらいでよいです

計測用のコード(タグ)の入れ方は、サイトの作り方で変わります。

サイトの作り方入れ方
WordPress公式プラグイン「Microsoft Clarity」を入れ、画面の指示に従います
Googleタグマネージャー(GTM)を使っていますClarityの設定画面で「Googleタグマネージャー」を選び、連携します
それ以外表示されたコードをコピーし、HTMLの head の中に貼ります

自分で貼るのが不安な場合は、制作した人に「このコードを head に入れてください」と渡せば伝わります。GTMの基本はGTMの基礎と、最初にやっておくべき設定に書きました。

ダッシュボードの用語

用語意味
セッション1回の訪問。同じ人が朝と夜に来たら2セッション
ページ/セッション1回の訪問で見られたページ数の平均
スクロールの深さページのどこまで読まれたかの平均
アクティブな時間実際に操作していた時間。開きっぱなしの時間は含みません

Clarity特有の「困っているサイン」が4つあります。ダッシュボードで最初に見るのはこの4つです。

サイン起きていることよくある原因
デッドクリック押しても何も起きない場所が押されました画像や太字がリンクだと思われています
レイジクリック(イライラクリック)短い時間に同じ場所を連打されましたボタンが反応しない、表示が遅いです
過剰なスクロール普段より多く上下にスクロールされました探している情報が見つかりません
クイックバック開いてすぐ前のページに戻りましたリンクの説明と中身が合っていません

どのような視点で見ればよいか

全部を見る必要はありません。次の5つを順番に見ます。

順番視点見る画面
1最初の画面で帰られていないかスクロールマップ
2読んでほしい場所まで届いているかスクロールマップ
3押したいのに押せない場所がないかクリックマップ(デッドクリック)
4スマホとパソコンで違いがないかフィルターの「デバイス」
5気になった数字の中身は何かレコーディング

1. 最初の画面で帰られていないか

スクロールマップで、最初に見える範囲を過ぎた位置の到達率を見ます。ここで大きく減っていたら、入口の問題です。

見えた状態考えられる原因直し方
最初の画面で半分以上が帰りますタイトルと内容が期待と合っていません最初の3行で「誰の何の話か」を書きます
本文にたどり着く前に減ります画像が大きく、本文が下に押し出されています画像を小さくする、本文を先に出します
何のサイトか分かりません見出しが抽象的具体的な言葉に変えます

2. 読んでほしい場所まで届いているか

問い合わせボタンや、他の記事への案内など、一番読んでほしい部分の到達率を見ます。到達率が低い位置に置いているなら、上へ動かします。

3. 押したいのに押せない場所がないか

クリックマップでデッドクリックが集まる場所を探します。

押されている場所訪問者の期待直し方
画像拡大して見たいです拡大表示、または詳細ページへのリンクを付けます
太字・色付きの文字リンクだと思いました強調の色を変える、またはリンクにします
見出し詳しいページへ行きたいです関連ページへのリンクを置きます

デッドクリックは「もっと知りたい」の合図でもあります。リンクを足すと、次のページを読んでもらうきっかけになります。

4. スマホとパソコンで違いがないか

画面上部の「フィルター」で、デバイスを切り替えて比べます。個人のサイトやSNSからの訪問は、スマホの割合が高いことが多いです。**まずスマホの見え方から確認します。**ボタンが小さい、文字が詰まっているといった問題は、パソコンでは気づきにくいです。

5. 気になった数字を録画で確かめる

ダッシュボードで気になった数字(レイジクリックが多い、など)をクリックすると、それが起きた訪問の録画だけに絞り込めます。5〜10件見れば、共通する迷い方が見えてきます。数字で当たりをつけ、録画で理由を確かめる順番です。

失敗例

失敗起きたこと防ぎ方
録画を1件見て判断しましたたまたまの操作に合わせて直してしまいました同じ行動が複数の訪問で起きているかを見ます
全部の録画を見ようとしました時間がかかり、続きませんでした数字で絞り込んでから、数件だけ見ます
直した前後を比べませんでした効果があったのか分かりませんフィルターの期間で、直す前と後の1〜2週間を比べます
パソコンだけで確認しましたスマホの問題を見落としましたデバイスを切り替えて見ます
プライバシーポリシーに書きませんでした訪問者への説明が足りません「Clarityで利用状況を分析している」旨を書きます

まとめ

  • アクセス解析は「数」、Clarityは「様子」を見る道具です。両方あると判断しやすいです
  • 導入は、アカウント作成、サイト登録、コードの設置の3つです。データは2時間ほどで出ます
  • ダッシュボードでは、デッドクリック、レイジクリック、過剰なスクロール、クイックバックを最初に見ます
  • 視点は5つです。最初の画面、読んでほしい場所、押せない場所、スマホ、録画での確認
  • 1件の録画で判断しません。数字で絞り、数件見て、共通点を探します

計測の設計や、分析結果をもとにしたサイト改善の相談も受けています。料金は料金の目安に掲載しています。

アクセスを増やすのと同じくらい、来た人に読んでもらう工夫が効きます。

Share:

参考になったら、いいねを押してください。

コメント

    お名前とコメントは、確認後にこのページで公開されます。メールアドレスや電話番号などは書かないでください。

    Back to Blog

    Related Posts

    View All Posts »
    サイズレコメンドのタグをGTMから入れる

    サイズレコメンドのタグをGTMから入れる

    外部のサイズ提案ツールを入れるとき、GTMから3種類のタグを配信します。何を送るか、複数商品を買われたときの書き方、そしてUA時代のeec.purchaseだけでは足りない項目を整理します。

    GA4移行後にCVが計上されなくなるGTMタグの直し方

    GA4移行後にCVが計上されなくなるGTMタグの直し方

    タグは発火しているのにコンバージョンが記録されません。UA時代に書かれたカスタムHTMLタグが静かに失敗する仕組みと、修正前・修正後のコードを並べて直し方を整理します。