動画でまる見え！ヒートマップ「Mouseflow」の導入・使い方・無料プラン移行方法

ヒートマップツールのMouseflow （マウスフロー）

Googleアナリティクスでは捉えきれない情報を「可視化」でき、ブログ・ホームページ改善の幅がぐんと広がります。

具体的には、

ようになります。

「Mouseflow」の導入方法から、稼ぐ記事に改善するコツまでを解説！

▼ブログアフィリエイトに役立つおすすめ無料ツール厳選紹介【初心者】

▶【Amazonアソシエイト】ネットで月5万の完全マニュアル

あなたの動き「動画」で記録されてます！

ヒートマップツールとは、

ブログ記事などに訪れたユーザーの行動を「見える化」できるツール

「Mouseflow」は、ユーザーの行動の録画も可能です。

論より証拠、あなたの動きを「撮影した動画」を確認してみてください。

» 動画デモンストレーション（Mouseflow公式）

※URL先へ移動後、デモを開始（Start demo）をクリック➜入力など何もせず下へスクロール➜デモの結果を見る（See Results Of Your Demo）をクリック

自分の動きを動画で確認してみる

» 動画デモンストレーション（Mouseflow公式）

他のヒートマップツール無料プランとの比較

ヒートマップツールの、

• Microsoftの「Clarity」
• 老舗の「User Heat」

無料プランも使ってみましたが、断然「Mouseflow」です。

理由として、

Microsoftの「Clarity」：画面が見づらく、使いづらい
老舗の「User Heat」：無料プランではすぐに見切れて1ページ全てを確認不可

【初心者のブログ・ホームページ改善】まずはMouseflowの5機能でOK！

初心者におすすめな「Mouseflow」の機能は5つ。

この5つの機能を使うだけで、「稼ぐ記事」へと生まれ変わります。

どのような機能か解説します。

１.レコーディンク

ユーザーの動きを録画できる機能。

下の画像をご覧ください。

Mouseflow管理画面の「レコーディング」には、

アクセスのあった記事の「ユーザーの動き」を撮影した動画が、自動的にストック

されていきます。

動画を見たいときは、保存一覧の任意のものにカーソルを当てると再生ボタンが現れるので、そちらをクリックするだけ。

以下のような動画を確認可能です。（Mouseflowで録画した当ブログの動画）

記事に訪れたユーザーが、まず下までザーとスクロールし、

• 30秒あたりで左サイドに追尾する目次を確認
• 下から上へ読み返す

といった、Web特有の行動が見て取れます。

２.クリック

リンクのクリック数を計測できる機能。

続く「クリック」「ムーブメント」「スクロール」「アテンション」機能は、Mouseflow管理画面の「ヒートマップ」から簡単に確認できます。

「クリック」機能は、記事にあるリンクにクリック数を表示できます。（サイドバーなどのリンクにも）

クリック数を計測できると、

• 目次のどの見出しに関心が高いか
• どの関連記事に関心が高いか
• どのアフィリエイトリンクがクリックされているか

を判断できるようになります。

３.ムーブメント

よく読まれている箇所を確認できる機能。

PCユーザーの場合、「マウスのカーソル位置」が「目線の位置」に近いといわれます。

カーソルがよく当たった位置（ユーザーの目線）を可視化した画面がこちら。

青く光っている箇所ほど、ユーザーの目線が当たった箇所になります

これを確認することで、

• クリックしてもらいたいリンクを置く場所
• 読んでもらいたい関連記事を知らせる場所
• 特に見てもらいたい内容を置く場所

の見極めに役立ちます。

４.スクロール

離脱された場所を特定できる機能。

ユーザーの離脱率が色分けと数値で表示されます。

離脱率の高い箇所が必ずしも悪いわけではありません。ただし、記事の大きな改善点につながることもあり得ます。

それを踏まえ、

• 本文に入る前の離脱率の高さは「タイトル」に「内容」が合っていないのかも
• 好ましくない要因での離脱でないかをチェック
• 主要コンテンツは離脱率30～40％内に配置する

といった判断に役立てるとよいでしょう。

さらに「スクロール」機能の実践的な使い方を1つ！

「記事タイトル」と「内容」が合っていない場合、本文に入る前に離脱されることがあるものの…

