PCからWebサイトをAndroidでテストするには、まずPCのChromeでAndroidサイズの表示を確認し、そのあとAndroid Studioのエミュレーターか、USBデバッグでつないだ実機で確かめます。Android版ChromeはPC版と同じBlinkエンジンを使っているため、PCのChromeはiPhoneよりもAndroidのほうをずっと正確に再現できます。エミュレーターや実機では、PCのChromeにはない本物のブラウザUI、キーボード、モバイルのハードウェアが加わります。
AndroidがiPhoneより再現しやすい理由
iPhoneのブラウザエンジンはほぼ必ずWebKitで、PCのChromeはこれを使っていません。一方Androidでは、ほとんどの人の標準ブラウザがChromeで、PC版と同じエンジンで作られています。そのため、PCのChromeでAndroidスマホをエミュレートすると、CSSやJavaScriptの挙動はたいてい同じで、主な違いは画面サイズ、入力方法、性能、ブラウザUIになります。
注意したいのは端末の多様さです。Androidスマホは幅（縦向きで360〜412 CSSピクセルが一般的）、ピクセル比、ブラウザがさまざまです。Samsung端末にプリインストールされているSamsung Internetは独自のリリース周期と設定を持っており、強制ダークモードなどでサイトの見た目が変わることがあります。
ステップ1：ChromeでAndroidサイズの表示にする
レイアウトの確認には、どちらのツールでも使えます。
- DevToolsのデバイスモード。 DevToolsを開いて
Ctrl + Shift + M（MacはCmd + Shift + M）を押し、PixelかGalaxyのプリセットを選んで再読み込みします。デバイスモードはタッチイベントをエミュレートでき、CPUや回線の速度も絞れます。手順の詳細はChromeのスマホエミュレーターの使い方をご覧ください。 - スマホ表示の拡張機能。 Mobile View Extension にはAndroidのプリセットがあり、DevToolsを開かずに、対応するユーザーエージェント、画面サイズ、ピクセル比で現在のタブを再読み込みします。多くのページを素早く見て回るのに便利です。
最低でも幅360pxと412px、それに横向きをテストしましょう。
ステップ2：Android Studioのエミュレーター
Android Studioは、Googleが無料で提供しているAndroid向けの開発環境で、Windows、macOS、Linuxで使えます。完全なAndroidシステムイメージを動かすエミュレーターが含まれています。
- Android Studioをインストールし、Device Manager を開きます。
- 仮想デバイスを作成します。Chromeがプリインストールされるよう、スマホのプロファイルとGoogle Play入りのシステムイメージを選びます。
- デバイスを起動し、Chromeを開いてURLを入力します。
エミュレーターからPC上の開発サーバーにアクセスするには、localhost の代わりに特別なアドレス 10.0.2.2 を使います。たとえば http://10.0.2.2:5173 で、PCのポート5173のサーバーにつながります。エミュレーターを実用的な速度で動かすには、BIOSやシステム設定でハードウェア仮想化を有効にしておく必要があります。
ステップ3：実機のAndroidをリモートデバッグする
実機なら本当の性能やタッチの挙動がわかり、ChromeならPCから検証もできます。
- スマホで 設定 > デバイス情報 を開き、ビルド番号 を7回タップして開発者向けオプションを有効にします。
- 開発者向けオプション で USBデバッグ をオンにします。
- スマホをUSBでつなぎ、スマホに表示されるデバッグの確認を許可します。
- PCでChromeを開き、
chrome://inspect/#devicesにアクセスします。 - スマホのChromeでサイトを開き、PC側でその横の inspect をクリックします。
スマホで動いているページに対して、画面のライブ表示も含めたDevToolsの全機能が使えます。同じページには Port forwarding もあり、スマホ側のポートをPCにつなげるので、スマホで localhost:3000 を開くとPCのローカルサーバーが表示されます。詳しくはlocalhostをスマホで確認する方法をご覧ください。
ブラウザで動くAndroidエミュレーターは？
「Androidエミュレーター ブラウザ」と検索する人が求めているものは、たいてい2つのどちらかです。1つは、ブラウザのタブでAndroidを動かせるWebサイト。こうしたサービスは実在し、リモートのエミュレーターや実機の画面を配信しますが、たいてい有料か時間制限があります。もう1つは、Chrome自体をAndroidスマホのように振る舞わせたいというもので、これはまさにデバイスモードやスマホ表示の拡張機能がしていることです。
Webサイトのテストなら、レイアウトについては後者でほぼ十分で、残りはAndroid Studioのエミュレーターか実機でカバーできます。リモート配信型のサービスは、PCに何もインストールできないときに役立ちます。
Androidで特に確認したいこと
- 幅360pxと412px。 ミドルレンジとハイエンドのスマホで最も多いサイズです。
- 画面キーボード。 キーボードが開くと見える範囲が狭くなります。固定フッターやチャットボタンが入力欄を隠すことがあります。
- システムの戻るボタンとジェスチャー。 シングルページアプリケーションでは、「戻る」がユーザーの期待どおりに動くよう履歴を管理する必要があります。
- ダークモード。 Samsung InternetやChromeの試験運用版の設定は、カラースキームを宣言していないページを暗くすることがあります。
- 文字サイズの拡大。 Androidユーザーはシステムの文字サイズを大きくしていることがよくあります。レイアウトを崩さずに文字が大きくなるか確認しましょう。
- ミドルレンジ端末での性能。 DevToolsのCPUスロットリングか実機のミドルレンジ端末を使いましょう。ハイエンド機では遅いJavaScriptが目立ちません。
公開前の確認項目の全体はモバイルサイトのテスト用チェックリストにまとめています。
よくある質問
ChromeのAndroidエミュレーションは正確ですか？
レイアウトとほとんどのCSS・JavaScriptについては正確です。Android版Chromeは同じエンジンを使っているからです。性能、タッチジェスチャー、ブラウザUIについては精度が落ちるので、重要な導線は実機で確認しましょう。
Androidエミュレーターでlocalhostを開くには？
localhost の代わりに 10.0.2.2 を使い、ポートはそのままにします。例：http://10.0.2.2:3000。
サイトをテストするだけでもAndroid Studioは必要ですか？
必要ありません。ほとんどのレイアウト確認はPCのChromeでできます。本物のAndroidブラウザのUI、キーボードの挙動、特定のAndroidバージョンが必要なときに、Android Studioを入れる価値があります。