【2021年】Amazonアソシエイト審査に一発合格の方法を徹底解説!

リライト箇所が動画でまる見え!分析ツール「Mouseflow」の導入と使い方

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

ウキワさん

リライトすべき箇所」が「動画」で見れる
効率よく稼げる「記事構成」がわかる
●効果的な「アフィリエイリンクの置き場所」がわかる

自分の記事を見てくれている「ユーザーさんの動き」を動画で見る、これほど勉強になることはないです!

MouseflowはWordPressのプラグインが存在するため重宝します。

この記事でわかること

  • ブログに訪れたユーザーの行動を自動録画してくれるMouseflowについて
  • 初心者のブログ改善に役立つ「Mouseflow5機能」と「効果的な使い方」
  • Mouseflowの導入方法
  • Mouseflowを使ったブログ記事を改善するコツ

この記事を書いた人:最近、Googleアナリティクスの分厚い本も購入して悪戦苦闘の”うきわ”(@ukiwa_spt)です

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

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

『あなたの「好き」をお金に!まずは月1万円を稼ぐ趣味ブログ構築法』

目次

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

論より証拠、あなたの動きを実際に動画で確認してみてください。

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

上記URLをクリックすると、以下の画面が表示されます。

Mouseflowのデモ動画を確認できる画面イメージ

今ご覧いただいているのがPCなら上記画面で、マウスを動かしたり、クリックしたりしてみてください。(スマホならマウス以外の動き)

その後に「さあ行こう(LET’S GO)」をクリックしてしばらく待つ。

すると、あなたの動きがすべて録画されたデモ動画が再生されます。

Mouseflowをブログに導入すると、記事を読むユーザーさんの動き動画でつぶさに確認可能です。

ウキワさん

恐るべし「Mouseflow」!

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

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

【初心者のブログ改善】まずはMouseflowの5機能でOK!

Mouseflowには、指定したページを移動したユーザーだけを把握したり、登録フォームの改善点を視覚化したり、その機能はさまざま。

とはいえ、Mouseflowに慣れない初心者は、ブログ改善に5つの機能を使えばで十分です。

  1. レコーディング:ユーザーの動きを録画
  2. クリック:リンクのクリック数
  3. ムーブメント:どの箇所がよく読まれているか?
  4. スクロール:どこで離脱されているか?
  5. アテンション:ユーザーが記事のどこに時間を費やしているか?
ウキワさん

「Googleアナリティクスでは捉えられない情報」を「可視化」できるため、ブログ改善の幅が広がるよね

それぞれの機能について解説します。

レコーディンク:ユーザーの動きを録画

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

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

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

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

ウキワさん

データはWordPressのサーバーにストックされるわけではないので、記事の表示スピードが遅くなる心配もなし!

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

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

以下のような動画を確認可能です。(動画時間1分9秒)

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

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

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

ウキワさん

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

クリック:リンクのクリック数

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

ちなみにMouseflowは、ヒートマップツールの一種でブログユーザーのさまざまな行動を「色分け」で表示してくれます。

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

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

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

クリック数を確認することでたとえば、

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

といった確認が可能です。

ウキワさん

特にCVに直結する「収益」や「リスト獲得」に関するリンクのクリック数は要確認だよね

ムーブメント:どの箇所がよく読まれているか?

PCでブログ記事を閲覧しているユーザーの場合、「マウスのカーソル位置」が「目線の位置」に近いといわれます。

カーソルがよく当たった位置(つまりユーザーの目線)を可視化した画面がこちら。(サイドバーも含め)

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

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

これを確認することで、

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

の選定などに重宝します。

ウキワさん

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

スクロール:どこで離脱されているか?

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

離脱:記事を読むのをやめた場所

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

離脱率の高い箇所が必ずしも悪いわけではありません。

ただし、記事の大きな改善点につながることもあり得ます。

それを踏まえ、

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

といった項目を意識するとよいでしょう。

さらに「スクロール」の役立ちポイントをもう1つ

「タイトル」に「内容」が合っていない場合、本文に入る前に離脱されることがあります。

ただし、

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

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

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

周囲のリンクのクリック数を「クリック」機能で確認してみる

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

ウキワさん

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

アテンション:ユーザーが記事のどこに時間を費やしているか?

熟読の度合いが色分けによって表示されます。

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

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

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

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

「アテンション」と同じような機能に「ムーブメント」があります。

