ITツール Webディレクターの仕事

レスポンシブなサイトをサクッと確認できる便利ブックマークレット「VIEWPORT RESIZER」

レスポンシブウェブデザインで構成されているウェブサイトをサクッと確認できる便利ブックマークレットのご紹介。私のようなウェブディレクターには役立つツールですよ。

本来は実機で確認するべき動作確認ですが、毎回実機を引っ張りだしていては、非常に時間が掛かってしまいます。

かと言って、ブラウザのウインドウサイズを伸び縮みさせていては、どのタブレットやスマホでの見た目を再現できません。サイズが分かりませんからね。

そこで便利なブックマークレット「VIEWPORT RESIZER」。

ボタンひとつで、いろんなデバイスのウインドウサイズを再現できる便利ツール。登録も5秒でできるので、早速試してみましょう!

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER

ブックマークレット「VIEWPORT RESIZER

レスポンシブウェブデザインで構成されているサイトで使うと、各デバイスのウインドウサイズを擬似的に再現してくれるブックマークレット。それが「VIEWPORT RESIZER」。

まずは登録の方法について。これは簡単です。5秒で完了します。

まずは「VIEWPORT RESIZER」のサイトトップページに移動しましょう。以下のリンクからどうぞ。

トップページにある「Click or Bookmark」のボタンを、ブラウザのブックマークに登録します。ドラッグ&ドロップでブックマークバーに登録するのが一番楽でしょう。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 1

これだけで登録は完了です。

それでは次に、実際に使ってみましょう。私のブログはレスポンシブ対応なので、このブックマークレットの効果が見られます。

使うのは簡単。登録したブックマークをページ内でクリックするだけです。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 2

すると、画面上部に何やらメニューバーが表示されます。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 3

左上にあるのが、ウインドウサイズを変更するためのボタン。各デバイスのアイコンが並んでいて、クリックすると真ん中のウインドウサイズが変更されます。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 4

同じアイコンを2回クリックすると、そのデバイスのヨコのウインドウサイズで見ることができます。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 5

アイコンの右にはウインドウのサイズが表示されます。また、これをクリックすれば自分の好きなサイズに変更可能。あと、右にある「Animation」をクリックすると、ウインドウが自動で可変するようになります。

レスポンシブなサイトをサクッと確認できる便利ブックマークレット VIEWPORT RESIZER 6

あとがき

とりあえずブックマークだけしておけば、後は気になるサイトでボタンをポチッと押すだけ。非常にスピーディーにサイト確認ができるのでオススメです。

ただし、やっぱり実機での確認がベストですよ!これはあくまで模擬的に表現しているだけで、実機だと不具合が出るって事は往々にしてあり得ますから。

それでは、今日はこの辺りで。

\ この情報をシェアしよう! /

  • この記事を書いた人

ばんか

Webディレクターとしてサラリーマンをやりつつ、個人でブログや執筆活動をするパラレルキャリアを実施中。 ITツールを日常で活かす方法を広く伝え歩くことをミッションとした「ITツールエバンジェリスト」です。AllAboutやYahooクリエイターズプログラムでも活動中。

-ITツール, Webディレクターの仕事
-, ,