こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回はPCから、かんたんにスマートフォンの表示を確認する方法(2020年版)をご紹介します!

こんなお悩みありませんか?

・PCからかんたんにスマホの表示を確認したい
・iPhoneやAndroid端末など、自分が持ってないスマホの表示も見たい

【Google Chrome/Firefox】で
PCからスマホの表示をかんたんに確認する方法!(2020年版)

どのブラウザでも「ユーザーエージェントを切り替える」『デベロッパー(開発者)ツール』や
『拡張機能』を使って表示をエミューレートしてスマホ表示を確認することができます。

ここでは、『デベロッパーツール』を使って、かんたんに確認できる
「Google ChromeとFirefox」2つの操作方法をご紹介します。早速みていきましょう!

Google Chromeの場合
Firefoxの場合

Google Chromeの場合

【1】「F12」をクリックしてデベロッパーツールを表示します。
【2】表示切替アイコンをクリックします。

chrome

【3】アイコンが青い状態の時は、スマートフォン表示モードです。
【4】更新をクリックすると、スマートフォン表示が確認できます。

Google Chrome

→かんたんですね。

【おまけ】

スマホ表示のデバイスや倍率などお好みで調整してみましょう。
他、メニューを開いて、デベロッパーツールの表示位置(別ウインドウ・左・下・右)を変更することができます。

chrome

Firefoxの場合

【1】「F12」をクリックしてデベロッパーツールを表示します。
【2】表示切替アイコンをクリックします。

FF

【3】アイコンが青い状態の時は、スマートフォン表示モードです。
【4】更新をクリックすると、スマートフォン表示が確認できます。

FF

→かんたんですね。

【おまけ】

スマホ表示のデバイスなどはお好みで調整してみましょう。
Firefoxでも、メニューを開いて、デベロッパーツールの表示位置(下・右・左・別ウィンドウ)を変更することができます。

FF

・ブラウザにプラグインなどを入れている場合正しく表示されない場合もあります。
・2020年1月時点のご紹介記事となります。環境に合わせてお役立てください。

いかがでしたでしょうか。
頻繁にスマホ表示の確認が必要なときなど、PCで操作をしながらスピーディに作業ができるのでおすすめです。

それではまた!