無料分析ツールのMouseflow (マウスフロー) を使うと、

●「リライトすべき箇所」が「動画」で見れる
●効率よく稼げる「記事構成」がわかる
●効果的な「アフィリエイリンクの置き場所」がわかる
自分の記事を見てくれている「ユーザーさんの動き」を動画で見る、これほど勉強になることはないです!
MouseflowはWordPressのプラグインが存在するため重宝します。
■この記事でわかること
- ブログに訪れたユーザーの行動を自動録画してくれるMouseflowについて
- 初心者のブログ改善に役立つ「Mouseflow5機能」と「効果的な使い方」
- Mouseflowの導入方法
- Mouseflowを使ったブログ記事を改善するコツ
▼ブログアフィリエイトに役立つおすすめ無料ツール厳選紹介【初心者】
▶【Amazonアソシエイト】ネットで月5万の完全マニュアル
「あなたの動き」すべて「動画で記録」されています!
論より証拠、あなたの動きを実際に動画で確認してみてください。
上記URLをクリックすると、以下の画面が表示されます。


今ご覧いただいているのがPCなら上記画面で、マウスを動かしたり、クリックしたりしてみてください。(スマホならマウス以外の動き)
その後に「さあ行こう(LET’S GO)」をクリックしてしばらく待つ。
すると、あなたの動きがすべて録画されたデモ動画が再生されます。
Mouseflowをブログに導入すると、記事を読むユーザーさんの動きを動画でつぶさに確認可能です。



恐るべし「Mouseflow」!
自分の動きを実際に動画で確認してみる
【初心者のブログ改善】まずはMouseflowの5機能でOK!
Mouseflowには、指定したページを移動したユーザーだけを把握したり、登録フォームの改善点を視覚化したり、その機能はさまざま。
とはいえ、Mouseflowに慣れない初心者は、ブログ改善に5つの機能を使えばで十分です。
- レコーディング:ユーザーの動きを録画
- クリック:リンクのクリック数
- ムーブメント:どの箇所がよく読まれているか?
- スクロール:どこで離脱されているか?
- アテンション:ユーザーが記事のどこに時間を費やしているか?



「Googleアナリティクスでは捉えられない情報」を「可視化」できるため、ブログ改善の幅が広がるよね
それぞれの機能について解説します。
レコーディンク:ユーザーの動きを録画
下の画像をご覧ください。


Mouseflow管理画面の「レコーディング」には、
特段の設定や操作をすることなく、アクセスのあった記事の「ユーザーさんの動き」を撮影した動画が、自動で次々とストックされていきます。



データはWordPressのサーバーにストックされるわけではないので、記事の表示スピードが遅くなる心配もなし!
動画を見たいときは、保存一覧の任意のものにカーソルを当てると再生ボタンが現れるので、そちらをクリックするだけ。


以下のような動画を確認可能です。(動画時間1分9秒)
記事に訪れたユーザーが、まず下までざーとスクロールし、
- 30秒あたりで左サイドに追尾する目次を確認
- 下から上へ読み返す
といった、web特有の行動が見て取れます。



まずは動画を見て、その記事内でのユーザーの動きをつかんでおくと断然リライトしやすくなるよ!
クリック:リンクのクリック数
続く「クリック」「ムーブメント」「スクロール」「アテンション」は、Mouseflow管理画面の「ヒートマップ」から簡単に確認できます。
ちなみにMouseflowは、ヒートマップツールの一種でブログユーザーのさまざまな行動を「色分け」で表示してくれます。


その内、「クリック」は記事内のリンク下にクリック数が表示されます。(サイドバーなどのリンクにも)


クリック数を確認することでたとえば、
- 目次でどの見出しに関心が高いか
- どの関連記事に関心が高いか
- どのアフィリエイトリンクがクリックされているか
といった確認が可能です。



特にCVに直結する「収益」や「リスト獲得」に関するリンクのクリック数は要確認だよね
ムーブメント:どの箇所がよく読まれているか?
PCでブログ記事を閲覧しているユーザーの場合、「マウスのカーソル位置」が「目線の位置」に近いといわれます。
カーソルがよく当たった位置(つまりユーザーの目線)を可視化した画面がこちら。(サイドバーも含め)


