- ヒートマップ画面を見ながら、チームやクライアントとともにサイトについて検討したい
- オンラインであれば管理画面を共有しながら話せるけど、オフラインで共有したい
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」のボタンが表示されます。もしメニューにボタンが表示されないときには、以下画像の赤枠箇所１→２をクリックしてメニューに表示しておくと便利です。
Step 2. 【PCユーザーのヒートマップ】ヒートマップ画面を開いて画面キャプチャ
- 画面キャプチャを撮りたい、PCユーザーのヒートマップを開きます。
- ブラウザメニューバーにある「Awesome Screenshot」をクリック。
- 「フルページ」をクリック。これでヒートマップ全画面の画面キャプチャをとることができます。
4. 別タブで、全画面キャプチャできた画面が表示されるので「Done」をクリック。
文字入れや枠囲みなどの編集もこの場面で行うことができます。クライアントへのコメントや、よく見て欲しい箇所を枠囲みしておく、などの編集に使えます。
5. 「Done」をクリックするとダウンロードページに遷移します。
PNG画像、PDFでのダウンロードや直接印刷、コピー、クラウド保存・共有が選べます。
Step 3. 【PCユーザーのヒートマップ】全画面の画面キャプチャがとれました
Step 4. 【スマホ・タブレットユーザーのヒートマップ】ヒートマップ全画面をキャプチャする方法
QAアナリティクスでは、スマホユーザー・タブレットユーザーのヒートマップは別の画面（ウィンドウ）がポップアップで開きます。
ポップアップで開いたウィンドウにはブラウザーメニューがないため、PCユーザーのヒートマップ画面キャプチャするのに追加で作業が必要です。
- Step１は同じです。
- Step 2 にある1.2.の手順が変わります。
- 画面キャプチャを撮りたい、スマホユーザー ( or タブレットユーザー ) のヒートマップを開きます。
下画像のようにヒートマップがポップアップ画面で表示されます。
4. ポップアップで表示されたヒートマップのURL（上画像、上部赤枠部分）をコピー。
5. ブラウザーメニューバーが表示されている別ウィンドウ・新規タブのページで、コピーしたURLをペースト。
6. ウィンドウの横幅を調整し、スマホサイズに変更。画面幅を調整し終わったら必ず再読み込みをしてください。
7. 横幅サイズを縮小するとブラウザーメニューバーの拡張機能が見えなくなるので、下画像の赤枠部分をクリックして「Awesome Screenshot」を選びます。
あとはStep 2 の手順3以降、Step 3 で、ヒートマップ全画面のキャプチャ完了です。