【ツール】レスポンシブサイトの確認に便利なViewportエミュレーター『Dimensions』

viewport-emulation-with-chrome

レスポンシブサイトを制作すると、PCやスマートフォン、タブレットでそれぞれ表示が異なるため、表示もそれぞれの端末に合わせたサイズでの確認が必要になります。

そこで便利なツールとして、Google Chromeのアプリに端末サイズごとのシミュレーションができる『Dimensions』があります。

『Dimensions』は、ブラウザ上でシミュレーションができ、端末のviewportを自由に設定することが可能です。一般的な端末の縦横サイズも登録されているので便利です。

スマートフォンやタブレットの横向き、縦向きの切り替えの表示も確認することができます。

Google for 『Dimensions』基本画面

『Dimensions』の基本画面。画面左上のURLを入力すると指定されたサイズ内にページが表示されます。定規もついているので調整の目安になります。

viewport-emulation-with-chrome-01

Google for 『Dimensions』端末選択

端末選択のプルダウンを選択すると代表的な端末を選択することができます。

viewport-emulation-with-chrome-02

Google for 『Dimensions』縦横切り替え

右上の『Rotate』ボタンをクリックするとスマートフォンやタブレット特有の縦向き横向きでの表示切替もシミュレーションすることができます。

viewport-emulation-with-chrome-03

関連記事

美容室ヒュッゲ様WEBサイト制作

静岡県富士市にある『美容室ヒュッゲ』様のWEBサイトを制作いたしました。お店のナチュラルな雰囲気と、手書きのかわいらしいロゴに合わせて、水彩調のイラストやレースなどを用いてかわいらしいデザインをしました。ヘアギャラリーやスタッフブログなどCMSによる更新コンテンツも充実したホ...続きを読む

2019.06.14WEBサイト制作美容室

【JavaScript】カルーセルパネルを手軽に実装できるライブラリ『Owl Carousel』

カルーセル(carousel)とは、回転木馬(メリーゴーランド)や空港の回転コンベアーなどの意味を持つ言葉です。 WEBデザインにおいて、カルーセルは複数の画像やコンテンツなどが配置されくるくる回るように動く仕組みを指します。 今回は、このカルーセルを手軽に実装で...続きを読む

2015.02.10HTMLコーディング

藤枝おんぱく『着物でまちあるき』(4/25)

藤枝おんぱく『着物でまちあるき』(4/25)満開の藤が咲く蓮華寺池公園まで、お気に入りの着物で「まちあるき」をするプロジェクトです。八百年の歴史ある「熊谷山 蓮生寺」での着付け体験に加え、「匂い袋づくり」「着物とマナーの話」と盛り沢山の様子のフォトレポートをお届けします。 ...続きを読む

2015.05.01フォトギャラリー

HTML5 + CSS3 レスポンシブサイト テンプレート『Minimaxing』

スマートフォンが普及して、WEBサイトをスマートフォンで閲覧することも多くなっています。従来のWEBサイトをスマートフォンに対応したいと検討される方もいらっしゃると思います。 今回、ご紹介するのはパソコン、タブレット、スマートフォンに対応したレスポンシブ型のWEBサイト...続きを読む

2015.02.06HTMLコーディング

Micro hair saron様WEBサイトのデザイン提案

Micro hair saron様WEBサイトのデザイン提案。店内のインテリアやお店の雰囲気、「シンプル」でありながら心地よさを感じられるようなデザインを心掛けました。お店のコンセプトである「髪だけでなく 時間と空間をデザインして 五感で満足していただくこと。」木の温もりと、...続きを読む

2019.04.24WEBデザイン美容室