Google Chromeのスクリーンショットにはデベロッパーツールまたは拡張機能を使用した方法があります。この記事ではChromeのデベロッパーツールと拡張機能9つを紹介し、それぞれについてスクリーンショット方法を説明します。
Webサイトを閲覧しているとき、「ページ全体」をキャプチャしたい、「ある任意の領域(選択領域)」をキャプチャしたい、「画面全体(表示領域)」をキャプチャしたいと様々な場合があります。この記事では、主にGoogle Chromeを使用した「ページ全体」のスクリーンショット(キャプチャされた画像)を保存する方法を説明します。
Google Chromeの画面キャプチャ方法は大きく分けて2種類あります。
デベロッパーツールとはGoogle Chromeに付属しているWeb作成やデバックに便利なツールのセットです。このツールの中に画面キャプチャする機能があります。Chromeのデベロッパーツールを使ったページ全体の画面キャプチャには、デベロッパーツールの「Capture full size screenshot」を使います。
ページ全体を画面キャプチャするために、まずはデベロッパーツールを起動します。このツールは、Chromeの①「設定」アイコンをクリックしてメニューを開き、②「その他のツール」、③「デベロッパーツール」の順番で選択すれば起動できます。
Chromeのデベロッパーツールは、次のショートカットでも起動できます。
起動したデベロッパーツールから「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」をクリックします。
1 / 4
続きを読む