ページが複数の端末でどのように見えるかを一度に確認する方法はありますか？
BLUE_Responsive は、チェックするページで Alt+R を押すと、モバイル、タブレット、PC 幅で 1 画面に同時に広がる無料 Chrome 拡張です。 1つのデバイスをスクロールすると、すべての画面が一緒に移動して同じ区間をデバイスごとに比較でき、デバイスごとの画面とページ全体をPNGで保存できます。
キーサマリー
- BlueCanvas BLUE_Responsiveはチェックするページで Alt+R を押すと、モバイル、タブレット、PC 幅で 1 画面に同時に広がる無料の Chrome 拡張機能です。
- 1つのデバイスをスクロールすると、すべての画面が一緒に移動するため、同じセクションがデバイスごとにどのように異なるかをすぐに比較できます。
- 必要なサイズを入力して自分の設定で保存し、デバイス固有の画面とページ全体をPNGで保存します。
映像で見せたシーン
ビデオは、同じページが画面の幅に応じてPC、タブレット、モバイルの形に変わるシーンから始まります。同じページも画面ごとに異なって見えるので、その違いをある画面で比較するツールを紹介します。
| 映像のシーン | すること |
|---|
| Alt+R でオン | 確認するページでAlt + Rを押すと、複数のプレビュー画面が開きます |
|---|
| 同時に比較 | モバイル、タブレット、PCを1画面で同時に確認し、モバイルとタブレットを順番に大きく見ます |
|---|
| 一緒にスクロール | 一度スクロールすると、すべての画面が一緒に移動して同じセクションを比較します |
|---|
| マイ設定の保存 | 希望のサイズを入力してデバイス設定を保存します |
|---|
| PNGとして保存 | デバイス固有の画面と長いページ全体をPNGとして保存します |
|---|
各画面は実際のデバイスのpx幅で描画されるため、CSSメディアクエリはそのまま動作します。ビデオの最後のシーンでは、ChromeウェブストアでBLUE_Responsiveを検索するように指示します。
どんな状況に使うのか
画面を作成したら、携帯電話やタブレットからずれていないことを確認する必要があります。このツールは、その確認をデバイスを変更するのではなく、一度に行うのに役立ちます。
- 新しく作成したページがモバイルからずれていないかどうかを見ると
- 携帯電話やタブレット、パソコンで同じセクションがどのように異なるかを並べて見ると
- サーバーがモバイル用HTMLをオフにするサイトのモバイルレスポンスを確認するとき
- 確認した画面を画像として残す必要があるとき
モバイルフレームはリクエストのUser-Agentをそのデバイスに置き換えて送信するため、サーバーがモバイル画面を別々に分割するサイトも確認できます。
始める方法
BlueCanvasホームページのPROGRAMメニューから RESPONSIVE CHECKER 紹介ページに入ることができます。インストールはChrome Webストアで行われます。
- インストール：ChromeウェブストアでBLUE_Responsiveを検索してChromeに追加します
- オン：チェックするページでAlt + Rを押すとオーバーレイが開きます。 Alt+Shift+R も同じ役割を果たします
- 端末を追加：携帯電話、タブレット、デスクトップをワンクリックで追加してスクロールして比較します
- 保存：必要な解像度を入力し、よく使う設定を保存し、デバイス固有の画面やページ全体をPNGで保存します
使用方法と環境
無料で会員登録は必要ありません。クロムを含むManifest V3をサポートするクロミウム系ブラウザで動作します。
タッチするかどうかを確認する入力ベースのメディアクエリは、デスクトップ入力として評価されます。また、フレーム内でリンクをタップして別のページに移動すると、モバイル表示が外れる可能性があるため、単一ページを確認するツールとして設計されています。
映像字幕専門（6シーン）
同じページ、異なる画面
同じページも画面ごとに異なって見えます。画面幅が変わるとレイアウトがどのように変わるのかがわかります。
Alt+R でオン
確認するページでAlt + Rを押し、BlueCanvasBLUE_Responsiveをオンにします。複数のプレビュー画面が展開されます。
モバイル・タブレット・PC同時確認
モバイル、タブレット、PCを1画面で同時に確認します。モバイルとタブレットは順番に大きく見え、レイアウトの違いを比較します。
一緒にスクロール
一度スクロールすると、すべての画面が一緒に移動します。同じセクションをデバイスごとに並べて比較します。
サイズ入力とマイコンフィギュレーションの保存
希望のサイズを直接入力し、よく使う機器構成は保存しておきます。
PNG保存とインストールガイド
機器別画面も、ページ全体もPNGで保存します。無料のChrome拡張機能BLUE_Responsiveは、Chromeウェブストアで検索してインストールします。
よくある質問
BLUE_Responsiveは無料ですか？
はい。紹介ページに広告、決済、購読、会員登録がすべてなく、すべての機能をインストールした後、制限なく使えると案内されています。
ブラウザのデベロッパーツールデバイスモードと何が違いますか？
開発者ツールのデバイスモードは、一度に1つのデバイスのみを表示します。 BLUE_Responsiveは、複数のデバイスを1画面に同時に表示し、スクロールを同期させることで、同じセクションがデバイスごとにどのように見えるかを一目で比較できます。
サーバーがモバイルページを離れるサイトも確認できますか？
はい。モバイルフレームは、リクエストのUser-Agentを対応するデバイス値に置き換えます。そのため、サーバーがUser-Agentでモバイル用のHTMLを分割しているサイトもモバイルレスポンスを確認できます。
知っておく制限がありますか？
タッチするかどうかを確認する入力ベースのメディアクエリは、デスクトップ入力として評価されます。フレーム内で別のページに移動するとモバイル表示が抜けてしまい、単一ページを確認する目的で作られたツールです。
確認するページをモバイル・タブレット・PCで一度に展開してみてください
BlueCanvasBLUE_Responsiveは無料のChrome拡張機能であり、会員登録は不要です。 Chromeウェブストアからインストールしたら、確認するページでAlt + Rを押して起動します。
BLUE_Responsiveを見る →
