PCでWebサイトのモバイル版を見る方法は4つあります。ブラウザのウィンドウを縮める、Chrome DevToolsのデバイスモードを使う、スマホ表示の拡張機能を入れる、スマホのエミュレーターでページを開く、の4つです。1つ目は手軽ですが、正しく表示されないことがよくあります。残りの3つは、サイトに本来のモバイル用レイアウトを要求するので、たいていはこちらが求めている結果になります。
どれが合うかは、何のために見るかで変わります。余白を確認したいデザイナー、顧客がiPhoneでどう見ているかを知りたいマーケター、Androidでだけ起きる不具合を追う開発者では、必要なものが違います。
ウィンドウを縮めてもモバイル版にならない理由
ウィンドウの端をドラッグすると表示領域が狭くなり、CSSのメディアクエリが反応して、レスポンシブなレイアウトが組み変わります。ここまでは問題ありません。変わらないのは、サイトがあなたの端末について知っているそれ以外のすべての情報です。
スマホは、モバイル用のユーザーエージェント文字列と Sec-CH-UA-Mobile: ?1 などのクライアントヒントを送ります。JavaScriptには、小さな画面サイズ、高いデバイスピクセル比、タッチ対応を伝えます。こうした情報をもとに、別のページ、独立した m. サブドメイン、軽量な画像、別のメニューを返すサイトもあります。PCの狭いウィンドウはこれらを一切送らないので、押しつぶされたPC版ページを見ていることになりかねません。
実用上の制約もあります。PCのChromeでは通常、ウィンドウを500ピクセルよりあまり小さくできませんが、多くのスマホの表示領域は360〜440 CSSピクセルです。
方法1：Chrome DevToolsのデバイスモード
Chromeにはスマホのエミュレーターが内蔵されています。F12（Macは Cmd + Option + I）でDevToolsを開き、Macなら Cmd + Shift + M、Windowsなら Ctrl + Shift + M でデバイスツールバーを切り替えます。Dimensionsの一覧から端末を選び、ページを再読み込みします。
デバイスモードは表示領域、デバイスピクセル比、ユーザーエージェントを変更し、タッチイベントに切り替えることもできます。回線やCPUの速度を絞れるので、速度のテストにも役立ちます。ただしPCのCPUやブラウザはデスクトップのままなので、Googleはこれをスマホの「一次近似」と説明しています。
欠点は手間です。DevToolsが画面の3分の1を占め、プリセットは汎用的で、タブごとに設定し直す必要があります。手順全体はChromeのスマホエミュレーターの使い方で解説しています。
方法2：スマホ表示の拡張機能
スマホ表示の拡張機能は、DevToolsを開かずに、ツールバーのボタンから同じ基本機能を使えるものです。たとえばChrome用の Mobile View Extension は、端末ごとのユーザーエージェント、画面サイズ、デバイスピクセル比で、現在のタブをスマホやタブレットの枠の中に再読み込みします。AppleやAndroidの機種名付きプリセットを選び、縦横を切り替え、枠付きの表示をPNGのスクリーンショットとして保存できます。
ページを頻繁に確認する、クライアントのサイトをチェックする、閲覧を続けながら「スマホでの見え方」を見たい、という場合には最も速い方法です。ページを移動してもプレビューが続き、localhost でも動作します。
知っておきたい制約もあります。プレビューはPCのChrome内のフレームで動くため、タッチイベントは発生せず、操作はマウスのままです。hover と pointer のメディアクエリも完全には再現されません。タッチジェスチャーや実機での性能を確かめるなら、実機のスマホを使いましょう。両者の長所と短所はスマホシミュレーター拡張機能とDevToolsの比較で比べています。
方法3：スマホのエミュレーターやシミュレーター
モバイルブラウザのふりをするPCのChromeではなく、本物のモバイルブラウザが必要なときはエミュレーターを使います。
- Xcode Simulator（macOSのみ）：本物のiOS版Safariが動きます。iPhoneを持たずに使える、最も実機に近い環境です。iPhoneなしでiPhone表示を確認する方法をご覧ください。
- Android Studioのエミュレーター：Windows、macOS、LinuxでChrome入りのAndroidが動きます。PCからAndroid表示を確認する方法をご覧ください。
どちらも無料ですが、ダウンロードが大きく、起動に数分かかります。Safariでだけ崩れるレイアウトなど、エンジン固有の不具合を調べるのに適したツールです。
方法4：モバイル用サイトを直接開く
古いサイトの中には、m.example.com のようなアドレスで別のモバイル用サイトを運営しているものがまだあります。そのアドレスをPCのブラウザに入力すると、モバイル用のページがそのまま表示されることがよくあります。ただし最近のサイトはほとんどこの方式ではなく、PCからのアクセスをメインのドメインにリダイレクトするサイトも多いので、方法というより一部のサイトで使える近道と考えましょう。
どの方法を使うか
| 目的 | 最適な方法 | 理由 |
|---|---|---|
| ページがスマホでどう見えるかをざっと確認 | スマホ表示の拡張機能 | ワンクリック、本物のモバイル用ユーザーエージェント、閲覧中も維持 |
| モバイルレイアウトのCSSやJavaScriptをデバッグ | DevToolsのデバイスモード | Elements、Console、Networkパネルがプレビューの隣にある |
| Safariだけで起きる不具合を確認 | Xcode Simulatorか実機のiPhone | WebKitの不具合はWebKitでしか見えない |
| モバイルでの表示速度を測る | DevToolsのスロットリングかモバイルでの表示速度テスト | PCの性能では遅いスクリプトが目立たない |
| タップ領域やジェスチャーの確認 | 実機のスマホ | マウスのクリックでは指の操作を再現できない |
モバイル版を開いたら確認したいこと
スマホ表示を開くのは簡単な部分です。役に立つのは、次のような短いチェックリストです。
- 拡大しなくても文字が読め、本文が16px以上ある。
- 横スクロールが発生しない。横スクロールバーが出るなら、たいてい固定幅の要素か幅の広い表が原因です。
- メニューが開閉でき、親指で操作できる。
- ボタンやリンクの間隔が十分で、タップしやすい。
- フォームで適切なキーボードが出て、固定バーに隠れない。
- 画像が高密度ディスプレイで鮮明で、なおかつ重すぎない。
公開前のより詳しいリストはモバイルサイトのテスト用チェックリストをご覧ください。
よくある質問
拡張機能なしでChromeでサイトのモバイル版を見られますか？
見られます。DevToolsを開き、Ctrl + Shift + M（Macは Cmd + Shift + M）でデバイスツールバーを切り替えます。拡張機能を使えばこの手順が省け、設定もタブごとに保たれます。
縮小表示やウィンドウのサイズ変更でモバイル版は見られますか？
サイズを変えると、レスポンシブなレイアウトがその幅でどう組み変わるかはわかります。ただしモバイル用のユーザーエージェントは送られないので、端末を判定するサイトはPC版を返し続けます。
PCでのスマホ表示は、スマホで見るのとまったく同じですか？
近いですが、同じではありません。PCのツールは表示領域とサイトが読み取る情報を変えますが、描画エンジン、CPU、タッチ入力は変えません。最終確認は実機のスマホで行いましょう。