Chromeで縦長のページ全体をスクリーンショットにする一番手軽な方法には、拡張機能は要りません。F12でDevToolsを開き、Ctrl + Shift + P(MacではCmd + Shift + P)を押して「screenshot」と入力し、フルサイズの項目を選びます。Chromeはページ全体を1枚の縦長PNGとして保存します。多数のページやCIでは、スクリプトでオプションを1つ指定すれば同じことができます。結果が途切れたり、白抜けになったり、ヘッダーが繰り返されたりする原因は、ほとんどが遅延読み込み、高さの上限、固定要素のどれかで、それぞれ下に対処法があります。
方法1:DevTools(インストール不要)
- ページを開き、読み込みが完全に終わるまで待ちます。
F12を押してDevToolsを開きます。Ctrl + Shift + P(MacではCmd + Shift + P)でコマンドメニューを開き、「screenshot」と入力します。- Capture full size screenshotを選びます。ChromeがPNGをダウンロードします。
同じコマンドメニューには、表示範囲や選択した要素を撮る項目もあります。Chromeのドキュメントでは、このショートカットでメニューが開くことと「Capture area screenshot」コマンドがあることが確認でき、DevToolsのスクリーンショットに関するヒントではページ全体、ノード、範囲の撮影が説明されています。
方法2:スマホ幅でページ全体を撮る
まず上のプレビューでデバイスを選び、レイアウトを確認してください。スマホが描画するとおりにページ全体を撮るには、デバイスモードを使います。Ctrl + Shift + M(MacではCmd + Shift + M)でデバイスツールバーを表示し、デバイスを選んでMore optionsメニューを開き、Capture full size screenshotを選びます。Chromeのデバイスモードのドキュメントにも同じ項目があり、スマホの輪郭付きで撮るShow device frameも載っています。ピクセル比やファイル名のコツを含む手順は、PCでWebサイトのスマホ表示のスクリーンショットを撮る方法にあります。
方法3:スクリプト(多数のページやCI向け)
数十ページで同じ撮影が必要なら、自動化します。Playwrightではオプションが1つです。
await page.screenshot({ path: 'page.png', fullPage: true });先にviewport(スマホサイズなら{ width: 390, height: 844 }など)を設定すれば、実行のたびにページごとに1枚の画像が作られます。fullPageはPlaywrightのスクリーンショットガイドに記載があります。
スクショが途切れる、白抜けする、重複する理由
こうした問題は、ページ全体のキャプチャの仕組みから生じます。ブラウザはビューポートを全体の高さまで広げ、スクロールせずに1回だけ描画します。PuppeteerでのフルページスクリーンショットについてのDEV Communityの記事は、原因と対処法を挙げており、Chromeベースのどの撮影にも当てはまります。
- 遅延読み込みの画像はプレースホルダーのままになります。表示範囲に入ったときに読み込まれるのに、キャプチャはスクロールしないためです。撮影前にページの最後までスクロールして戻り、画像の読み込みが終わるのを待ちます。
- 非常に縦長のページは切り取られます。筆者はPuppeteerの既定の上限を16,384ピクセルと報告しており、設定によっては32,768ピクセルまで可能です。それを超える場合は、セクションごとに撮影してつなぎ合わせます。
- 固定要素やstickyの要素が繰り返されたり、おかしな位置に出たりします。撮影前に
position: absoluteに切り替えるか、非表示にします。
用途別の方法
| 用途 | 最適な方法 |
|---|---|
| 1ページを1回だけ | DevToolsのコマンドメニュー |
| 1ページをスマホ幅で | DevToolsのデバイスモード |
| 数十ページ、またはリリースごと | fullPage: trueのスクリプト |
| 約16,000ピクセルを超えるページ | セクションをつなぎ合わせる |
よくある質問
拡張機能なしでChromeでページ全体のスクリーンショットを撮るには?
DevToolsを開き、Ctrl + Shift + Pでコマンドメニューを開いて「screenshot」と入力し、Capture full size screenshotを選びます。
ページ全体のスクリーンショットで画像が抜けるのはなぜですか。
遅延読み込みの画像が、一度も表示範囲に入っていないためです。ページ全体をスクロールし、画像の読み込みを待ってから、撮り直してください。
スマホサイズでページ全体のスクリーンショットを撮れますか。
撮れます。DevToolsのデバイスモードでデバイスを選び、More optionsメニューからCapture full size screenshotを選びます。
出典:Chrome DevTools、コマンドメニュー、デバイスモード、スクリーンショットのヒント、Playwrightのスクリーンショット、Puppeteerのフルページスクリーンショット、DEV Community(いずれも2026年10月28日に確認)。