縦長のヒートマップを画面キャプチャする方法

  • ヒートマップ画面を見ながら、チームやクライアントとともにサイトについて検討したい
  • オンラインであれば管理画面を共有しながら話せるけど、オフラインで共有したい

QAアナリティクスはブラウザの拡張機能を利用して、縦長のヒートマップ全画面を画面キャプチャすることができます。

拡張機能を使わずに縦長サイトページ全体を画面キャプチャする方法として、「Google Chrome デベロッパーツール」「Microsoft Edge Web キャプチャ」などがありますが、この方法だとヒートマップ全画面をキャプチャすることができません。

Chrome ウェブストアで「screen capture」や「screenshot」で検索すると、「Awesome Screenshot」「FireShot」など多くの拡張機能が出てきます。
ここではブラウザ:Google Chrome +拡張機能:Awesome Screenshotを利用して、縦長のヒートマップ全画面を画面キャプチャする方法をお伝えします。

Step 1. Awesome Screenshotをブラウザ拡張機能として追加する

▼Chrome ウェブストア「Awesome Screenshot」
https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj

右上青いボタン「chrome に追加(画像では ”Chrome から削除します” になっている箇所です)」をクリックして、ブラウザに追加。
ブラウザのメニューバーに「Awesome Screenshot」のボタンが表示されます。もしメニューにボタンが表示されないときには、以下画像の赤枠箇所1→2をクリックしてメニューに表示しておくと便利です。

Step 2. 【PCユーザーのヒートマップ】ヒートマップ画面を開いて画面キャプチャ

  1. 画面キャプチャを撮りたい、PCユーザーのヒートマップを開きます。
  2. ブラウザメニューバーにある「Awesome Screenshot」をクリック。
  3. 「フルページ」をクリック。これでヒートマップ全画面の画面キャプチャをとることができます。

4. 別タブで、全画面キャプチャできた画面が表示されるので「Done」をクリック。
文字入れや枠囲みなどの編集もこの場面で行うことができます。クライアントへのコメントや、よく見て欲しい箇所を枠囲みしておく、などの編集に使えます。

5. 「Done」をクリックするとダウンロードページに遷移します。
PNG画像、PDFでのダウンロードや直接印刷、コピー、クラウド保存・共有が選べます。

Step 3. 【PCユーザーのヒートマップ】全画面の画面キャプチャがとれました

(※ 縦に長いので下の方はカットしています)

Step 4. 【スマホ・タブレットユーザーのヒートマップ】ヒートマップ全画面をキャプチャする方法

QAアナリティクスでは、スマホユーザー・タブレットユーザーのヒートマップは別の画面(ウィンドウ)がポップアップで開きます。

ポップアップで開いたウィンドウにはブラウザーメニューがないため、PCユーザーのヒートマップ画面キャプチャするのに追加で作業が必要です。

  1. Step1は同じです。
  2. Step 2 にある1.2.の手順が変わります。
  3. 画面キャプチャを撮りたい、スマホユーザー ( or タブレットユーザー ) のヒートマップを開きます。
    下画像のようにヒートマップがポップアップ画面で表示されます。

4. ポップアップで表示されたヒートマップのURL(上画像、上部赤枠部分)をコピー。
5. ブラウザーメニューバーが表示されている別ウィンドウ・新規タブのページで、コピーしたURLをペースト。
6. ウィンドウの横幅を調整し、スマホサイズに変更。画面幅を調整し終わったら必ず再読み込みをしてください。

7. 横幅サイズを縮小するとブラウザーメニューバーの拡張機能が見えなくなるので、下画像の赤枠部分をクリックして「Awesome Screenshot」を選びます。

あとはStep 2 の手順3以降、Step 3 で、ヒートマップ全画面のキャプチャ完了です。

関連記事