「グローバルメニュー」などがクリックされた場合も、離脱率は高くなる

なので、離脱率の高さが気になる箇所は、

周囲のリンクのクリック数を確認してみる

これにより「離脱率の高さ」の善悪を判断できることがあります。

５.アテンション

よく読まれている箇所を確認できる機能。

読まれ具合によって色分けされます。

クリックやスクロール・マウスの動きなどを総合的に判断して色分けされているようです。

「赤」に近づくほど「熟読された箇所」、「濃い青」に近づくほど「スルーされた箇所」といった区分。

「アテンション」は、ほとんど「ムーブメント」と同じ機能です。

2つの違いがこちら。

• ムーブメント：PCユーザーの目線を知る機能
• アテンション：スマホユーザーの目線を知る機能

これを踏まえ、アテンションを活用することで、

• クリックしてもらいたいリンクを置く場所
• 読んでもらいたい関連記事を知らせる場所
• 特に見てもらいたい内容を置く場所　

の選定に役立ちます。

さらに「アテンション」の役立ちポイントをもう1つ。

離脱率を確認できる「スクロール」では、

目次リンクから記事の途中へ移動された場合 ➜ その過程はすべて「通過した」と判定 ➜ つまり「読んだ」と判定

なので…

スクロール＝記事の読まれ具合を判断できない

そういった意味でも、

ムーブメント・アテンション＝よく読まれている箇所を判断

といった具合に使い分けてください。

以上、初心者におすすめな「Mouseflow」5つの機能でした。

1. レコーディング
2. クリック
3. ムーブメント
4. スクロール
5. アテンション

Mouseflowの導入方法を完全図解【失敗ポイントも詳しく解説】

Mouseflowの導入作業は大きく4つ。

失敗しがちなポイントも漏らさず解説します！

STEP1 Mouseflowのアカウント作成

Mouseflowを利用するには、アカウント作成し、14日間の無料トライアル、その後に料金プランを選択します。

料金プランによる違いがこちら。

	無料プラン	スターター	グロース
料金	0円	2,500円	8,200円
登録サイト数	1サイト	1サイト	3サイト
データ保存期間	3ヵ月	6ヵ月	6ヵ月

㊟さらなる上位プランも存在

アカウント作成はこちらから

» Mouseflow無料トライアル

1.「無料トライアル」をクリック。

㊟「トライアル」とはいえ、無料・・で使い続けられるのでご心配なく！

2.アカウントを作成します。

メール＆パスワードでの登録・Googleアカウントでの登録のいずれかを選択できます。

簡単なのは「Googleアカウントでの登録」

パスワードの入力は、半角英字の大文字と小文字、それに数字や記号も組み合わせないといけないのが面倒なので…。

まずはMouseflowのアカウントを作成してください。

STEP2 ブログ・ホームページにMouseflowをインストール

1.この時点でメールが届いています。

2.メールを開いて、「Click here to validate」をクリック。

3.「サインイン」をクリック。

4.氏名などを入力します。

①あなたの氏名（姓・名）を入力
②「Analytics」を選択

5.Mouseflowを導入したい「ブログURL」などを入力していきます。

①Mouseflowを導入したい「ブログURL」を入力（トップページのURL）
②わたしは「Company website」を選びました（Entertainment/mediaでも問題なし）

6.「インストール」をクリック。

7.「WordPress」をクリック。

8.トラッキングコードが表示されるので「クリップボードにコピー」をクリック。

㊟「次へ」はまだクリックしないで！

ブログにMouseflowをインストール

Mouseflowをインストールしたいブログの、WordPress管理画面を別ウインドウで開きます。

1.「プラグイン」の「新規追加」をクリック。

2.検索窓に「Mouseflow」と入力しプラグインを呼び出し、「今すぐインストール」をクリック

3.「有効化」をクリック。

これでブログにMouseflowがインストールされました。

STEP3 ブログ・ホームページにトラッキングコードを設置

1.一覧表示された「Mouseflow for WordPress」の「Settings」をクリック。

2.「Insert tracking code」をクリック。

3.先ほど「クリップボードにコピー」したものを白枠の中に貼り付けて、「変更を保存」をクリック。

㊟白枠の中には、最初から薄っすら文字が表示されているので少し紛らわしい