青く光っている箇所ほど、ユーザーの目線が当たった箇所になります
これを確認することで、
- クリックしてもらいたいリンクを置く場所
- 読んでもらいたい関連記事を知らせる場所
- 特に見てもらいたい内容を置く場所
の選定などに重宝します。



ユーザーの目線が「どこに集中しているか」がわかると、宣伝したいものを効果的にアピールできるよね!
スクロール:どこで離脱されているか?
ユーザーの離脱率が色分けと数値によって表示されます。
離脱:記事を読むのをやめた場所


離脱率の高い箇所が必ずしも悪いわけではありません。
ただし、記事の大きな改善点につながることもあり得ます。
それを踏まえ、
- 本文に入る前の離脱率の高さは「タイトル」に「内容」が合っていないのかも
- 好ましくない要因での離脱でないかをチェック
- 主要コンテンツは離脱率30~40%内に配置する
といった項目を意識するとよいでしょう。
さらに「スクロール」の役立ちポイントをもう1つ。
「タイトル」に「内容」が合っていない場合、本文に入る前に離脱されることがあります。
ただし、
本文を読まずに「グローバルメニュー」などがクリックされた場合も、離脱率は高くなる


なので、離脱率の高さが気になる箇所は、
周囲のリンクのクリック数を「クリック」機能で確認してみる
これにより「離脱率の高さ」の善悪を判断できることがあります。



ユーザーが「記事を読むのをやめた場所」には、さまざまなブログ改善のヒントが隠されているよね
アテンション:ユーザーが記事のどこに時間を費やしているか?
熟読の度合いが色分けによって表示されます。


クリックやスクロール・マウスの動きなどを総合的に判断して色分けされているようです。
「赤」に近づくほど「熟読された箇所」、「濃い青」に近づくほど「スルーされた箇所」といった区分となります。


「アテンション」と同じような機能に「ムーブメント」があります。
2つの違いは、以下のように区別するとよいでしょう。
- ムーブメント:PC閲覧者の目線を知る機能
- アテンション:スマホなどでの閲覧者の目線を知る機能
これを踏まえ、アテンションを活用することで、
- クリックしてもらいたいリンクを置く場所
- 読んでもらいたい関連記事を知らせる場所
- 特に見てもらいたい内容を置く場所
の選定に役立ちます。
さらに「アテンション」の役立ちポイントをもう1つ。
離脱率を確認できる「スクロール」では、
目次リンクから記事の途中へ移動された場合→その過程はすべて「通過した」、つまり「読んだ」と判定
なので、
「スクロール」 では、「記事の読まれ具合」を判断できない
そういった意味でも、
記事の読まれ具合を判断するために「ムーブメント」や「アテンション」は重要



スマホであれ、PCであれ、ユーザーの目線がどこに集まっているかを知ることは重要だよね
以上、Mouseflowに慣れない初心者が、ブログ改善に使うべき5つの機能でした。
- レコーディング:ユーザーの動きを録画
- クリック:リンクのクリック数
- ムーブメント:どの箇所がよく読まれているか?
- スクロール:どこで離脱されているか?
- アテンション:ユーザーが記事のどこに時間を費やしているか?
Mouseflowの導入方法を完全図解【失敗ポイントも詳しく解説】
Mouseflowの導入作業は大きく4つ。
Googleアカウントでの登録も可
※トラッキングコード:データ取得のためのコード
システム系に未熟なわたしの実力不足もあり、Mouseflow導入には少し手こずりました。
そんな失敗ポイントも漏らさず解説します!
STEP1 Mouseflowのアカウント作成
アカウント作成はこちらから
㊟「トライアル」とはいえ、無料で使い続けられるのでご心配なく!
ちなみに、「料金プランによる違い」はこんな感じです。
無料プラン | スターター | グロース | |
---|---|---|---|
料金 | 0円 | 2,500円 | 8,200円 |
登録サイト数 | 1サイト | 1サイト | 3サイト |
データ保存期間 | 3ヵ月 | 6ヵ月 | 6ヵ月 |
㊟さらなる上位プランも存在します
まずは「無料トライアル」をクリック。


