全ページスクリーンショットとPDF書き出しの使い分け

ウェブページは、縦に長い画像1枚としても、ページ区切りのあるPDFとしても保存できます。どちらもコンテンツは残りますが、ブラウザの外に出た後の動作が異なります。どちらを選ぶかは、読み手がレイアウトを正確に見る必要があるか、テキストを検索する必要があるか、印刷する必要があるかで決まります。

この記事では、同じ例のページを使って2つの形式を比較し、それぞれの失敗例を示します。さらに、画面を撮影して検索可能なPDFに書き出す第3の方法も紹介します。作業例の数値はすべて、デスクトップ幅で撮影した長い記事ページ1件から得たものです。

各形式の仕組み

全ページスクリーンショットは、スクロール可能なページ全体を1枚のラスター画像として記録したものです。幅はブラウザウィンドウの幅に合わせられ、高さはページの長さに応じて増えます。10,000ピクセル以上になることもあります。フォント、画像、色を含め、すべてのピクセルを表示された状態のまま記録します。

ブラウザのPDF書き出しは、印刷エンジンで生成されます。ブラウザは用紙向けにページをレイアウトし直し、サイトに印刷用スタイルシートがあればそれを適用して、結果をページ単位に分割します。テキストは通常そのままテキストとして残るため、選択、検索、コピーができ、リンクも多くの場合で機能します。

違いは結果を決める要素にあります。スクリーンショットは画面を記録します。ブラウザのPDFは、印刷用にページを描画し直します。

本記事の例ページ

以下の比較では、同じ記事ページを1件使います。このページは本文中心で、固定ヘッダー、Cookieバナー、スクロールに応じて読み込まれる本文内画像14枚、末尾のコメント欄を含みます。幅1920ピクセルのデスクトップウィンドウで表示すると、ページ全体の高さは12,000ピクセルです。

このページは、ブログ、ドキュメントサイト、ニュース記事に典型的な構成です。また、印刷ルール、遅延読み込みの画像、後から表示されるウィジェットを含むため、2つの形式の結果が最も食い違いやすいページでもあります。

ピクセル、ポイント、用紙

スクリーンショットはピクセル単位で測られます。PDFのページはポイント単位で測られ、1インチは72ポイントです。ブラウザは印刷時に1 CSSピクセルを1/96インチとして扱うため、A4ページは約794 × 1123 CSSピクセル、US Letterページは約816 × 1056 CSSピクセルに相当します。

そのため、幅1920ピクセルのレイアウトをブラウザのPDFにしても、画面と同じ見た目になることはほとんどありません。印刷エンジンが扱える幅は約800ピクセルしかないため、コンテンツを狭い段組みに折り返すか、縮小します。スクリーンショットは1920ピクセルの幅をそのまま保持し、折り返しを行いません。

全ページスクリーンショットが適している場合

• 正確な見た目の記録。 デザインレビュー、不具合報告、変更前後の比較では、印刷時の見た目ではなく、画面に表示された状態のページが必要です。
• 印刷用スタイルが不十分なページ。 多くのサイトは印刷時に画像を非表示にしたり、レイアウトを崩したり、背景を消したりします。スクリーンショットは印刷ルールの影響を受けません。
• アプリ型のページ。 ダッシュボード、地図、Canvasベースのツールは、印刷すると白紙や崩れたページになることがよくあります。
• チャットやスライドでの共有。 PDFビューアを使わずに、1枚の画像をメッセージ、チケット、スライドに貼り付けられます。

欠点はサイズとテキストです。縦に長いPNGは数メガバイトに達することがあります。テキストはピクセルとして記録されるため、検索にはOCRが必要です。

視覚的なレビューと比較

デザインチームやQAチームは、リリース前後のページを比較します。同じ幅で撮影した2枚のスクリーンショットは、Compare Imagesで確認できます。このツールは、スライダー、フェード、並列表示、ピクセル差分の表示を備えています。同じページの2つのPDFは比較がはるかに難しくなります。1行の変更でも、それ以降のすべてのページ区切りが動く可能性があるためです。

比較が成立するのは、両方の撮影で設定を同じにしている場合だけです。ウィンドウ幅、待機時間、広告ブロックを揃えます。揃えない場合、差分表示にはページ上に存在しない変更が表示されます。

印刷できないページ

次の種類のページは、印刷エンジンでほぼ確実に失敗します。

• データ読み込み後にcanvas要素でグラフを描画するダッシュボード。
• ウィンドウに合わせてサイズを決める地図ビューと画像ビューア。
• コンテンツを文書本体ではなくスクロールするパネルに入れるシングルページアプリ。
• 本文を隠す印刷用スタイルシートで印刷を妨げているページ。

