Viewport Screenshot

ビューポートのスクリーンショットは、現在のサイズとスクロール位置で、ブラウザのウィンドウに見えているWebページの部分だけを撮影します。表示範囲の上や下にあるコンテンツは含まれません。画像のサイズは、ビューポートのサイズにデバイススケールファクターを掛けた値です。たとえば、1倍では1920×1080、2倍では3840×2160です。

Web開発では、ビューポートはページが描画される領域で、CSSピクセルで測定されます。タブのバーやアドレスバーなどのブラウザのクロームは含まれません。そのため、ビューポートのスクリーンショットは、訪問者が最初に見るページを、周囲のブラウザのインターフェースなしで示します。

ビューポートのスクリーンショットとフルページのスクリーンショットの比較

ビューポートのスクリーンショットは、訪問者が到着したときに見える、コンテンツの1画面分を示します。フルページのスクリーンショットは、ドキュメント全体を上から下まで1枚の画像として描画します。ビューポートの撮影は小さく、速く、比較しやすくなります。フルページの撮影はすべてを示しますが、非常に縦長になることがあり、ビューポートの高さを前提にしたレイアウトを壊すことがあります。

ビューポートのスクリーンショットの用途

• ランディングページの最初の画面の確認。
• サムネイルとリンクのプレビュー。
• ヘッダーとヒーローの領域に焦点を当てたビジュアルリグレッションテスト。
• 固定のデバイスサイズでのレスポンシブの確認。

ビューポートのサイズとレスポンシブな撮影

ビューポートの幅によって、ページに表示されるレスポンシブなレイアウトが決まります。幅390ピクセルのビューポートはスマートフォンのレイアウトになり、1920ではデスクトップのレイアウトになります。Temposhotの Website Capture では、Desktop 1920×1080、Tablet 768×1024、Mobile 390×844 があり、URLごとに Area を Viewport または Full page に設定できます。

ビューポートのスクリーンショットでよくある間違い

• ページの読み込みまたはアニメーションが終わる前に撮影する。
• クッキーバナーがビューポートを覆ったままになる。
• 折り返し（ファーストビューの下）にあるコンテンツが表示されると期待する。
• 異なるスケールファクターで撮影した結果を比較する。

同じスクリーンショットを繰り返し撮りますか？

Website Capture にURLを追加し、Viewport とデバイスを設定して、最大10の Concurrent browsers で1回の実行を開始してください。詳しくは キャプチャのオプション をご覧ください。

よくある質問

「ファーストビュー」とはどういう意味ですか？

スクロールせずに見えるコンテンツのことです。ビューポートのスクリーンショットは、これを示します。

ビューポートのスクリーンショットにアドレスバーは含まれますか？

含まれません。描画されたページだけが含まれます。

出典

• Viewport（MDN用語集）
• Playwright screenshots guide

関連リソース

• Website Captureのクイックスタート: 最初のURLリストの実行。
• Website Captureのオプション: デバイス、範囲、待機の設定。
• スクリーンショットの解像度チェッカー: 画像のサイズを確認します。