Googleのレスポンシブ確認ツール【Resizer】が便利すぎた

レスポンシブ確認ツール【Resizer】が便利だった HTML5

ウェブサイトの構築や、システム開発のデザインの部分でかかせなくなってきている、レスポンシブ対応。このレスポンシブ対応ですが、作る方も確認する方も工数がかかります。今回は、そのレスポンシブの見た目を確認する手間を軽減してくれるツールを紹介します。

■Google純正ツール Resizer

Googleが提供しているツール【Resizer】です。シンプルで、使いやすいツールだと思いました。

Resizer - Material Design
An interactive viewer to see and test how digital products respond to material design breakpoints across desktop, mobile and tablet.

何より、並べて表示できることが便利です。いちいち、レスポンシブ表示モードとかにして確認しなくても、並列で確認することができます。

レスポンシブを並べて確認できる

JQueryなどのスクリプトも動くので、スクリプト関係の動作確認も同時に行うことができます。

また、並べて表示以外にも、PC/タブレット/スマートフォン、それぞれ単独の状態で表示させることも可能です。

 

■使い方

画面中央上部のURL入力部分に、調査したいURLを入力するだけです。

上のこの部分にURLを入力する

 

よくある開発環境でベーシック認証がかかっているページでも、一度認証を通してしまえば確認できるのもポイントです。

 

並べて見れるというちょっとしたことですが、確認の時間が減りました。ぜひ参考にしてみてください。

Resizer - Material Design
An interactive viewer to see and test how digital products respond to material design breakpoints across desktop, mobile and tablet.

では。