Chromeでページ全体をスクリーンショットする方法【拡張機能なし／あり】
Chromeでスクリーンショットを撮ったのに、画面に見えている範囲しか写らずに困ったことはないでしょうか。私はChrome拡張機能の開発者で、私自身もWebページを保存する場面が多く、この「全体が入らない」問題には何度もぶつかってきました。この記事では、Chromeだけでページ全体を撮る手順と、うまくいかないときの対処、拡張機能を使った場合の出力の違いを整理します。
Chromeでページ全体のスクリーンショットは拡張機能なしで撮れますか？
撮れます。Chromeには開発者ツール（DevTools）の中にページ全体を撮る機能が標準で用意されていて、追加のインストールなしでWebページ全体のスクショを1枚のPNG画像として書き出せます。まず標準機能を試し、足りない部分だけを拡張機能で補うのが遠回りのない進め方です。
標準機能でページ全体を撮る手順
Chrome標準の手順は次の4ステップです。
F12（MacはCmd + Option + I）でDevToolsを開きますCtrl + Shift + P（MacはCmd + Shift + P）でコマンドメニューを開きます- 入力欄に「スクリーンショット」または
screenshotと打ち込みます - 候補から「フルサイズのスクリーンショットをキャプチャ」を選びます
実行するとPNGファイルがダウンロードフォルダに保存され、スクロールしないと見えない部分まで含んだ縦長の1枚になります。
拡張機能を入れなくても、Chrome標準のDevToolsだけでページ全体のスクリーンショットは撮れます。撮影される画像のサイズは何で決まりますか？
画像の幅は、撮影した時点のブラウザの表示幅で決まります。ウィンドウを広げれば横に広い画像に、狭めれば縦に長い画像になります。DevToolsのデバイスツールバー（Ctrl + Shift + M）でスマートフォン幅に切り替えれば、モバイル表示のままの全画面スクショをChromeで取得できます。幅を先に決めてから撮ると、あとで直す手間が減ります。
DevTools方式でうまく撮れないのはなぜですか？
原因はおおむね「遅延読み込み」「固定要素」「ページが長すぎること」の3つです。いずれもページ側の作りに起因するもので、撮り方を変えれば回避できます。
ページ下部の画像が真っ白に抜けてしまう
遅延読み込み（lazy load）が原因です。画面に近づいた画像だけを後から読み込むサイトでは、一度も表示していない下部の画像が読み込まれないまま撮影されてしまいます。対処法は、撮る前に一度ページの最下部までスクロールし、画像がすべて表示されたのを確認してから先頭に戻って撮ることです。End キーで一気に飛ばすと読み込みが追いつかないことがあるため、少しずつ下げるほうが確実です。
固定ヘッダーやCookieバナーが何度も写り込む
position: fixed や sticky の要素は、スクロールしても画面上の同じ位置に残り続けます。そのためページや状況によっては、縦長のスクリーンショットの中にヘッダーや追従バナーが帯のように繰り返し写り込むことがあります。撮る前にDevToolsのElementsパネルで対象の要素を選び、H キーで一時的に非表示にすれば解決します。Stylesパネルで position の指定をオフにする方法も有効です。Cookieの同意バナーは、撮影前に閉じるか同意を済ませておくのが一番早い手です。
長いページで出力が途中までしか撮れない
書き出される画像には現実的なサイズの上限があり、縦が数万ピクセルに達するようなページでは途中で切れたり、キャプチャ自体が失敗したりすることがあります。無限スクロールのページで起こりやすい現象です。打ち手は3つで、Ctrl + - でズームを下げて総ピクセル数を減らす、ウィンドウ幅を広げて縦を縮める、セクションごとに分けて数枚のWebページのキャプチャにする、のいずれかです。1ファイルにまとめたい場合は、画像ではなくPDFで残すほうが向いています。
拡張機能を使うと出力はどう変わりますか？
拡張機能には大きく2つの方式があり、どちらを選ぶかで「撮ったあとに何ができるか」が変わります。
スクリーンショット系：見たままを画像として取得する
スクリーンショット系の拡張機能は、描画された結果をつなぎ合わせて画像として取得します。範囲指定や撮影後の書き込み・トリミングを備えたものも多く、見た目をそのまま残したいときに強い方式です。製品によっては画像だけでなくPDFでの書き出しにも対応しています。画像として残す手段の全体像はWebページを画像として保存する方法にまとめています。
DOM抽出系：レイアウトを保ったまま扱えるデータにする
もう一方は、画面を撮るのではなくページの中身（DOM）を読み取って再構成する方式です。私が開発しているArchiveSealはこちらに寄った作りで、見出しや本文といった構造を保ったまま保存し、レイアウトを崩さずPDF化したりデータとして扱ったりできます。
画像として撮るか、構造を保ったデータとして取り込むかが、拡張機能を選ぶ最初の分かれ道です。ArchiveSealで無料で使える範囲は、アーカイブ保存（件数無制限）、ワンクリック保存、ページ全体を画像で保存、A4に縮小した画像PDFや個別PDFの出力、グループでの整理・並び替え・ロック・削除です。本文や構造化データの閲覧、JSON書き出し、複数アーカイブをまとめたPDF、PDFのテキスト検索への対応はPro版の機能です。自分の使い方に合う製品選びはWebページ保存ツールの比較と選び方も参考にしてください。
撮ったあとは画像とPDFのどちらで残すべきですか？
用途で分けるのが確実です。チャットに貼って共有するだけ、見た目の証跡を残すだけなら画像で十分で、誰でも開けてサムネイルでも中身を判別できます。あとから読み返す資料として残す、印刷する、複数ページを1つにまとめるなら、ページの区切りが保たれるPDFが扱いやすくなります。手順はWebページをPDFで保存する方法で解説しています。保存手段を一から選び直したい場合はWebページを保存する方法の全体像から読むと迷いません。
よくある質問
Chromeでページ全体のスクリーンショットを撮るショートカットキーはありますか？
1回のキー操作で完結するショートカットは用意されていません。F12でDevToolsを開き、Ctrl + Shift + P（MacはCmd + Shift + P）でコマンドメニューを呼び出して「フルサイズのスクリーンショットをキャプチャ」を選ぶ流れになります。頻繁に使うなら、拡張機能でボタン1つにするほうが手数は減ります。
撮ったスクリーンショットはどこに保存されますか？
DevToolsから撮影した画像は、PNG形式でChromeのダウンロード先フォルダに保存されます。保存先はChromeの設定のダウンロード項目で確認・変更でき、保存場所を毎回確認する設定にしておけば、撮るたびに保存先を選べます。
スマートフォン表示のままページ全体を撮ることはできますか？
できます。DevToolsのデバイスツールバー（Ctrl + Shift + M）で端末の種類や画面幅を選んでから、同じ手順でフルサイズのスクリーンショットを撮ります。モバイル表示専用の要素を含んだ縦長の画像として書き出せます。
スクリーンショット画像の中の文字は検索できますか？
画像はテキスト情報を持たないため、画像そのものを文字で検索することはできません。あとから文字で探したい場合は、ページの中身をテキストとして取り込む方式の保存を選びます。ArchiveSealでは、本文や構造化データの閲覧とPDFのテキスト検索への対応はPro版の機能です。
広告やCookieバナーを消してから撮ることはできますか？
できます。DevToolsのElementsパネルで対象の要素を選び、Hキーを押すと一時的に非表示になります。この変更は自分の画面上だけのもので、再読み込みすれば元の表示に戻ります。閉じるボタンがあるバナーは、それを押してから撮るのが最も簡単です。