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

著者:Akiyoshi Takashima

公開日:

カテゴリー:

WEB制作

viewport-resizer-img0

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

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

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

Viewport resizerの紹介

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

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

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

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

Viewport resizer使い方

viewport-resizer-img1

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

viewport-resizer-img2

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

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

viewport-resizer-img3

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

viewport-resizer-img4

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

viewport-resizer-img5

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

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

まとめ

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

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

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

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

 

Twitter でウェブ屋のアキさんをフォローしよう!

The following two tabs change content below.
Akiyoshi Takashima
ウェブサイトからの集客・反応率アップにつながる情報をお届けします。ウェブサイト制作やリニューアル、運営でのご相談はお問い合わせください。初心者の方でもわかりやすくご説明いたします。
Akiyoshi Takashima

最新記事 by Akiyoshi Takashima (全て見る)