これらのページでは、印刷プレビューが白紙、1画面分だけが切り取られた表示、またはナビゲーションだけの表示になります。スクリーンショットは印刷ルールに関係なく、描画されている内容を記録します。

縦長画像のサイズと高さの上限

縦長のスクリーンショットには実用上の限界があります。本文中心の記事を1920 × 12,000ピクセルのPNGで保存すると、一般に3〜8 MBになります。同じ画像をJPEG（品質80）で保存すると、その3分の1程度になることがよくあります。画像ビューアやチャットアプリの中には、縦長画像を極端に縮小するものがあり、ファイルを開かないと文字が読めない場合があります。

縦長の撮影画像を送る前に、ピクセルサイズとファイルサイズを確認します。Screenshot Resolution Checkerで幅、高さ、ファイルサイズ、アスペクト比を確認できます。チャットやチケットシステムにアップロード上限がある場合は、Image Compressorでファイルを縮小します。

PDF書き出しが適している場合

• 閲覧と検索。 選択可能なテキストは、検索、コピー、スクリーンリーダーで利用できます。
• 印刷。 長い1本の帯ではなく、用紙サイズでページが区切られます。
• 記事のアーカイブ。 印刷用スタイルが適切な本文中心のページは、整理された小さなファイルになります。
• 小さいファイル。 テキストベースのPDFは、同じページの画像よりはるかに小さくなることが多くなります。

欠点は再レイアウトに起因します。固定ヘッダーがすべてのページに繰り返し表示されることがあり、遅延読み込みの画像が欠落することがあり、印刷用スタイルシートで非表示にされたコンテンツが消えることがあります。PDFに写るのは印刷エンジンが生成した結果であり、画面と一致しない場合があります。

例のPDFで起きた問題

例の記事は、A4で9ページに印刷されました。スクリーンショットには起きなかった問題が3つ現れました。

1. 固定ヘッダーがすべてのページの上部に描画され、2〜9ページでは本文の最初の2行を隠しました。
2. 最初の画面より下にある14枚の画像のうち5枚が空の枠になりました。印刷エンジンがレイアウトを行った時点で読み込まれていなかったためです。
3. 印刷用スタイルシートで非表示にされたため、コメント欄が欠落しました。

Cookieバナーも1ページ目に印刷され、タイトルに重なりました。これらの問題はテキストを変えないため、9ページすべてで検索とコピーはできました。

印刷用スタイルシートが役立つ場合

適切な印刷用スタイルシートは、ナビゲーション、広告、サイドバーを取り除き、読みやすいフォントサイズを設定し、リンクのテキストの後にリンク先を印刷します。ドキュメントサイトや長文のメディアには、多くの場合この仕組みがあります。こうしたページでは、ブラウザのPDFがどのスクリーンショットよりも見やすくなります。

印刷プレビューで次の3点を確認します。ナビゲーションが消えている、本文がページ幅いっぱいに広がっている、画像が本文の段組み内に収まっている。3つすべてに当てはまる場合は、PDFとして印刷すれば十分です。

PDFの結果を変える印刷ダイアログの設定

ブラウザの印刷ダイアログには、結果を大きく左右する設定が4つあります。Paper sizeは、レイアウトを折り返す基準の用紙幅を決めます。そのため、A4とLetterでは改ページの位置が変わります。Scaleはレイアウトを縮小または拡大します。80〜90%にすると、幅の広い表が右端で切れずに1ページに収まることがよくあります。

Marginsを最小に設定すると、コンテンツの幅は広がりますが、一部のプリンタで文字が切れることがあります。Headers and footersは、ページタイトル、URL、日付、ページ番号を追加します。アーカイブには役立ちますが、配布資料では不要な情報になります。Background graphicsは、色付きのボックスやバナー画像を表示するかどうかを決めます。これは上で説明したとおりです。

重要なPDFを書き出すときは、使用した設定をファイル名やメモに記録します。記録しない場合、1か月後に同じページを書き出し直すと、改ページが異なり、ページが変更されたように見えることがあります。

判断の表

必要な条件	全ページスクリーンショット	ブラウザPDF
画面と完全に一致する	はい	多くの場合いいえ
選択と検索が可能なテキスト	OCR後のみ	通常はあり
クリック可能なリンク	なし	通常はあり
標準用紙に印刷できる	不向き	はい
ダッシュボードやWebアプリで機能する	はい	多くの場合失敗する
チャットやスライドに貼り付けやすい	はい	いいえ
長い本文ページのファイルサイズ	大きい	小さい

簡単な基準は次のとおりです。誰かが見るだけならスクリーンショットを撮ります。誰かが読む、検索する、印刷する場合はPDFを書き出します。

読み手に合わせて形式を選ぶ

