webページの画像を誰かに共有したり、資料などでスクリーンショットが必要になることはあるでしょう。今まではスクリーンショットを撮る場合、とくにwebページ全体の時はGoogle ChromeはもちろんFirefoxやSafariでも、拡張機能を使う方法をとっていたかと思います。

しかし、Google Chromeのバージョン59の正式版がリリースされ、拡張機能を入れなくてもGoogle Chromeでwebページ全体のスクリーンショットを撮ることができるようになりました。

Google Chromeのデベロッパーツールを使うやり方なのですが、これを使うことによってPCはもちろんタブレット、スマホなど、いろんなデバイスの表示でwebページ全体のスクリーンショットを撮ることができるのです。

素晴らしい。

 

ということで、Google Chromeでのwebページ全体のスクリーンショットの撮り方を紹介します。

 

スクリーンショットの撮り方

まずは、Chromeのデベロッパーツールを表示させます。
スクリーンショットを撮りたいページを開き、ブラウザの右上のボタンを選択して「More Tools」から「Developer Tools」をクリック。

Google Chromeでwebページ全体のスクリーンショットを撮る方法 01

ショートカットキーは、

Windowsの場合 F12
Macの場合 Command + Option + I

になります。
 
するとページ下にデベロッパーツールが表示されます。
 

Google Chromeでwebページ全体のスクリーンショットを撮る方法 02

 
デベロッパーツール左の方のデバイス切り替えボタンをクリック。
 

Google Chromeでwebページ全体のスクリーンショットを撮る方法 03

 
ページ上部分でResponsiveを選択すると幅を自由に設定することができます。
例の画像はレスポンシブで幅を1200pxに設定して表示しています。
また、iPhoneやiPad、Galaxyなど他のデバイスを選択すれば、選択したデバイス表示になります。
 

Google Chromeでwebページ全体のスクリーンショットを撮る方法 04

 
右上のボタンを選択し、「Capture full size screenshot」をクリックでページ全体のスクリーンショットが撮れます。

 

Google Chromeでwebページ全体のスクリーンショットを撮る方法 05

 
スクリーンショットの画像はPNG形式でダウンロードフォルダにダウンロードされます。
 

 

ちなみにiPhone6で表示の場合はこんな感じ。
幅などは選択したデバイスの大きさに自動で決められます。
 

Google Chromeでwebページ全体のスクリーンショットを撮る方法 07

 

以上、Google Chromeでのwebページ全体のスクリーンショットの撮り方の簡単な説明でした。
必要に応じで幅を設定したりデバイスを選択してスクリーンショットをお撮りください。

注意点としては、レスポンシブや選択したデバイスに切り替えたばかりだと表示がずれて正確にスクリーンショットがとれない場合があります。
切り替えたあとに1度、ページを更新してからフルスクリーンショットを撮ればうまくいきます。

 

拡張機能はあまり入れすぎるとブラウザが重くなるから、デベロッパーツールを使った方がいいかな。

Firefoxをお使いの方はこちらで紹介しています。
Firefoxで拡張機能を使わずWebページ全体のスクリーンショットを撮る方法