HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

URL入力不要!超絶便利なレスポンシブデザインのデバイス別表示確認ツール

2014-02-11_1640
レスポンシブデザインのサイトの見た目がデバイスの幅のどう変わるかを確認をするツールはいっぱいあります。でも大抵URL入力が必要です。面倒くさい。そんな私が使っている超絶便利な表示確認ツールを紹介します。

URL入力不要!超絶便利な表示確認ツール「Viewport Resizer」

「Viewport Resizer」は以下のサイトで配布されているブックマークレットです。

[img-link url=”http://lab.maltewassermann.com/viewport-resizer/” title=”Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions – Best developer device testing toolbar”]

「Viewport Resizer」を使うには、まず、Viewport Resizerに行って、「CLICK OR BOOKMARK」 を、ブックマークバーにドラッグ&ドロップします。

2014-02-11_1640

すると「Resizer」 なるブックマークレットが出来ます。
2014-02-11_1644

表示を確認したいウェブページに行って「Resizer」をクリック。
2014-02-11_1645

すると表示確認用の黒いバーが出現。デバイスを表すアイコンがズラッと並びます。左から2番目のアイコンをマウスホバーするとiphoneと表示されるのでクリックしてみましょう。
2014-02-11_1646

そうするとiphone(縦長)で見た場合の表示が確認できます。次に、左から2番目のアイコンをもう一度クリックすると、
2014-02-11_1647

画面が90度回転。横長表示になります。また、customize欄に数字を打ち込むと画面の大きさを自在にカスタマイズできます。
2014-02-11_1647_001

表示確認を終了する際は右上の×をクリックします。黒いバーが消えます。
2014-02-11_1654

レスポンシブデザインのデバイス別表示確認ツールとしては、私はもっぱら「Viewport Resizer」を使っています。

URL入力の必要がないのが素晴らしい。

その他予備としてURL入力が必要な表示確認ツール

なにこれ超便利!レスポンシブデザインのサイトが各デバイスでどう見えるかが一目瞭然!Adsenseの確認にもなるよ! | なまら春友流で紹介されて大反響だった便利ツール。

[img-link url=”http://mattkersley.com/responsive/” title=”Responsive Design Testing”]

続いて、@web_shufuが「Viewport Resizer」以前に愛用していたツール。

Screenfly / Test Your Website at Different Screen Resolutions

その予備。

responsivepx – find that tricky breakpoint

予備の予備。

Am I Responsive?

もっとツールを見たいなら

@web_shufu的にはすでに紹介したものでおなかいっぱいですが、レスポンシブツールを沢山まとめた記事もあるので、もっとツールを見たい方はご参考に。

SS | レスポンシブデザインのチェックツールまとめ


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: