Full-Page Screenshot

フルページスクリーンショットの概要、ビューポートやスクロールによる撮影との違い、使う場面を解説します。

フルページスクリーンショットは、ブラウザのウィンドウに見えている部分だけでなく、Webページのスクロール可能な全体の高さを1枚の画像に撮影します。長いランディングページは、高さが数千ピクセルの画像になることがあります。

一般的な方法は2つあります。1つ目は、ブラウザがドキュメントの全高を1回の描画で描く方法です。DevToolsや自動化ライブラリがこの方法に対応しています。2つ目は、ツールがビューポート単位でページをスクロールし、各部分を結合する方法です。

どちらの方法でも、同じページの動作に影響を受けます。たとえば、固定されたヘッダー、スクロールして表示された時点で読み込まれる画像、無限スクロール、フレームごとに変わるアニメーションです。

フルページ、ビューポート、スクロールによるスクリーンショットの違い

種類	高さ	作成方法
ビューポート	1画面分	現在見えている内容を撮影する
フルページ	ドキュメント全体	ページ全体を描画または結合する
スクロール	スクロールされた領域全体	任意のウィンドウやパネルをスクロールして結合する

フルページの撮影はWebページに特化しています。スクロールによる撮影は、アプリのパネル、チャットのスレッド、ドキュメントにも使えます。

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

レイアウト全体が重要になるデザインレビューと引き継ぎ。
リニューアル前や記録のためのページのアーカイブ。
画面の下方にある、レイアウトの崩れのQAチェック。
ポートフォリオと事例紹介の画像。

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

Temposhotの Website Capture では、Area を Full page に設定します。Wait の条件（Load、DOM content loaded、Network idle）を選び、コンテンツの表示が遅い場合は0〜60秒の遅延を追加します。出力はJPEG、PNG、WebPから選べます。

Chrome 116以降で1ページだけを撮影する場合は、Temposhot Full Page Screenshot 拡張機能が表示中のページをスクロールし、Retinaの解像度でビューポートをローカルで結合して、1枚のPNGをダウンロードします。

フルページのスクリーンショットでよくある間違い

遅延読み込みの画像が表示される前に撮影し、空白の領域が残る。
結合された画像に、固定ヘッダーやチャットボタンが繰り返し写り込む。
高さが非常に大きい画像を、一部のビューアーやアップロードフォームが受け付けない。
小さい文字の長いページをJPEGで保存する。

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

URLのリスト全体のページ全体を、Webサイトのスクリーンショット自動化で撮影できます。

よくある質問

フルページのスクリーンショットの一部が空白になるのはなぜですか？

ページがスクロールに応じて画像を読み込んでいる可能性があります。Network idle を選ぶか、遅延を長くしてください。

高さの大きい撮影結果をページごとに分割できますか？

はい。Split Image で、高さの大きい画像を複数の部分に分割できます。

出典

同じスクリーンショットを何度も撮っていますか？

Temposhot は、画面、ウィンドウ、または範囲をタイマーに従って連続で撮影し、その一式を PDF、画像、ZIP、または MP4 で書き出します。無料のブラウザツールは、1 枚の画像の処理に対応しています。

Mac版をダウンロード機能を見る