Responsive Viewer は現在のウェブページを複数のデバイス viewport サイズで並べて表示します — すべて1画面に。iPhone、iPad、Android スマートフォン、ノートパソコン、デスクトップで同時にデザインの見た目を確認できます。1つの viewport をスクロールすると他のすべてが追随するため、あらゆるデバイスサイズで同じコンテンツのセクションを簡単に比較できます。
レスポンシブデザインのテストは従来、ブラウザウィンドウのサイズを変更するか、DevTools のデバイスツールバーで1つずつビューポートサイズを切り替える方法が一般的でした。これでも確認はできますが、一度に見られるサイズは1つだけであり、あるセクションがモバイルとデスクトップでどう見えるかを同時に比較することはできません。Responsive Viewer はページを複数のビューポートで同時にレンダリングし、画面上に並べて表示することでこの問題を解決します。
あらかじめ用意されたデバイスプロファイル(iPhone 15、iPad Pro、Pixel 8、MacBook、1440p デスクトップなど)から選ぶことも、任意のサイズを入力することもできます。各ビューポートは静的なスクリーンショットではなく、ページを完全にレンダリングしたインスタンスであるため、1つをスクロールすると他のすべてが同じ位置まで連動してスクロールします。このスクロール同期機能により、まったく同じコンテンツ領域を全デバイスサイズで一目に比較できます。
これはレスポンシブ関連の問題——ナビゲーションが正しく折り返されない、画像がコンテナからはみ出す、小さい画面でテキストが読みにくくなる、間隔が不自然に崩れるといった問題——を見つける最も速い方法です。各ビューポートは個別に縦向き・横向きを切り替えられるため、どちらの向きも実際によく使われるタブレットやフォルダブル端末の検証にも対応します。追加したカスタムビューポートのサイズは次回のセッションでも記憶されるため、ツールを開くたびにプロジェクト固有のブレークポイントを入力し直す必要はありません。
現在のページを複数の viewport サイズで同時にレンダリングし、画面上に並べて表示します。モバイル、タブレット、デスクトップのレイアウトをビューを切り替えることなくひと目で比較できます。各 viewport はページの完全に機能するレンダリングです。
人気デバイスのプリセットライブラリから選択できます：iPhone 15（393×852）、iPhone SE（375×667）、iPad（820×1180）、iPad Pro（1024×1366）、Pixel 8（412×915）、MacBook Pro（1440×900）、Full HD Desktop（1920×1080）。プリセットは現行デバイスの寸法に更新されています。
任意のカスタム幅と高さを入力して、非標準の viewport サイズをテストできます。よくあるタブレットの breakpoint である 768px 幅でページがどう見えるか確認したい場合は、入力するだけです。複数のカスタム viewport をプリセットと並べて追加できます。
1つの viewport をスクロールすると、他のすべてが同じ垂直位置にスクロールします。これにより、すべてのデバイスサイズで全く同じコンテンツセクションを同時に比較できます — ヒーローエリア、料金テーブル、フッターがモバイル、タブレット、デスクトップでどのようにレンダリングされるかを確認できます。
各 viewport はリアルなデバイスフレームの中に表示されます — スマートフォンのベゼル、タブレットのボーダー、ノートパソコンのクローム。このビジュアルコンテキストにより、レビューやプレゼンテーション時にどの viewport がどのデバイスを表しているかをステークホルダーが直感的に理解できます。
個別のデバイスのオン・オフを切り替えて、特定のサイズ比較に集中できます。モバイルとデスクトップだけを比較したい場合は、タブレットプリセットの選択を解除します。iPhone だけを表示したい場合は、他のすべての選択を解除します。表示する viewport を完全にコントロールできます。
responsive デザインを実装した後、Responsive Viewer を使ってすべてのセクションがターゲットのデバイスサイズ全体で正しく見えることを確認します。テキストのオーバーフロー、画像のスケーリングの問題、ナビゲーションの折りたたみの不具合、スペーシングの不整合を — すべて1つのビューでキャッチできます。
レビューミーティング中にクライアントにウェブサイトが各デバイスでどのように見えるかを示します。並列表示は直感的に理解できます — viewport の概念を説明する必要はありません。クライアントはモバイル、タブレット、デスクトップを同時に確認できます。
特定の幅でレイアウトが崩れているのを確認していますか？問題が発生している正確な pixel 幅にカスタム viewport を追加し、わずかに広い・狭い viewport と比較して、どの CSS breakpoint が問題を引き起こしているかを特定します。
長い見出しがモバイルで正しく折り返されているか、データテーブルが小さい画面でスクロール可能になっているか、フォームの入力フィールドがタップしやすい大きさか、CTA がすべてのデバイスサイズで表示されアクセスしやすいかを確認します。
マルチデバイスビューを使って、印象的な responsive デザインのショーケース画像を作成します。Responsive Viewer でデザインを 3〜4 つのデバイスサイズに渡って表示したスクリーンショットを撮り、ポートフォリオのプレゼンテーションに活用します。
DevSuite Pro のフローティングドックを開き、Responsive Viewer アイコンをクリックします。ページがマルチ viewport モードに切り替わり、デバイスフレームが並べて表示されます。
上部のデバイスバーに利用可能なプリセット（iPhone、iPad、Pixel、MacBook、Desktop）が表示されます。デバイスをクリックしてオン・オフを切り替えます。選択したデバイスが下に viewport として表示されます。
「Custom」ボタンをクリックし、特定の幅 × 高さのサイズを入力してカスタム viewport を追加します。768px、1024px、1280px などの breakpoint 値をテストするのに便利です。
いずれかの viewport をスクロールすると、他のすべてが同じ位置に追随します。選択したすべてのデバイスサイズで同じセクションがどのように見えるかを同時に比較できます。
Responsive Viewer アイコンを再度クリックするか、閉じるボタンをクリックしてマルチ viewport モードを終了し、通常の単一ページビューに戻ります。