4.以下のように「Tracking code is installed」が表示されると、ここまでの作業は完了です！

「変更を保存」は、まだクリックしません。

このままの状態で、STEP4（トラッキングコードの有効化）へと続きます。

---

【失敗例】「Tracking code is installed」 が表示されず、以下の画面が表示された場合

STEP3まで順調なら、続きはこちら

↓↓↓↓↓↓↓↓↓↓↓↓↓↓

STEP4 トラッキングコードの有効化

1.「Tracking code is installed」と表示された画面の「変更を保存」をクリック。

Mouseflow画面へ

1.以下の画面が表示されます。

まだ「閉じる」をクリックしないでください！

ここで「ブログへのトラッキングコード設置」を、Mouseflowに認識させる必要があります。

ブログ画面へ

Mouseflowを導入するブログのドップページを、「別ウインドウ」かつ「シークレットモード」で開いてください。

Google Chrome でのシークレッドモード表示方法

• Windows：普通にChrome を開いた状態で「Ctrl+Shift+n キー」
• Mac： 普通にChrome を開いた状態で 「⌘+shift+n キー」

開いたブログトップページで、適当にスクロールさせたり、ページ内にあるリンクをクリックしてください。

㊟Mouseflowにこの行動を記録させるためにやる作業です

Mouseflowのトラッキングコード設置が上手くいっていれば、このデータが記録されています。

Mouseflow画面へ

1.Mouseflow画面に戻り、「閉じる」をクリック。

2.「トラッキングを有効にする」をクリック。

3.「The Privacy Settings」をクリック。

4.自らの行動を除外するよう設定します。

①「自分のIPを追加する」をクリック
②「保存」をクリック

5.名前を入力し、「Confirm and activate tracking」をクリック。

㊟名前は絶対ローマ字で入力！←この部分につまずいて３時間ほど迷宮入りしました（(泣)）

6.以下の画面が表示されると、ブログへのMouseflow導入がすべて完了しました。

お疲れさまでした！

7.この時点でMouseflowからメールが届いています。（2022年10月時点の画像）

8.メールを開いて「Log in」をクリックで、Mouseflow管理画面へ移動します。

9.こちらがMouseflowの管理画面です。

ブックマークして、いつでもアクセスできるようにしておいてください。

Mouseflowの新規アカウント作成はこちら

» Mouseflow無料トライアル

Mouseflow無料トライアル期間終了後の無料プラン切り替え方法

無料トライアル期間が終了後、そのまま放置すると機能が稼働しなくなるので、無料プランに移行してください。

ただし「無料プラン」は、

• 計測Webサイト数は1つのみ
• データ保存期間は1ヶ月
• 計測セッション数500まで/月

となります。

複数のWebサイトで使用したり、アクセス数の多いWebサイトでMouseflowを利用するなら、有料プランへの移行もあり。

1.Mouseflow管理画面にログインして、左メニューの「アップグレードする」をクリック。

2.「詳細」をクリック。

※「無料プラン」は表示されていません

3.「Free」の「選択」をクリック。

4.「機能の制限を理解してダウングレードします」をクリック。

5.「ダウングレードの確認」をクリック。

6.これで無料プランへの移行が完了しました。

制限はあるものの、Mouseflowを継続して利用できます。

【Mouseflowの導入・使い方・無料プラン移行方法】まとめ

この記事のポイント。

• 初心者におすすめMouseflow5つの機能
  　1.レコーディング：ユーザーの動きを録画
  　2.クリック：リンクのクリック数を計測
  　3.ムーブメント：よく読まれている箇所を確認（PCユーザー）
  　4.スクロール：離脱された場所の特定
  　5.アテンション：よく読まれている箇所を確認（スマホユーザー）
• 失敗しないMouseflowの導入方法
  ・うまくいかない場合、サーバーのWAFを一時的に無効化
• 無料トライアル終了後の設定方法
  ・何もせずそのまま放置すると機能が使えなくなる

Mouseflowは無料でも使用でき、記事ユーザーの動きを撮影できるヒートマップツール。

ぜひMouseflowを活用して、記事のリライト・ブログ改善につなげてくださいね。

Mouseflowを始めるにはこちら

» Mouseflow無料トライアル

▼ブログアフィリエイトに役立つおすすめ無料ツール厳選紹介【初心者】