Responsive Screenshot

レスポンシブスクリーンショットは、特定のビューポートの幅と高さで描画されたWebページの撮影です。通常は、複数のサイズで一式として撮影します。レスポンシブなサイトは、CSSのメディアクエリ、コンテナクエリ、柔軟なレイアウトを使うため、同じURLでも幅ごとにナビゲーション、列の数、画像の切り抜きが変わります。

ブラウザは、ビューポート自体が狭い場合にのみ、スマートフォン向けのレイアウトを表示します。デスクトップのスクリーンショットを縮小しても、レイアウトは変わりません。そのため、ツールはページを読み込む前に、ビューポートのサイズを設定します。多くの場合、デバイススケールファクターとユーザーエージェントも設定します。

レスポンシブスクリーンショットが重要な理由

デザインのレビュー、顧客の承認、QAには、各ブレークポイントでページがどう見えるかという根拠が必要です。レイアウトの不具合は、タブレットでメニューがロゴと重なるように、1つの幅でだけ現れることがよくあります。固定のサイズで撮影した一式があれば、1回のレビューでそのような不具合が見えるようになります。

よく使われるビューポートのサイズ

種類	ビューポートの例
デスクトップ	1920×1080、1440×900、1366×768
タブレット	768×1024（縦）
スマートフォン	390×844、360×800

サイズはCSSピクセルで表されます。3倍のスケールのスマートフォンは、390×844 CSSピクセルを、1170×2532の物理ピクセルで描画します。

レスポンシブスクリーンショットの撮影方法

• ブラウザでは、開発者ツールを開き、デバイスモードに切り替えて、サイズを選びます。
• コードでは、移動の前に、PlaywrightまたはPuppeteerでビューポートを設定します。
• Temposhotの Website Capture（Command+2）では、Device を選びます。Desktop 1920×1080、Tablet 768×1024、Mobile 390×844 があります。URLの各行には、個別のデバイスと Area を設定できます。Render preview を使うと、全体を実行する前に1行をプレビューできます。

レスポンシブスクリーンショットでよくある間違い

• 目標の幅で描画せず、デスクトップの撮影結果を縮小する。
• 1つの比較の一式に、ビューポートとフルページの撮影を混在させる。
• クッキーバナーを残し、スマートフォンのレイアウトの半分を覆ってしまう。
• 異なるスケールファクターで撮影した結果を比較する。

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

Website Capture で、デバイスごとに各URLを1回追加し、リスト全体を1回の実行で処理します。詳しくは キャプチャのオプション をご覧ください。

よくある質問

レスポンシブスクリーンショットはモバイルのスクリーンショットと同じですか？

違います。モバイルのスクリーンショットは1つのサイズです。レスポンシブスクリーンショットは、複数のサイズにまたがる一式です。

実機のスマートフォンが必要ですか？

レイアウトの確認には、スマートフォンのビューポートで表示したブラウザで通常十分です。ただし、特定の機器でだけ起きる不具合には、実機が必要です。

出典

• Responsive web design（Wikipedia）
• Viewport（MDN用語集）

関連リソース

• Website Captureのクイックスタート: 最初のURLリストの実行。
• 実行と結果: 行のステータスと再試行。
• アスペクト比の計算ツール: サイズの比率を確認します。