アカウントの作成方法は2つ、好きな方を選んでくだい。
【メール&パスワードでの登録 】or【Googleアカウントでの登録】


おすすめは【Googleアカウント】での登録。(Googleアカウントをお持ちの場合)
パスワードの入力は、半角英字の大文字と小文字、それに数字や記号も組み合わせないといけないのでちょっと面倒です。
これでMouseflowのアカウントが作成されました。
STEP2 ブログにMouseflowをインストール
この時点でメールが届いています。


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


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


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


①Mouseflowを導入したい「ブログURL」を入力(トップページのURL)
②わたしは「Company website」を選びました(ほとんどの人は「Entertainment/media」でしょう)


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


「WordPress」をクリック。


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


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



ここから【Mouseflowの画面】と【WordPress管理画面】の行った来たりになるんで注意してちょうだい!
ブログにMouseflow(プラグイン)をインストールしていきます。
WordPress管理画面へ
別ウインドウでWordPressの管理画面を開いてください。
「プラグイン」の「新規追加」をクリック。


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


「有効化」をクリック。


これでブログにMouseflowがインストールされました。
STEP3 ブログにトラッキングコードを設置
一覧表示された「Mouseflow for WordPress」の「Settings」をクリック。


「Insert tracking code」をクリック。


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


㊟白枠の中には、最初から薄っすら文字が表示されているので少し紛らわしいかも
以下のように「Tracking code is installed」が表示されると、ここまでの作業は完了です!


この時点ではまだ、「変更を保存」をクリックしなくて大丈夫です。
上記画面が表示された場合は、STEP4(トラッキングコードの有効化)へと続きます。
ただし、わたしの場合「Tracking code is installed」 が表示されず、以下の画面が表示されました (失敗例)


STEP3まで順調なら、続きはこちら
↓↓↓↓↓↓↓↓↓↓↓↓↓↓
STEP4 トラッキングコードの有効化
「Tracking code is installed」と表示された画面の「変更を保存」をクリック。


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


この時点でまだ、「閉じる」をクリックしないでください!
ここで「ブログへのトラッキングコード設置」を、Mouseflowに認識させる必要があります。
ブログ画面へ
Mouseflowを導入するブログのドップページを、別ウインドウかつシークレットモードで開いてください。


開いたブログトップページで、適当にスクロールさせたり、ページ内にあるリンクをクリックしてください。
㊟Mouseflowにこの行動を記録させるためにやる作業です
Mouseflowのトラッキングコード設置が上手くいっていれば、このデータが記録されています。
Mouseflow画面へ
Mouseflow画面に戻り、「閉じる」をクリック。


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


①あなたの氏名を入力(半角ローマ字のみ?)して、「CONFIRM AND ACTIVATE TRACKING」をクリック。


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


お疲れさまでした!
この時点でMouseflowからメールが届いています。


㊟上記メールは日本語表記です。実際には英語表記かもしれません。
メールを開いて「View My Data」をクリックで、Mouseflow管理画面へ移動します。


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


ブックマークして、いつでもアクセスできるようにしておいてください。
新規アカウント作成はこちらから
\ 今すぐピン /
【Mouseflowの導入と使い方】まとめ
この記事のポイントはこちら。
- Mouseflow初心者のブログ改善5つの機能はこれ
①レコーディング
②クリック
③ムーブメント
④スクロール
⑤アテンション - 失敗しないMouseflowの導入方法
Mouseflowはわたしの初めてのヒートマップツールでしたが、無料で使え、しかも記事を読んでいるユーザーさんの動きを動画で確認できるのには大満足です。



まずは動画をぼんやり眺めるだけで、「この内容退屈なんだな」とか、「これを求めていたんだ!」とかビンビン伝わってくるよ
ぜひMouseflowを活用して、「個別記事のリライト」や「ブログ改善」につなげてくださいね。