【レスポンシブ確認に必須のChrome拡張機能】
Responsive Viewerの使い方
「スマホでレイアウトが崩れていないか、一応チェックしておきたい」
Web制作に関わっていると、こんな地味だけど大事な作業に時間を取られたことがある方も多いのではないでしょうか。iPhone、Android、タブレット……それぞれの端末を用意して一つずつ確認するのは、正直かなり骨が折れますよね。
そんな悩みを一気に解決してくれるのが、Google Chromeの拡張機能「Responsive Viewer」です。
Responsive Viewerって、どんなツール？
ひとことで言うと、複数のデバイスサイズでの表示を、一つの画面にまとめて並べて確認できる拡張機能です。iPhone・Android・タブレット・デスクトップなど、見たいデバイスを選ぶだけで、それぞれの画面サイズでの見え方が瞬時に表示されます。難しい設定は不要で、デバイス名を選ぶだけというシンプルさも魅力です。
表示するデバイスは自由に増やしたり減らしたりできるので、案件ごとに必要なサイズだけを並べて確認する、といった使い方もできます。無料で使える点も、気軽に導入できるポイントです。
インストールはあっという間
導入はとてもシンプルです。
- Google ChromeでChromeウェブストアにアクセスする
- 検索バーに「Responsive Viewer」と入力する
- 検索結果から拡張機能を選択する
- 「Chromeに追加」ボタンをクリックする
これだけで、ブラウザの拡張機能バーにアイコンが表示され、いつでも使える状態になります。
地味に助かる、便利な機能たち
スクロール・クリックの同期
複数のデバイス画面を同時にスクロールしたり、クリックしたりできる機能です。一つひとつ操作する手間がなくなるので、比較確認のスピードがぐっと上がります。
横画面(Landscape)への切り替え
スマホやタブレットを横向きにしたときの見え方も、ボタン一つで確認できます。縦画面だけでは気づけない崩れを見つけられることもあります。
スクリーンショットの一括保存
全デバイス分のキャプチャを、まとめて1クリックで取得できる機能です。ファーストビューだけを撮る「Capture visible page」と、ページ全体を撮る「Capture full page」の2種類から選べます。クライアントへの確認資料をつくる際にも重宝しそうです。
デバイスのカスタム追加
あらかじめ用意されているデバイス以外にも、名前・幅・高さなどを自分で指定して、独自のデバイスを追加登録できます。案件でよく使うサイズを登録しておけば、毎回の設定の手間も省けます。
うまく表示されないときは
まれに、ページが真っ白になったり、正しく表示されなかったりすることがあります。多くの場合、ブラウザのキャッシュやCookie、あるいはサイト側のセキュリティ設定が影響しています。キャッシュのクリアやシークレットモードでの再確認、別ブラウザでの動作チェックといった基本的な対処で、たいていは解決できるはずです。
また、表示するデバイス数を増やしすぎると、PCの性能によっては動作が重くなることもあります。その場合は同時に表示するデバイスを3〜5個程度に絞ると、動作が安定しやすくなります。
まとめ
Responsive Viewerは、実機を揃える手間もコストもかけずに、レスポンシブデザインの確認をぐっと効率化してくれる心強いツールです。デザイナーにとってはレイアウトパターンの引き出しを増やす学びの場にもなりますし、コーダーにとっては日々の確認作業を大幅にラクにしてくれる存在です。まだ試したことがない方は、ぜひ一度導入してみてください。
