Microsoft ClarityをShopifyに導入する方法｜無料でヒートマップ・録画分析を始める

こんにちは、Hodaです。

コンバージョン率を改善しようとするとき、「どのページが離脱されているか」はGoogle Analyticsで分かります。でも「なぜ離脱されているか」は、数字だけでは見えてきません。

Microsoft Clarityはその「なぜ」を掴むためのツールです。ヒートマップとセッション録画を使って、ユーザーがページ上でどう動き、どこで詰まって、なぜ離れるかを視覚的に確認できます。しかも完全無料で使えます。

Microsoft Clarityとは？

Microsoft Clarityは、ユーザーがウェブサイトをどのように操作しているかを分析するための無料のウェブ解析ツールです。Microsoftが提供しており、アカウントを作成するだけで使い始められます。

主な機能は以下の3つです。

ヒートマップ ユーザーがどこをクリックし、どこまでスクロールし、マウスをどこに移動させているかを視覚化します。クリックされていないCTAボタンや、誰も見ていないセクションを一目で発見できます。

セッション録画 匿名化された状態で実際のユーザーの操作を録画したものを再生できます。「このユーザーはどこで迷ったのか」「何度もタップして反応しなかった場所はどこか」を動画で確認できます。

行動インサイト レイジクリック（連続クリック）やデッドクリック（反応のない場所へのクリック）などの異常な操作パターンを自動検出します。UXの問題を数値で把握するための起点になります。

ShopifyでMicrosoft Clarityを使うメリット

離脱の「理由」が分かる

バウンス率が高いことは数字で分かっても、その理由はデータからは見えません。Clarityのセッション録画を見れば、ユーザーが何に引っかかって離脱したのかを直接確認できます。

カートへの摩擦ポイントを特定できる

ヒートマップを使えば「クリックされていないと思っていたボタンが実は何度もタップされていた」「購入ボタンがモバイルで固定ヘッダーに隠れていた」といった問題をすぐに発見できます。

チェックアウトの改善に使える

セッション録画でチェックアウトフローを確認することで、どの入力フィールドでユーザーが詰まるか、どのタイミングで離脱するかを把握できます。

モバイルのUX問題を発見できる

デバイス別にセッションをフィルタリングできるため、スマートフォン特有のレイアウト崩れやタップのしにくさを特定しやすくなります。

ShopifyへのインストールはMethodが3つある

Microsoft ClarityをShopifyに導入する方法は3種類あります。目的に応じて選びましょう。

方法① Shopifyアプリ経由（推奨）

コードを一切触らずに導入できる最もシンプルな方法です。

手順：

1. Microsoft Clarity にサインアップし、メール認証と利用規約への同意を完了させる
2. 新しいプロジェクトを作成し、ストア名・ウェブサイトURL・業種を入力する
3. 「Install on Shopify」ボタンを押すか、Shopify App Storeで「Microsoft Clarity」を検索してインストールする
4. ShopifyのAdminにリダイレクトされるので「Go to theme settings」をクリックする
5. Microsoft Clarityのテーマエクステンションを有効化して保存する
6. Microsoft Clarityのダッシュボードに戻れば、データ収集が開始されます

方法② Google Tag Manager経由

GA4やGoogle Adsのデータと連携させたい場合はこちら。GTMのアカウント設定が事前に必要です。

手順：

1. Microsoft Clarityにサインアップし、プロジェクトを作成する
2. インストール方法の選択で「Install manually（手動インストール）」を選ぶ
3. 表示されるトラッキングコードをコピーする
4. Google Tag Managerにログインし、「タグ」→「新規」でタグを作成する（名前：Clarity Tagなど）
5. タグの設定でタイプを「カスタムHTML」に設定し、コピーしたトラッキングコードを貼り付ける
6. トリガーで「All Pages（全ページ）」を選択して保存する
7. GTMの変更を「公開」してインストール完了

方法③ トラッキングコードをテーマに直接埋め込む

GTMのアカウントを作りたくない場合の代替方法です。テーマファイルを直接編集するため、慎重に作業してください。

手順：

1. Microsoft Clarityにサインアップし、プロジェクトを作成する
2. 「Get tracking code」からトラッキングコードをコピーする
3. Shopify Adminの「オンラインストア」→「テーマ」→「アクション」→「コードを編集」を開く
4. theme.liquidファイルを開き、</head> タグを検索する
5. </head> の直前にトラッキングコードを貼り付けて保存する

プライバシーコンプライアンスについて

Clarityを使う場合、ユーザーのトラッキング同意を取得する必要があります。

特に重要なのは、2025年10月31日以降、EEA（欧州経済地域）・イギリス・スイスからのトラフィックについてはConsent（同意）のシグナルが必須となっており、同意なしではヒートマップやセッション録画が機能しません。

日本向けのみのストアであっても、グローバルに広告を出している場合や、海外からのアクセスがある場合は念頭に置いておきましょう。

対応方法

1. 同意管理プラットフォーム（CMP）を使う

クッキーバナーを表示してユーザーの同意を収集するCMPをShopifyに導入します。Google Consent Mode V2に対応したCMP（TinyCookie、Consentmoなど）を選ぶと、同意の選択がClarityに自動的に伝達されます。

2. プライバシーポリシーに記載する

Microsoft Clarityを使用していること、どのようなデータを収集しているかをプライバシーポリシーに明記します。Microsoft公式が推奨する例文をベースに自分のストアに合わせて記載するのが手軽です。

まとめ

Microsoft Clarityは無料でヒートマップ・セッション録画・行動インサイトを提供する強力なUX分析ツールです。GA4では「何が起きているか」が分かりますが、Clarityを加えることで「なぜ起きているか」まで把握できるようになります。

導入のコストがゼロという意味でも、CRO改善の第一歩として試さない理由がありません。まずはShopifyアプリから導入し、1〜2週間ほどデータを溜めてからセッション録画を見てみると、ページの課題が具体的に見えてくるはずです。