スマホでのサイトの画面表示をPCで確認する方法をご紹介！

チビッ子からお年寄りまで、スマホの所有率が79.4％となった現代、自分が運営しているサイトが、携帯やスマホから見るとどのように表示されるかを把握しておくことはとても重要なことですよね!?

私は以前はガラケーを使っていて操作が億劫だったので、携帯やスマホからの自分のサイトのページの見え方を、パソコンでチェックしていたのですが、スマホを持つようになった今も、記事を投稿したついでにパソコンで確認をしているんですよ。

携帯やスマホ画面からのサイトの見栄えを、パソコンで簡単に確認することができる方法をご紹介しますね♪

サイトのスマホ画面表示をパソコンで確認できるエミュレーション機能
サイトのスマホ画面表示を確認するお勧めのブラウザはグーグルクローム
デベロッパーツールを起動させる
スマホ表示に切り替えるアイコンをクリックする
スマホ表示からパソコン表示に戻す方法は？

サイトのスマホ画面表示をパソコンで確認できるエミュレーション機能

これからご紹介する、PCからスマホ表示をチェックする方法は、実際のスマホでの見え方ではなく、あくまでも設定したスマホのブラウザの真似(エミューレート)をして表示するエミュレーション機能です。

エミュレーション機能は、プログラムを書き換えずに、疑似的にスマホブラウザの環境を作り出してくれるので、わざわざスマホで表示のされ方を確認する手間が省けて作業効率が高くなります。

記事投稿後、あるいは投稿途中にエミュレーション機能でパソコン上からスマホ表示をチェックをして、「ん？」と、引っかかる箇所があれば、スマホで最終的な確認を行えば完璧という風に捉えていただければと思います。

サイトのスマホ画面表示を確認するお勧めのブラウザはグーグルクローム

Google Chrome・Firefox・Internet Explorer11・Safari・Opera・Edgeなどのブラウザには、スマホ表示させるためのエミュレーション機能がついています。

数あるブラウザの中でも、Google Chromeを使ったサイトのスマホ画面表示の操作手順はとっても簡単なんですよ！

Google Chromeをお使いでない方は、こちらからダウンロードできますよ。

デベロッパーツールを起動させる

Google Chromeブラウザで、スマホ画面を確認したいサイトを表示させて、デベロッパーツール(開発者ツール)を起動するのですが、起動方法は3つあります。

【１】赤枠で囲った、右上のGoogle Chromeの設定⇒その他のツール⇒デベロッパーツールの順にクリックする。

【２】画面上で右クリックをしてメニューを表示して、赤枠で囲った、一番下の[検証]をクリックする。

【３】キーボードの[F12]キーまたは、[Ctrl]＋[Shift]＋[I]キーを同時に押す。

ワンプッシュでデベロッパーツールが起動するので、キーボードの[F12]キーを押す方法が一番おススメです！

私のツールパネルは上下に分割されて表示されていますが、設定によって、左右に分割されて表示される場合もあります。

また、私のパソコンは、デベロッパーツールを起動させると、サイトを表示している画面がスマホ仕様に細長くなるのですが、そうなっていない場合の手順を記載しますね。

スマホ表示に切り替えるアイコンをクリックする

デベロッパーツールで、四角が重なった、パソコン表示とスマホ表示を切り替えるアイコンをクリックすると、パソコン表示されていたサイトがスマホ表示に切り替わるので、スマホでの見え方が確認できるというわけです♪

画面上部左側の赤枠で囲ったドロップダウンメニューをクリックすると、様々な機種での見え方が選択でき、右側の青枠で囲ったドロップダウンメニューをクリックすると、表示する大きさを選ぶことができるんですよ。端末によって横幅、縦幅のサイズが切り替わるので、色々な端末をポチポチと選択して、見え方をチェックしてみて下さいね！

スマホ表示からパソコン表示に戻す方法は？

スマホ表示の確認が終わったのでパソコンの表示に戻したい場合は、赤枠で囲った四角が重なったアイコンをクリックするか、青枠で囲った × マークをクリックして、グーグルのデベロッパーツール自体を閉じればOKです。

とっても簡単なので、是非、お試し下さいね♪

【関連記事】
[su_list icon=”icon: angle-double-right” icon_color=”#4b43ed”]