Firefoxでスマホ表示を確認する方法|レスポンシブデザインモードの使い方

Webサイトを制作・確認する際、スマートフォンでどのように表示されるかチェックしたいことがあります。
実際のスマホを用意しなくても、Firefox(ファイアフォックス)の標準機能「レスポンシブデザインモード」を使えば、PC上で簡単にスマホ表示を確認できます。
この記事では、Firefoxでスマホ表示を確認する方法を画像付きで詳しく解説します。

レスポンシブデザインモードとは

レスポンシブデザインモードは、Firefoxに標準搭載されている開発者向け機能です。
PC版Firefoxで、スマートフォンやタブレットの画面サイズ・表示をシミュレートできます。

この機能を使うと以下のことができます。

様々な端末の画面サイズでの表示確認
縦向き・横向きの切り替え
タッチ操作のシミュレーション
通信速度の制限(スロットリング)
ユーザーエージェントの変更

特別な拡張機能をインストールする必要はなく、Firefoxをインストールすればすぐに使えます。

対応バージョン
この記事の情報は、Firefox 147.0(2026年1月時点の最新版)を含む最近のバージョンで動作確認されています。

レスポンシブデザインモードの起動方法

レスポンシブデザインモードを起動する方法は3つあります。

方法1: キーボードショートカット(最速)

Windows・Linux
Ctrl + Shift + M

Mac
Cmd + Option + M

この方法が最も素早く起動できるため、頻繁に使う場合はショートカットを覚えておくと便利です。

方法2: メニューから起動

Firefoxの画面右上にある三本線のメニューボタン(≡)をクリック
「その他のツール」または「ブラウザーツール」を選択
「レスポンシブデザインモード」をクリック

方法3: 開発ツールから起動

F12キーを押して開発ツールを起動
開発ツールのツールバー右側にある「レスポンシブデザインモード」ボタンをクリック

開発ツールを既に開いている場合は、この方法が便利です。

基本的な使い方

レスポンシブデザインモードを起動すると、ブラウザの表示領域が端末の画面サイズに変更されます。
初期設定では320×480ピクセル(初期のiPhoneサイズ)で表示されます。

デバイスの選択

画面上部に「デバイスが選択されていません」または「no device selected」と表示されているドロップダウンメニューがあります。
ここをクリックすると、事前に登録されている端末のリストが表示されます。

主なプリセット端末

iPhone SE
iPhone 12/13 Pro
iPhone 14 Pro Max
iPad
iPad Pro
Samsung Galaxy S20/S21
Samsung Galaxy Tab

端末を選択すると、以下の設定が自動的に適用されます。

画面サイズ(解像度)
デバイスピクセル比(DPR)
ユーザーエージェント

画面サイズの調整

画面サイズは3つの方法で変更できます。

数値を直接入力
画面上部に表示されている幅と高さの数値をクリックして、直接編集できます。
キーボードの上下矢印キーで1ピクセルずつ調整することも可能です。
Shiftキーを押しながら上下矢印キーを使うと、10ピクセル単位で変更できます。

ドラッグ操作
画面表示領域の右下隅をドラッグすると、自由にサイズを変更できます。
Ctrlキー(MacはCmdキー)を押しながらドラッグすると、ゆっくり動いて微調整しやすくなります。

プリセットから選択
デバイスのドロップダウンメニューから、事前に登録された端末サイズを選べます。

画面の向きを変更

画面上部のツールバーにある回転アイコンをクリックすると、縦向き(ポートレート)と横向き(ランドスケープ)を切り替えられます。
この設定は、Firefoxを閉じても次回起動時に保持されます。

主な機能

タッチイベントのシミュレーション

画面上部の手のアイコンをクリックすると、タッチ操作をシミュレートできます。
タッチシミュレーションが有効になると、マウスのクリックやドラッグがタッチイベントに変換されます。

これにより、タップ操作やスワイプ操作が正しく動作するかを確認できます。
アイコンが青色になっている時は有効、黒色の時は無効です。

ネットワークスロットリング

画面上部の「スロットリングなし」ドロップダウンから、通信速度を制限できます。
低速なネットワーク環境でのページの読み込みや動作を確認するのに役立ちます。

設定可能な通信速度

GPRS(下り50Kb/s、上り20Kb/s)
2G(通常、良好)
3G(通常、良好)
4G/LTE
DSL
Wi-Fi
オフライン

スマートフォンユーザーの多くは、必ずしも高速なWi-Fi環境で閲覧しているとは限りません。
低速回線での表示確認は、ユーザー体験の向上に重要です。

スクリーンショット機能

