Chromeのスクリーンショット方法！ページ全体を画面キャプチャするには？

Webサイトを閲覧しているとき、「ページ全体」をキャプチャしたい、「ある任意の領域（選択領域）」をキャプチャしたい、「画面全体（表示領域）」をキャプチャしたいと様々な場合があります。この記事では、主にGoogle Chromeを使用した「ページ全体」のスクリーンショット（キャプチャされた画像）を保存する方法を説明します。

Google Chromeの画面キャプチャ方法は大きく分けて2種類あります。
 

• Chromeのデベロッパーツールを使う方法
• Chromeの拡張機能を使う方法

デベロッパーツールとはGoogle Chromeに付属しているWeb作成やデバックに便利なツールのセットです。このツールの中に画面キャプチャする機能があります。Chromeのデベロッパーツールを使ったページ全体の画面キャプチャには、デベロッパーツールの「Capture full size screenshot」を使います。

ページ全体を画面キャプチャするために、まずはデベロッパーツールを起動します。このツールは、Chromeの①「設定」アイコンをクリックしてメニューを開き、②「その他のツール」、③「デベロッパーツール」の順番で選択すれば起動できます。

Chromeのデベロッパーツールは、次のショートカットでも起動できます。

• 「F12」キー（Windows）
• 「cntl」+「shift」+「i」（Windows）
• 「Command」+「Option」+「i」（Mac）

起動したデベロッパーツールから「Capture full size screenshot」を実行します。デベロッパーツールの④「デバイスモード」アイコン、⑤「設定」アイコンをクリックすると、⑥「Capture full size screenshot」がありますので、これをクリックすれば実行できます。

「Capture full size scrennshot」を実行すれば、スクリーンショットがローカルフォルダへ保存されます。

デベロッパーツールによる画面キャプチャは、Google Chromeのバージョン59から対応しています。該当するアイコンが見つからない場合はChromeを最新版にアップデートしてみてください。バージョンは、Chromeの「設定」アイコンからメニューを開いて「ヘルプ」、「Google Chromeについて」と選択すれば確認できます。
 

また、表示デバイスやキャプチャ範囲を切り替える場合、表示がずれて正確にキャプチャできない場合があります。この場合は、「F5」キーなどで一度ページを更新してください。1ページが長すぎる場合も注意が必要なようです。

デベロッパーツールを使用すればページ全体のスクリーンショットをキャプチャできますが、ショートカットを使っても数ステップあり、頻繁に使う場合には不便です。こんな時は拡張機能が便利です。Google Chromeにも画面キャプチャの拡張機能があります。

Google Chromeの拡張機能については、次の記事を参考として紹介します。拡張機能のインストール方法がわかりやすく説明されています。

スクリーンショットをキャプチャできるChromeの拡張機能を9つ紹介します。

Awesome Screenshotは画面キャプチャに加えてスクリーンショット編集もできる拡張機能です。Chromeツールバーの①「Awesme Screenshot」アイコンからメニューを開いて、②「Capture entire page」を選択するだけでスクリーンショットをキャプチャできます。「Ctrl」+「Shift」+「E」のショートカットでも画面キャプチャすることもできます。

スクリーンショットの編集ができるので、必要な場合は編集して、③「Done」をクリックします。

④「ダウンロード」アイコンをクリックするとスクリーンショットをローカルフォルダに保存できます。

Fireshotも画面キャプチャからスクリーンショット編集までこなせる拡張機能です。使用方法は簡単で、Chromeツールバーの①「FireShot」アイコンからメニューを開いて、②「ページ全体をキャプチャ」、③「保存」の順番で選択するだけでページ全体をキャプチャできます。「名前を付けて保存」のダイアログが表示されるので、任意の名前を付けて保存してください。

Evernote Web Clipperは、人気のメモアプリ「Evernote」と連携してページをクリップできる拡張機能です。この機能を使う場合、Evernoteにログインしている必要があります。Chromeツールバーの①「Evernote Web Clipper」アイコンからメニューを表示、②「ページ全体をEvernoteにクリップ」をクリックするだけでページ全体をクリップできます。

但し、Evernote Web clipperはページをクリップする拡張機能で、"ページ全体をスクリーンショット"という趣旨とは異なるので注意が必要です。上のページ全体をクリップした結果が次の画像です。

Full Page Screen Captureは、ページ全体の画面キャプチャに特化した拡張機能です。ページ全体のスクリーンショットを保存できればよい（編集は不要）という場合に便利です。Chromeツールバーから①「Full Page Screen Capture」をクリックするだけで、ページ全体をキャプチャできます。「alt」+「shift」+「P」のショートカットでも画面キャプチャできます。

スクリーンショットが新しいタブに表示されます。保存したい形式に対応した②「保存」アイコンをクリックすればスクリーンショットがダウンロードされます。保存形式はPDFとイメージファイル形式（PNG，JPG）です。

イメージファイルの保存形式は、メニュー（①「Full page screen shot」アイコンをクリック）の「オプション」にある「Capture-Image format」項目のリストボックスから変更できます。

