Webページをスマホやタブレットで表示したとき画面をPCから簡単に確認する方法

自分のwebサイトがスマホやタブレットなどのモバイル画面でどう見えるかをPCから簡単に確認できる方法について覚書。

レスポンシブ対応サイトなどを作成している際にPCで簡単にスマホやタブレットなどのモバイル端末でwebサイトを見た場合の画面イメージを簡単に確認することができるwebサイトを紹介します。

モバイル表示を確認できる便利なWebサイトDemonstrating Responsive Design

Demonstrating Responsive Designは、テキストボックスに表示させたいWebサイトのURLを入力して[View]ボタンをクリックするだけで選択した端末のWebサイトの画面を表示してくれる便利なサイトです。

表示できる画面は、スマホ、タブレットの縦横、PC(横長ディスプレイ)から選択できます。

まずDemonstrating Responsive Designをブラウザで開きます。

後は画面右上にあるテキストボックスにWebサイトのURLを入力して[View]ボタンをクリックするだけ。

レスポンシブ対応のWebサイトをスマホ表示した際の画面イメージを見る方法はChromeのアドイン使ったり他にも色々方法はありますが、これが一番簡単だと思います。

WordPressを使っているならならResponsive Post Previewプラグインを使えば、スマホやタブレット表示イメージを記事のプレビューで確認できます。

Responsive Post Previewの詳細については以下の記事を参照して下さい。