ヒートマップ

ヒートマップを画像としてキャプチャする

前回は、Mouseflowで行った分析結果の作成に便利なレコーディングのダウンロードの方法をご紹介しました(前回の記事をご覧になりたい方はコチラをどうぞ)。

今回は、Mouseflowのヒートマップを画像としてキャプチャする方法についてご紹介します。

一般的に、スクリーンショットをキャプチャするには、以下のようにOSの機能を使った方法があります。

Windowsの場合

  1. Alt+「Print Screen」キーを押してアクティブウィンドウのスクリーンショットをクリップボードへ
  2. ペイント等を開いて貼り付け
  3. トリミングをして「名前を付けて保存」

Macの場合

  1. 「グラブ」アプリを起動して、目的のスクリーンショットをキャプチャする

しかし、これらの方法では縦に長いヒートマップ全体のキャプチャが欲しい時にはいくつもキャプチャを撮ってうまくつなぎ合わせなければなりません。

便利なソフトやブラウザの拡張機能の中には、ページ全体のキャプチャがとれるものもありますが、それらでヒートマップ全体のキャプチャを撮ろうとしても下の画像のように部分的なキャプチャしか撮れなかったり、上手くいかない場合があります。

ここでは、全体のキャプチャを撮る方法をご紹介します。 用意するものは、「Nimbus Screenshot」や「Snagit」というブラウザでキャプチャを撮るための拡張機能とかアドオンと呼ばれるものです。

ブラウザに必要な拡張機能をインストールしたら、対象のヒートマップをMouseflowで表示します。そして右上の三本線のアイコンをクリックして、一番上の「FULL SCREEN」をクリックします。

すると、ブラウザの別ウィンドウでヒートマップが表示されます。この状態で、ブラウザの拡張機能を使用してヒートマップ全体のキャプチャをとります。

このような画面からキャプチャがとれます。フルスクリーン表示することでページ全体のキャプチャが可能になるということですね。

いかがでしょうか。実に簡単だったと思います。

ちなみに、Mouseflowでは Nimbus Screenshot  か Snagitというツールを使用してキャプチャをとることをオススメしています。
※ 参考: How do I download/export heatmaps?

実は、MouseflowにもGoogle Chromeの拡張機能を使ってヒートマップをダウンロードする機能があるのですが、現在不具合が確認されておりMouseflowにて改修作業を進めております。 修正され次第、改めてブログにて使い方等ご紹介いたしますので、今しばらくお待ちください。

以上、ヒートマップのキャプチャについてご紹介いたしました。

高機能ヒートマップツール「Mouseflow」について気になることがありましたら、画面上部の「お問合せ」よりお気軽にお問合せください。

セッション・リプレイのレコーディングをローカルに保存する前のページ

Google Tag Manager: 離脱リンクのクリックをトリガーにする次のページ

ピックアップ記事

  1. 最速で理解したい人のためのIT用語集

関連記事

  1. ヒートマップ

    ユーザビリティの検証で気を付けたいこと、やってはいけないこと③

    ユーザビリティ検証の注意点と禁止事項について、前回の続きからご紹介しま…

  2. ヒートマップ

    ヒートマップとは

    Mouseflowのメイン機能の一つであるヒートマップについてご紹介し…

  3. ヒートマップ

    ユーザビリティの検証で気を付けたいこと、やってはいけないこと②

    ユーザビリティ検証の注意点と禁止事項について、前回の続きからご紹介しま…

  4. Mouseflow

    mouseflow の フリクションイベント って何?

    Webサイトの訪問者は、様々な理由でコンバージョン[閲覧者による収益…

  5. ヒートマップ

    アテンション・ヒートマップ

    前回は訪問者がどこまでスクロールしているのかを可視化するスクロール・ヒ…

  6. ヒートマップ

    【Tips】ヒートマップ機能について②~ムーブメント、アテンション編~

    前回に引き続き、Mouseflowのメイン機能であるヒートマップについ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


カテゴリ
最近の記事
  1. Looker Studioで日付フィルターの開始日・終了日の…
  2. Streamlitでdbt-elementary風ダッシュボ…
  3. Adobe WebSDK FPIDでECIDの復元を検証
  4. dbt Projects on Snowflakeで作成した…
  5. Dataformでtype:’increment…
  1. Databricks

    ScalaでDatabricksのDataFrameを扱う
  2. Adobe Analytics

    DataWarehouseについて
  3. Amplitude

    Amplitudeを知る。
  4. Google BigQuery

    Big QueryでWindow関数を用いて、累積和を計算する
  5. Tableau

    Tableau-フィルタの連動
PAGE TOP