# Microsoft ClarityをShopifyに入れる方法｜無料ヒートマップの使い方

無料のヒートマップツールMicrosoft ClarityをShopifyに入れる手順を、公式ドキュメントをもとに解説します。アプリでの導入、見られるヒートマップの種類、データの保存期間、個人情報のマスキングまでまとめました。

<Points>

- Microsoft Clarityは無料のヒートマップツールで、ShopifyにはApp Storeの公式アプリから入れられます
- アプリを入れて「Clarity JS」をオンにするだけで計測が始まり、数時間でデータが表示されます
- 録画とヒートマップのデータは30日で消えるので、見たい期間を決めて定期的に確認しましょう

</Points>

「どこまで読まれているか」「どのボタンが押されているか」は、Shopifyの標準レポートだけでは分かりません。ヒートマップを使うと、お客様の動きを色の濃さで見られます。

この記事では、無料で使えるMicrosoft ClarityをShopifyに入れる手順と、使う前に知っておきたい点をまとめました。内容は2026年11月11日にMicrosoftの公式ドキュメントとShopify App Storeで確認したものです。

## Microsoft Clarityとは

Clarityは、Microsoftが提供する行動分析ツールです。[公式のFAQ](https://learn.microsoft.com/en-us/clarity/faq)には、ずっと無料で、トラフィックの上限も有料版への切り替えも無いと書かれています。

<Figure title="Shopify App Storeの掲載情報" source="Shopify App Store「Microsoft Clarity: AI Insights」">

| 項目 | 内容 |
| --- | --- |
| アプリ名 | Microsoft Clarity: AI Insights |
| 開発者 | Microsoft Clarity |
| 料金 | 無料のプランのみ |
| 評価 | 4.6 (2,517件のレビュー) |
| 対応言語 | 日本語を含む14言語 |
| 日本語での直接サポート | なし |

</Figure>

[掲載ページ](https://apps.shopify.com/microsoft-clarity?locale=ja)の主な機能は、セッションの録画、ヒートマップ、AIによる分析、コンバージョンまでのファネルです。画面は日本語で使えますが、問い合わせは英語になると考えておきましょう。

<Stats source="Shopify App Store (2026年11月11日時点)">
<Stat value="無料" label="プランは無料の1つだけ" />
<Stat value="4.6" label="App Storeの評価 (2,517件)" />
<Stat value="14言語" label="日本語を含む対応言語" />
</Stats>

## Shopifyに入れる手順

[Shopify向けの導入手順](https://learn.microsoft.com/ja-jp/clarity/third-party-integrations/shopify)では、アプリから入れる方法が案内されています。テーマのコードを編集する必要はありません。

<Steps>
<Step title="アプリをインストールする">

Shopify App Storeで「Microsoft Clarity: AI Insights」を開き、「インストール」を押します。

</Step>
<Step title="アクセス権限を確かめる">

表示されたデータへのアクセス権限を確かめて、「インストール」を押します。

</Step>
<Step title="Clarity JSをオンにする">

「Go to app settings」を押すと新しいタブが開きます。「Clarity JS」がオンになっていることを確かめて「Save」を押し、タブを閉じます。

</Step>
<Step title="画面を更新する">

インストールの画面に戻ります。自動で切り替わらないときは「Refresh」を押します。

</Step>
</Steps>

データがダッシュボードに出るまでには数時間かかります。すぐに数字が出なくても、しばらく待ってから確かめましょう。

<Note tone="info">

以前に`theme.liquid`へトラッキングコードを貼って使っていた場合、新しいアプリへコードの変更なしで移行されます。既存のプロジェクトがあるときは「Connect Project」を押すと、プロジェクトの管理者に確認メールが届きます。

</Note>

Shopify Plusのストアでは、チェックアウトと購入後のページも[Shopifyのピクセル](https://help.shopify.com/ja/manual/promoting-marketing/pixels/overview)を通じて計測されます。

## 見られるヒートマップの種類

[ヒートマップの公式解説](https://learn.microsoft.com/en-us/clarity/heatmaps/heatmaps-overview)によると、Clarityでは5種類のヒートマップを使えます。パソコン、タブレット、スマホの表示を切り替えて比べられ、最低限のアクセス数の条件もありません。

<Figure title="Clarityのヒートマップ" source="Microsoft Learn「Heatmaps overview」">

| 種類 | 分かること | Shopifyでの使いどころ |
| --- | --- | --- |
| クリックマップ | どこが何回押されたか | 「カートに追加」が押されているか |
| スクロールマップ | どこまで読まれたか | 商品説明の下の方まで届いているか |
| エリアマップ | 選んだ範囲の合計クリック数 | バナーや商品一覧のまとまりごとの反応 |
| コンバージョンマップ | 購入につながったクリック | 購入した人がどこを押していたか |
| アテンションマップ | 各部分を見ていた時間 | 長く見られている説明や画像 |

</Figure>

クリックマップでは、押しても何も起きない「デッドクリック」や、何度も連打される「レイジクリック」も絞り込めます。リンクに見えて押せない画像や、反応の遅いボタンを見つけるのに役立ちます。

## 使う前に知っておきたいこと

### データは30日で消える

[公式のFAQ](https://learn.microsoft.com/en-us/clarity/faq)によると、録画などのデータを見られるのは記録から最大30日です。セールの前後を比べたいときは、期間内に確認しておきましょう。

### 入力欄は自動で隠される

[マスキングの公式解説](https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-masking)によると、初期設定は「Balanced」で、数字とメールアドレスが隠されます。入力欄とドロップダウンは、どのモードでも常に隠されます。

<Compare>
<Column title="Strict">

- ページの内容をすべて隠す

</Column>
<Column title="Balanced (初期設定)" tone="accent">

- 数字とメールアドレスを隠す

</Column>
<Column title="Relaxed">

- 内容は隠さない
- 入力欄とドロップダウンは隠す

</Column>
</Compare>

設定を変えても反映されるのは新しい録画からで、過去の録画には適用されません。

### 欧州からのアクセスには同意が要る

FAQでは、欧州経済領域 (EEA)、英国、スイスのユーザーには、Cookieを置く前に明示的な同意が必要とされています。同意が無いと、セッションが途切れるなど一部の機能が制限されます。国内のお客様だけなら影響はありませんが、海外にも販売するストアはCookieバナーの設定を確かめましょう。

## 他のヒートマップアプリと迷ったら

Clarityは無料で始められる一方、日本語での直接サポートはありません。カゴ落ちの分析や有料のサポートも比べたいときは、[Recoketの代わりを比較した記事](/recoket/)でLucky Orangeとの違いをまとめています。

<Flow title="ヒートマップでストアを直す流れ" caption="当サイトがおすすめする進め方です" steps={[{ label: "Clarityを入れる" }, { label: "1〜2週間データをためる" }, { label: "商品ページを見る", note: "スクロールとクリック" }, { label: "1か所だけ直す" }, { label: "前後を比べる" }]} />

まずは売上の多い商品ページを1つ決めて、スクロールマップで説明が読まれているかを確かめるところから始めると、直す場所を絞りやすくなります。

## よくある質問

### Q. Microsoft Clarityは本当に無料ですか？

無料です。公式のFAQには、ずっと無料で、トラフィックの上限も有料版への切り替えも無いと書かれています。App Storeの掲載ページのプランも無料の1つだけです。

### Q. Clarityを入れるとストアが遅くなりますか？

公式のFAQでは、ClarityのJavaScriptは非同期で読み込まれ、ページの表示速度に影響しないと説明されています。気になる場合は、導入の前後でストアの速度を比べてみてください。

### Q. 日本語で使えますか？

App Storeの掲載ページでは、対応言語に日本語が含まれています。ただし、開発者による日本語での直接サポートはありません。

### Q. 録画にお客様の住所やカード番号は残りますか？

入力欄はどのマスキングモードでも隠されるため、フォームに入力した内容は記録されません。表示されている数字やメールアドレスも、初期設定のBalancedでは隠されます。