ビューポートは何種類撮影すべきですか？

少なくとも、デスクトップ（1,440pxまたは1,280px）、タブレット（768px）、モバイル（375px）を撮影します。ほかの幅でもレイアウトが切り替わるデザインなら、そのブレークポイントも追加してください。

レスポンシブスクリーンショットを自動化できますか？

はい。スクリーンショット自動化ツールやヘッドレスブラウザは、同じURLを複数のビューポート幅で1回の一括処理により撮影できます。ブラウザを手作業で何度もリサイズするより短時間で済みます。

どちらも選べます。目的に応じて、レスポンシブ撮影とフルページ撮影またはビューポート撮影を組み合わせます。レスポンシブが表すのはビューポートの幅で、撮影する縦の長さではありません。

レビューやドキュメントには、通常1倍で十分です。Retinaディスプレイでピクセル単位のQAを行う場合は、2倍で実際の描画の細部を確認できます。

レスポンシブスクリーンショットは、デスクトップ、タブレット、モバイルなど、複数のビューポート幅でWebページを撮影し、画面サイズに応じたレイアウトの変化を示す画像です。

レスポンシブWebデザインでは、ビューポート幅に応じてページの見た目と動作が変わります。1,440pxでは整ったレイアウトも、375pxでは崩れる可能性があります。各幅の画像を残せば、デザイナー、開発者、QA担当者が、対象とするすべての大きさでレイアウトを確認できます。

ブラウザをリサイズし、目視するだけとは異なります。レスポンシブスクリーンショットは比較、共有、保管できる視覚的な記録です。ページを直接開いていない人から変更の承認を得る場合にも役立ちます。

多くのワークフローでは、少数の標準的なブレークポイントを撮影します。

正確な値は、対象プロジェクトのブレークポイントによって異なります。任意の幅ではなく、レイアウトが実際に切り替わる幅で撮影することが重要です。

手作業なら、ブラウザウインドウをリサイズするか、DevToolsの端末エミュレーションを使い、各幅で撮影します。1回限りの確認には使えますが、ページや幅が増えると手間がかかります。

自動化する場合は、ビューポート幅のリストを受け取るヘッドレスブラウザやスクリーンショットツールを使い、同じURLを1回の処理で各幅から撮影します。Webサイトのクローラーツールにも同様の機能があり、URLと目的のビューポートを渡すと、各サイズの画像一式を生成できます。

デスクトップ幅だけを撮影する： モバイルとタブレットで確認しなければ、小さいビューポートの崩れは利用者から報告されるまで気付けません
プロジェクトと関係のない幅を使う： 任意のウインドウ幅では、実際のCSSブレークポイントを確認できない場合があります。プロジェクトのブレークポイントか、広く使われる端末幅を使います
変更前後を比べない： レスポンシブ画像は、変更前と変更後を並べたときに最も役立ちます。比較がなければ、新しいレイアウトが正しいのか、意図せず崩れたのか判断しにくくなります
横向きを忘れる： タブレットとスマートフォンは横向きでも使われます。両方の向きへの対応が要件なら、それぞれ撮影してください