フルページスクリーンショット

フルページスクリーンショットは、画面に見えているビューポートだけでなく、スクロールできるページの上端から下端までを1枚の画像に収めたものです。

ビューポート撮影、スクロール撮影との違い

3つの用語は密接に関係していますが、それぞれ指すものが異なります。ビューポートスクリーンショットは、ある時点でブラウザウインドウに見えている部分だけを撮影します。スクロールスクリーンショットは撮影方法を表し、ツールがページをスクロールしながら複数の画像をつなぎ合わせます。フルページスクリーンショットは、ページ全体を1枚に収めた結果を表します。

どれを選ぶかは目的次第です。確認する人が1つのセクションだけを見ればよいなら、ビューポートスクリーンショットで十分な場合があります。ページ全体の構造を1つの資料で確認したいなら、フルページスクリーンショットが適しています。ブラウザ標準の撮影でも、スクロールしながら合成する方法でも、重要なのはページ全体を正確に残せることです。

フルページスクリーンショットを使う場面

現在見えている状態だけでなく、全体を視覚的な記録として残したい場合に使います。

• デザインレビュー： 長いランディングページや記事について、レイアウト全体と並び順を確認します
• SEO監査： ページ構造とコンテンツの階層を視覚的に記録します
• QA： 長いページ、テンプレート、ブレークポイントごとのレスポンシブ表示を確認します
• Webサイトのアーカイブ： 時間の経過に伴うページ変更を、更新前後の記録として残します
• クライアントの承認： 非同期で確認できるように、ページ全体を1つの資料として共有します

フルページスクリーンショットを求める人は、通常、現在の画面より広い背景情報を必要としています。

フルページスクリーンショットの作り方

作成方法はいくつかあります。

• ブラウザのDevTools： Chrome、Firefox、Edgeには、スクロールできるページ全体を1枚の画像として撮影する標準コマンドがあります
• スクロールして合成するツール： ページを自動でスクロールし、撮影した画像を1枚の長い画像へつなぎ合わせます。モバイル端末や、フルページ撮影機能を備えていないデスクトップアプリでよく使われます
• 自動撮影ツール： ヘッドレスブラウザやスクリーンショット自動化ツールなら、手動でスクロールせず、予定した時刻や一括処理でフルページを撮影できます。多くのページを定期的に撮影する場合に便利です

同じ設定で複数の公開ページを撮影する場合は、Webサイトのスクリーンショット自動化ワークフローを使ってURLリストへまとめて適用できます。Webサイトを一括撮影するガイドでは、URLを使った撮影の手順と制約を説明しています。

よくある失敗

• フルページ撮影は常に1クリックだと思う： ツールによっては、スクロールと合成によって画像を作ります。方法よりも、ページ全体を正しく残せるかが重要です
• ファーストビューだけが重要なのにフルページで撮る： 利用者が実際に見る範囲を正確に確認したいQAでは、ビューポートスクリーンショットのほうが適する場合があります。フルページ画像では、かえって確認対象が曖昧になることもあります
• 遅延読み込みを考慮しない： 表示領域へ入ったときに読み込まれる画像やセクションは、撮影前に読み込みを始めなければ空白になったり欠けたりします
• ビューポート幅が違っても同じ結果になると思う： 幅1,440pxで撮影した画像と、幅375pxで撮影した画像ではレイアウトが異なります。確認する環境に合わせて撮影幅を指定してください