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



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

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

developer toolsを使って"iPhone6"のレイアウトでGithubのページを表示

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

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

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

 自身の環境でResponseive Web Design Testerを使ってiPhone6のサイズでGitHubのページを開いてみました


Responsive Web Design Testerのインストール 〜 使い方

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

インストールされると、アイコンが追加されます

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

左が右クリックメニューから、右がアイコン上から使う場合

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



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

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

Xperia Z5の端末ポートレイト(縦向き)を追加してみました


Summary

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

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

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

本家ページ : Web Design Tester

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