Responsive Design Testingは各デバイスのウィンドウサイズごとの表示が確認できるソフトウェアです。

レスポンシブなWebデザインテクニックはオンライン上に多数ありますが、それをどう活かし、どう実現するかは個々のデザインにかかってきます。そしてそれがちゃんと適用されているかどうかは実際に確かめてみるほかありません。その際に使えるのがResponsive Design Testingです。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-18 12.28.15_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-18 12.28.15.png)
トップページです。各サイズごとに並んで表示されます。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-18 12.28.31_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-18 12.28.31.png)
MOONGIFTで試しました。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-18 12.28.36_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-18 12.28.36.png)
768と1024。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-18 12.28.43_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-18 12.28.43.png)
縦サイズも指定した場合。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-18 12.28.52_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-18 12.28.52.png)
表示サイズが違うのが分かるでしょうか。

Responsive Design Testingを使えばよくあるデバイスの幅に合わせたコンテンツ確認が容易にできます。最小は240、最大は1024まで確認できます。主にスマートフォンやタブレット向けの確認になるでしょう。高さは固定の他、デバイスに合わせた高さに設定することもできます。

Responsive Design TestingはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

MOONGIFTはこう見る

レスポンシブWebデザインを企業として取り組むべきかどうか、それはまだ慎重に判断すべきだと思っています。もっと様々なツール、Dreamweaverなどのオーサリングツールが対応してからでも遅くないかも知れません。デザインの自由度が下がる分、顧客ニーズに応えきれないケースも考えられます。

しかしフリーのデザイナーや個人を軸に考えるならば新しいトレンドとしてのレスポンシブWebデザインには積極的にチャレンジしていくべきだと考えています。個人のWebサイトやブログなどをレスポンシブにデザインすることはポートフォリオの一つとしても有益でしょう。

Responsive Design Testing

mattkersley/Responsive-Design-Testing · GitHub