前回でサイトのトップ画面が完成した。今回はレスポンシブWebデザインでサイトを制作するときには欠かせないシュミレーターツールを紹介する。このツールを使えばスマートフォンやタブレットなど様々なデバイスでのサイズを確認することができる。幾多もあるレスポンシブのシュミレーターだが、実は決定版というくらい秀逸なツールがあるのだ。それがこいつだ！
　

【Viewport resizer】

　
「Viewport resizer」はブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも、表示しているWebサイトをあらゆるサイズに即座に変更して確認できるという優れもの。使い方は簡単。サイトにアクセスして、上画像のように「CLICK OR BOOKMARK」をブラウザのブックマークバーにドラック＆ドロップで追加するだけ。確認したいサイトを表示しているときに、ブックマークバーの「↔ Resizer」をクリックすればツールバーが起動する。
　

　
左上部のアイコンでiPhoneはじめ様々なデバイスサイズに対応。またカスタムサイズも指定できる。これぞ最強のレスポンシブWebデザイン用のシュミレーターと言っても過言ではない。是非、試してほしい。
　

▼　▼　▼

　
以下、その他のレスポンシブWebデザインの各デバイスの確認ツール。下記リンクのツールはブックマークレットではなく、確認したいHPのURLをWebサイト上に直接打ち込みシュミレーションするもの。割と優れているものもあるが、「Viewport resizer」のクオリティーにはもう一歩といった印象。

Tweet