レスポンシブデザインの確認作業を効率よく行いたい方
※本ページはプロモーションが含まれています
Web開発を行う上で避けては通れない仕様の1つにレスポンシブ対応があります。
特に今ではスマホでの閲覧率がPCを上回りましたのでレスポンシブ対応はもはや必須となっていますが、様々な画面解像度をもった端末（PC・タブレット・スマホ）に対応させなければならない点が開発者にとって負担になるケースもあります。
そこで今回はそれら複数の画面解像度での確認作業効率を爆上げするResponsive Viewer（chrome/firefox拡張機能）をご紹介します。
このResponsive Viewerのいいところは導入も使い方も簡単という点ですので早速ご紹介していきます。
導入方法
このResponsive Viewerはchromeとfirefoxの拡張機能ですので、ブラウザにインストールするだけで使えるようになります。下記リンクよりインストールしてください。（今回はchromeを例にしています）
インストールできたらブラウザの右上にある拡張機能のボタンを押してResponsive Viewerが追加されているかを確認してください。
使い方
それでは実際に使ってみましょう。
デザインを確認したいサイトに移動して上記のResponsive Viewerをオンにしてください。すると下記のように画面サイズ事のプレビューが見えるはずです。
画面の左部分には各端末の画面サイズが設定されています。上のブロックが既定の端末で、他に下のブロックにも様々な端末がありますのでお好みに合わせて入れ替えてください。
因みに予め設定されている端末以外にもオリジナルの端末情報（画面サイズ）を設定することができます。その場合には画面右上のプラスマークをクリックしてお好みの端末情報を設定してください。
まとめ
いかがでしょうか？各ブラウザの開発者ツールにも似たような機能はありますが、一度にまとめて表示できるのはこのResponsive Viewerならではの長所はではないでしょうか？
今後も様々な画面サイズを持った端末が投入されてくることと思われますが、このツールを使うことで少しでも開発効率が上がると同時に負担が減ることを祈っております。