Chrome でページ全体をキャプチャする方法
Chrome では、拡張機能がなくてもページ全体をキャプチャできます。普通の記事ならそれで十分です。ところが Web アプリ、固定ヘッダー、スクロールで読み込まれる画像、とても長いページになると、標準のコマンドでは全体が撮れません。そこで役に立つのが残りの2つの方法です。このガイドでは、3つの方法それぞれの手順と、どんなときにどれを使えばよいかを説明します。
方法1：標準のデベロッパーツールのコマンド
パソコン版の Chrome なら、どれでもデベロッパーツールの中にこの機能があります。Windows、macOS、Linux、ChromeOS で使えます。
デベロッパーツールを開く. F12 を押すか、Mac なら Cmd+Option+I、Windows と Linux なら Ctrl+Shift+I を押します。どのパネルが開いていてもかまいません。
コマンドメニューを開く. Cmd+Shift+P（Mac）または Ctrl+Shift+P（Windows、Linux）を押すと、デベロッパーツールの上部に検索ボックスが表示されます。
「Capture full size screenshot」を実行する. 「screenshot」と入力し（日本語表示では「スクリーンショット」）、「Capture full size screenshot」（日本語表示では「フルサイズのスクリーンショットをキャプチャ」）を選びます。Chrome が内部でページをスクロールし、ページ全体の PNG をダウンロードフォルダに保存します。同じメニューには、表示部分を撮る「Capture screenshot」、要素パネルで選んだ要素だけを撮る「Capture node screenshot」、範囲を指定して撮る「Capture area screenshot」もあります。
ヒント：同じコマンドはデバイスツールバーにもあります。Cmd/Ctrl+Shift+M でデバイスツールバーを開き、スマホの機種か任意の幅を選んでから、その三点メニューで Capture full size screenshot を選びます。サイトのスマホ表示をページ全体で撮るなら、これがいちばん手早い方法です。
この方法の限界。このコマンドは、ページ要素をその瞬間の状態のまま1回で撮影します。そのため、次のような問題が起きます。
- 固定ヘッダー、Cookie バナー、チャットの吹き出しが、画像の1画面分ごとに写ったり、本文の上に重なったりします。
- スクロールで読み込まれる画像は、実際にはスクロールしていないので抜けることがよくあります。先に手動で一番下までスクロールしておくと改善しますが、必ずではありません。
- ページ全体ではなくパネルの中でスクロールするページ（Gmail、Notion、Slack、ほとんどの管理画面）は1画面分の高さしか撮れず、パネルが途中で切れます。
- とても長いページは、何の警告もなく真っ白になったり途中で切れたりすることがあります。
- クリップボードへのコピー、エディタ、PDF、履歴はありません。手元に残るのはファイル1つだけです。
方法2：ページ全体をキャプチャする拡張機能
拡張機能は、あなたのタブの中で1画面ずつスクロールしながら撮影し、それをつなぎ合わせます。だからこそ、上のようなケースにも対応できます。Chrome ウェブストアにはいくつかありますが、以下は私たちが開発している無料のChrome のページ全体スクリーンショット拡張機能、FullPage Capture の手順です。ほかの拡張機能でも、だいたい同じです。
FullPage Capture をインストールする. Chrome ウェブストアから、Edge なら Edge アドオンから。無料、アカウント不要、透かしなし。
アイコンをクリックするか、ショートカットを押す. 既定のショートカットは Alt+Shift+K です。ページが自動でスクロールしながらキャプチャされます。固定ヘッダーは1回だけ撮影し、その先をスクロールする間は隠します。スクロールで読み込まれる画像は表示されるまで待ち、ページ内でスクロールするパネルも個別に最後まで展開します。
結果を使う. 結果タブが開き、ページ全体が1枚の画像で表示されます。クリップボードへのコピー、エディタでの矢印や文字の書き込み、見せたくない部分のぼかし、サイズを指定したトリミングができ、PNG・JPEG、または行の途中で切れない改ページ付きの PDF で保存できます。
このページで試してみてください。無料、アカウント不要、何もアップロードされません。
Chrome に追加デベロッパーツールとの違い
| デベロッパーツール：Capture full size screenshot | FullPage Capture | |
|---|---|---|
| 起動の仕方 | F12、Cmd/Ctrl+Shift+P、コマンドを入力 | ワンクリック、または Alt+Shift+K |
| 固定ヘッダーを1回だけ写す | いいえ | はい |
| スクロールで読み込まれる画像 | 抜けることが多い | 読み込みを待つ |
| ページ内でスクロールするパネル | いいえ | はい |
| 埋め込みフレームと PDF ファイル | いいえ | はい |
| とても長いページ | 真っ白になったり切れたりすることがある | 28,800 px を超えると番号付きのパーツに分割 |
| クリップボードにコピー | いいえ | はい |
| 注釈、ぼかし、トリミング | いいえ | はい編集したキャプチャの保存は Pro |
| 改ページ付きでリンクをクリックできる PDF | いいえ | はい |
| インストール不要 | はい | いいえ無料、アカウント不要 |
方法3：文書が必要なら PDF に保存
画像ではなく、送付や保管のためのファイルが欲しいなら、Chrome の印刷（Cmd/Ctrl+P）で送信先を「PDF に保存」にするのが標準の方法です。ただし、仕上がりには注意が必要です。Chrome はサイトの印刷用スタイルシートでページを組み直すので、画面どおりの見た目になることはまれです。背景やダークテーマはたいてい消え、文字の行がページの境目で切れ、パネル内でスクロールする部分はスクロールしていた位置までしか印刷されません。一方で、リンクはクリックでき、テキストも選択できます。
拡張機能の PDF 書き出しは、スクリーンショットをもとに PDF を作ります。1枚の長いページか、行と行の間で改ページする Letter・Legal・A4 を選べ、リンクもそのまま使えます。詳しくは、比較表もあるWeb ページを PDF で保存するページをご覧ください。
簡単な方法では全体が撮れないケース
- Gmail、Notion、Trello、ダッシュボード。ページではなく、ページ内のパネルがスクロールします。拡張機能を使いましょう。ウィンドウ全体（サイドバーとヘッダーを含む）を1回撮ったうえで、パネルだけを展開します。
- 無限スクロール（SNS のフィード、チャット）。ページに終わりがありません。必要なところまでスクロールしてからキャプチャしましょう。拡張機能はその時点で読み込まれている分を撮ります。
- 固定ヘッダーと Cookie バナー。先にバナーを閉じてから、ヘッダーを1回だけ写す拡張機能でキャプチャします。デベロッパーツールなら、コマンドを実行する前に要素パネルでヘッダーのノードを削除します。
- とても長いページ。Chrome のキャンバスは一辺 28,800 ピクセルが上限です。それを超えると、拡張機能は番号付きのパーツに分けて保存し、デベロッパーツールは何も保存しないことがあります。
- ログインが必要なページや社内ネットワークのページ。どちらの方法も自分のタブの中で動くので使えます。オンラインサービスでは撮れません。
- 特定の要素だけ（表、グラフなど）。デベロッパーツールなら、その要素を選んで「Capture node screenshot」を使います。拡張機能なら、キャプチャしてからエディタでピクセル単位でトリミングします。
- スマホ表示。上で説明したデベロッパーツールのデバイスツールバーを使うか、ウィンドウの幅を狭くして拡張機能でキャプチャします。
- Chrome で開いた PDF。対応しているのは拡張機能だけです。ファイルのすべてのページを1枚の画像に描画します。
- 高解像度。どちらもディスプレイのピクセル密度で撮影します（Retina ディスプレイなら2倍）。各要素のピクセル数を増やしたいなら、撮る前にページを拡大しておきましょう。
Windows、Mac、Chromebook の場合
ここまでの内容は OS に関係ありません。デベロッパーツールも拡張機能も、どの環境の Chrome でも同じように動きます。違うのは OS 標準のスクリーンショットツールで、どれも画面の範囲までしか撮れません。Windows の Snipping Tool と PrtSc キー、Mac の Shift+Cmd+3 と 4、Chromebook の Ctrl+「ウィンドウを表示」キーです。パソコン向けのブラウザで、スクリーンショット機能にページ全体のオプションがあるのは Microsoft Edge だけです（Edge でページ全体をキャプチャする方法を参照）。iPhone や Android スマホでは、この機能が OS のスクリーンショットに組み込まれていて、拡張機能は動きません。
よくある質問
Chrome でページ全体のスクリーンショットを撮るショートカットキーは？
Chrome 自体にはありません。標準機能で撮るには、デベロッパーツールのコマンドメニューを経由します（F12、Cmd/Ctrl+Shift+P、「Capture full size screenshot」）。FullPage Capture をインストールしていればショートカットは Alt+Shift+K で、chrome://extensions/shortcuts で変更できます。
ページ全体のスクリーンショットで画像が抜けたり、グレーの四角になったりするのはなぜ？
ページがスクロールに合わせて画像を読み込むのに、標準のコマンドは画像が表示される前に撮影してしまうからです。コマンドを実行する前に一度ページの一番下までスクロールするか、画面ごとに読み込みが終わるのを待ってから撮影する拡張機能を使いましょう。表示の遅いページは、拡張機能の設定で待ち時間を延ばせます。
ヘッダーが画面ごとに何度も写るのはなぜ？
スクロールしても画面に残るヘッダーは、画面をつなぎ合わせるツールだと、どの画面にも写ってしまいます。拡張機能はヘッダーを最上部で1回だけ撮り、それ以降は隠します。デベロッパーツールの場合は、先に要素パネルでヘッダーを自分で非表示にするしかありません。
スクリーンショットで全体が撮れない、途中で切れるのはなぜ？
たいていは、ページ自体ではなくページ内のパネルがスクロールしているためです（Gmail、Notion、Trello、ほとんどのダッシュボード）。標準のコマンドはページ要素を撮るので、パネルは1画面分しか写りません。拡張機能は実際にスクロールしている部分を見つけて、そこを展開します。もう1つの原因は、ページが長すぎて Chrome のキャンバスの上限を超えていることです。その場合、拡張機能は番号付きのパーツに分けて保存します。
ログインが必要なページもページ全体をキャプチャできますか？
はい、どちらの方法でもできます。どちらも、すでにログインしているご自身のタブの中で動くからです。URL からスクリーンショットを作るオンラインサービスでは撮れません。サーバーはあなたのアカウントでログインしていないからです。
Chrome で開いた PDF 全体をスクリーンショットできますか？
デベロッパーツールのコマンドではできません。Chrome の PDF ビューアでは動かないためです。拡張機能ならファイルを独自に描画し、すべてのページを1枚の画像にキャプチャします。
Chromebook の Chrome でページ全体のスクリーンショットを撮るには？
方法は同じく2つで、デベロッパーツールの「Capture full size screenshot」か、拡張機能を使います。Chromebook のショートカット（Ctrl+「ウィンドウを表示」キー）で撮れるのは画面の範囲だけです。
ページ全体のスクリーンショットとスクロールスクリーンショットは同じものですか？
はい。スクロールスクリーンショット、長いスクショ、ページ全体のスクリーンショットは、どれも画面より縦に長いページを1枚にした画像のことです。スマホでは「スクロール」や「長いスクショ」、パソコンのツールでは「ページ全体」と呼ぶことが多いだけです。 Chrome でスクロールスクリーンショットを撮る
いま読んでいるこのページで試してみてください。 無料、アカウント不要、透かしなし。何もアップロードされません。
Chrome に追加