Webページのスクリーンショットは、Google Chromeのデベロッパーツールや拡張機能を使うと便利です。この記事では、Google Chromeを使ってwebページの全体または一部のスクリーンショットを撮る方法やおすすめの拡張機能をご紹介します。この方法を知っておくと、作業効率が格段に上がるため、ぜひ知っておきたいノウハウです。
Chromeの拡張機能なしでページ全体のスクリーンショットを撮る方法
スクリーンショットは、オウンドメディアやECサイトなどをwebページ上で紹介したり、ページデザインを改善する際に比較として画像データを残したりしておきたいときによく使われます。
Google Chromeでは、標準で搭載されているデバッグツール（デベロッパーツール）を使って簡単にスクリーンショットを撮ることが可能です。まずは、webページ全体のスクリーンショットを撮る方法についてご紹介します。
まず、Google Chrome「デベロッパーツール」を開きます。
| Windows | 「F12」もしくは「Ctrl」＋「Shift」＋「I」 |
|---|---|
| Mac | 「command」＋「option」＋「I」 |
次に、詳細機能を開きます。
| Windows | 「Ctrl」＋「Shift」＋「P」 |
|---|---|
| Mac | 「command」＋「Shift」＋「P」 |
詳細機能で表示される上部のボックス（「>」が入力されている箇所）に半角英字で「full」と入力します。
「Capture full size screenshot」をクリックすると、パソコン上に自動的にページ全体のスクリーンショットを保存できます。
モバイル画面全体のスクリーンショットを撮る方法
Google Chromeでは、デベロッパーツールを使って、モバイル画面表示時のページ全体のスクリーンショットも撮ることができます。以下の手順で操作します。
先ほどと同じように、デベロッパーツールを開きます。
| Windows | 「F12」もしくは「Ctrl」＋「Shift」＋「I」 |
|---|---|
| Mac | 「command」＋「option」＋「I」 |
デベロッパーツールの上部にある「デバイスツールバー」（モバイルのアイコンがある部分）をクリックしてモバイル表示にします。もしくは、以下のコマンドを入力します。
| Windows | 「Ctrl」＋「Shift」＋「M」 |
|---|---|
| Mac | 「command」＋「Shift」＋「M」 |
画面上部の「Responsive」という箇所をクリックすると、GalaxyやiPhone X、iPad Proなどさまざまなデバイスの表示に切り替えできます。このとき、デバイス表示の切り替えがうまくできなかったら、いったんリロード（更新）すれば解決します。
上部右側のメニューから「Capture full size screenshot」を選択すると、モバイル表示時のページ全体のスクリーンショットを保存できます。
Chromeでページ全体のスクリーンショットを撮るときの注意点
Google Chromeを使ってページ全体のスクリーンショットを撮るときには、以下の2点によく注意しておきましょう。
- 読み込み途中だと画像が読み込まれずに不完全な形で撮影されることもあるため、ページ全体を読み込んでから撮影すること
- 高さ（長さ）に制限があり、文章量が多くスクロールバーが長くなった場合は途中で切れてしまうこともある
以上のような問題が起きたら、ページを再読み込み（更新）したり、ページの高さ調整を行ったりするなどの対策が必要です。
次に、スクリーンショットをページ全体でなく、一部のみで撮りたい場合の方法についてご紹介します。
Chromeで一部のスクリーンショットを撮る
ページの一部のみをスクリーンショットで撮る場合も、Google Chromeのデベロッパーツールを開きます。
| Windows | 「F12」もしくは「Ctrl」＋「Shift」＋「I」 |
|---|---|
| Mac | 「command」＋「option」＋「I」 |
デベロッパーツールの上部にある矢印をクリックして、スクリーンショットで撮りたい部分を選択します。もしくは、以下のコマンドを入力します。
| Windows | 「Ctrl」＋「Shift」＋「C」 |
|---|---|
| Mac | 「command」＋「Shift」＋「C」 |
以下のコマンドを入力して、詳細機能を開きます。
| Windows | 「Ctrl」＋「Shift」＋「P」 |
|---|---|
| Mac | 「command」＋「Shift」＋「P」 |
詳細機能上部のボックスに半角英字で「node」と入力します。
「Capture node screenshot」をクリックすると、パソコン上にスクリーンショットを保存できます。
Chrome拡張機能 スクリーンショットおすすめ3選
続いて、Google Chromeの拡張機能を使ってスクリーンショットを撮影する方法についてご紹介します。便利な3つの拡張機能をピックアップしましたので、お好みに応じて試してみてください。
FireShot
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja
FireShotは、webページの全体または一部を選択してスクリーンショットが撮影できるChromeの有名な拡張機能です。パソコン上にPNG／JPG画像またはPDFデータとして保存したり、メールで直接送信したりすることが可能です。
また、webページ上で右クリックからスクリーンショット撮影もできます。撮影スピードも速く、使い勝手が良い拡張機能です。
GoFullPage
GoFullPageは、webページ全体のスクリーンショットを撮影できるChromeの拡張機能です。PNG画像またはPDFデータとして保存できます。ただし、PDFデータだと一定間隔で途切れてしまうため、PNG画像データでの保存がおすすめです。
GoFullPageが良いのは、機能がとてもシンプルな点です。ボタンをワンクリックするだけでスクリーンショットが簡単に撮影できます。また、GoFullPageで撮影したスクリーンショットはアーカイブとして一定期間保存されており、再ダウンロードも可能です。
Awesome Screenshot
Awesome Screenshotは、webページの全体または一部のスクリーンショットを撮影できるChromeの拡張機能です。PNG画像またはPDFデータとして保存できます。撮影したスクリーンショットはその場ですぐに編集したり、共有リンクを作成してメールやSNSなどで送信したりすることも可能です。
また、Awesome Screenshotはスクリーンショットだけでなく、パソコン画面の動画撮影にもよく使われています。
Chromeのスクリーンショット撮影をマスターして
作業の効率化を図ろう
Google Chromeでwebページのスクリーンショットを撮る方法を知っておくと、必要に応じて画像またはPDFデータとして保存でき、他のユーザーとも簡単に共有することができます。
今回ご紹介した方法を使えば、誰でも簡単にスクリーンショットの撮影が可能です。Google Chromeのデベロッパーツールでショートカットキーを使いこなすのも、便利な拡張機能を使って楽に効率化を図るのも良いでしょう。この機会にぜひChromeのスクリーンショットの撮影方法をマスターしてみてください。