用語
スクロールスクリーンショット
スクロールスクリーンショットは、見えている画面より先に続く内容をスクロールし、各位置で撮った画像を1枚の縦長画像へつないだものです。
フルページスクリーンショットとの違い
2つの言葉は近いものですが、示すものが異なります。スクロールスクリーンショットは撮影方法です。ツールが内容をスクロールし、見える範囲を順に撮影し、画像をつなぎます。フルページスクリーンショットは、ページの先頭から末尾までを1枚に収めた結果を指します。
フルページ画像はスクロールと結合で作ることも、ブラウザエンジンのフルページ描画機能から作ることもできます。スクロールスクリーンショットには、必ずスクロールしてつなぐ処理があります。
スクロール撮影が使われる場面
1画面に収まらない内容を撮るときに使います。
- 長いWebページ: 全体を見るにはスクロールが必要なランディングページ、記事、ダッシュボードを撮影します
- モバイルアプリ: スマートフォンやタブレットのフィード、設定画面、チャット履歴を撮影します
- デスクトップアプリ: 見えているウインドウより大きい表計算、文書、インターフェースを撮影します
- 不具合報告: 複数画面にまたがる問題の前後関係を残します
- デザインレビュー: スクロール可能なインターフェース全体の配置を、1つの成果物として記録します
スクロール撮影の仕組み
基本は、ページを少しスクロールして見えている部分を撮り、またスクロールして撮る処理を繰り返し、各画像を1枚へつなぎます。多くのツールは、利用者が撮影を始めた後のスクロールと結合を自動で行います。
難しいのは、正確につなぐことです。追従ヘッダー、フローティング要素、アニメーション、遅延読み込みの内容は、結合を乱す場合があります。こうした要素の処理に対応するツールもあります。ヘッドレスブラウザでページ全体を描画し、結合を使わずフルページ画像を作る自動撮影ツールもあります。
よくある失敗
- 追従ヘッダーとフッターを無視する: ツールが各画像から検出、除外できないと、結合後の画像に何度も現れます
- 内容の読み込み前に撮る: ツールが速くスクロールしすぎると、遅延読み込み画像や動的に描画する部分が空白になることがあります
- 標準のフルページ撮影が使えるのにスクロール撮影する: ブラウザのDevToolsやヘッドレスブラウザなら、複数画像を結合せずページ全体を撮れる場合があり、結合による乱れを避けられます
- 画素単位で必ず正確だと思う: スクロール撮影はタイミングと描画に左右されます。アニメーション、ホバー状態、撮影間に変わる内容によって不一致が生じます
よくある質問
スクロールスクリーンショットとフルページスクリーンショットは同じですか?
同じではありません。スクロールスクリーンショットは、内容をスクロールして各画像をつなぐ撮影方法を指します。フルページスクリーンショットは、ページ全体を収めた1枚の縦長画像という結果を指します。
どのアプリでもスクロールスクリーンショットを撮れますか?
ツールによります。ブラウザだけに対応するものもあれば、スクロール可能な内容を持つさまざまなアプリで動くものもあります。
スクロール撮影では結合の乱れが起きますか?
はい。スクロール中にアニメーション、追従ヘッダー、動的コンテンツなどが変化すると、境目が見えたり、要素が重複したりすることがあります。
結合の問題を避ける方法はありますか?
追従ヘッダーや動的な内容を処理できるツールもあれば、スクロール間の待ち時間を設定できるものもあります。ブラウザの描画機能でページ全体を撮る方法なら、複数画像の結合自体が不要です。
出典
- ビューポートの概念 — MDN