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

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

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

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

利用者が最も多いとされているGoogle Chromeを使って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の画面表示を確認することができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次は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に関する記事はこちらです。ぜひご覧ください。