PCでスマホ表示に切り替える方法 - Chrome Edge Firefox

この記事ではPC（パソコン）のブラウザーを使ってスマホページを開く方法を詳しく解説していきます。

Webサイトを運営している人は是非覚えておいてほしい機能です。

Chromeを使ってサイトをスマホ表示に切り替える方法

利用者が最も多いとされているGoogle Chromeを使ってPCで見ているサイトをスマホ表示に切り替える方法から詳しく解説していきます。

STEP

キーボードのF12を押してデベロッパーツールを開く

Google Chromeをアクティブウィンドウにした状態で、キーボードのF12を押してください。

アクティブウィンドウとはPC画面の一番手前に表示されていて、操作可能なウィンドウを指します。
反対に、一番前以外に表示されていて、操作できないウィンドウを非アクティブウィンドウと呼びます。

キーボードのF12を押すと、Google Chromeの右側に以下の画像のようなデベロッパーツールが開きます。

キーボードショートカット: F12を押すか、Ctrl + Shift + I（Macの場合はCommand + Option + I）を押します。

以下の画像で赤枠で囲った部分がデベロッパーツールです。

デベロッパーツール とはWebサイトのコンテンツやリソースを簡単に分析することができる機能です。

STEP

デベロッパーツールのスマホアイコンをクリックしてスマホ表示に切り替える

デベロッパーツールが開いたら、デベロッパーツールの左上にあるスマホとタブレットの図が描かれたアイコンをクリックしてください。

クリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。

その上の青枠内には現在の解像度が表示されており、以下の画像では460✕1213での見え方になっています。

ここに表示されている数字はpoint（CSSピクセル）です。
1ptは1インチの72分の1のサイズで、pixelとは全く異なる数字なので注意してください。

もう一度スマホとタブレットの図が描かれたアイコンをクリックとPC表示に戻ります。

デバイスを選択して表示する大きさを変更する

デベロッパーツールには、デバイス（機種）に応じた大きさ（point）が予め用意されており、「iPhone12Proではどのように表示されるか？」なども確認できます。

2024年6月26日時点でiPhone 14 Pro MaxやGalaxy S20 Ultraなどのデバイスにも対応しています。

デベロッパーツールでスマホ表示に切り替えた後、左上にある[Dimensions: Responsive]をクリックしてください。

[Dimensions: Responsive]をクリックすると下に向かってプルダウンメニューが展開されます。

展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを（機種）を選択してください。
選択したデバイス（機種）の画面サイズに調整されます。

このプルダウンメニューの中に見たいデバイス（機種）がない場合、プルダウンメニューの一番下にある[Edit]をクリックしてください。

[Edit]をクリックすると、画面の左側に「Emulated Devices」が表示されます。

その中には先程まで表示されていないデバイス（機種）も多数表示されています。

「Emulated Devices」内に表示されているデバイス名（機種名）にチェックを入れると、左側のDimensionsにその機種が追加されます。

以下の画像ではiPhone Xにチェックを入れて追加しました。

これでiPhone Xの画面表示を確認することができます。

Emulated Devicesにも選択したい機種がない場合

Emulated Devicesにも選択したい機種がない場合は、Add custom deviceをクリックして登録することができます。

赤枠内に必要項目を入力してAddをクリックすると追加されます。

iPhoneの画面サイズ（CSSピクセル）については以下のサイトを御覧ください。

Qiita

iPhone画面サイズ、ピクセル数早見表 - Qiita ※2023/7/31時点ではiOS16.6までアップデート可能We are recruiting !株式会社GENZではソフトウェアのテストサービス業務を行っています。キャリア採用も行ってお…

Chromeのデベロッパーツールを日本語化する方法

Chromeのデベロッパーツールは初期設定では英語になっていますが、以下の手順で設定を変更することで簡単に日本語化することが可能です。

