Responsive Viewer は現在のウェブページを複数のデバイス viewport サイズで並べて表示します — すべて1画面に。iPhone、iPad、Android スマートフォン、ノートパソコン、デスクトップで同時にデザインの見た目を確認できます。1つの viewport をスクロールすると他のすべてが追随するため、あらゆるデバイスサイズで同じコンテンツのセクションを簡単に比較できます。
従来の responsive デザインテストは、ブラウザウィンドウのリサイズや DevTools のデバイスツールバーを使って viewport サイズを1つずつ切り替える方法でした。それ自体は機能しますが、同時に1サイズしか確認できないため、モバイルとデスクトップでセクションがどう見えるかを同時に比較することは不可能でした。Responsive Viewer はページを複数の viewport で同時にレンダリングし、画面上に並べて表示することでこの問題を解決します。プリセットのデバイスプロファイル（iPhone 15、iPad Pro、Pixel 8、MacBook、1440p Desktop）から選択するか、カスタムサイズを入力できます。各 viewport はスクリーンショットではなく、ページを完全にレンダリングしたインスタンスです — 1つをスクロールすると他のすべても同じ位置にスクロールします。この同期スクロールにより、すべてのデバイスサイズで全く同じコンテンツエリアをひと目で比較できます。これは responsive の問題を発見する最も速い方法です。ナビゲーションが正しくない位置で折り返している、画像がコンテナからはみ出している、小さい画面でテキストが読みにくくなっている、スペーシングが不自然に崩れているといった問題を素早く検出できます。
現在のページを複数の 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 モードを終了し、通常の単一ページビューに戻ります。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
