Webページ全体の長いスクショには落とし穴が3つある：遅延読み込み、固定ヘッダー、終わらないスクロール
ページ全体の長いスクリーンショットが普通のスクショと違うのは、前者が「ページ」を撮るのに対し、後者は「画面」を狙う点です。画面のスクショはビューポートに制限され、画像の高さはウィンドウの高さ止まり。長いスクショはページに沿って下へ進み、スクロール範囲の下まで同じ一枚に収めます。ところが実際に撮ってみると、長いスクショの多くは不完全——画像が空白、ナビゲーションバーが三、四回も出てくる、ページが終わらない——という結果になりがちです。不思議でも何でもなく、ページの作りとスクショの仕組みが衝突しています。まず原因を理解してから撮りましょう。
ページ全体の長いスクショはページ全体を撮り、普通のスクショは一画面だけ
長いスクショの完全さを決めるのはビューポートです。ブラウザがページを表示する窓であり、フルページ撮影はこの窓の外まで出て縦方向の全コンテンツを取ります。Print Screenやシステムのスクショでは、ビューポートに見えている分しか取れません。商品ページは七、八画面に及ぶこともざらで、一画面ずつ撮って手でつなぐのは手間がかかる上にズレも起きます。一度に全部取るには、下までスクロールしてつなぐ作業をツールに任せます。Chrome DevToolsには公式コマンド「Capture full size screenshot」があり、ドキュメントは「ビューポートに見えていないコンテンツも含めて」撮れると明記しています。VidBrowserのWebページ長スクショツールは同じ発想で、コマンドライン操作をURL入力一つに置き換えたものです。
長いスクショが破綻しやすい三箇所：空白ブロック、繰り返すヘッダー、終わらないページ
不完全な長いスクショの原因は、ほぼこの三つに帰着します。どれもページ自身の作りが効いているもので、理解しておけばツールの故障と取り違えません：
- 空白ブロック：遅延読み込みを使うページが多く、画像はスクロールが近づいて初めてリクエストされます。ツールは上から下へ一巡するだけなので、発火しなかった部分は空白のまま。
- 繰り返すヘッダー：固定ヘッダーや浮遊チャットボタンはビューポートに釘付けなので、つなぐ各区間がそのコピーを連れてくることがあり、一枚の長い画像に同じバーが三、四回現れます。
- 終わらないページ：無限スクロールのフィードは底がなく、ツールはどこで止まるべきか分かりません。極端に長いページは画像の高さ・メモリ・出力形式の制限にもぶつかります。
デバイスのビューポートが長いスクショの姿を決める：デスクトップ・タブレット・モバイル
同じURLでもデバイスのビューポートを変えれば、別の画像になります。ページはビューポート幅に応じてレスポンシブのレイアウトを切り替えます。デスクトップは横広の複数カラム、モバイルは縦長の一カラムです。パソコンユーザーが見る姿を残したいならデスクトップ、スマホ訪問者が見る姿を知りたいならモバイルを選択。これは画質の選択ではなくレイアウトの選択です。撮る前にどちらが必要か決めておきましょう。
Webページ全体を長い画像一枚で保存する4ステップ
入り口はVidBrowserのツールボックスにあり、全部で4手順です：
手順1：VidBrowserをダウンロードしてインストール
インストールの入り口はVidBrowser動画ダウンロードページにあります。WindowsとMac対応のデスクトップ動画ブラウザで、動画の視聴、クリップの切り出し、ローカル保存ができ、ダウンロードと録画の二大機能を内蔵しています。
手順2：Webページ長スクショツールを開く
左のナビゲーションから「ツール」ページに入り、長いスクショの入り口を探すか、長スクショツールのページへ直接アクセスします。
手順3：URLを入れてスクショ設定を選ぶ
撮影が許された公開ページのアドレスを入力し、デバイスビューポート（デスクトップ・タブレット・モバイル）、範囲（ページ全体または表示領域）、出力形式（PNG・JPG・WebP）を選びます。
手順4：生成してダウンロード
生成結果を確認し、端末にダウンロードして保存します。ツールは公開ページ向けです。お使いのブラウザのログインCookieは取得せず、ログイン・ペイウォール・アクセス制限を回避することもありません。
長い画像で残す価値のある三種類：会話記録、商品ページ、プロフィールのスナップ
長いスクショの本当の価値は、変わるもの、消えるものを、変わらない一枚に釘付けにすることです。よくあるシーンは三つです：
- サポートとのやり取りと注文確認：チャット画面にはたいていダウンロードボタンがありません。長い一枚は往復全体を時系列のまま残し、バラバラの一画面スクショより証拠としてずっと読み取れます。
- 比較と記録用の商品ページ：価格・仕様・在庫は絶えず動きます。長い一枚は数字と一緒にレイアウトも残すので、後日の比較に根拠が残ります。
- プロフィールとトップページのスナップ：SNSのプロフィールは更新され、削除もされます。定期的に撮れば変化が一目で分かります。ページ全体のスクショは、Webデザインの参考素材としてもそのまま使えます。
長い画像の保存と整理：形式・容量・もう一つの道
長い画像は性質上、長くて重いもの。保存後に二つだけ手入れしておくと後が楽です。形式では、PNGは無損失で文字やUIの細部に向き、JPGは軽くて写真の多いページに向き、WebPはさらに軽いものの古いソフトでは開かないことがあります。開けなければWebPをJPGへ変換する記事で一度変換を。容量では、極端に長いページのスクショは数MBスタートがざらで、添付を断られたら先に圧縮を。画像圧縮の記事に画質とサイズの取捨がまとまっています。また、ページから本当に欲しいのがレイアウトではなく一括の画像なら、巨大な長い一枚より画像の一括ダウンロードで元画像を直接取るのが得策です。長い一枚は全体像を、一括ダウンロードは元画像を、それぞれ別の仕事を担います。
まとめ
長いスクショの完全さは、撮る前に決まります。まずデバイスビューポートを選び、次にページに遅延読み込み・固定ヘッダー・無限スクロールの三つの懸念がないか確認する。公開ページは4手順で進め、撮り終えたら用途で形式を選び、重いファイルは圧縮する。サポートとのやり取り、商品ページ、プロフィールのスナップという三種類には、一枚の長い画像がいちばん手軽な保存物になります。
よくある質問
長い画像の空白ブロックはあとから埋められますか?
埋められますが、順序を変える必要があります。空白は画像がそもそもリクエストされていない印です。ページを上から下まで一度手動でスクロールして全画像を読み込ませてから、もう一度撮ってください。スクショツールはページの読み込みを代行しません。空白のままの部分は取り戻せません。
ログインしないと見られないページは撮れますか?
撮れません。ツールは公開ページ向けで、ブラウザのログインCookieは取得せず、ログイン・ペイウォール・アクセス制限を越えません。ログイン後にしか見えない内容は対象外です。これはツールの境界であって、設定の問題ではありません。
長い画像にナビゲーションバーが何度も出てくるのはなぜですか?
固定ヘッダーや浮遊ボタンはビューポートに釘付けなので、つなぐ各区間がそれらを連れてきます。撮る前にページにその種の要素があるか確認してください。ある場合、長い画像に繰り返しが現れるのは正常です。ページによっては固定スタイルを切ってから撮り直すと、結果がよりきれいになります。
