VKT Toolkit · 2026年9月11日 · 9 分で読めるChrome でスクロールページのスクリーンショットを撮る方法 — 遅延読み込みと無限スクロールがすべてを壊すとき
スクリーンショットボタンを押します。ツールが下にスクロールし、数ビューポートをキャプチャして結合します。結果：上部の3分の1は正常ですが、中間部は画像があるべき場所に空白の白い矩形があり、ページがツールのスクロール中に新しいコンテンツを読み込み続けたため、下半分は完全に欠落しています。聞いたことがありますか？
モダンなウェブページは静的なドキュメントではありません。スクロール時に画像を読み込み（遅延読み込み）、下部に到達すると新しいコンテンツを追加し（無限スクロール）、ヘッダーやナビゲーションバーをビューポートに固定し（position: fixed）、右クリックや選択を完全にブロックすることもあります。スクロールしてピクセルをキャプチャするだけのスクリーンショットツールは、これらのページでは失敗します。このガイドでは、なぜ失敗するか、そしてこれらのページを正しくキャプチャする方法を解説します。
標準的なスクリーンショットツールがモダンなページで失敗する理由
3つの異なる問題があり、ほとんどのツールは1つしか解決しません：
| 問題 | 何が起こるか | 対象ページ |
|---|---|---|
| 遅延読み込み | ビューポートより下の画像とコンテンツはまだ読み込まれていません。スクリーンショットは空のプレースホルダーまたは空白の白い矩形をキャプチャします。 | ほとんどのモダンウェブサイト — ニュースサイト、EC、ブログ、ドキュメント |
| 無限スクロール | ツールがスクロールする間、ページは新しいコンテンツを追加し続けます。スクリーンショットは「底」に到達しません — 底がないか、半分レンダリングされたカードの途中でキャプチャされます。 | Twitter、Instagram、Reddit、Pinterest、ほとんどのソーシャルフィード |
| スティッキー要素 | 固定ヘッダー、ナビゲーションバー、チャットウィジェット、Cookie バナーが各ビューポートスライスでコンテンツに重なり、結合された最終画像に不格好な重複を作成します。 | ほぼすべてのモダンサイト |
単にスクロールしてピクセルをキャプチャするツールは、空白のセクション、重複したヘッダー、欠落したコンテンツを含む画像を生成します。修正には、ツールがページと能動的にやり取りする必要があります — 遅延読み込みをトリガーし、コンテンツのレンダリングを待ち、固定要素を処理します。
正しいアプローチ：スクロール、待機、キャプチャ
適切なスクロールスクリーンショットツールは、単にスクロールしてピクセルを取得するだけではありません。ページの各ビューポート高さごとに3ステップのループを実行します：
- スクロール：次のセクションにスクロール；
- 待機：ブラウザの読み込み完了を待つ — 画像、フォント、動的コンテンツ。優れたツールは、ネットワークが安定し、レイアウトが固定されるまで監視してからキャプチャします；
- キャプチャ：そのビューポートスライスをキャプチャし、次に進む。
すべてのスライスがキャプチャされた後、ツールはそれらを1枚の画像に結合し、重複する領域（各スライスに表示されるスティッキーヘッダーなど）を削除し、固定要素の重複を除去します。
これはまさに VKT PageShot が行っていることです。そのフルページキャプチャは段階的にスクロールし、各セクションで遅延読み込みコンテンツのレンダリングを待ってから、クリーンで完全な画像に結合します — 空白の矩形も、重複したヘッダーもありません。
遅延読み込みページのキャプチャ方法（ステップバイステップ）
シナリオ：スクロールすると画像が読み込まれる商品カタログページ、ニュース記事、またはドキュメントページ全体をキャプチャしたい場合。
- ページを開き、初期の Above the fold コンテンツ（画像、フォント、レイアウト）が完全に読み込まれるまで待ちます；
- ツールバーの PageShot アイコンをクリック；
- 「フルページ」キャプチャモードを選択；
- PageShot が自動的にスクロールします。各ビューポート高さで一時停止し、遅延読み込み画像のレンダリングが完了してからそのスライスをキャプチャします。プログレスインジケーターを確認できます；
- 完了すると、フルページ画像が PageShot のプレビューエディターで開きます。すべての画像、すべてのセクション — ページ全体が1枚の長い紙に印刷されたかのようにキャプチャされます；
- 保存：PNG、JPG として保存、またはクリップボードにコピー。または PDF としてエクスポートしてアーカイブ。
これだけです。手動スクロールも、空白の矩形も、手作業の結合も不要です。
無限スクロールページのキャプチャ方法（Twitter、Instagram、Reddit）
無限スクロールページには自然な終端がありません — 下部に近づくとページはコンテンツの読み込みを続けます。つまり、事前にキャプチャする量を決めてから、事前読み込みする必要があります。
戦略：
- まず手動でスクロールします。キャプチャしたい量のコンテンツを読み込みます。Twitter スレッドなら、最後にキャプチャしたいツイートが見えるまでスクロール。Reddit のコメントセクションなら、関心のあるコメントに到達するまでスクロール。各スクロールでページがさらにコンテンツを読み込みます；
- スクロールを停止し、最後のバッチのコンテンツのレンダリング完了まで数秒待ちます；
- ここで PageShot のフルページキャプチャを使用します。ページの最上部からスクロールを停止した場所まで、読み込み済みのすべてがキャプチャされます。コンテンツはすでに読み込まれているため、遅延読み込みするものも、見落とすものもありません；
- 保存またはエクスポート。
重要な注意点：無限スクロールページは、多くのコンテンツを読み込むと非常に長くなる可能性があります。200 ツイートの Twitter スレッドは簡単に 50,000 ピクセル以上の高さになります。PageShot は非常に長いページもうまく処理しますが、結果の画像ファイルは大きくなります（5〜15 MB）。セクションだけが必要な場合は、代わりに表示領域または選択範囲キャプチャモードを使用してください。
スティッキーヘッダーがあるページのキャプチャ方法（重複なし）
ほぼすべてのモダンウェブサイトにはスティッキーナビゲーションバーがあります — スクロールしても画面上部に留まるヘッダーです。スクリーンショットツールがビューポートスライスをキャプチャして結合する際、そのヘッダーが各スライスに表示され、最終画像に同じナビゲーションバーが 800 ピクセルごとに繰り返されます。
修正方法：スマートな結合アルゴリズムが position: fixed または position: sticky の要素を検出し、最初のビューポートスライスにのみ保持します。その後の各スライスでは、結合前にスティッキー領域が削除されます。
PageShot はこれを自動的に行います。設定する必要はありません。スティッキーヘッダーは最終画像の最上部に1回だけ表示され、他のセクションはその下のスクロール可能なコンテンツのみを表示します。
スティッキー要素を処理しない別のツールを使用している場合、2つの回避策があります：
- CSS オーバーライド：DevTools（F12）を開き、スティッキー要素を見つけ、スタイルパネルで
position: static !important;を設定します。これによりヘッダーが通常通りスクロールするようになります。その後スクリーンショットを撮ります。変更は元に戻すことを忘れないでください； - PDF に印刷：
Ctrl+P→ PDF として保存。印刷レイアウトは通常スティッキー要素を抑制します。必要に応じて PDF を画像に変換します。
スクリーンショットをブロックするページのキャプチャ方法
一部のサイト — 特にストリーミングプラットフォーム、オンライン試験ポータル、DRM 保護コンテンツ — はスクリーンショットを阻止しようとします。アプローチは、使用されるブロックの種類によって異なります：
- 右クリック／コンテキストメニューのブロック：これは実際にはスクリーンショットを防ぎません。右クリックメニューではなく、ツールバーの拡張機能アイコンを使用します。PageShot はツールバーボタンとキーボードショートカットでキャプチャし、コンテキストメニューのブロックを完全に回避します；
- JavaScript イベントリスナー：一部のサイトはキーボードイベント（Print Screen、Ctrl+Shift+S）をリッスンして抑制します。PageShot は Chrome の
activeTabおよびtabsAPI を使用しており、ページ JavaScript が介入できないレベルで動作します； - DRM／暗号化メディア拡張機能：ストリーミングサービス（Netflix、Disney+）はハードウェアレベルの DRM を使用します。DRM 保護ビデオコンテンツのスクリーンショットは黒い矩形として表示されます。これはブラウザレベルの制限であり、拡張機能が回避することはできません — また、回避しようとするのはサイトの利用規約に違反する可能性があります。
最初の2つのケースでは、PageShot は特別な設定なしで動作します。DRM コンテンツについては、どのスクリーンショットツールも役に立ちません — それは設計上そうです。
モバイルでの長ページのキャプチャ（Chrome デスクトップ経由）
ウェブサイトのモバイル版 — スマートフォンで表示されるレスポンシブレイアウト — をキャプチャする必要がある場合、Chrome デスクトップの DevTools でシミュレートできます：
F12を押して DevTools を開きます；- デバイスツールバーの切り替えボタン（電話アイコン、または
Ctrl+Shift+M）をクリック； - ドロップダウンからモバイルデバイスを選択（例：iPhone 14 Pro、Pixel 7）；
- 目的のページに移動。モバイルレイアウトが読み込まれます；
- 通常通り PageShot のフルページキャプチャを使用。モバイルレスポンシブレイアウトがキャプチャされます。
これはモバイル固有のレイアウトのアーカイブ、レスポンシブデザインのテスト、またはスマートフォンで異なる表示になるコンテンツのキャプチャに便利です。
比較：スクロールページのキャプチャ方法 4 つ
| 方法 | 遅延読み込み処理 | 無限スクロール処理 | スティッキーヘッダー除去 | PDF 保存 | コスト |
|---|---|---|---|---|---|
| VKT PageShot | ✓ 各セクションを待機 | ✓ 読み込み済みコンテンツをすべてキャプチャ | ✓ 自動 | ✓ 内蔵 | 無料 |
| Chrome DevTools | 部分的 — 遅延コンテンツを見落とす可能性 | ✗ 最初の読み込みのみキャプチャ | ✗ ヘッダーが重複 | ✗ PNG のみ | 無料（組み込み） |
| PDF に印刷（Ctrl+P） | ✓ ブラウザがすべてレンダリング | ✗ 読み込み済みコンテンツのみ | ✓ 印刷時に抑制 | ✓ ネイティブ | 無料（組み込み） |
| GoFullPage | ✓ 読み込みを待機 | ✓ 読み込み済みコンテンツをキャプチャ | ✓ スティッキー処理 | ✓ エクスポート | 無料；プレミアム様々 |
各方法にはそれぞれの場所があります。DevTools は素早いキャプチャに高速です。PDF 印刷は PDF が必要な場合に最もシンプルです。GoFullPage は堅実な代替手段です。そして PageShot は、スクロール-待機-キャプチャ、スティッキーヘッダーの除去、アノテーション、PDF エクスポートを1つのツールにまとめています。
トラブルシューティング：スクロールスクリーンショットのよくある問題
画像があるべき場所に空白の矩形がある
スクリーンショットツールが画像の読み込み前にスクロールしました。解決策：各セクションを待機するツールを使用します（PageShot はこれを実行します）。DevTools を使用している場合は、まず手動で最下部までスクロールしてすべてを事前読み込みしてからキャプチャしてみてください。
スクリーンショットが早すぎる段階で停止 — ページ下部が欠落
ツールは最下部に到達したと判断しましたが、ページにはさらにコンテンツがあります。これは body に overflow: hidden を使用し、子コンテナでスクロールするページでよく発生します。PageShot は body だけでなく、実際のスクロール可能要素を検出します。
ヘッダーとナビゲーションバーが重複
ツールが結合中にスティッキー／固定要素を除去していません。PageShot（自動スティッキー除去）を使用するか、キャプチャ前に DevTools でスティッキー要素を position: static に手動設定してください。
キャプチャ中にページが新しいコンテンツを読み込み、不一致が発生
一部の動的ページ（ライブダッシュボード、リアルタイムフィード）は、スクリーンショット撮影中にコンテンツを変更します。解決策：キャプチャ前に自動更新やリアルタイム更新を一時停止するか、フルページではなく単一ビューポートキャプチャを使用してください。
PageShot は無料です — フルページキャプチャ、表示領域、選択範囲、アノテーション、モザイクぼかし、PDF エクスポート。ウォーターマークなし、アップロード不要、100% ローカル。Chrome ウェブストアまたは Edge アドオンからインストール。
よくある質問
フルページスクリーンショットに空白のセクションがあるのはなぜ？
空白のセクションは遅延読み込みが原因です — ページはビューポートに入ったときだけ画像とコンテンツを読み込みます。スクリーンショットツールのスクロールが速すぎるか、遅延読み込みオブザーバーをトリガーしない場合、コンテンツはレンダリングされません。PageShot は段階的にスクロールし、キャプチャ前に各セクションの読み込みを待つことでこの問題を解決します。
Twitter や Instagram のような無限スクロールページのスクリーンショットは撮れる？
はい、ただし注意点があります：無限スクロールページには自然な終端がないため、キャプチャする量を事前に決める必要があります。まず手動でスクロールしてキャプチャしたいコンテンツを読み込み、その後 PageShot のフルページキャプチャを使用します。画面に表示されているものだけでなく、読み込み済みのすべてがキャプチャされます。
スクロールスクリーンショットで埋め込み動画やアニメーションはキャプチャされる？
スクリーンショットは各セクションの現在の視覚状態をキャプチャします。埋め込み動画は1フレーム（ポスターまたは現在の再生位置）として表示されます。CSS アニメーションは、そのセクションがキャプチャされる時点の状態でフリーズします。カルーセルなどのインタラクティブ要素は、現在アクティブなスライドが表示されます。
フルページスクリーンショットにサイズ制限はある？
Chrome は、いずれかの寸法でおよそ 16,384 ピクセルのキャンバスサイズ制限を課しています。非常に長いページ（数万ピクセル）では、一部のツールが出力を切り詰めたり分割したりします。PageShot はページが制限を超えた場合に自動的に複数の画像に分割することで対処し、失われるものはありません。
まとめ
モダンなウェブページは静的ではありません — スクロールで読み込み、オンデマンドで追加し、ビューポートに要素を固定します。静的ドキュメントとして扱うスクリーンショットツールは、壊れた画像を生成します。解決策は、忍耐強くスクロールするツールです — 各セクションを待ち、スティッキー要素を処理し、きれいに結合する。それが PageShot がやることであり、無料で実行します。
VKT ブログでさらにガイドをチェック；ご質問は [email protected] まで。