Webページのスクリーンショットは、Google Chromeのデベロッパーツールや拡張機能を使うと便利です。この記事では、Google Chromeを使ってwebページの全体または一部のスクリーンショットを撮る方法やおすすめの拡張機能をご紹介します。この方法を知っておくと、作業効率が格段に上がるため、ぜひ知っておきたいノウハウです。

Chromeの拡張機能なしでページ全体のスクリーンショットを撮る方法

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」と入力

詳細機能で表示される上部のボックス(「>」が入力されている箇所)に半角英字で「full」と入力します。

詳細機能を開いて「full」と入力
詳細機能を開いて「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などさまざまなデバイスの表示に切り替えできます。このとき、デバイス表示の切り替えがうまくできなかったら、いったんリロード(更新)すれば解決します。

「Responsive」からデバイスの切り替えが可能
「Responsive」からデバイスの切り替えが可能
メニューから「Capture full size screenshot」を選択

上部右側のメニューから「Capture full size screenshot」を選択すると、モバイル表示時のページ全体のスクリーンショットを保存できます。

「Capture full size screenshot」選択
「Capture full size screenshot」選択

Chromeでページ全体のスクリーンショットを撮るときの注意点

Chromeでページ全体のスクリーンショットを撮るときの注意点

Google Chromeを使ってページ全体のスクリーンショットを撮るときには、以下の2点によく注意しておきましょう。

  • 読み込み途中だと画像が読み込まれずに不完全な形で撮影されることもあるため、ページ全体を読み込んでから撮影すること
  • 高さ(長さ)に制限があり、文章量が多くスクロールバーが長くなった場合は途中で切れてしまうこともある

以上のような問題が起きたら、ページを再読み込み(更新)したり、ページの高さ調整を行ったりするなどの対策が必要です。

次に、スクリーンショットをページ全体でなく、一部のみで撮りたい場合の方法についてご紹介します。

Chromeで一部のスクリーンショットを撮る

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」と入力

詳細機能上部のボックスに半角英字で「node」と入力します。

「node」と入力
「node」と入力
「Capture node screenshot」をクリック

「Capture node screenshot」をクリックすると、パソコン上にスクリーンショットを保存できます。

「Capture node screenshot」をクリックしてスクリーンショットを保存
「Capture node screenshot」をクリックしてスクリーンショットを保存

Chrome拡張機能 スクリーンショットおすすめ3選

続いて、Google Chromeの拡張機能を使ってスクリーンショットを撮影する方法についてご紹介します。便利な3つの拡張機能をピックアップしましたので、お好みに応じて試してみてください。

FireShot

FireShot
FireShot
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja
Capturing specific elements and scrolling content in FireShot using CTRLFireShot Addon

FireShotは、webページの全体または一部を選択してスクリーンショットが撮影できるChromeの有名な拡張機能です。パソコン上にPNG/JPG画像またはPDFデータとして保存したり、メールで直接送信したりすることが可能です。

また、webページ上で右クリックからスクリーンショット撮影もできます。撮影スピードも速く、使い勝手が良い拡張機能です。

GoFullPage

GoFullPageは、webページ全体のスクリーンショットを撮影できるChromeの拡張機能です。PNG画像またはPDFデータとして保存できます。ただし、PDFデータだと一定間隔で途切れてしまうため、PNG画像データでの保存がおすすめです。

GoFullPageが良いのは、機能がとてもシンプルな点です。ボタンをワンクリックするだけでスクリーンショットが簡単に撮影できます。また、GoFullPageで撮影したスクリーンショットはアーカイブとして一定期間保存されており、再ダウンロードも可能です。

Awesome Screenshot

Awesome Screenshot

Awesome Screenshotは、webページの全体または一部のスクリーンショットを撮影できるChromeの拡張機能です。PNG画像またはPDFデータとして保存できます。撮影したスクリーンショットはその場ですぐに編集したり、共有リンクを作成してメールやSNSなどで送信したりすることも可能です。

また、Awesome Screenshotはスクリーンショットだけでなく、パソコン画面の動画撮影にもよく使われています。

Chromeのスクリーンショット撮影をマスターして
作業の効率化を図ろう

Google Chromeでwebページのスクリーンショットを撮る方法を知っておくと、必要に応じて画像またはPDFデータとして保存でき、他のユーザーとも簡単に共有することができます。

今回ご紹介した方法を使えば、誰でも簡単にスクリーンショットの撮影が可能です。Google Chromeのデベロッパーツールでショートカットキーを使いこなすのも、便利な拡張機能を使って楽に効率化を図るのも良いでしょう。この機会にぜひChromeのスクリーンショットの撮影方法をマスターしてみてください。