2つの違いは、以下のように区別するとよいでしょう。

  • ムーブメント:PC閲覧者の目線を知る機能
  • アテンション:スマホなどでの閲覧者の目線を知る機能

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

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

の選定に役立ちます。

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

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

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

なので、

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

そういった意味でも、

記事の読まれ具合を判断するために「ムーブメント」「アテンション」は重要

ウキワさん

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

以上、Mouseflowに慣れない初心者が、ブログ改善に使うべき5つの機能でした。

  1. レコーディング:ユーザーの動きを録画
  2. クリック:リンクのクリック数
  3. ムーブメント:どの箇所がよく読まれているか?
  4. スクロール:どこで離脱されているか?
  5. アテンション:ユーザーが記事のどこに時間を費やしているか?

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

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

STEP
Mouseflowのアカウント作成

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

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

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

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

システム系に未熟なわたしの実力不足もあり、Mouseflow導入には少し手こずりました。

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

STEP1 Mouseflowのアカウント作成

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

» Mouseflowの無料トライアル

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

ちなみに、「料金プランによる違い」はこんな感じです。

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

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

まずは「無料トライアル」をクリック。

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

アカウントの作成方法は2つ、好きな方を選んでくだい。

【メール&パスワードでの登録 】or【Googleアカウントでの登録】

Mouseflowのアカウント作成画面

おすすめは【Googleアカウント】での登録。(Googleアカウントをお持ちの場合)

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

これでMouseflowのアカウントが作成されました。

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

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

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

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

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

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

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

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

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

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

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

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

Mouseflowのインストールボタン

「WordPress」をクリック。

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

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

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

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

ウキワさん

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

ブログにMouseflow(プラグイン)をインストールしていきます。

WordPress管理画面へ

別ウインドウWordPressの管理画面を開いてください。

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

WordPressのダッシュボード画面

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

Mouseflowのインストールボタン

「有効化」をクリック。

Mouseflowを有効化

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

STEP3 ブログにトラッキングコードを設置

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

MouseflowをSettings

「Insert tracking code」をクリック。

MouseflowのInsert tracking code

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

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

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

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

MouseflowのTracking code is installed

この時点ではまだ、「変更を保存」をクリックしなくて大丈夫です。

上記画面が表示された場合は、STEP4(トラッキングコードの有効化)へと続きます。

ただし、わたしの場合「Tracking code is installed」 が表示されず、以下の画面が表示されました (失敗例)

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

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

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

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

MouseflowのTracking code is installed

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

Mouseflowの「もうすぐ完了」

この時点でまだ、「閉じる」をクリックしないでください!

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

ブログ画面へ

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

ブログのトップページ

Google Chrome でのシークレッドモード表示方法
Windows:普通にChrome を開いた状態で「Ctrl+Shift+n キー」
Mac: 普通にChrome を開いた状態で 「⌘+shift+n キー」

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

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

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

Mouseflow画面へ

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

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

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

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

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

Mouseflowで氏名を入力し、CONFIRM AND ACTIVATE TRACKINGを選択

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

Mouseflowの導入完了

お疲れさまでした!

この時点でMouseflowからメールが届いています。

Mouseflowからメールが届く

㊟上記メールは日本語表記です。実際には英語表記かもしれません。

メールを開いて「View My Data」をクリックで、Mouseflow管理画面へ移動します。

メールを開いて「View My Data」をクリック

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

Mouseflowの管理画面

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

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

» Mouseflowの無料トライアル

【Mouseflowの導入と使い方】まとめ

この記事のポイントはこちら。

  • Mouseflow初心者のブログ改善5つの機能はこれ
     ①レコーディング
     ②クリック
     ③ムーブメント
     ④スクロール
     ⑤アテンション
  • 失敗しないMouseflowの導入方法

Mouseflowはわたしの初めてのヒートマップツールでしたが、無料で使え、しかも記事を読んでいるユーザーさんの動きを動画で確認できるのには大満足です。

ウキワさん

まずは動画をぼんやり眺めるだけで、「この内容退屈なんだな」とか、「これを求めていたんだ!」とかビンビン伝わってくるよ

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

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

【Amazonアソシエイト完全マニュアル】これ1冊で今すぐ始められる!

『あなたの「好き」をお金に!まずは月1万円を稼ぐ趣味ブログ構築法』

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる