Chrome でページ全体のスクリーンショットを撮る方法

OS のスクショ機能では、画面に映っている範囲しか撮れません。スクロールを含めた全体を1枚にする3つの方法と、長いページが崩れる理由。

⌘+Shift+4 では足りない理由

macOS や Windows のスクショ機能は「画面」を撮っています。ページが下に続いていることを知りません。ブラウザは単なるピクセルの長方形として扱われます。長い記事を撮ろうとすると、スクロールして撮る、またスクロールして撮る、を繰り返し、最後に画像編集ソフトで手作業でつなぐことになります。たいてい継ぎ目にナビゲーションバーが重複して写り込みます。

ページ全体のキャプチャは仕組みが違います。スクロールの外にある部分も含めてドキュメント全体を描画するようブラウザに依頼し、それを1枚の縦長画像として受け取ります。

方法1 — DevTools（インストール不要）

1. 撮りたいページを開きます。
2. DevTools を開きます。F12、macOS なら ⌘+Option+I。
3. コマンドメニューを開きます。⌘+Shift+P / Ctrl+Shift+P。
4. screenshot と入力し、Capture full size screenshot を選びます。

同じメニューには範囲指定の Capture area screenshot、要素単位の Capture node screenshot もあります。カードや表だけを、余白なしできれいに撮りたいときに便利です。

難点は手間です。1回撮るのにステップが4つ、キーボードショートカットが2つ。ファイルは機械的な名前でダウンロードフォルダに直行します。さらに DevTools を開くとビューポート幅が変わるため、レスポンシブなレイアウトだと撮る前に表示が変わってしまうことがあります。

方法2 — PDF として保存

⌘+P を押して「PDF に保存」を選びます。どのブラウザでも使え、何も入れる必要がなく、テキスト検索できる書類ができます。

ただし画像が欲しい場合には不向きです。印刷用のスタイルによってナビゲーションが消えたり、折りたたみが展開されたり、強制的にライトテーマになったりするので、画面で見たものと PDF が一致しないことがよくあります。ページ区切りがスクショや表を切断することもあります。領収書の保管には向きますが、「バグの見た目を同僚に見せる」用途には向きません。

方法3 — ワンクリックで撮る

拡張機能を使えばページ全体のキャプチャがボタン1つになり、ダウンロードの往復も無くなります。

Stik は Chrome のサイドパネルに常駐し、4つのキャプチャモードを持ちます。表示領域、ドラッグでの範囲選択、スクロールを含むページ全体、そして Pro ではブラウザの外のウィンドウも含む画面全体。ページ全体のキャプチャは無料プランに含まれます。

単なるキャプチャツールと違うのは、撮ったあとです。ショットはダウンロードフォルダではなくパネルに溜まり、複数枚が名前付きの1グループにまとまり、そのグループごと ⌘+V 一度で Slack・Notion・X に貼れます。どこにもアップロードされず、画像はブラウザのローカルストレージに留まります。

長いページが崩れる原因

ページ全体のキャプチャは、標準機能でも拡張機能でも、同じ落とし穴を踏みます。知っておくと撮り直しを減らせます。

• 遅延読み込みの画像。スクロールして初めて読み込まれる画像は、空白のまま撮れてしまうことがあります。一度最下部までスクロールして全部読み込ませ、先頭に戻ってから撮ります。
• 固定ヘッダー。position: fixed で固定されたナビゲーションバーが、縦長画像の中に何度も描画されることがあります。撮る側では対処できないので、DevTools でその要素を非表示にしてから撮るのが定番の回避策です。
• 無限スクロール。スクロールするたびに読み込むフィードには「最後」がありません。撮影時点で読み込まれていた分が「ページ全体」になります。
• 極端に長いページ。ブラウザには1枚のキャンバスの最大サイズに上限があります。数万ピクセルを超えたあたりから、途中で切れたり空の画像が返ったりします。分割して撮ってください。
• 写り込み。ページ全体のキャプチャは、隅に出ているメールアドレスもサイドバーの顧客名も丸ごと撮ります。送る前にぼかしてください。

どれを選ぶべきか

• ごくたまに撮る：DevTools。すでに入っていて正確です。
• 画像ではなく書類が欲しい：PDF 保存。
• 毎日何度も撮って、しかも共有する：拡張機能。時間を食っているのは撮影そのものではなく、保存・探索・再アップロードの部分だからです。