超簡単！Viewport resizerを使ってレスポンシブデザインの動作をチェックする

こんにちは。
作曲をした事がないのに、
なぜか作曲したい衝動にかられている
WEBディレクター／デザイナーのアキです。

名字だとちょっとお固いイメージだったので、
親しみを持ってもらえるように？？
今日から名字を改めニックネームにかえることにしました。
ハイ。アンジェラさんではありません^^;

というわけで、これからはアキでよろしくお願いします！

Viewport resizerの紹介

スマートフォンやタブレットでのサイトの見え方を
確認したい時ってどうやっているでしょうか。

僕の場合、結構アナログで・・・
スマートフォンやタブレットで見たり、
または、ブラウザの横幅を手動で動かしていました^^;
この方法だと確認に時間がかかってしまいますよね。

このViewport resizerを使うと、
手軽に各デバイスの表示に切り替えることができて
サイト表示の確認をする際にとても便利です。
（もちろん実機でのチェックもします）

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

Viewport resizer使い方

CLICK OR BOOKMARKと書かれたボタンを
ブックマークツールバーにドラッグ＆ドロップします。

ブックマークツールバーに「Resizer」という名前が表示されます。

確認したいサイトを表示してから、
お気に入りに入れた「Resizer」を押すと
ページ上部にメニューが表示されます。

各デバイスのアイコンをクリックすると
それぞれのサイズに合わせて表示してくれます。

iPhone5に合わせた時、このようなかんじでブラウザ上に表示されます。

レスポンシブに対応していない場合は、サイト全体が縮小して表示されます。
この写真はウチのサイトです^^;

あ、それから、デバイスの表示は保ったままで
ページ内の移動ができるというのもイイ感じです。

まとめ

レスポンシブデザインの動作確認の際に、
いちいちブラウザの横幅をかえなくても
スマートフォンやタブレットなど
各デバイスでの表示をみることができるので
とても便利です^^

はじめて触った時は、おぉ！っと感動しました。

こういう便利なツールに出会うと嬉しくなりますね！

というわけで、
明日も頑張りま〜す^^/