表は読み手が特定されている場合に最も役立ちます。デザイナーはスクリーンショットを求めます。弁護士、監査人、学生は通常、引用できるテキストを含むPDFを求めます。

表が扱わないケース

どちらの列にも当てはまりにくいページがあります。無限スクロールのフィードには終わりがないため、全ページの撮影は任意の高さで止まるか、終わらないままになります。また、印刷エンジンは読み込み済みの部分しか印刷しません。サインインの背後にあるページは、ブラウザのセッションを共有しないツールでは印刷できません。

無限フィードでは、ページ全体ではなく、決まった数の画面を撮影します。サインインの背後にあるページは、セッションが有効なブラウザから撮影します。どちらのケースも、後述のハイブリッドな方法を示しています。

選ぶ前の2分間の確認

判断がつかない場合は、同じページから両方のファイルを作成して比較します。ページをPDFとして印刷し、全ページスクリーンショットも1枚撮影し、2つのファイルを並べて開きます。

次の4点を順に確認します。画像の欠落、繰り返されるヘッダー、途中で切れた表、選択できないテキストです。問題が少ない形式が、そのサイトに適した形式です。サイトのページは同じ挙動を示す傾向があるため、通常は1回の確認で、一連のページ全体の形式を決められます。

ハイブリッド: ビューポートの連続撮影からページ区切りのPDFへ

3つ目の方法は、スクリーンショットの視覚的な正確さとPDFのページ区切りを組み合わせます。ページを1画面ずつ撮影し、各フレームを1画面1ページのPDFにまとめ、その上にOCRで認識したテキストを重ねます。

Temposhotでは、Auto Captureがブラウザウィンドウをソースとしてこの処理を行います。Stop conditionをScreenshotsに設定し、Key pressにSpaceを記録し、Intervalを1秒に設定します。各フレームは、次のキー入力の前に保存されます。結果ペインでPDFを選ぶと、認識したテキスト付きの検索可能なPDFを書き出せます。Key pressによる自動操作にはTemposhot Proが必要です。

URLの一覧を扱う場合は、Website Captureで各ページをFull pageとして撮影し、セッションをPDFとして書き出せます。URLごとに1ページになります。既存の縦長スクリーンショットは、Split Imageでページサイズの部分に分割し、Image to PDFで結合できます。スクリーンショットから作成したPDFにテキストレイヤーを追加するには、Screenshot to Searchable PDFを使います。

手順: 1つのブラウザウィンドウで1画面1ページ

例では、ブラウザウィンドウに1画面あたり約1,000ピクセルのコンテンツが表示されていました。多くのブラウザではSpaceで画面全体よりわずかに少なくスクロールするため、12,000ピクセルの記事の最下部に到達するには13フレームが必要でした。撮影数を14に設定すると、予備のフレームが1枚追加されます。このフレームが最後の画面と重複する場合は削除します。

1. ページを準備する

   記事を開き、Cookieバナーを閉じ、最下部まで一度スクロールしてから最上部に戻し、遅延読み込みの画像を読み込ませます。PDFに使いたい幅にブラウザウィンドウのサイズを合わせます。

2. 設定を行う

   Auto Captureで、上に示した設定を適用します。5 sのカウントダウンの間に、Spaceがページに届くようにページ内をクリックします。

3. ウィンドウを選ぶ

   ソースの選択でWindowsを選び、ブラウザウィンドウを選択します。Start Captureを選択します。

4. フレームを確認する

   ペインにCapture completeと表示されたら、直前の画面と重複する最後のフレームのチェックを外します。

5. PDFを書き出す

   PDFを選択します。検索可能なPDFは、撮影順に1画面1ページで構成されます。

手順: 多数のURLを全ページで撮影する

20ページでも200ページでも、作業の対象がブラウザウィンドウでは不適切です。Website CaptureはURLの一覧を受け取り、行ごとの設定でURLごとに1枚の画像を保存します。各ページは非公開のWebKitセッションで開かれるため、サインインしていない訪問者に見える状態で撮影されます。

記事ページでは、Network idleよりも、Delayを2秒にしたLoadのほうが安全です。解析ツールやチャットウィジェットが定期的に通信するページでは、Network idleはタイムアウトすることがあるためです。Hide onlyは、同意バナーに応答せずに画像から取り除きます。結果ペインでPDFを選ぶと、URLごとに1ページの検索可能なPDFが1つ作成されます。

手順: 1枚の縦長スクリーンショットを印刷可能なページに変換する

既存の全ページPNGは、新たに撮影しなくてもページに分けられます。1920 × 12,000の例は、2,400ピクセルずつ5つの部分に分割されます。各部分は4:5の比率になり、余白を入れてA4に収まります。

