サイトのクリックエリアのレポートを作成する際に、全画面のキャプチャを撮りたい。
でも、プリントスクリーン機能では全画面キャプチャは撮れないし・・・
そんな時に、1クリックで全画面キャプチャが取れるGoogle Chrome の拡張機能があります。
今回紹介する「Full Page Screen Capture」です。

目次

1.Full Page Screen Capture の機能は?
2.Full Page Screen Captureを使ってみよう!
3.似た機能を持つアドオンは?

Full Page Screen Capture の機能は?

「Full Page Screen Capture」は、サイトの全画面のキャプチャを撮ってくれる機能です。
Chromeの拡張機能としてインストールすると、アドレスバーの右側に「カメラ」のアイコンが表示されると思います。

Chromeの拡張機能「Full Page Screen Capture」

Full Page Screen Captureを使ってみよう!

実際に「Full Page Screen Capture」を使って、全画面のキャプチャを撮ってみましょう!

1.全画面キャプチャを撮りたいウェブサイトを表示する

●スマートフォンサイトの全画面キャプチャを撮りたい場合
・[その他のツール]>[デベロッパーツール]を表示
・[Toggle device mode]をONにする。(下記赤枠のボタンをクリック)
・[その他のツール]>[デベロッパーツール]を非表示

ko0002_001

※デベロッパーツールが表示された状態だと、
右端が切れてキャプチャされてしまうようです。

2.「Full Page Screen Capture」のアイコンをクリック

ko0002_002

3.キャプチャの読み込み・・・

ko0002_003

※パックマンみたいですね

4.全画面キャプチャされた画像が表示されます

▼PC版(http://www.yahoo.co.jp/)

ko0002_004

▼スマホ版(http://www.yahoo.co.jp/)

ko0002_005

1点注意なのが、スクロールに追従するJavascriptを実装している場合には、
その部分が重複してキャプチャされてしまうこと。
上の例でも「上部に戻るボタン」が重複しています。
また「Full Page Screen Capture」は、全画面キャプチャの機能1択なので、
部分的なキャプチャや画像の編集はできません。
でも、全画面キャプチャをサクッと撮りたいときには、とても便利です。

似た機能を持つアドオンは?

部分的、全体的なキャプチャを撮れる
Chromeの拡張機能といえば、「Awesome Screenshot」ですね。
「見たページのURLをSimilarWebに送信しているのでは?」という疑いがあります。
自分で検証したわけではないので、真偽は不明です。
きちんとした検証結果がでるまでは、
「Full Page Screen Capture」を使おうと思っています。

「Awesome Screenshot」

ko0002_006

画面に表示部分のキャプチャ、選択したエリアのキャプチャ、
全画面のキャプチャなど様々な用途に合わせたキャプチャ機能を持っています。
キャプチャ後には、画像編集もできます。

Chromeの拡張機能「Awesome Screenshot」