Google chromeでスマートフォン表示画面(レスポンシブデザイン)を確認する方法

作成記事のスマホからの見え方も確認したいんだけど、パソコンからもできる？方法を教えて

パソコン（Win/Mac）でも「スマホからアクセスしたときの表示画面」を確認できます。

パソコンからスマホの表示画面(レスポンシブデザイン)を確認する3通りの方法を紹介します。

プラグイン　mobile browser emulator

Google chromeデベロッパーツール

なぜスマホ表示画面をするのか？

ユーザーがスマホからサイト閲覧してときに、「レイアウトは崩れていないか？」「見づらくないか？」「使いやすいか？」という確認は必須です。

なぜなら、Webサイト利用ユーザーの半数以上はスマホユーザーだからです。

以下の画像は私が運営しているWebサイトの一つのデバイス別の比率です。

「家電メーカー」「自動車メーカー」「食品メーカー」「銀行」「ネット証券」「旅行」「ネット通販」「コスメ通販メーカー」を調べると、およそ6割という調査データもあります。

あなたの運営サイトに訪れるユーザーがどの端末の利用比率が大きいか確認してみて下さい。Google無料高機能アクセス解析ツール「googleアナリティクス」を導入すれば確認に確認できます。

Googleアナリティクスの導入方法

Webサイト運営者側は、PCから作業がほとんどの為、スマホからのチェックを忘れがち。Webサイト閲覧者の割合はスマホ > PCなので、必ず確認しましょう。

「mobile browser emulator」は、パソコンから「スマホでの表示」を確認できるグーグルクローム用プラグイン（拡張機能）。

mobile browser emulatorにアクセスし「クロームに追加」をクリックします。
mobile browser emulatorにアクセスし「クロームに追加」をクリック
「拡張機能を追加」をクリックします。
「拡張機能を追加」をクリック
グーグルクロームブラウザの上部メニューに「mobile browser emulator」アイコンが追加されたら導入完了です。
上部メニューに「mobile browser emulator」アイコンが追加される

以下の５サイズに対応しています。

「Google chromeデベロッパーツール」はあらかじめ、Google chromeに備わっている開発者向けの機能。
Google chromeデベロッパーツールでスマホ表示画面を確認する方法を説明します。

デベロッパーツールを起動させます。起動にはショートカットキーを覚えておくと便利です。
（Macショートカットキーを使う場合「⌥＋⌘＋I」→⌘R）

Google Chromeの「メニュー」＞「その他のツール」＞「デベロッパーツール」を選択する。
Google Chromeの「メニュー」＞「その他のツール」＞「デベロッパーツール」を選択
ブラウザのウィンドウ内に「デベロッパーツール」が起動します。
ブラウザのウィンドウ内に「デベロッパーツール」が起動します。
デベロッパーツール上部メニューの「Toggle device toolbar」ボタンをクリックします。
デベロッパーツール上部メニューの「Toggle device toolbar」ボタンをクリック
すると、スマホのエミュレーターが立ち上がります。

スマホのエミュレーターが起動
ブラウザの画面を更新します。（Macショートカットキー:⌘+R）
すると、スマホ画面からの表示状態を確認できます。
ブラウザ画面を「更新」すると、スマホでの表示に切り替わる
上部メニューから端末の切り替えができます。