固定の格子分割では、部分の境界で1行の文字が半分に切れることがあります。分割後に各境界を確認します。見出しや表で切れた場合は、Auto Captureのビューポート連続撮影を使うと回避できます。各画面がウィンドウの端で終わるため、切れ目が生じないからです。

保存前の実用的なヒント

1. 最初に印刷プレビューを確認します。 ブラウザの印刷ダイアログを開き、プレビューを端までスクロールします。問題がなければ、ブラウザのPDFが最も速い方法です。
2. 背景グラフィックを有効にします。 色や画像が欠ける場合は、印刷ダイアログで有効にします。
3. 全ページ撮影の前にページを一度スクロールします。 遅延読み込みの画像が表示されるようにするためです。理由は遅延読み込みの項目で説明しています。
4. 文字の多いスクリーンショットにはPNGを選びます。 JPEG圧縮は小さな文字をぼかし、OCRの精度も下げます。
5. 重要な記録は両方保存します。 スクリーンショットはページがどう見えたかを証明します。PDFは文字を検索しやすく保ちます。

全ページ撮影のトラブルシューティング

症状	考えられる原因	対処
画像があるべき場所に灰色の枠が表示される	撮影時に遅延読み込みの画像が読み込まれていない	Delayを2〜5秒に設定するか、ウィンドウ撮影の前にページを一度スクロールする
画像の途中にヘッダーが表示される	スクロールしながら結合する撮影中に固定ヘッダーが再描画された	行のRender previewを選択し、バッチを実行する前に画像を確認する
同意バナーが本文を覆う	新規訪問者にバナーが表示される	CookiesをReject bannersまたはHide onlyに設定する
1つのURLで撮影が失敗する	ページがNetwork idleに到達しない	Wait untilをLoadに切り替え、行を再実行する
拡大するとぼやける	低品質のJPEG	PNGを使うか、JPEG品質を100に近づける

Cookieの処理はベストエフォートです。独自の同意管理システムの中には、画像にバナーが残るものもあります。そうしたページは手動で確認が必要です。

重複せずに両方のファイルを保存する

重要な記録では、スクリーンショットとPDFを同じ名前で並べて保存します。撮影日をフォルダ名に含めたページごとのフォルダにすると、後の監査が簡単になります。

ハイブリッド方式を速くするショートカット

ビューポート方式は、キーボードで撮影を開始および停止すると速くなります。Temposhotのキャプチャメニューは、ブラウザが前面にあるときも機能します。

FAQ

全ページスクリーンショットは検索可能にできますか？

はい。OCRを実行すれば可能です。TemposhotでフレームをPDFとして書き出すと、認識したテキストが追加されます。単一の画像からテキストを抽出するにはExtract Text from Imageを使います。

ブラウザのPDFがページと異なって見えるのはなぜですか？

ブラウザは用紙に合わせてページを再レイアウトし、サイトの印刷用スタイルシートを適用します。印刷時に非表示になる要素、固定ヘッダー、遅延読み込みの画像が、ほとんどの違いの原因です。

法務やコンプライアンスの記録には、どちらが適していますか？

スクリーンショットは画面に表示された内容をそのまま示すため、記録に必要な内容と一致することが多いです。テキストの保存用にPDFも保管するチームが多くあります。記録を受け取る相手の要件を確認します。

全ページスクリーンショットは、どこまで縦長になると問題になりますか？

一律の上限はありませんが、まず読みやすさが下がります。12,000ピクセルの画像をノートPCの画面に合わせて縮小すると、本文が読めないサイズまで小さくなります。また、一部のアップロードフォームは非常に大きいファイルを受け付けません。これより大幅に長いページでは、画像を分割するか、ビューポート連続撮影を使います。

Website Captureは、サインインの背後にあるページを撮影できますか？

いいえ。各URLは、自分のブラウザのCookieを使わずに、非公開のセッションで読み込まれます。サインインの背後にあるページは、サインインしていない訪問者に見える状態で撮影されます。サインイン済みのブラウザウィンドウを撮影するには、Auto Captureを使います。

スクリーンショットのPDFに含まれるOCRテキストは、ブラウザのPDFと同じくらい正確ですか？

いいえ。ブラウザのPDFは元のテキストを保存しますが、OCRはピクセルから文字を読み取るため、小さな文字、特殊なフォント、数式を誤認識することがあります。ウィンドウサイズを大きくして撮影したPNGフレームが、OCRにとって最も良い入力になります。

保存が許可されたページを扱う場合

Temposhotは、ページをスクリーンショットとして撮影し、Macで検索可能なPDFとして書き出します。MacでスクリーンショットをPDFとして保存するを参照するか、Screenshot PDF vs browser Save as PDFで両方の方法を比較してください。