Shopifyのヒートマップ導入方法。Clarity以外のアプリも紹介

Shopifyストアでは、アクセス数や離脱率を確認するだけでは、ユーザーがページ内のどこで迷い、なぜ購入に至らなかったのかまでは把握できません。

ヒートマップを導入すると、クリックされた場所やスクロールされた範囲、ユーザーが操作に迷った場面などを可視化できます。中でもMicrosoft Clarityは、無料で利用でき、Shopify公式アプリも提供されている行動分析ツールです。

本記事では、Shopifyにおけるヒートマップの活用方法やMicrosoft Clarityの機能、導入手順、分析方法を解説します。Clarity以外のヒートマップツール・アプリも紹介するため、ストアに合ったツールを選ぶ際の参考にしてください。

Shopifyの配送料を安くしたい方へ

国内三大宅配会社と個別契約なしで、特別価格で利用できる！

Shopifyアプリを見る 資料ダウンロード

目次

• ヒートマップの概要

  • ヒートマップとは

  • ヒートマップで分析できること

• Shopifyでヒートマップを活用するメリット

  • ユーザーの行動を視覚的に把握できる

  • 商品ページの改善点を見つけられる

  • 購入ボタンやバナーの配置を見直せる

  • スマートフォンの操作性を改善できる

  • データを根拠に改善施策を検討できる

• Shopifyでヒートマップを導入する方法

  • Shopifyアプリを利用する

  • 外部のヒートマップツールを利用する

• Microsoft Clarity（クラリティ）とは

  • Microsoftが提供する無料の行動分析ツール

  • Microsoft Clarityの主な機能

• ShopifyにMicrosoft Clarityを導入する方法

  • Microsoft Clarityの導入方法は二つある

  • Shopify公式アプリでMicrosoft Clarityを導入する手順

  • GoogleタグマネージャーでMicrosoft Clarityを導入する手順

• Shopifyにおすすめのヒートマップツール・アプリ

  • Lucky Orange Heatmaps & Replay

  • Propel Replay, Survey, Heatmap

  • ミエルカヒートマップ

  • Contentsquare

• Shopifyでヒートマップを分析するときの注意点

  • データが少ない段階で判断しない

  • ヒートマップだけで原因を断定しない

  • PCとスマートフォンのデータを混在させない

  • 個人情報やCookieに配慮する

  • テーマやアプリを変更した後に計測を確認する

ヒートマップの概要

まず始めに、ヒートマップの仕組みや分析できる内容を詳しく解説します。

ヒートマップとは

ヒートマップとは、ウェブページを訪問したユーザーの行動を、色の濃淡や図形で可視化する分析手法です。

ユーザーがクリックまたはタップした場所、ページをどこまでスクロールしたか、どのエリアに注目したかなどを確認できます。反応が多い場所は赤やオレンジなどの暖色、反応が少ない場所は青などの寒色で表示されることが一般的です。

Shopifyの標準機能には、ページ上のクリックやスクロールをヒートマップで表示する機能が備わっていません。そのため、Shopifyアプリや外部のヒートマップツールを導入する必要があります。

ヒートマップで分析できること

ヒートマップで確認できる主な内容は、次のとおりです。

• クリック・タップされた場所

クリックマップでは、ユーザーがページ上のどこをクリックまたはタップしたかを確認します。

商品画像やバナー、購入ボタン、メニューなどが想定どおりに操作されているかを分析できます。リンクを設定していない画像が繰り返し押されている場合は、ユーザーがその画像をリンクだと誤認している可能性があります。

• スクロールされた範囲

スクロールマップでは、ページを訪問したユーザーがどの位置までスクロールしたかを確認します。

商品説明やレビュー、配送情報、購入ボタンなど、重要なコンテンツまでユーザーが到達しているかを判断する際に役立ちます。ページの途中で閲覧者が大きく減っている場合は、コンテンツの順番やページの長さを見直す必要があります。

• 注目されているエリア

ヒートマップツールによっては、ユーザーがページ内のどのエリアに長く滞在したかを分析できます。

よく読まれている説明や関心を集めている画像が分かれば、ユーザーのニーズを踏まえてコンテンツの配置を調整できます。ただし、滞在時間が長いからといって、必ずしも内容が高く評価されているとは限りません。説明が分かりにくく、理解に時間がかかっている可能性も考慮しましょう。

• ページ内で離脱が増える場所

スクロール率やセッションレコーディングを確認すると、ユーザーがページのどの付近で閲覧をやめたかを推測できます。

