「このサイト、スマホで見たらレイアウト崩れてない?」――そんな不安を、わざわざ自分のiPhoneやAndroidを取り出して確かめている方は多いと思います。画面の小ささ、文字の折り返し、ボタンの押しやすさ。PCの大きな画面で作ったページほど、スマホでは思わぬところがズレるものです。
私はWeb制作を25年やっていますが、昔は専用ソフトをわざわざ入れてスマホ表示を確認していました。この記事でもかつて「Mobilizer(モビライザー)」という確認ソフトを紹介していたのですが、提供は終了しており、いまはブラウザ標準の機能だけで十分にスマホ表示を再現できます。
ありがたいことに、ここ数年でブラウザの確認機能はぐっと進化しました。いまや有料ツールに頼らなくても、Chrome・Edge・Firefoxといった普段のブラウザだけで、iPhoneやAndroidの画面サイズをかなり正確に再現できます。実機をいちいち手に取らなくても、PCのキーボード操作だけでスマホ表示にパッと切り替えられるのです。
そこでこの記事では、特別なソフトを入れなくてもPCでスマホ表示を確認できる「開発者ツール」の使い方を中心に、複数端末を一気に並べられる無料アプリ、そして本番前に欠かせない実機・クラウドでの確認方法まで、2026年のいま実際に使える手段をまとめて紹介します。難しい設定は一切ありません。スマホを触らずにレイアウトチェックをサッと終わらせたい方は、ぜひ参考にしてください。
「Mobilizer」は提供終了。いまはブラウザだけで確認できる
まず最初にお伝えしておくと、この記事でもともと紹介していたスマホ確認ソフト「Mobilizer」は、現在は提供が終了しています。開発元Springboxの配布ページ(springbox.com/mobilizer)はすでに閉鎖され、404エラーになります。
Mobilizerは「Adobe AIR」という実行環境の上で動くアプリでしたが、そのAdobe AIRもAdobe自身によるサポートが2019年末で終了し、別企業へ引き継がれています。つまり当時のように専用ソフトを入れてスマホ表示を確認する必要は、もうありません。
うれしいことに、いまはChromeやEdge、Firefoxといった普段使っているブラウザに、スマホ表示を再現する機能が標準で備わっています。何もインストールせず、ショートカットキー一つで切り替えられるので、まずはこれを覚えるのが一番の近道です。
Chrome・Edgeの開発者ツール「デバイスモード」で確認する
もっとも手軽なのが、Google ChromeやMicrosoft Edgeに標準搭載されている「デベロッパーツール(開発者ツール)」のデバイスモードです。ChromeもEdgeも中身は同じChromium系なので、操作はまったく同じです。
確認したいページを開いたら、たった2つのショートカットでスマホ表示に切り替わります。手順は次のとおりです。
- スマホ表示を確認したいWebページをブラウザで開きます。
Ctrl + Shift + I(MacはCommand + Option + I)を押して、開発者ツールを開きます。- 続けて
Ctrl + Shift + M(MacはCommand + Shift + M)を押すと、デバイスツールバーが表示され、スマホ表示に切り替わります。 - 画面上部のメニューから「iPhone 14 Pro」「Pixel 7」など端末を選ぶか、横幅の数値を直接入力して画面サイズを変えられます。
- 端末名の横にある回転アイコンで、縦向き・横向きを切り替えられます。
デバイスモードでは画面サイズだけでなく、端末ごとの解像度(デバイスピクセル比)の再現や、3G・低速回線をわざと再現するネットワーク制限、CPUを遅くして動作の重さを確かめる機能まで使えます。タッチ操作の擬似再現もできるので、「指で押したときの挙動」もある程度チェックできます。
ただし、Chrome公式も明記しているとおり、これはあくまで「近似的な再現」です。フォントの細かな見え方や実機特有の挙動までは完全には再現できないので、最終チェックは実機も併用するのがおすすめです。
出典:Chrome DevTools 公式ドキュメント(Device Mode)
関連記事:Firefoxから乗り換え!Vivaldi(Google Chrome)おすすめアドオン&アプリ
Firefoxの「レスポンシブデザインモード」で確認する
Firefoxを使っている方は、「レスポンシブデザインモード」という専用機能が用意されています。Chromeのように開発者ツールを開く一手間がいらず、ショートカット一発でスマホ表示に切り替えられるのが地味に便利です。
- 確認したいページをFirefoxで開きます。
Ctrl + Shift + M(MacはCommand + Option + M)を押します。- 画面がスマホサイズに切り替わるので、上部のメニューから端末を選ぶか、横幅を直接入力します。
- もう一度同じショートカットを押せば、通常表示に戻ります。
レスポンシブデザインモードでも、縦横の切り替え、タッチ操作の擬似再現、デバイスピクセル比の変更、回線速度(2G・3G・LTEなど)の再現、ユーザーエージェントの変更、スクリーンショットの撮影といった機能がひととおりそろっています。複数のブラウザで見え方を比べたいときは、ChromeとFirefoxの両方で確認しておくと安心です。
出典:Firefox 公式ドキュメント(Responsive Design Mode)
複数端末を一気に並べたいなら無料アプリ「Responsively App」
「iPhoneとAndroid、タブレットも、全部いっぺんに見比べたい」というときに重宝するのが、無料・オープンソースのデスクトップアプリ「Responsively App」です。
ブラウザの開発者ツールは基本的に1端末ずつの確認ですが、Responsively Appは複数の端末画面を横並びで一覧表示し、スクロールやクリックを全画面で同時に連動させてくれます。1回の操作ですべての端末の見え方を一気に確認できるので、レスポンシブ対応の最終チェックが一気にラクになります。
主な特徴は次のとおりです。
- 複数端末を横並びで同時表示し、スクロールやクリックを全画面に連動できる。
- 豊富な端末プロファイルが内蔵され、独自サイズの端末も追加できる。
- 全端末をまとめて要素検証(インスペクト)できる。
- 全画面の表示をワンクリックでまとめてスクリーンショットできる。
無料で使えてWindows・Mac・Linuxに対応しているので、制作の確認用に入れておいて損はありません。GitHubで公開されているオープンソースという安心感もあります。
最終確認は実機・クラウド実機サービスで
ここまで紹介した方法はどれも「PC上での再現」です。便利ですが、実機にしか出ない不具合もあります。スクロール時のカクつき、特定機種でのフォントの崩れ、iOS Safari独自のクセなどは、やはり本物の端末で見るのが確実です。
手元にiPhoneやAndroidがあるなら、公開前に一度は実機で開いて確認しておきましょう。とくに公開直前や、お客様に納品するサイトは実機チェックを省かないのが鉄則です。
「自分が持っていない機種で確認したい」「いろんなiOS・Androidのバージョンで試したい」という場合は、クラウド上の実機をブラウザから操作できる「BrowserStack」のようなサービスが役立ちます。実際の端末をリモートで触れるので、エミュレーターでは拾いきれない実機特有の挙動まで確認できます。無料トライアルもあるので、込み入った検証が必要なときに検討してみてください。
関連記事:Googleモバイルファーストインデックスの影響と対応策
まとめ:スマホ表示の確認は「開発者ツール」が基本
かつて専用ソフトの「Mobilizer」を入れて確認していた時代は終わり、いまはブラウザの標準機能だけでPCからスマホ表示を手軽に再現できるようになりました。改めて、確認方法を整理しておきます。
普段づかいでもっとも手早いのは、ChromeやEdgeの開発者ツールのデバイスモードです。Ctrl + Shift + Iでツールを開き、Ctrl + Shift + Mでスマホ表示に切り替える――この2ステップを覚えておけば、ほとんどの確認はこと足ります。Firefox派ならCtrl + Shift + M一発で切り替わるレスポンシブデザインモードが便利です。
複数端末を一気に見比べたいときは無料の「Responsively App」、本番前の最終チェックには実機やクラウド実機サービス「BrowserStack」。この使い分けができれば、スマホ表示の確認で困ることはまずありません。
私自身、日々の制作ではほとんどの確認をChromeのデバイスモードで済ませています。手元でショートカット一発、すぐに横幅を変えながら崩れをチェックできる手軽さは、専用ソフトを起動していた頃とは比べものになりません。慣れてくると、コードを直しながらリアルタイムにスマホ表示で確認できるので、作業のスピードが目に見えて上がります。
大切なのは、PC上での再現はあくまで近似だと理解したうえで、公開前に一度は実機で目を通すこと。エミュレーターと実機を上手に組み合わせれば、どの画面で見ても崩れない、安心して公開できるサイトに仕上がります。スマホ対応はもう特別な作業ではなく、毎日の制作にすっと溶け込む当たり前の工程になりました。
まずは今開いているこのページで、Ctrl + Shift + Iを押してからのデバイスモードを試してみてください!一度体感すれば、もう手放せなくなるはずです。