レスポンシブのテーマを作ったは良いけど、確認って結構大変ですよね。そこでレスポンシブのチェックに便利で、無料、そしてブラウザ上で動くもの(ブックマークレットで使えるものもあります)を5つピックアップしました。全て海外のもので英語ですが、使い方はさほど難しく無いので大丈夫だと思います。

Am I Responsive?

デバイスごとにキャプチャして、モックにあてはめて……。という作業が省ける(かと思います)ツールです。アドレスを入れるだけで、デバイスごとに表示してくれるツール。デザインを作ったらこちらでテストして、デザイン確認したりスクリーンショットして、デザインPRに使ったりできるので便利ですね。使い方は、ヘッダー部分の少し下にあるバーにURLを入れて「GO」ボタンを押すだけです。

Am_I_Responsive_-_2014-12-08_01.38.08

http://ami.responsivedesign.is/


 

Responsive Web Design Test Tool

詳細な表示が知りたいなら、Responsive Web Design Test Toolが良いかもしれません、デバイスの機種が数多くセッティングされ、機種ごとにチェックができます。トップバーにチェックしたいサイトのアドレスを入れて表示させたら、トップバーの右側にあるデバイスアイコンを押すと、どの機種でチェックするか出てきます。丁度、下(↓)の画像はスマフォアイコンを押した所です。たまにiPhoneでは表示できているけど、別の機種でダメだったなんて事もあるので、きっちり確認したい方には良いですね。

スクリーンショット(2014-12-08 11.34.31)

http://designmodo.com/responsive-test/


 

Respondr

スマフォ、タブレット、PCしか無いものの、ざっくりと雰囲気を把握するためには良いかもしれません。また実際にデバイスでの見栄えと、表示や動作が確認できるので、他のツールでは確認しきれない部分もチェックできるかもしれません。画面上部の「http://」の後にチェックしたいURLを入れて「GO」を押せば表示されます。

Respondr_Responsive_Design_Test_Suite_-_2014-12-08_11.44.49

http://respondr.webhoard.net


 

Viewport resizer

いくつかでデバイス幅が用意されているので、チェックしやすそうです。上のRespondrではチェックし足りないという方には良いかと思います。使い方はこちらだけ特殊で、Viewport resizerのページに行ったら、「Click or BookMark」と出てきます。アニメーションで出てくるので分かると思いますが、そのボタンをブラウザのツールバーにドラッグ&ドロップするとブックマークレットとして登録されるので、チェックしたいサイトにアクセスしている時にそのボタンを押すと、リサイズして表示されます。例えばこのブログ「https://www.maya-photo.net/」にアクセスしている時にツールバーに追加された

スクリーンショット(2014-12-19 12.46.30)

↑こんなボタンを押すと、リサイズしてくれます。

↔_MAYA-PHOTO.net_a_moment_in_my_life_-_WordPressや写真のこと、気になるWebサービスなど_-_-_2014-12-08_14.09.42

http://lab.maltewassermann.com/viewport-resizer/


 

Responsinator

なんだかテーマチェック用ツールと言うと、こちら人気のようなのでご紹介しておきます。デバイスの横向きチェックができるので、そちらもチェックしたい時に便利です。

Responsinator_-_maya-photo.net_-_2014-12-08_13.19.11

http://www.responsinator.com/


 

いかがでしたでしょうか? それぞれ特色があるので、使い分けたり組み合わせたりして使ってみて下さい。また良いのがあったらご紹介したいと思います。