商品情報が不足している、文章が長い、画像が見にくい、次の行動が分かりにくいといった問題を発見する手掛かりになります。

Shopifyでヒートマップを活用するメリット

ヒートマップを導入すると、ユーザーの行動に基づいて商品ページや購入導線を改善できます。ここでは、Shopifyストアでヒートマップを活用する主なメリットを紹介します。

ユーザーの行動を視覚的に把握できる

Shopifyのアクセス解析では、ページの閲覧数や流入元、購入率などを確認できます。しかし、ユーザーがページ内のどの場所に注目し、どのように操作したかまでは把握しにくい場合があります。

ヒートマップを使えば、クリックやスクロールなどの行動を視覚的に確認できます。専門的な分析知識が少なくても、ユーザーの反応が集まっている場所を直感的に理解しやすい点がメリットです。

商品ページの改善点を見つけられる

Shopifyの商品ページには、商品画像や説明文、価格、バリエーション、レビュー、配送情報など、さまざまな要素が掲載されています。

ヒートマップを利用すると、ユーザーがよく見ている情報と、ほとんど見ていない情報を区別できます。サイズ表やレビューまで到達するユーザーが少ない場合は、掲載位置を上へ移動するなどの改善を検討できます。

商品画像ばかりクリックされ、商品説明が読まれていない場合は、画像内に特徴を掲載したり、説明文を短く整理したりする方法も有効です。

購入ボタンやバナーの配置を見直せる

購入ボタンやキャンペーンバナーを掲載しても、ユーザーに見られていなければ十分な効果は期待できません。

スクロールマップを確認すると、購入ボタンが表示される前に多くのユーザーが離脱していないかを分析できます。クリックマップでは、ボタンが表示されていても実際には押されていないケースを発見できます。

反応が少ない場合は、ボタンの位置や文言、周囲の情報を見直しましょう。ユーザーが購入前に求める情報をボタン付近に配置すると、不安の解消につながります。

スマートフォンの操作性を改善できる

PCとスマートフォンでは、画面の大きさや操作方法が異なります。PCでは問題なく操作できるページでも、スマートフォンではボタンが小さかったり、複数の要素が重なったりする場合があります。

デバイス別にヒートマップを確認すれば、スマートフォン特有の問題を見つけやすくなります。タップしにくいボタンや、商品情報を隠しているポップアップ、操作を妨げる追従要素などを確認しましょう。

データを根拠に改善施策を検討できる

ストアのデザインやコンテンツを担当者の感覚だけで変更すると、改善前より使いにくくなる可能性があります。

ヒートマップを活用すれば、実際のユーザー行動を根拠として改善案を検討できます。制作会社や社内メンバーにデータを共有すれば、変更する理由を説明しやすくなり、意思決定も進めやすくなります。

Shopifyでヒートマップを導入する方法

Shopifyでヒートマップを利用する方法は、Shopifyアプリと外部ツールに大きく分けられます。ここでは、それぞれの導入方法と向いているケースを紹介します。

Shopifyアプリを利用する

Shopify App Storeには、ヒートマップやセッションレコーディングを利用できるアプリが公開されています。

アプリをインストールし、必要な設定を行うだけで計測を始められるものが多く、テーマファイルの編集やタグの設置に不安がある方に向いています。Shopify管理画面から分析データを確認できるアプリもあります。

一方で、無料プランでは計測できるセッション数やデータの保存期間が限られる場合があります。ストアのアクセス数が多い場合は、月額料金や追加料金も確認しましょう。

おすすめのアプリはこの記事の後半で紹介します。

外部のヒートマップツールを利用する

Shopify専用アプリではなく、ウェブサイト向けの外部ツールを導入する方法もあります。

外部ツールを利用する場合は、発行されたトラッキングコードをShopifyストアへ設置します。Googleタグマネージャーを利用してコードを管理する方法も一般的です。

外部ツールは詳細な分析機能や絞り込み機能を備えている傾向があります。ただし、初期設定やタグ管理に専門知識が必要な場合もあるため、運用体制を踏まえて選びましょう。

Microsoft Clarity（クラリティ）とは

Microsoft Clarityは、Microsoftが提供する無料の行動分析ツールです。ここでは、Microsoft Clarityの特徴や主な機能、Shopifyストアで利用するメリットを詳しく解説します。

Microsoftが提供する無料の行動分析ツール

Microsoft Clarityは、ユーザーがウェブサイトをどのように閲覧し、操作したかを分析するツールです。

