WordPressでサイトを作り始めた当初は、訪問者が何を求めているかを推測することがほとんどでした。ヒートマップを使い始めて初めて、訪問者が自分のサイトをどのように見ているのか、どこをクリックしたのか、どこまでスクロールしたのか、そして何が訪問者の興味を引いたのかを理解することができました。
WordPressサイトを改善しようとしているが、何がうまくいっていて何がうまくいっていないのか本当に〜してもよいですか？
長年にわたっていくつかのツールを試してきた結果、WordPressでヒートマップを設定する簡単な方法は2つに絞られました：Microsoft ClarityとUserFeedbackです。
このガイドでは、各設定プロセスを順を追って説明する。最後には、サイトにデータ主導の変更を加えるために必要なツールを手に入れることができます。🔥
なぜWordPressのヒートマップを設定する必要があるのか？
ヒートマップは、訪問者がWordPressサイトとどのようにやり取りしているかを正確に示すビジュアルツールです。ページ上で最も有効化したエリアと最も有効化しなかったエリアを色分けして表示します：
- 赤、オレンジ、黄色（「ホット」エリア）は、訪問者がクリック、タップ、または最も時間を費やした場所を示しています。
- 青と緑（”コールド “エリア）は、ほとんど、あるいはまったく注目されていないスポットを示している。
この有効化したアクティビティを見ることで、何が有効で何が有効でないかを推測する必要がなくなります。言い換えれば、ヒートマップは訪問者の行動を明確に把握することで、当て推量を排除するのに役立ちます。
といった重要な質問に答える手助けをしてくれる：
- 人々はあなたのCTAボタンをクリックしていますか？
- あなたのコンテンツを見るために、彼らは十分にスクロールダウンしているだろうか？
- 彼らは何もしないものをクリックしているのだろうか？
この情報があれば、サイトに賢い変更を加えることができる。何を修正し、何を移動し、何を改善すべきかがわかるようになる。
読者を増やしたり、売上を伸ばしたり、見込み客からの問い合わせを増やしたりするために、そのインサイトを利用することができます。
以下では、ヒートマップを追加するのに最適な2つのツールを使ってWordPressヒートマップを設定する方法を紹介する。1つは完全無料、もう1つは追加機能のあるプレミアムオプションです。
以下のジャンプリンクから、お好きな方法へどうぞ：
ステップ0：ヒートマップ用WordPressサイトの準備
WordPressサイトにヒートマップを追加する前に、サイトが適切に準備されていることを確認することが重要です。いくつかの予防措置を講じることで、開始時の問題を未然に防ぐことができます。
本番サイトに初めてヒートマップを追加する場合は、まずステージングサイトですべてをテストするのが賢明です。
ステージングサイトとは、基本的にライブサイトの複製であり、実際のサイトに影響を与えることなく変更や新機能のテストを行うことができます。ユーザーエクスペリエンスを損なうことなく、ヒートマップのような新しいツールを安全に試すことができます。
その後、変更をプッシュして実際のサイトに適用するだけです。
Bluehostを使用している場合は、その迅速な1クリックソリューションのおかげで、簡単にステージングサイトを作成することができます。
とはいえ、ホスティングサービスを通じてステージングにアクセスできない場合は、WP Stagecoachのようなプラグインを使ってステージングサイトを作成することもできる。
WordPressのステージングサイトの作成方法については、こちらをご覧ください。
また、大きな変更を加える前には、必ずサイトのバックアップを取ってください。バックアップがあれば、万が一セットアップ中に何か問題が発生しても、重要なデータを失うことなく、簡単にサイトを以前の状態に戻すことができます。
最後に、ヒートマップは、他の分析ツールやユーザーからのフィードバックと併用するのが最も効果的であることを忘れないでください。
ヒートマップは、潜在的な問題や機会を発見するための出発点であり、唯一の情報源ではありません。ヒートマップから得られる洞察をより広範なデータと組み合わせることで、訪問者がサイトとどのようにやり取りしているかをより明確かつ正確に把握することができます。
方法1：Microsoft Clarityを使ってWordPressヒートマップを設定する
Microsoft Clarityは、WordPressとシームレスに統合できる無料の使いやすいヒートマップとセッション記録ツールです。サイト全体の分析に最適で、訪問者の行動を理解したい初心者、ブロガー、中小企業のオーナーに最適です。
ヒートマップを追跡し、ユーザー・インタラクションのインサイトを得るために、いくつかのパートナーサイトで使用しているのはそのためです。
Ǵ重要:Clarityはサービス向上のために匿名化された利用データを収集し、GDPRやその他のプライバシー法への準拠に役立てています。GDPRコンプライアンスの詳細については、WordPressとGDPRに関するガイドをご覧ください。
ステップ1：無料のMicrosoft Clarityアカウントを作成する
Microsoft ClarityでWordPressヒートマップを設定するには、まずアカウントが必要です。
Microsoft Clarityのサイトにアクセスし、「Get Started」をクリックします。
表示されるポップアップで、Microsoft、Facebook、Googleのアカウントでサインアップできることがわかります。お好きな方をクリックしてください。
このチュートリアルでは、「Googleにログイン」を選択する。
その後、適切なアカウントを選択し、サインアッププロセスを実行することができます。
そして、確認ページで「Continue」をクリックする。
サインアップすると、メールアドレスの確認が求められます。
続行する前に、クラリティ利用規約を確認し、チェックボックスをクリックすることをお忘れなく。
WordPressサイトの新規プロジェクトを作成するよう促されます。
プロジェクト名をつけ、サイトのURLを入力し、ドロップダウンメニューから業種を選択するだけです。
それが終わったら、「新規プロジェクトを追加」をクリックしてセットアップを完了する。
これで、Microsoft Clarity WordPressプラグインをインストールして、サイトにヒートマップを設置する準備が整いました。
ステップ2：WordPressサイトにMicrosoft Clarityをインストールする
このステップでは、Microsoft Clarityプラグインをインストールし、作成したアカウントに接続します。
WordPressダッシュボードから、プラグイン ” 新規プラグインを追加に進みましょう。
Microsoft Clarityプラグインをすばやく見つけるには、検索バーを使用します。
関連する検索結果で「今すぐインストール」をクリックし、表示されたらもう一度「有効化」をクリックするだけだ。
ステップバイステップの手順については、WordPressプラグインのインストール方法をご覧ください。
プラグインを有効化したら、次のステップとして、両方のツールを接続するClarityプロジェクトを選択します。
WordPress管理エリアからClarityに移動し、ドロップダウンメニューから作成したプロジェクトを選択します。
数秒後、「プロジェクトの統合に成功しました」という通知が表示されるはずです。
詳しくは、WordPressにMicrosoft Clarity Analyticsをインストールする方法をご覧ください。
💡注意: WordPressキャッシュプラグインを使用している場合は、Microsoft Clarityをサイトに接続した後、WordPressキャッシュをクリアする必要があります。これは重要です。そうしないと、Microsoftは数時間サイトを検証できません。
ステップ3：Microsoft Clarityでヒートマップを設定する
手動でコードを貼り付けたり、テーマファイルをいじったりする必要はありません。
Clarityダッシュボードには、WordPressブログやサイトへのアクセス状況を把握できる便利なレポートが用意されています。
主な指標には以下のようなものがある：
- セッション– あなたのサイトが何回訪問されたかを示します。
- Pages per session（セッションごとのページ数） – 訪問者が1セッション中に表示したページ数を示します。
- スクロール距離– ユーザーが各ページをどのくらいスクロールしたかを表示します。
- 有効時間– ユーザーがあなたのページに有効化した時間をトラッキングします。
また、訪問者のタイプや端末をハイライトする「ユーザー概要」のようなビルトインウィジェットも用意されています。
さらに、激怒クリック（ユーザーがイライラして何度もクリックする）や過剰スクロール（ユーザーが何かを探してスクロールしすぎる）などの行動インサイトもある。
ヒートマップを見るには、「ヒートマップ」タブに切り替えてください。
中に入ると、Clarityが自動的に記録したすべてのページヒートマップのリストが表示されます。
分析したいページをクリックするだけ。
ヒートマップを開くと、主に3つの表示があります：クリック、スクロール、アテンションです。
クリック」に切り替えると、訪問者がどこを最もクリックしているかを見ることができます。
スクロール距離を知るには、「スクロール」タブに移動するだけです。
ここでClarityは、ユーザーがページをどのくらいスクロールしたかを明らかにします。これにより、ユーザーが重要なコンテンツを見逃していないかどうかを特定することができます。
最後に、「Attention」ボタンをクリックして、訪問者がページのさまざまな部分に費やした平均時間を確認してください。
赤いエリアは注目度が高く、青いエリアは注目度が低い。
Microsoft Clarityを使ったWordPressヒートマップの設定は以上です！
方法2：UserFeedbackを使ってWordPressヒートマップを設定する
MonsterInsightsのUserFeedbackは、ヒートマップ形式のフィードバックとアンケートおよび高度なターゲティングを組み合わせたものです。より深い洞察と訪問者のフィードバック収集方法のコントロールを必要とする成長中のサイト、オンラインストア、代理店にとって強力な設定です。
WPBeginnerでは、UserFeedbackを利用して、ウェブデザインのカスタマイザーが私たちに何を求め、何を期待しているのかについての洞察を得ています。UserFeedbackをお勧めする理由は、UserFeedbackのレビューをご覧ください！
ステップ1: UserFeedbackのインストールと有効化
まず、UserFeedbackアカウントを設定する必要があります。UserFeedbackのサイトにアクセスし、プランにサインアップしてください。
💡💡 UserFeedbackには無料版もあります。しかし、UserFeedbackのヒートマップ機能をアンロックするには、少なくともエリートプランが必要です。
アカウント登録が完了すると、UserFeedbackアカウントのダッシュボードにリダイレクトされ、UserFeedbackのzipファイルのダウンロードリンクとライセンスキーが表示されます。
さて、いよいよプラグインのインストールだ。
WordPressダッシュボードから、プラグイン ” 新規追加に移動する必要があります。
次の画面では、UserFeedbackを検索してみよう。
その後、他のWordPressプラグインと同様にプラグインをインストールし、有効化することができます。
プラグインのインストールは初めてですか？WordPressプラグインのインストール方法を詳しくご紹介します。
有効化した後、ライセンスキーを入力すると、プランに付属するすべてのプロ機能のロックを解除できます。
これを行うには、UserFeedback ” Settingsに移動します。次に、UserFeedbackのダッシュボードからライセンスキーをコピー＆ペーストして、「ライセンスキー」フィールドに入力してください。
Verify’ボタンをクリックして認証プロセスを開始します。
数秒後、検証成功のメッセージが表示されるはずです。
ステップ2：ヒートマップアドオンの有効化
では、UserFeedback ” AddonsからHeatmapsアドオンをインストールしてみましょう。
ページをスクロールしてヒートマップアドオンを見つけ、該当するボックスで「アドオンのインストール」をクリックすればよい。
インストーラがインストールされたら、’Activate’ボタンをクリックして有効化したことを確認してください。
ステップ 3: 新規ヒートマップの作成
ヒートマップアドオンを有効化したことで、サイトのヒートマップを作成できるようになりました。
WordPressダッシュボードのUserFeedback ” Heatmapsに行き、’New Heatmap’ボタンをクリックしましょう。
表示されるポップアップでドロップダウンメニューを展開し、トラッキングしたい特定のページを選択します。例えば、ホームページ、ランディングページ、ブログ投稿のヒートマップを作成することができます。
ヒートマップを設定するために「作成」ボタンを押してください。
ステップ4：ヒートマップ結果の表示
ヒートマップを作成すると、UserFeedbackはすぐにユーザーデータの収集を開始します。
UserFeedback ” Heatmapsにアクセスして、ヒートマップをクリックし、詳細な視覚的インサイトを見てみましょう。
次の画面では、次のような訪問者に関する詳細な洞察を表示することができます：
- 端末フィルター– デスクトップ、タブレット、モバイルのユーザー行動を比較。
- クリック数– あなたのページのどこがクリックされているかを正確に見ることができます。
- マウスの動き– ユーザーが画面上でどのようにマウスを動かしたかをトラッキング。
複数のチャネルでサイトを宣伝している場合は、UTMキャンペーン、ソース、媒体でデータをフィルターすることもできます。これは、異なるマーケティング活動からの訪問者がサイトにどのように作用するかを理解するのに役立ちます。
これでUserFeedbackを使ったWordPressヒートマップの設定はすべて完了です！
ボーナスステップヒートマップ・インサイトの最大化 🔥 ヒートマップ・インサイトの最大化
ヒートマップが役に立つのは、ヒートマップが教えてくれることに基づいて行動する方法を知っている場合だけです。ここでは、ヒートマップからの洞察をWordPressサイトの実際の改善につなげる方法を紹介します。
訪問者がドロップオフする場所を修正する
スクロールマップを使えば、訪問者がページのどの辺りまで移動したかを確認することができます。重要なコンテンツがページの下の方に埋もれすぎている場合、ほとんどの人はそれを見ることができないかもしれません。
CTAやオファーのような重要な要素をページの上の方に移動してみたり、長いページを小さなセクションや明確な見出しで分割してみたりすることができます。また、日付フィルターを使用して、これらの変更が時間の経過とともに訪問者の行動にどのように影響するかを追跡することもできます。
この小さな変更によって、直帰率を減らし、訪問者をより長く引き留めることができる。
ユーザーの混乱を発見し、解決する
訪問者がクリックできない画像やアイコン、テキストをクリックしようとすることがあります。これは、彼らが混乱しているか、何か違うものを期待していることを示しています。
クリックマップやマウスの動きを確認して、これらのエリアを見つけることができます。必要であれば、それらの画像をリンクさせたり、近くにボタンを追加したりすることで、ユーザーにとってより簡単なものにすることができます。
UserFeedbackで簡単なアンケートを設定して、ユーザーが何を期待していたかを聞くこともできます。
ナビゲーションの問題の特定と修正
訪問者が明確な指示なしに頻繁にページ間をジャンプしているのを見かけたら、ナビゲーションが混乱している可能性があります。
情報を見つけやすくし、混乱を引き起こす可能性のあるものを調整することによって、ナビゲーションを簡素化します。また、初めてサイトを訪れた人のように、サイト内の重要なステップを順を追って確認し、すべてが正しく機能するようにしましょう。
WordPressでカスタムナビゲーションメニューを作成する方法については、こちらのガイドもご参照ください。
CTAボタンを見逃さないようにする
CTA（コール・トゥ・アクション・ボタン）が十分にクリックされていないのであれば、色やテキスト、配置を調整し、より目立つようにすることをお勧めする。
マウスの動きのインサイトを使って、クリックする前の迷いを発見し、端末フィルターをチェックして、CTAがすべての端末、特にモバイルで見やすく、クリックしやすいことを確認しよう。
🧑💻 プロからのアドバイス： コンテンツやデザインに変更を加えることは、始まりに過ぎません。A/Bテストを設定して、ボタンの配置、色、見出しのテキストなど、ページや要素の異なるバージョンを比較し、何が最も効果的かを確認することも強くお勧めします。
詳細な手順については、WordPressでA/Bスプリットテストを行う方法のガイドを参照してください。
この投稿がWordPressのヒートマップ設定のお役に立てば幸いです。次は、WordPressのコンバージョンを急上昇させるランディングページのヒントや、ジオロケーションターゲティングに関する究極のガイドをご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Have a question or suggestion? Please leave a comment to start the discussion.