リライト箇所が動画でまる見え！ヒートマップ「Mouseflow」の導入と使い方 2021 11/24 アクセス解析ツール 無料分析ツールのMouseflow （マウスフロー） を使うと、 ウキワさん ●「リライトすべき箇所」が「動画」で見れる●効率よく稼げる「記事構成」がわかる●効果的な「アフィリエイリンクの置き場所」がわかる 自分の記事を見てくれている「ユーザーさんの動き」を動画で見る、これほど勉強になることはないです！ MouseflowはWordPressのプラグインが存在するため重宝します。 ■この記事でわかること ブログに訪れたユーザーの行動を自動録画してくれるMouseflowについて初心者のブログ改善に役立つ「Mouseflow5機能」と「効果的な使い方」Mouseflowの導入方法Mouseflowを使ったブログ記事を改善するコツ ▼ブログアフィリエイトに役立つおすすめ無料ツール厳選紹介【初心者】 関連記事 ブログアフィリエイトで役立つおすすめ無料ツール17選【初心者】 </noscript><iframe data-src="https://assets.pinterest.com/ext/embed.html?id=1051449844268496545" height="618" width="345" frameborder="0" scrolling="no" class="lazyload" > ▶【Amazonアソシエイト】ネットで月5万の完全マニュアル 目次「あなたの動き」すべて「動画で記録」されています！ 論より証拠、あなたの動きを実際に動画で確認してみてください。 » 動画デモンストレーション（Mouseflow公式） 上記URLをクリックすると、以下の画面が表示されます。 今ご覧いただいているのがPCなら上記画面で、マウスを動かしたり、クリックしたりしてみてください。（スマホならマウス以外の動き） その後に「さあ行こう（LET’S GO）」をクリックしてしばらく待つ。 すると、あなたの動きがすべて録画されたデモ動画が再生されます。 Mouseflowをブログに導入すると、記事を読むユーザーさんの動きを動画でつぶさに確認可能です。 ウキワさん 恐るべし「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つ。 STEPMouseflowのアカウント作成 Googleアカウントでの登録も可 STEPブログにMouseflowをインストール STEPブログにトラッキングコードを設置 ※トラッキングコード：データ取得のためのコード STEPトラッキングコードの有効化 システム系に未熟なわたしの実力不足もあり、Mouseflow導入には少し手こずりました。 そんな失敗ポイントも漏らさず解説します！ STEP1 Mouseflowのアカウント作成 アカウント作成はこちらから » 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」 が表示されず、以下の画面が表示されました （失敗例） 同じ画面が表示された場合、右の▼をクリックして対応策を確認してください！ さらに403Error画面の「こちら」をクリックすると、以下のような画面が表示されました。 どうやら、 WAF（Web Application Firewall） を一次的に無効にしないと、ブログにトラッキングコードをうまく設置できないようです。 ㊟ WAF （ワフ）とは、不正な攻撃からWebサイトを守るセキュリティ対策のひとつ 以降の説明は、ロリポップサーバーでWAFを無効にする方法です。 他のサーバーの場合、「サーバー名+WAF+無効」と検索してWAF無効化の手順を確認してください！ ロリポップサーバーのWAFを無効化（1分で済みます！） ロリポップサーバの管理画面にログイン 「セキュリティ」→「WAF設定」をクリック。 Mouseflowを導入したいブログのドメインの「無効にする」をクリック。 設定状態が「無効」と表示されればOKです。 Mouseflow画面へ この状態でMouseflow画面に移動し、もう一度以下の手順を繰り返してください。 「クリップボードにコピー」したものを白枠の中に貼り付け、「変更を保存」をクリック。 以下の画面が表示されたら成功（トラッキングコードの設置完了）です。 この時点ではまだ、「変更を保存」をクリックしないで！ ロリポップ画面へ WAFを無効化したままだと危険です。 Mouseflowの設定が済んだあとは、必ずWAFを有効化してください。 STEP3まで順調なら、続きはこちら ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ STEP4 トラッキングコードの有効化 「Tracking code is installed」と表示された画面の「変更を保存」をクリック。 以下の画面が表示されます。 この時点でまだ、「閉じる」をクリックしないでください！ ここで「ブログへのトラッキングコード設置」を、Mouseflowに認識させる必要があります。 ブログ画面へ Mouseflowを導入するブログのドップページを、別ウインドウかつシークレットモードで開いてください。 Google Chrome でのシークレッドモード表示方法Windows：普通にChrome を開いた状態で「Ctrl+Shift+n キー」Mac： 普通にChrome を開いた状態で 「⌘+shift+n キー」 開いたブログトップページで、適当にスクロールさせたり、ページ内にあるリンクをクリックしてください。 ㊟Mouseflowにこの行動を記録させるためにやる作業です Mouseflowのトラッキングコード設置が上手くいっていれば、このデータが記録されています。 Mouseflow画面へ Mouseflow画面に戻り、「閉じる」をクリック。 「トラッキングを有効にする」をクリック。 ①あなたの氏名を入力（半角ローマ字のみ？）して、「CONFIRM AND ACTIVATE TRACKING」をクリック。 以下の画面が表示されると、ブログへのMouseflow導入がすべて完了しました。 お疲れさまでした！ この時点でMouseflowからメールが届いています。 ㊟上記メールは日本語表記です。実際には英語表記かもしれません。 メールを開いて「View My Data」をクリックで、Mouseflow管理画面へ移動します。 こちらがMouseflowの管理画面です。 ブックマークして、いつでもアクセスできるようにしておいてください。 新規アカウント作成はこちらから » Mouseflowの無料トライアル ＼ 今すぐピン ／ </noscript><iframe data-src="https://assets.pinterest.com/ext/embed.html?id=1051449844268496545" height="618" width="345" frameborder="0" scrolling="no" class="lazyload" > 【Mouseflowの導入と使い方】まとめ この記事のポイントはこちら。 Mouseflow初心者のブログ改善5つの機能はこれ ①レコーディング ②クリック ③ムーブメント ④スクロール ⑤アテンション失敗しないMouseflowの導入方法 Mouseflowはわたしの初めてのヒートマップツールでしたが、無料で使え、しかも記事を読んでいるユーザーさんの動きを動画で確認できるのには大満足です。 ウキワさん まずは動画をぼんやり眺めるだけで、「この内容退屈なんだな」とか、「これを求めていたんだ！」とかビンビン伝わってくるよ ぜひMouseflowを活用して、「個別記事のリライト」や「ブログ改善」につなげてくださいね。 ▼ブログアフィリエイトに役立つおすすめ無料ツール厳選紹介【初心者】 関連記事 ブログアフィリエイトで役立つおすすめ無料ツール17選【初心者】 【Amazonアソシエイト完全マニュアル】これ１冊で今すぐ始められる！ ▶『あなたの「好き」をお金に！まずは月1万円を稼ぐ趣味ブログ構築法』 アクセス解析ツール プラグイン よかったらシェアしてね！ URLをコピーしました！ URLをコピーしました！
ウキワさん