ヒートマップやセッションレコーディングの他、ユーザー行動をまとめたダッシュボード、スマートイベント、コンバージョンファネルなどを利用できます。Copilotによる録画やヒートマップの要約にも対応しています。

MicrosoftはClarityを無料で提供しており、トラフィック量による利用制限も設けていません。アクセス数が少ないストアから多いストアまで、費用を抑えてヒートマップ分析を始められます。

Microsoft Clarityの主な機能

Microsoft Clarityの主な機能は次のとおりです。

• ヒートマップ

Clarityでは、クリックマップやスクロールマップ、エリアマップなどを利用できます。

クリックマップでは、PCのクリックやスマートフォンのタップを可視化します。リンクが設定されていない場所への反応も記録されるため、ユーザーがリンクだと誤認している要素を発見する際にも役立ちます。

スクロールマップでは、ページ内の各地点まで到達したユーザーの割合や、閲覧者が減少した位置を確認できます。PCやタブレット、スマートフォンに分けた分析にも対応しています。

エリアマップでは、選択した領域に含まれる要素のクリック数やクリック率をまとめて分析します。商品画像のセクションやおすすめ商品のエリアなど、複数の要素を含む領域の反応を確認したい場合に有効です。

• セッションレコーディング

セッションレコーディングは、ユーザーがページを閲覧した際の動きを再現する機能です。

マウスの動きやクリック、スクロール、ページ遷移などを時系列で確認できます。ユーザーが操作に迷っている場所や、フォーム入力の途中で離脱した場面を詳しく分析したい場合に役立ちます。

録画はデバイスや流入元、閲覧ページ、イベントなどの条件で絞り込めます。Clarityでは通常の録画データを30日間保持し、お気に入りに登録した録画は最長9カ月間保存します。

• スマートイベント

スマートイベントは、購入やカート追加、チェックアウト開始など、重要なユーザー行動をまとめて計測する機能です。

Clarityは「Purchase」「Add to Cart」「Begin Checkout」などの行動を自動的に検出します。ボタンのクリックやページ訪問を組み合わせ、管理画面から独自のイベントを作成する方法にも対応しています。

• コンバージョンファネル

コンバージョンファネルでは、ユーザーが購入などの目標へ進む過程を段階別に分析します。

商品ページの閲覧やカート追加、チェックアウト開始、購入完了といった流れを設定すれば、離脱が増えている段階を把握しやすくなります。ページ訪問やスマートイベントを組み合わせて設定できるため、ストアの購入導線に合わせた分析が可能です。

• Copilotによる分析支援

Clarityには、録画やヒートマップをAIで要約する機能があります。

大量の録画を一つずつ確認しなくても、ユーザー行動の傾向や問題が発生している箇所を把握する手掛かりを得られます。ただし、AIの要約だけで改善内容を決めず、該当する録画や数値も確認しましょう。

ShopifyにMicrosoft Clarityを導入する方法

ShopifyにMicrosoft Clarityを導入する方法には、公式アプリを使う方法とトラッキングコードを設置する方法があります。ここでは、それぞれの特徴と具体的な設定手順を詳しく解説します。

Microsoft Clarityの導入方法は二つある

ShopifyにMicrosoft Clarityを導入する方法は、Shopify公式アプリ「Microsoft Clarity: AI Insights」を利用する方法と、Googleタグマネージャーでトラッキングコードを設置する方法の二つです。

公式アプリを利用する方法は、アプリ埋め込みを有効にするだけで導入できます。コードを直接編集する必要がないため、簡単にClarityを導入したい場合に適しています。

一方、Googleタグマネージャーを利用する場合は、Clarityで発行したトラッキングコードやプロジェクトIDを基にタグを設定します。既にGoogleタグマネージャーでGoogle Analyticsや広告タグなどを管理しているストアでは、既存のタグ管理にClarityを追加しやすい点がメリットです。

なお、同じストアに公式アプリとGoogleタグマネージャー経由のClarityタグを重複して設定すると、データが二重に計測される可能性があります。既にClarityを導入している場合は、現在の設定状況を確認してから導入方法を選びましょう。

Shopify公式アプリでMicrosoft Clarityを導入する手順

Shopfiyの公式アプリ「Microsoft Clarity: AI Insights」でClarityを導入する手順は次のとおりです。

1．Shopify App StoreでMicrosoft Clarityをインストールする

Shopify App Storeで「Microsoft Clarity: AI Insights」を検索し、「インストール」をクリックしてください。

2．アクセス権限を確認する

アプリが要求するデータへのアクセス権限が表示されます。内容を確認した上で、「インストール」をクリックします。

3．アプリの設定画面を開く

初めてClarityを導入する場合は、「テーマの設定に移動」をクリックします。

既にClarityのタグを設置している場合は、新しいプロジェクトを作成せず、「既存のClarityプロジェクトをリンクする」をクリックします。

4．Clarity JSを有効にする

テーマのアプリ埋め込み設定が開いたら、「Clarity JS」を有効にします。その後、「保存」をクリックして設定を反映してください。

5．Clarityのダッシュボードを確認する

Clarityのアプリへ戻り、ダッシュボードが表示されるか確認します。表示が更新されない場合は、画面を再読み込みしてください。

設定後、ダッシュボードにデータが表示されるまで数時間かかる場合があります。

GoogleタグマネージャーでMicrosoft Clarityを導入する手順

Googleタグマネージャーを利用する場合は、Microsoft公式のタグテンプレートを使う方法と、トラッキングコードをカスタムHTMLとして登録する方法があります。

ここでは、公式タグテンプレートを使う手順を紹介します。

1．Clarityでプロジェクトを作成する

Microsoft Clarityへサインインし、新しいプロジェクトを作成します。

プロジェクト名にはストア名など、管理しやすい名称を入力してください。ウェブサイトURLにはShopifyストアのURLを登録します。

2．Clarityの追跡コードを取得する

プロジェクトを作成したら、左側のメニューから「セットアップ」をクリックします。

セットアップ画面に表示される「追跡コード」を確認し、コピーします。

3．Googleタグマネージャーで新しいタグを作成する

Googleタグマネージャーへログインし、対象のコンテナを開きます。「タグ」から「新規」を選び、タグの設定画面へ進みます。

4．Microsoft ClarityのタグタイプでカスタムHTMLを選択する

タグタイプの選択画面から「カスタムHTML」を選択し、ワークスペースへ追加します。

5．カスタムHTML内に追跡コードをペーストする

追加したタグの設定画面に、Clarityの追跡コードをペーストを入力します。

プロジェクトIDは、ClarityのプロジェクトURLや設定画面から確認できます。異なるプロジェクトのIDを入力しないよう注意しましょう。

6．トリガーに「All Pages」を指定する

トリガーには「All Pages」を指定し、Shopifyストアの各ページでClarityが動作するように設定します。

特定のページだけを分析する場合は、対象URLに合わせたトリガーを設定してください。

7．タグを公開する

設定内容を保存し、Googleタグマネージャーのプレビューモードでタグが動作しているかを確認します。問題がなければ、コンテナを公開してください。

Microsoftの公式ドキュメントでも、Clarityの公式テンプレートにプロジェクトIDを入力し、「All Pages」を設定する方法が案内されています。

Shopifyにおすすめのヒートマップツール・アプリ

Shopify向けのヒートマップツールには、無料で使える外部ツールからEC向けの機能を備えた有料アプリまで、さまざまな選択肢があります。ここでは、Shopifyストアにおすすめのヒートマップツールやアプリを紹介します。

Lucky Orange Heatmaps & Replay

Lucky Orange Heatmaps & Replayは、ヒートマップやセッションレコーディングを通じて、Shopifyストア内のユーザー行動を分析できるアプリです。訪問者がどのようにページを移動しているか、どこで操作に迷っているか、どの要素に注目しているかを視覚的に確認できます。

商品閲覧やカート追加、チェックアウト開始などのチェックアウトイベントも追跡できるため、商品閲覧から購入までのどの段階で離脱が発生しているかを分析できます。あらかじめ用意されたコンバージョンファネルを利用し、購入導線上の問題を見つけることも可能です。

その他、ユーザーへ直接質問できるアンケート機能や、サイトのデータについて質問するとAIが回答する「Discovery」も搭載しています。数値の急激な変化やコンバージョンを妨げている要因などを分析し、改善につながるヒントを得たい場合に役立ちます。

料金は無料プランの他、月額19ドルの「Launch」、月額39ドルの「Build」、月額89ドルの「Grow」があります。

Propel Replay, Survey, Heatmap

Propel Replay, Survey, Heatmapは、セッションレコーディングやヒートマップ、アンケートを通じて、Shopifyストア内の離脱要因や購入を妨げている問題を分析できるアプリです。リアルタイムまたは録画済みのセッションを確認し、ユーザーがカートを離脱した場所や操作に迷った箇所を把握できます。

