レスポンシブ対応を確認するなら、「Responsive Viewer」が便利。
毎週金曜日更新のnote。今週は普段使っているChromeの拡張ツールからご紹介します。
複数のデバイスサイズでの見え方を確認する。
Web制作をしていると、必ず必要な工程です。
実機で確認できればいいのですが、いろんなサイズの機種を揃えるなんてことは非現実的ですよね。
そこでブラウザ（Chrome）に拡張機能として利用できる「Responsive Viewer」を簡単にご紹介します。
「Responsive Viewer」とは
レスポンシブデザインのサイトが、異なる画面サイズ上でどのように表示されているのかを確認することができるChrome拡張機能です。
一度に複数の画面を表示、レスポンシブ デザイン テスター 複数の画面を 1 つのビューに表示する Chrome 拡張機能。 この拡張機能は、フロントエンド開発者が応答性の高い Web サイトを開発しながら複数の画面をテストするのに役立ちます
Chromeの拡張機能としてChromeウェブストアにもありますが、サイト上でも利用することができます。ただし、プレビューのみの機能限定となります。
Chromeウェブストアへのリンクはこちら
「Responsive Viewer」のいいところ
複数のデバイス上で確認しなくても、ブラウザ上で一括で確認できる
詳しく説明を受けなくても、すぐに使える
お客様に説明する際に、「こんなふうにみえている」というのをご理解いただきやすい（見せている自分がすこしかっこよくなった感じになれる）
「Responsive Viewer」のこうだったらいいなというところ
各種デバイスのサイズが用意されているが最新機種は自分で追加しなければならない（さほど難しくはないでしょうが）
日本語対応のメニューではない（が、制作する人間にとっては分かる範囲の英語）
スクリーンショット（サイト全体）を撮ったときに、正しく出力されない時がある
（iPhone-6-7-8-Plus-414x736）
実に簡単につかえる有益なツール
詳しく説明不要で使えるツールでありながら、かなり確認業務を楽にするツールです。
もしまだ使ったことが無い方はお試しください。
以上今週のnoteは「Responsive Viewer」のご紹介でした。
書いた人：岡田