<p class="thumb"><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/05/responsinator.png" alt="Responsive Design check" title="responsinator" width="510" height="354" class="none" /></p>

<p>スマートフォンの普及によって、モバイルデバイスのフルブラウザ対応が当たり前になりつつあり、タブレット端末の普及によって、よりリッチなウェブ閲覧が可能になってきていますよね。</p>
<p>これらの端末が普及すれば、WEBサイトはどのモバイル端末でも見やすいように対応していかなければなりません。しかし、それぞれ個別に対応するのは至難の業。そこで注目されているのがレスポンシブWebデザイン。レスポンシブWEBデザインの特徴は、これまで一般的だったアクセスした端末によってデザインを変えるものではなく、アクセスした端末の画面のサイズによってデザインを変化させるところ。</p>
<p>でもサイズを変えた時にそれぞれ画面をチェックすることには変わりないですよね。もう昔のフューチャーフォンのように苦しみたくないものです。</p>
<p>そこで今回は、一発で主要な各種モバイル端末での見栄えをチェックできるサービスをご紹介します。</p><!--more-->
<h3 class='header-label'>レスポンシブWEBデザインの端末チェックを一発でおこなえる「Responsinator」</h3>
<p>「<a href="http://responsinator.com/" target="_blank">The Responsinator</a>」は、<strong>レスポンシブWEBデザインで作成したサイトの主要な端末での見栄えを一括でチェックできる</strong>サービス。</p>
<p>URLを入れるだけで、iPhone（縦横）、iPad（縦横）、Kindle、Android端末などでの表示を確認することができます。</p>

<h4 class='tips'>一括で各種サイズでの表示を確認</h4>
<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/05/responsinator1.png" alt="check" title="responsinator1" width="500" height="372" class="aligncenter size-full wp-image-20326" /><br />↑主要なサイズでの表示状況を、1ページで確認することができます。</p>

<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/05/responsinator2.png" alt="iPad landscape" title="responsinator2" width="500" height="372" class="aligncenter size-full wp-image-20325" /><br />↑iPadのlandscape（横位置）もこのように表示。</p>

<p><img src="http://d3qt5c962pj1kq.cloudfront.net/images/2012/05/responsinator3.png" alt="Sub page" title="responsinator3" width="500" height="372" class="aligncenter size-full wp-image-20324" /><br />↑画面内でサブページへ遷移することも可能です。</p>

<p>試してみたい方は<a href="http://responsinator.com/" target="_blank">The Responsinator</a>へどうぞ。</p>

<p>ちなみに今回キャプチャに利用したレスポンシブ デザインのサイトは、Wordpress用のテーマ<a href="http://themeid.com/responsive-theme/" target="_blank">Responsive Theme</a>です。何回か利用させてもらいましたが、なかなか気に入っています。でもレスポンシブ デザインの場合は、モバイル端末でもPC版と同じものを表示させることになるので、FacebookのウィジェットなどがPC版サイズのまま表示されてしまいます。これが今のところ欠点になりますね。</p>