Chrome用のスマホシミュレーター拡張機能も、Chromeデベロッパーツール（DevTools）のデバイスモードも、PCのChrome上でWebサイトをスマホサイズで表示できます。原因調査に向いているのはDevToolsで、プレビューのすぐ横に要素の検証やコンソールがあるからです。見た目の確認なら拡張機能のほうが速く、ボタン1つで切り替えられ、ページを移動しても表示が続きます。ただし、タッチ操作やSafariでの描画については、どちらも実機の代わりにはなりません。
以下では、その違いを詳しく見ていきます。習慣ではなく作業内容でツールを選べるようにしましょう。
Chromeでいう「スマホシミュレーター」とは
PCのChrome内で動くものはすべて、スマホそのものではなく、スマホの環境をエミュレートしています。優れたツールは、Webサイトが見た目を決めるときに使う次のような情報を書き換えます。
- CSSのメディアクエリを左右する、表示領域（ビューポート）の幅と高さ
- 多くのサーバーやスクリプトが読み取る、ユーザーエージェント文字列とクライアントヒント
Sec-CH-UA-Mobile - JavaScriptが読み取る
screen.width、screen.height、devicePixelRatio navigator.maxTouchPointsなどのタッチ対応フラグ
それでもページを描画しているのは、PCのCPU上で動くChromeのBlinkエンジンです。そのため、ここでいう「シミュレーター」は厳密な意味ではありません。たとえばAppleのXcode Simulatorは、本物のiOS版Safariを動かします。
2つの方法の比較
| DevToolsのデバイスモード | スマホ表示の拡張機能 | |
|---|---|---|
| 確認ごとの準備 | DevToolsを開き、デバイスツールバーを切り替え、端末を選んで再読み込み | アイコンをクリックして端末を選ぶ |
| 画面の使い方 | DevToolsのパネルがウィンドウの一部を占める | ページとスマホの枠だけ |
| ページ移動時の維持 | タブ単位、DevToolsを開いている間だけ | タブ単位、移動しても維持（拡張機能による） |
| 端末プリセット | 数機種、カスタム端末は手動で追加 | 機種名付きのスマホ・タブレットのプリセット |
| ユーザーエージェントとピクセル比 | あり | あり（優れた拡張機能の場合） |
| タッチイベント | あり、マウス操作がタッチになる | 通常なし |
| 回線とCPUのスロットリング | あり | なし |
| 要素の検証、コンソール、ネットワークログ | 内蔵 | 別途DevToolsを開く |
| スクリーンショット | 表示範囲またはページ全体、枠の有無を選択可 | 通常は枠付きの表示範囲 |
傾向ははっきりしています。デバイスモードはスマホ表示が付いたデバッガー、拡張機能はスマホ表示だけのツールです。
DevToolsのデバイスモードが向いている場面
何かがおかしく見えるときに、なぜそうなるのかを調べるならデバイスモードです。代表的な例は次のとおりです。
- 375pxでどのCSSルールが優先されているかを調べる
- モバイルでだけ出るコンソールエラーを読む
- エミュレートしたタッチイベントでスワイプやタップの処理をテストする
- CPUを遅くして、スクリプトが初回描画を妨げていないか確認する
具体的な設定手順はChromeのスマホエミュレーター（デバイスモード）の使い方で解説しています。
拡張機能が向いている場面
モバイル版がどう見えるかを、頻繁に素早く確認したいなら拡張機能です。
- リリース後にサイトの全ページを見て回る
- 通話中のクライアントに、スマホでの見え方を見せる
- 公開前に
localhostのページを確認する（実機で見る方法はlocalhostをスマホで確認する方法を参照） - チケットやデザインレビュー用にスマホサイズのスクリーンショットを撮る
Mobile View Extension は、こうした用途のために作られた拡張機能の一例です。現在のタブをスマホやタブレットの枠の中で再読み込みし、端末ごとのユーザーエージェント、クライアントヒント、画面サイズ、ピクセル比を適用して、ページを移動してもプレビューを維持します。横向きへの回転、任意の解像度の入力、枠付き表示のPNG保存もできます。選んだ端末などの設定は記憶されます。
ブラウザ内シミュレーターに共通する制約
Chrome内のツールで何が分かるのかは、正直に把握しておきましょう。Mobile View Extensionのストアページには制約がはっきり書かれており、これはこの種のツールに共通するものです。
- プレビューはPCのChrome内のフレームで動作し、端末をネイティブにエミュレートするものではありません。
- タッチイベントは発生せず、操作はマウスで行います。
- ピクセル比、
pointer、hoverのメディアクエリは完全には再現されません。幅によるブレイクポイントは枠内の表示領域に従います。
DevToolsにも同じような制約があります。Safari固有の不具合、実際のメモリ不足、画面キーボードは確認できません。これらは実機のiPhoneやAndroid、またはiPhoneなしでiPhone表示を確認する方法やPCからAndroid表示を確認する方法で紹介しているXcodeやAndroid Studioのエミュレーターで確認してください。
スマホシミュレーター拡張機能を入れる前の確認ポイント
ページの読み込み方を変える拡張機能には広い権限が必要なので、慎重に選びましょう。
- どんなデータを集めるか。 プライバシーポリシーを読みましょう。スマホ表示のプレビューツールが閲覧履歴をどこかへ送る理由はありません。Mobile View Extensionのプライバシーポリシーには、個人データも閲覧履歴も収集しないと明記しています。
- ユーザーエージェントまで変えるか、幅だけか。 幅だけを変えるツールは、ウィンドウのサイズを変えるのと同じです。ウィンドウを縮めてもモバイル版にならない理由をご覧ください。
- localhostやログインが必要なページで使えるか。 オンラインの「レスポンシブチェッカー」の多くは、どちらにもアクセスできません。
- 更新が続いているか。 Chromeウェブストアで最終更新日を確認しましょう。
両方を使うシンプルな流れ
毎日モバイルのレイアウトを確認している人の多くは、最終的に役割を分けています。各ページをまず見るのは拡張機能、問題のあるページを調べるのはDevToolsです。購入や会員登録などの重要な導線は、最後に実機で確認します。これで見た目、デバッグ、タッチ操作をすべてカバーしつつ、毎回の確認に時間がかかりません。
よくある質問
スマホシミュレーターの拡張機能は安全ですか？
拡張機能によります。プライバシーポリシーが明確で、拡張機能内に解析やトラッキングがなく、最近も更新されているものを選びましょう。Chromeウェブストアで要求される権限も確認してください。
Chromeの拡張機能でiPhoneを完全に再現できますか？
できません。iPhoneの表示領域、ユーザーエージェント、ピクセル比は合わせられますが、ページを描画するのはSafariではなくChromeのエンジンです。Safari固有の確認には、Xcode Simulatorか実機のiPhoneを使います。
拡張機能を使っていてもDevToolsは必要ですか？
デバッグには必要です。拡張機能はレイアウトが崩れていることを教えてくれ、DevToolsはどのルールが崩しているかを教えてくれます。