レイアウトを学ぶならResponsive Viewer

こんにちは。コーダーのぶんちゃんです。

今週のGoodNewsでは、最近私が発見したGoogle Chromeの拡張機能、「Responsive Viewer」をご紹介します。

Responsive Viewerって何？

Responsive Viewerは、Webサイトやアプリケーションのレスポンシブデザインを一覧で並べて確認することができるツールです。開発者やデザイナーがレスポンシブ対応のレイアウトを確認する際には、非常に便利だと思います。

このように、異なるデバイスや画面サイズを選択するだけで、特定のサイトがどのように表示されるかをすぐに見ることができます！すごいですよね！デバイスの名前で選択できるので、難しい操作は必要ありません。増やすことも減らすこともできるので、ご自身の必要なデバイスのみ表示できます。

Responsive Viewerで何ができる？

なんといっても、実機を使わずに画面のサイズに合わせた見た目をこの機能1つで確認できる点は便利ですよね。デザイナーは特に、PCのレイアウトとSPのレイアウトを考えることが多いと思うので、レイアウトパターンのインプットにも役立ちそうです。

弊社では、デザイナーから特に指定がない場合は、基本的にコーダーがレスポンシブのデザイン調整を対応します。どのくらいの画面幅に対して画像はどのくらいのサイズが良いか、フォントサイズはいくつかなど、バランス感覚を養う必要があるため、私自身にも、今後のサイト観察にとても重宝しそうです。

今回はGoogle Chromeの拡張機能、Responsive Viewerについてご紹介いたしました。
Webデザインの勉強に役立ちますように！

それでは良きWeb制作を！