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

アイキャッチ画像

ヒートマップツールのMouseflow (マウスフロー)

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

具体的には、

  • リライト箇所が動画・・でまる見え
  • 効率よく稼ぐ記事構成がわかる
  • アフィリエイリンク配置場所がわかる

ようになります。

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

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

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

目次

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

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

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

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

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

» 動画デモンストレーション(Mouseflow公式)

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

ウキワさん

自分の動きが撮影された動画を見てみると、Mouseflowの凄さがわかるよ!

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

» 動画デモンストレーション(Mouseflow公式)

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

ヒートマップツールの、

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

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

理由として、

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

ウキワさん

導入が少し面倒だけど、無料プランで継続なら断然「Mouseflow」がおすすめ!

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

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

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

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

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

1.レコーディンク

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

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

Mouseflowのレコーディング保管画面イメージ

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

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

されていきます。

ウキワさん

録画データはMouseflow管理画面にストックされるので、WordPressが重くなったりしないよ!

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

Mouseflowの動画を再生できる画面イメージ

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

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

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

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

ウキワさん

まずは動画を見て、その記事内でのユーザーの動きをつかんでおくと断然リライトしやすくなるよ!

2.クリック

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

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

Mouseflowの管理画面のヒートマップ項目

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

Mouseflowでクリック数を確認するイメージ

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

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

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

ウキワさん

コンバージョンに直結するクリック数は要確認ね!

3.ムーブメント

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

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

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

Mouseflowでムーブメントを確認するイメージ

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

これを確認することで、

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

の見極めに役立ちます。

ウキワさん

ユーザーの目線が「どこに集中しているか」がわかると、宣伝したいものを効果的にアピールできるよね!

4.スクロール

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

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

Mouseflowでスクロールを確認するイメージ

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

それを踏まえ、

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

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

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

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

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

ブログのグローバルメニューイメージ

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

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

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

ウキワさん

ユーザーが「記事を読むのをやめた場所」には、さまざまな記事改善のヒントが隠されているよ!

5.アテンション

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

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

Mouseflowのアテンションを確認するイメージ

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

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

Mouseflowの色区分による指標イメージ

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

2つの違いがこちら。

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

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

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

の選定に役立ちます。

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

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

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

なので…

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

そういった意味でも、

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

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

ウキワさん

スマホであれ、PCであれ、ユーザーの目線がどこに集まっているかを知ることは重要だよね

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

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

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

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

STEP
Mouseflowのアカウント作成

Googleアカウントでの登録も可

STEP
ブログ・ホームページにMouseflowをインストール
STEP
ブログにトラッキングコードを設置

トラッキングコード:データ取得のためのコード

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

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

STEP1 Mouseflowのアカウント作成

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

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

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

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

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

» Mouseflow無料トライアル

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

Mouseflowの無料トライアルのイメージ

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

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

Mouseflowのアカウント作成画面

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

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

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

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

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

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

Mouseflowから届いたメールイメージ

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

Mouseflowのメールを開いたイメージ

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

Mouseflowにサインインするイメージ

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

Mouseflowに氏名と目的を入力する画面

①あなたの氏名(姓・名)を入力
「Analytics」を選択

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

Mouseflowの登録サイトとWebサイトの種類を入力する画面

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

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

Mouseflowのインストールボタン

7.「WordPress」をクリック。

Mouseflowトラッキングコードのインストール先を選ぶ画面

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

Mouseflowのクリップボードにコピーする画面

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

ウキワさん

ここから【Mouseflowの画面】と【WordPress管理画面】の行った来たりになるんで注意してちょうだい!

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

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

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

WordPressのダッシュボード画面

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

Mouseflowのインストールボタン

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

Mouseflowを有効化

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

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

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

MouseflowをSettings

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

MouseflowのInsert tracking code

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

Mouseflowのクリップボードにコピーを貼り付け「変更を保存」

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

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

MouseflowのTracking code is installed

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

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


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

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

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

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

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

MouseflowのTracking code is installed

Mouseflow画面へ

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

Mouseflowの「もうすぐ完了」

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

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

ブログ画面へ

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

ブログのトップページ

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

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

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

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

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

Mouseflow画面へ

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

Mouseflowの「もうすぐ完了」を閉じる

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

Mouseflowのトラッキングを有効にする

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

Mouseflowの「The Privacy Settings」

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

Mouseflowのプライバシー設定

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

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

Mouseflowの「Confirm and activate tracking」

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

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

Mouseflowの導入完了

お疲れさまでした!

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

Mouseflowからのメール

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

Mouseflow管理画面へLog in

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

Mouseflowの管理画面

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

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

» Mouseflow無料トライアル

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

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

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

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

となります。

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

Mouseflowの各プラン紹介
ウキワさん

以降で解説する操作はトライアル期間終了後にやってちょうだい!

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

Mouseflowのアップグレードする

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

Mouseflowのプラン詳細

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

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

Mouseflowのフリープランの選択

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

Mouseflowの「機能の制限を理解してダウングレードします」

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

Mouseflowのダウングレードの確認

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

Mouseflowの無料プランへの変更完了

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

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

この記事のポイント。

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

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

ウキワさん

ユーザーの動きを動画で見るだけで、記事改善のヒントがびんびん伝わってくるよ!

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

Mouseflowを始めるにはこちら

» Mouseflow無料トライアル

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次