1. デベロッパーツール右上にある歯車のアイコンをクリック
2. Languageで[Japanese - 日本語]を選択
3. 一番下までスクロールして[Restore defaults and reload]をクリック
4. [Always match Chrome's language]をクリック

ここからは、実際の画面ももちいながら、Chromeのデベロッパーツールを日本語化する方法をわかりやすく解説していきます。

STEP

デベロッパーツール右上にある歯車のアイコンをクリック

まずはデベロッパーツールの右上にある歯車のアイコンをクリックしてください。

STEP

Languageで[Japanese - 日本語]を選択

歯車のアイコンをクリックすると、Settingsと大きく書かれたデベロッパーツールの設定画面がChromeの右側に表示されます。

その中にあるLanguageで[Japanese - 日本語]を選択してください。

STEP

一番下までスクロールして[Restore defaults and reload]をクリック

[Japanese - 日本語]を選択したら、そのまま一番下までスクロールして[Restore defaults and reload]をクリックしてください。

STEP

[Always match Chrome's language]をクリック

[Restore defaults and reload]をクリックすると画面が更新され、右側に[Always match Chrome's language]、[Switch DevTools to Japanese]、[Don't show again]の3個の選択肢が表示されます。

Chromeを日本語で使っている場合は[Always match Chrome's language]をクリックしてください。

Chromeを日本語以外の言語で使用している場合は[Switch DevTools to Japanese]をクリックするとデベロッパーツールが日本語化されます。

STEP

デベロッパーツールが日本語化されたことを確認する

[Always match Chrome's language]をクリックすると、画面が更新されて以下の画像のようにデベロッパーツールが日本語化されます。

Microsoft Edgeを使ってサイトをスマホ表示に切り替える方法

次はMicrosoft Edgeを使ってPCで見ているサイトをスマホ表示に切り替える方法を詳しく解説していきます。

STEP

キーボードのF12を押してDevToolsを開く

Microsoft Edgeをアクティブウィンドウにした状態で、キーボードのF12を押してください。

アクティブウィンドウとはPC画面の一番手前に表示されていて、操作可能なウィンドウを指します。
反対に、一番前以外に表示されていて、操作できないウィンドウを非アクティブウィンドウと呼びます。

キーボードのF12を押すと、Microsoft Edgeの右側に「Microsoft Edge開発者ツールを開きますか？」と書かれた画面が表示されます。

下の方にある[DevToolsを開く]をクリックしてください。

今度このメッセージを表示させないためには「決定を記憶する」にチェックを入れてから[DevToolsを開く]をクリックしてください。

STEP

DevToolsのスマホアイコンをクリックしてスマホ表示に切り替える

[DevToolsを開く]をクリックすると、Microsoft Edgeの右側に「Microsoft Edge DevToolsへようこそ」と書かれた画面が表示されます。

その上にあるスマホとタブレットのアイコンをクリックしてください。

クリックすると左側の画面がイカの画像の赤枠のようにスマホ表示に切り替わります。

その上の青枠内には現在の解像度が表示されており、以下の画像では599✕458での見え方になっています。

ここに表示されている数字はpoint（CSSピクセル）です。
1ptは1インチの72分の1のサイズで、pixelとは全く異なる数字なので注意してください。

デバイスを選択して表示する大きさを変更する

Microsoft EdgeのDevToolsには、デバイス（機種）に応じた大きさ（point）が予め用意されており、「iPhone12Proではどのように表示されるか？」なども確認できます。

2024年6月26日時点でiPhone 14 Pro MaxやGalaxy S20 Ultraなどのデバイスにも対応しています。

デベロッパーツールでスマホ表示に切り替えた後、左上にある[ディメンション: レシポンシブ]をクリックしてください。

[ディメンション: レシポンシブ]をクリックすると下に向かってプルダウンメニューが展開されます。

展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを（機種）を選択してください。選択したデバイス（機種）の画面サイズに調整されます。

このプルダウンメニューの中に見たいデバイス（機種）がない場合、プルダウンメニューの一番下にある[編集]をクリックしてください。

[編集]をクリックするとMicrosoft Edgeの右側に以下の画像で赤枠で囲った「エミュレート済みデバイス」の一覧が表示されます。
その中には先程まで表示されていないデバイス（機種）も多数表示されています。

「エミュレート済みデバイス」内に表示されているデバイス名（機種名）にチェックを入れると、左側の[ディメンション: レシポンシブ]にその機種が追加されます。

以下の画像ではiPhone Xにチェックを入れて追加しました。

これでiPhone Xの画面サイズでの表示を確認することができます。

エミュレート済みデバイスにも選択したい機種がない場合

エミュレート済みデバイスにも選択したい機種がない場合は、[カスタムデバイスの追加]をクリックして登録することができます。

赤枠内に必要項目を入力して追加をクリックすると追加されます。

iPhoneの画面サイズ（CSSピクセル）については以下のサイトを御覧ください。

Qiita

iPhone画面サイズ、ピクセル数早見表 - Qiita ※2023/7/31時点ではiOS16.6までアップデート可能We are recruiting !株式会社GENZではソフトウェアのテストサービス業務を行っています。キャリア採用も行ってお…

Firefoxを使ってサイトをスマホ表示に切り替える方法

次はFirefoxを使ってサイトをスマホ表示に切り替える方法を詳しく解説していきます。

STEP

キーボードのF12を押して開発ツール画面を開く

Firefoxをアクティブウィンドウにした状態で、キーボードのF12を押してください。

アクティブウィンドウとはPC画面の一番手前に表示されていて、操作可能なウィンドウを指します。
反対に、一番前以外に表示されていて、操作できないウィンドウを非アクティブウィンドウと呼びます。

STEP

開発ツールのスマホアイコンをクリックしてスマホ表示に切り替える

キーボードのF12キーを押すとFirefoxの画面下半分くらいに開発ツールが表示されます。

開発ツールの右側にあるスマホとタブレットのアイコン（レシポンシブデザインモード）をクリックしてください。

キーボードのCtrl+Shift+Mを押してもレシポンシブデザインモードに切り替わります。

クリックすると左側の画面が赤枠のようにスマホ表示に切り替わります。

その上の青枠内には現在の解像度が表示されており、以下の画像では320✕480での見え方になっています。

ここに表示されている数字はpoint（CSSピクセル）です。
1ptは1インチの72分の1のサイズで、pixelとは全く異なる数字なので注意してください。

開発ツールの画面が使いにくい場合

Firefoxの開発ツール画面は上に画面表示があり、下に開発ツールが表示されています。

スマホ表示にした場合、どうしても縦長になることが多いためこのままの状態では見づらいかもしれません。

その場合は開発ツール右下の[三点リーダ]をクリックして、表示を変更することができます。

デバイスを選択して表示する大きさを変更する

Firefoxの開発ツールには、デバイス（機種）に応じた大きさ（point）が予め用意されており、「iPhone12Proではどのように表示されるか？」なども確認できます。

開発ツールでスマホ表示に切り替えた後、左上にある[レシポンシブ]をクリックしてください。

[レシポンシブ]をクリックすると下に向かってプルダウンメニューが展開されます。

展開されたメニューの中にはAndoroid端末からiPhoneやiPadまで幅広い機種名が表示されるので、表示を確認したいデバイスを（機種）を選択してください。選択したデバイス（機種）の画面サイズに調整されます。

このプルダウンメニューの中に見たいデバイス（機種）がない場合、プルダウンメニューの一番下にある[リストを編集]をクリックしてください。

[リストを編集]をクリックするとFirefoxに登録されているデバイス（機種）の一覧が表示されます。
その中には先程まで表示されていないデバイス（機種）も多数表示されています。

表示されているデバイス名（機種名）にチェックを入れてください。

チェックを入れるとプルダウンメニューにその機種が追加されます。

これでチェックを入れたデバイス（機種）の画面サイズでの表示を確認することができます。

よくある質問

デバイスモードに切り替えても画面が正常に表示されません。

デバイスモードに切り替えても画面が正常に表示されない場合は、画面をF5でリロードしてみてください。

どのデバイスでウェブページがどのように見えるかを一度に確認する方法はありますか？

複数のブラウザーウィンドウやタブを開いて、それぞれ異なるデバイスモードで表示することで、一度に複数のデバイスでの表示を確認できます。

デバイスモードでスマホの縦表示と横表示を切り替える方法はありますか？

デバイスモードで画面上部の回転アイコンをクリックすると、縦表示と横表示を切り替えることができます。

デバイスモードでキャッシュをクリアする方法は？

デベロッパーツールの上部にある[>>]をクリックして「Network」（ネットワーク）タブを選択し、「Disable cache」（キャッシュを無効化）にチェックを入れることでページリロード時にキャッシュを無効化できます。

デバイスモードでウェブページの表示倍率を変更する方法はありますか？

デバイスモードの画面上部にあるズームコントロール（例: 100%）を使用して、表示倍率を変更することができます。

デバイスモードでウェブサイトのスピードテストを行うことはできますか？

デベロッパーツールの上部にある[>>]をクリックして「Network」（ネットワーク）タブを選択し、Wifiのアイコン（その他のネットワーク状態）をクリックしてください。
ネットワーク状態の中にある[ネットワーク スロットリング]で高速3Gや低速3Gなどのネットワーク状態をプリセットすることが可能です。

誤ってF12を押して毎回デベロッパーツールが開くのが邪魔です。無効にする方法はありますか？

ブラウザーからデベロッパーツールを無効化する方法はありません。
NumLockキーやInsertキーを無効にする方法 で紹介しているような方法でF12キー自体を無効化することをオススメします。

その他Google ChromeやMicrosoft Edge、Firefoxに関する記事

その他Google ChromeやMicrosoft Edge、Firefoxに関する記事はこちらです。ぜひご覧ください。