AIによるセッション分析にも対応しており、録画内容を要約して改善すべきポイントを確認できます。ヒートマップでは、カート追加ボタンが十分にクリックされているか、不要な要素に注意が向いていないか、レイアウトが崩れていないかなどを分析できます。また、サイト上でアンケートを実施し、購入に至らなかった理由をユーザーから直接収集することも可能です。

その他、IPアドレスや流入元を基に、ボットや競合によるアクセスを確認する機能も備えています。広告経由のアクセスを分析し、広告費を消費している不要なトラフィックを把握したい場合にも役立ちます。

料金は無料プランの他、月額9.90ドルの「Basic」、月額14.90ドルの「Plus」、月額39.90ドルの「Premium」があります。

ミエルカヒートマップ

ミエルカヒートマップは、ウェブページ上のユーザー行動を可視化し、ページ改善やコンバージョン率向上を支援する国産のヒートマップツールです。熟読、離脱、クリックの3種類のヒートマップを利用でき、ユーザーがどの部分をよく読んでいるか、どこで離脱しているか、どの要素がクリックされているかを確認できます。

ヒートマップの分析に加えて、AIがデータを自動解析し、ページの課題や改善案を提案する機能も備えています。また、改善案の効果を本番環境へ反映する前に検証できるA/Bテストや、ページを直接編集できる簡易CMS機能にも対応しています。分析から仮説立案、検証、実装までを一つのツールで進められる点が特徴です。

料金は、サイトのPV数や利用するサイト数に応じて複数のプランが用意されています。

Contentsquare

Contentsquareは、ウェブページ上のユーザー行動を可視化し、コンテンツやUIの改善につなげられるデジタル体験分析ツールです。ユーザーがどこをクリック、タップ、ホバー、スクロールしたかを確認できる他、ページ内の各要素がコンバージョンや売り上げにどの程度貢献しているかも分析できます。

特徴の一つが、ページを複数のゾーンに分けて分析する「ゾーンベースのヒートマップ」です。画像やリンク、ボタンなどの各要素について、露出やクリック数だけでなく、コンバージョン率や収益への影響まで確認できます。期間や流入元が異なるヒートマップを並べて比較したり、A/Bテストの結果を比較したりすることも可能です。

料金は無料プランの他、月額39ドルの「Growth」、月額料金要問い合わせの「Pro」と「Enterprise」があります。

Shopifyでヒートマップを分析するときの注意点

ヒートマップはストア改善に役立ちますが、データの読み方を誤ると効果の低い施策につながる可能性があります。ここでは、Shopifyでヒートマップを分析する際の注意点を紹介します。

データが少ない段階で判断しない

数件のセッションだけを見て、商品ページを大幅に変更することは避けましょう。

少数のユーザーによる行動が、ストア全体の傾向を表しているとは限りません。ある程度のセッション数を集めた上で、複数のユーザーに共通する行動を探す必要があります。

アクセス数が少ないストアでは、分析期間を長めに設定してください。商品ページごとのデータが少ない場合は、似た構成のページをまとめて確認する方法もあります。

ヒートマップだけで原因を断定しない

ユーザーがページ下部までスクロールしていないからといって、ページが長すぎるとは限りません。

ページ上部で必要な情報を得て購入したユーザーや、検索結果へ戻ったユーザーも含まれます。スクロール率だけでは、ユーザーの意図まで判断できません。

ヒートマップ、録画、Google Analytics、Shopifyの購入データなどを組み合わせ、複数の情報から原因を検討しましょう。

PCとスマートフォンのデータを混在させない

PCとスマートフォンでは、画面の表示範囲や操作方法が異なります。

両方のデータをまとめて分析すると、ボタンの位置やスクロール率を正しく評価しにくくなります。デバイスごとにヒートマップを切り替え、それぞれの画面で改善点を探してください。

個人情報やCookieに配慮する

セッションレコーディングを利用する際は、個人情報や入力内容の取り扱いに注意が必要です。

マスキング設定だけでなく、プライバシーポリシーへの記載やCookie同意管理も確認しましょう。ShopifyのCookieバナーや外部の同意管理ツールを利用している場合は、ユーザーの同意状況に応じてClarityが動作するかを検証してください。

事業を展開する国や地域によって適用される法令が異なるため、必要に応じて専門家へ相談することも重要です。

テーマやアプリを変更した後に計測を確認する

Shopifyのテーマを変更したり、ページ構成へ影響するアプリを追加したりすると、ヒートマップの表示やイベント計測が変わる場合があります。

変更後は、Clarityのダッシュボードやリアルタイム録画を確認してください。購入ボタンやチェックアウト開始などのスマートイベントも、実際の操作と一致しているかを検証しましょう。