複数ビューポートを同時表示
同じURLをスマートフォン・タブレット・デスクトップのフレームに同時表示します。各フレームは実際の端末幅を使うため、CSSブレークポイントがそのまま動作します。
Chrome拡張機能 · v1.3.0
レスポンシブ確認を、 スマホ・タブレット・PCで
レスポンシブ確認を、 スマホ・タブレット・PCで
一画面に同時表示。
BLUE_Responsiveは、閲覧中のページを複数の端末ビューポートで同時に表示する無料のChrome拡張機能です。実際の端末幅でCSSメディアクエリが動作し、スクロールも同期します。モバイルUAで表示するため、サーバーが振り分けるモバイルHTMLも確認できます。端末別スクリーンショットやフルページのスクロールキャプチャもワンクリックで保存できます。
BLUE_Responsiveを選ぶ理由
端末を切り替えて何度も再読み込みする必要はありません
DevToolsの端末モードを繰り返し切り替える必要はありません。一つのオーバーレイに複数のビューポートを並べ、一度のスクロールですべての端末を確認できます。
スクロール同期
一つの端末をスクロールすると、ほかの端末も相対位置に合わせて移動します。同じセクションを全画面で比較でき、同期はいつでも無効にできます。
実際のモバイルUAで表示
モバイルフレームはリクエストのUser-Agentを選択した端末に置き換えます。UAに応じてモバイルHTMLを配信するサイトも、実機と同じ表示を取得できます。
端末選択
代表的な端末からカスタム解像度まで
よく使うスマートフォン・タブレット・デスクトップをワンクリックで追加し、必要なW×Hを直接入力して確認することもできます。
端末を追加
スマートフォン
- iPhone SE · 375×667
- iPhone 12・13・14 · 390×844
- iPhone 15・16 · 393×852
- iPhone 15・16 Pro Max · 430×932
- Galaxy S24 · 360×800
- Galaxy S24 Ultra · 384×824
- Pixel 8 · 412×915
- Galaxy Z Fold（折りたたみ時）· 344×882
タブレット
- iPad mini · 768×1024
- iPad Air 11インチ · 820×1180
- iPad Pro 11インチ · 834×1194
- iPad Pro 12.9インチ · 1024×1366
- Galaxy Tab S9 · 800×1280
デスクトップ
- 13インチ ノートPC · 1280×800
- 15インチ ノートPC · 1440×900
- HD デスクトップ · 1366×768
- FHD デスクトップ · 1920×1080
- ワイドQHD · 2560×1440
カスタム
幅
高さ
追加
プリセットチップ（レスポンシブ3種・モバイル重視・すべて表示）からよく使う構成をすぐに呼び出せます。★ 保存を選べば、自分専用のプリセットも作成できます。
主な機能
レスポンシブデバッグをすばやく終える機能
プリセット、回転、拡大縮小、折り返し、埋め込みを制限するサイトへの対応まで、実務に必要な機能を一つのオーバーレイにまとめました。
プリセット & 構成の保存
レスポンシブ3種、モバイル重視、すべて表示などの標準プリセットをチップで利用できます。現在の構成を★ 保存で追加し、チップの✕で削除できます。
カスタム端末
代表的なスマートフォン・タブレット・デスクトップを追加するか、カスタムW×Hを入力して任意の解像度をすぐに確認できます。
縦向き・横向きの切り替え
⟲ボタンで各端末フレームを縦向きと横向きに切り替え、両方のレイアウトをすぐに比較できます。
倍率スライダー & フィット
全体の倍率を調整したり、画面の高さに自動で合わせたりできます。横一列と折り返しグリッドを切り替え、複数端末を一画面で比較できます。
スクリーンショット & スクロールキャプチャ
表示中の範囲（📷）、ページ全体をつないだロングキャプチャ（📜）、全端末を含むウィンドウ全体（🖼）をPNGで保存できます。繰り返し表示される固定ヘッダーは自動で整理されます。
埋め込み制限サイトのプレビュー
X-Frame-OptionsやCSP frame-ancestorsで埋め込みを防ぐサイトでは、ビューアーを開いているタブでプレビュー対象サイトのレスポンスに限り該当ヘッダーを一時的に除去します。ページ内の別サイトのフレームには影響しません。
ショートカットで切り替え
ツールバーアイコン、Alt+R、Alt+Shift+Rでどのページからでも開閉できます。オーバーレイ内ではESCで終了し、F5とCtrl+Rは端末フレームだけを再読み込みします。
ショートカット
ショートカットでもっとすばやく
標準の切り替えキーはAlt+RとAlt+Shift+Rです。chrome://extensions/shortcutsで好みのキーに変更できます。
Alt + R
ビューアーを切り替え
ツールバーアイコンと同じようにオーバーレイを開閉
Alt + Shift + R
ビューアーを切り替え（予備）
Alt+Rが別のアプリと重複する場合に使用
ESC
すぐに終了
オーバーレイを閉じて通常のページへ戻る
F5 / Ctrl + R
フレームだけ再読み込み
ビューアーを閉じずに端末フレームだけを再読み込み
インストール
1分以内でインストール完了
Chromeウェブストアからワンクリックでインストールし、すぐに利用できます。
Chromeウェブストアから追加
ChromeウェブストアのBLUE_Responsiveを開いてChromeに追加を選択し、拡張機能をツールバーに固定すれば準備完了です。
どのページからでも起動
確認したいページでAlt+R（またはAlt+Shift+R）を押すか、ツールバーアイコンを選択します。オーバーレイに端末を追加してスクロールしてみましょう。
file://ページを表示するには
ローカルHTMLファイル（file://）を確認する場合は、拡張機能の詳細画面でファイルのURLへのアクセスを許可するを有効にしてください。通常のhttp(s)ページは追加設定なしで動作します。
よくある質問
よくある質問
インストール前によく寄せられる質問をまとめました。
BLUE_Responsiveは本当に無料ですか？
はい、完全無料です。広告、決済、サブスクリプション、会員登録はなく、インストール直後からすべての機能を制限なく利用できます。
DevToolsの端末モードとは何が違いますか？
DevToolsは一度に一つの端末だけを表示します。BLUE_Responsiveは複数端末を一画面に同時表示してスクロールを同期するため、同じセクションが各端末でどう見えるかをすぐに比較できます。
モバイル専用ページを配信するサイトも確認できますか？
はい。モバイルフレームはリクエストのUser-Agentを選択した端末UAに置き換え、最新のChromeが送るUA Client Hints（Sec-CH-UA*）もモバイル値に設定します。読み込み直前にはnavigator.userAgent、タッチ、画面解像度も上書きするため、サーバー側のUA・CH振り分けとJavaScriptのモバイル判定の両方でモバイルとして認識されます。
埋め込みを禁止するサイトも表示できますか？
多くの場合は可能です。ビューアーを開いているタブで、プレビュー対象ドメインのiframeレスポンスに限りX-Frame-OptionsとCSP frame-ancestorsヘッダーを一時的に除去します。別サイトの入れ子フレームは保護されたままで、ビューアーを閉じる、ページを移動する、またはタブを閉じるとルールも解除されます。
切り替えキーをCtrl+Alt+Rなどに変更できますか？
はい。Chromeはmanifestの初期値としてCtrl+Altの組み合わせを許可しないため、標準ではAlt+RとAlt+Shift+Rを設定しています。chrome://extensions/shortcutsで対応する任意のキーに変更できます。
知っておくべき制限はありますか？
@media (hover:none)や(pointer:coarse)など入力方式に基づくCSSメディアクエリは、デスクトップの入力値で評価されます。完全なエミュレーションが必要な場合はDevToolsの単一端末モードを使用してください。また、フレーム内のリンクから別ページへ移動するとモバイルマーカーが外れることがあるため、主に一つのページを確認する用途向けに設計されています。
どのブラウザで利用できますか？
Manifest V3を採用し、Google Chrome、Microsoft Edge、Brave、Arcなど最新のChromium系ブラウザで動作します。
レスポンシブ確認を、一画面で完了。
Chromeウェブストアからインストールし、任意のページでAlt+Rを押してください。
スマートフォン・タブレット・PCの表示が同時に開きます。
Contact
まだ漠然としたアイデアでも構いません。
プロジェクトを一緒に 整理しましょう
現在の状況と目標をお聞かせください。
実現可能な範囲、進め方、概算費用をご案内します。
- 1お問い合わせ内容の確認
- 2範囲・スケジュールの協議
- 3ご提案・お見積り