画面上部のカメラアイコンをクリックすると、現在の表示領域のスクリーンショットを撮影できます。
スクリーンショットは、Firefoxのデフォルトダウンロードフォルダに保存されます。

開発ツールの設定で「スクリーンショットをクリップボードにコピー」を有効にしている場合は、クリップボードにもコピーされます。

ユーザーエージェントの変更

設定メニューから「ユーザーエージェントを表示」を有効にすると、ユーザーエージェント文字列を変更できます。

ユーザーエージェントとは、ブラウザがWebサーバーに送信する識別情報のことです。
端末を選択すると、その端末の標準ブラウザのユーザーエージェントが自動的に設定されます。
たとえばiPhoneを選択すると、FirefoxがSafariとして識別されます。

一部のWebサイトは、ユーザーエージェントによって表示内容を変更するため、この機能で動作確認ができます。

設定のカスタマイズ

画面右上の設定アイコン(歯車マーク)をクリックすると、設定メニューが開きます。

表示位置の変更

ビューポートを左揃え
デフォルトではレスポンシブデザインモードの表示領域が中央に配置されていますが、左揃えに変更できます。
開発ツールを右側に表示している場合、この設定が便利です。

ユーザーエージェント表示

ユーザーエージェントを表示
有効にすると、現在のユーザーエージェント文字列が表示され、編集も可能になります。

自動リロード設定

タッチシミュレーション切り替え時にリロード
タッチイベントのシミュレーションを切り替えた時に、ページを自動的にリロードします。
多くのWebサイトはページ読み込み時にタッチ対応を検出するため、この設定が役立ちます。

ユーザーエージェント変更時にリロード
ユーザーエージェントを変更した時に、ページを自動的にリロードします。
サイトによってはユーザーエージェントに応じて表示を変更するため、変更を反映させるにはリロードが必要です。

ただし、頻繁にリロードが発生すると作業効率が下がる場合もあります。
必要に応じてこれらの設定を調整してください。

カスタムデバイスの追加

デバイスリストの最後にある「リストを編集」を選択すると、デバイス設定画面が開きます。

カスタムデバイスを追加ボタンをクリックすると、独自の端末設定を追加できます。
設定できる項目は以下の通りです。

デバイス名
画面サイズ(幅×高さ)
デバイスピクセル比(DPR)
ユーザーエージェント文字列
タッチスクリーン対応の有無

よく使う端末やクライアントから指定された特定の解像度を登録しておくと便利です。

既存のデバイスにマウスカーソルを合わせると、ツールチップでそのデバイスの詳細情報が表示されます。

レスポンシブデザインモードの終了方法

レスポンシブデザインモードを終了するには、以下のいずれかの方法を使います。

画面右上の「×」ボタンをクリック
起動時と同じショートカットキー(Ctrl + Shift + MまたはMacはCmd + Option + M)を再度押す
開発ツールのレスポンシブデザインモードボタンをもう一度クリック

通常のブラウジング表示に戻ります。

開発ツールとの併用

レスポンシブデザインモードと開発ツール(DevTools)は独立して表示・非表示を切り替えられます。
F12キーを押すと、レスポンシブデザインモードを維持したまま開発ツールを開けます。

開発ツールを併用すると、スマホ表示を確認しながら以下の作業ができます。

HTML・CSSの検証と編集
JavaScriptのデバッグ
ネットワークリクエストの確認
コンソールでのエラー確認

画面サイズによっては開発ツールの配置を調整すると作業しやすくなります。

注意点

レスポンシブデザインモードは、実際のスマートフォンやタブレットを完全に再現するものではありません。
以下の点に注意してください。

シミュレーションの限界
画面サイズやタッチイベント、ユーザーエージェントはシミュレートできますが、実際の端末のハードウェア、オペレーティングシステム、ブラウザエンジンとは異なります。
レンダリングやパフォーマンスは、実機と差異が生じる場合があります。

最終確認は実機で
本番公開前には、可能な限り実際のスマートフォンやタブレットでの確認を行うことを推奨します。
レスポンシブデザインモードは開発中の確認ツールとして活用し、最終的な品質保証は実機で行うのがベストプラクティスです。

まとめ

Firefoxのレスポンシブデザインモードを使えば、PC上で簡単にスマホ表示を確認できます。
キーボードショートカット(Ctrl + Shift + M)で素早く起動でき、様々な端末サイズやネットワーク環境をシミュレートできます。

Web制作者だけでなく、自分のブログやWebサイトがスマホでどう見えるか確認したい一般ユーザーにも便利な機能です。
拡張機能のインストールも不要なので、今すぐ試してみてください。