執筆時の最新版（ver.4.9）ではベータ版の機能ですが、スクリーンショットを自動的にダウンロードすることもできます。「Auto-download files(beta)」のチェックボックスをチェックしてください。この機能を使えば、①のアイコンをクリックするだけで、ページ全体がキャプチャされ、スクリーンショットがイメージ形式でダウンロードされます。

imgur Community Extensionは、アメリカで人気の画像共有サイトimgurと連携できる拡張機能です。imgurにログインしなくても使用できますが、ログインしていればスクリーンショットをimgurで管理できます。

他の拡張機能とは異なりChromeに表示されたWebページの任意の場所で右クリックしてChromeのメニューを表示させ、その中から①「imgur」、②「capture page to」、③imgurのユーザー名を順番に選択すれば画面キャプチャからスクリーンショットのアップロードまでを一括で実行できます。

qSnapも画面キャプチャとスクリーンショット編集を備えた拡張機能です。複数のスクリーンショットをストックし、まとめて編集できる点に特徴があります。ページ全体の画面キャプチャ方法は、Chromeツールバーの①「qSnap」アイコンからメニューを表示し、②「Capture Full Page」を選択するだけです。スクリーンショットは新しいタブに表示されます。

編集画面の下側にはスクリーンショットのサムネが表示されます。スクリーンショットはここにストックされ、まとめて編集をすることができます。

例えばすべてのスクリーンショットをまとめて保存したい場合、「share」ボタンから「Save all screens to your machine」を選択します。

Screenshot Webpagesは、画面キャプションと簡単な編集ができる拡張機能です。スクリーンショットはscreenshot.coにアップロードされるので、このURLを介して共有できます。ページ全体のスクリーンショットは、①「Screenshot Webpages」アイコン、②「Screnshot Entire Page」の順番で選択するだけでキャプチャできます。

③「SHARE SCREENSHOT」をクリックすればscreenshot.coにスクリーンショットを保存できます。スクリーンショット編集が必要な場合は「CHANGE MAKER」ボタンをクリックしてください。

Nimbus Screenshot & Screen Video Recorderも画面キャプチャからスクリーンショット編集までできる拡張機能です。WEBM形式の動画撮影もできます。ページ全体のキャプチャは、Chromeツールバーの①「Nimbus Screenshot & Screen Video Recorder」アイコンからメニューを表示して②「ページ全体」を選択するだけです。

スクリーンショットは新しいタブとして表示されます。必要に応じて編集し、③「完了」をクリックしてください。選択画面から保存方法を選択すれば、スクリーンショットの保存ができます。

Lightshotは、これまで紹介した拡張機能とは異なり選択エリアの画像キャプチャに主眼を置いた拡張機能です。スクリーンショット編集もできます。Chromeツールバーの①「Lightshot」アイコンをクリック、②キャプチャしたい領域を選択、必要な場合はスクリーンショット編集をして、③「保存」アイコンをクリックすれば画面キャプチャができます。

紹介した方法の中で、Google Chromeのページ全体をキャプチャする方法は次の８つです。
 

• デベロッパーツール
• Awesome Screenshot
• Fireshot
• Full Page Screen Capture
• imgur Community Extensyon
• qSnap
• Screenshot Webpages
• Nimbus Screenshot & Screen Video Recorder

Google Chrome標準の「デベロッパーツール」は、画面キャプチャに数ステップを必要としますが、拡張機能のインストールが必要ないので頻度が少ない場合に便利です。

拡張機能「Full Page Screen Capture」は、ショートカット１回でローカルフォルダへスクリーンショットを保存できるので、画面キャプチャだけを頻繁にする場合に便利です。

加えて、画像編集までしたい場合は「Awesome Screenshot」「Fireshot」が候補となり、さらにスクリーンショットをまとめて編集したい場合は「qSnap」、動画撮影もしたい場合は「Nimbus Screenshot & Screen Video Recorder」も候補となります。

趣旨とは異なりますが、表示領域をキャプチャする方法も紹介します。表示領域の画面キャプチャは、PC標準のプリントスクリーン機能が便利です。この機能を使えば、Windowsの場合は表示領域を、Macの場合は表示領域と選択領域の画面キャプチャをできます。

「print screen」キー（キーボードによっては「fn」+「prt sc」）を押すだけで、表示領域の画面キャプチャができます。キャプチャした画像はペイントなどにペーストすればファイルとして保存できます。

表示領域をキャプチャしたい場合は、「shift」+「command」+「3」キーを同時に押せば、デスクトップにPNGファイルを保存できます。

選択領域をキャプチャしたい場合は、「shift」+「command」+「4」キーを押した後にキャプチャしたい領域を選択すればキャプチャした画像を保存できます。

「Full Page Screen Capture」でキャプチャしたページ全体のスクリーンショットが次の画像です。デベロッパーツールや他の拡張機能でも同様のスクリーンショットをキャプチャできます。

Google Chromeの画面キャプチャの方法として、デベロッパーツールと拡張機能の紹介と画面キャプチャの方法を説明しました。方法ごとに特徴がありますので、目的に応じてツールを使い分けて効率よく画面キャプチャすることをお勧めします。