モバイルレイアウトを確認する時に便利なChromeプラグイン

モバイルレイアウトを確認したい時に便利なGoogle Chromeプラグイン「Responsive Web Design Tester」の紹介です。

最近のWeb開発では当たり前のようにレスポンシブデザインに対応し、
Google Chromeの"developer tools"を開いて モバイル端末でのレイアウトチェックをしている人も多いと思われます。

developer toolsはページの要素を調べたい時や javascriptのデバッグ時には必見ツールですが、
モバイルのレイアウト確認のみに使うのは高機能過ぎるように感じる時があります。

そんな時に手軽にモバイルのレイアウトチェックが出来るGoogle Chromeプラグインが
「Responsive Web Design Tester」です。

Responsive Web Design Testerを使うと右クリック OR ボタン１つで各種デバイスの解像度でレイアウトの確認が可能になります。

Responsive Web Design TesterはChromeのプラグインなので、こちらのGoogle Web Storeのページから入手します。

このプラグインの使い方は簡単で、追加されたアイコンから表示させたい端末を選択するか、
右クリックから"Responsive Web Design Tester"のメニューを選択すると、新しいウインドウで閲覧中のページが開かれます。

* 実際に自身の使ってみたデモ動画

デフォルトでは、iPhoneやiPad 〜 Nexus, Galaxy等のデバイスのサイズが予め用意されていますが、
オプションボタンからカスタムグループ、端末の追加も可能。
( デフォルトではAndroid Tablet, Android Phone, iPad, iPhone, Miscのグループが登録されています )

ユーザーエージェントもセット出来るので、サーバー側でユーザーエージェントによって処理を変えている場合でも問題ありません。

以上がResponsive Web Design Testerの紹介でした。

Responsive Web Design Testerは モバイル端末のレイアウト確認に特化しているので、Webデザイナーさんには活躍することが多いプラグインかもしれません。

クロームのDeveloper toolsを開くよりも手軽に使えるので、気になった人はチェックしてみてください！

本家ページ : Web Design Tester