Web制作をしていると、PCではきれいに見えているのに、Androidスマホで確認したらレイアウトが崩れていた、ということがありますよね。
特に、余白の見え方、改行位置、固定ボタンの重なり、タップしやすさあたりは、レスポンシブモードだけでは気づきにくいことがあります。
この記事では、Chromeの開発者ツールを使って、Android実機の表示をPCから確認する方法をご紹介します。初めて設定する方でも追いやすいように、事前準備からつまずきやすいポイントまで順番にまとめました。
本記事の執筆者：マサトラ
フリーランス歴4年のWebエンジニア。現在は20社以上のWeb制作会社社様と提携し、WordPress構築やLP制作を中心に月3～5件のペースでサイト制作を手がけています。
このブログでは、実務で得た知識やノウハウ、制作現場での気づきを、フリーランスとして活動中の方はもちろん、これからWeb制作を仕事にしたいと考えている方にも役立つよう発信しています。
まず最初に結論です
Chromeの開発者ツールを使えば、Androidスマホで開いているページをPC側から確認できます。
やること自体はそこまで多くありません。大きく分けると、次の3段階です。
- Android側で開発者向けオプションとUSBデバッグを有効にする
- USBケーブルでPCとAndroidスマホを接続する
- PC版Chromeで chrome://inspect/#devices を開き、
inspectからDevToolsを開く
レスポンシブモードも便利なのですが、実機確認までしておくと、端末での見え方や操作感をかなり正確にチェックできます。スマホ表示の崩れを追う時は、ここまでセットでできるようにしておくと安心です。
まずは必要なものを確認しましょう
最初に、今回使うものを整理します。
- PC
- Androidスマートフォン
- データ通信に対応したUSBケーブル
- PC側のGoogle Chrome
- Android側のChrome
ここで一番大事なのは、USBケーブルです。
充電専用ケーブルだと、スマホがPCに認識されないことがあります。設定が合っているのにうまくいかない時は、開発者向けオプションより先にケーブルを疑ったほうが早いことも多いです。
Android側で事前準備をします
まずはスマホ側の準備です。
Chromeの開発者ツールから実機を確認するには、Android側で開発者向けオプションとUSBデバッグを有効にしておく必要があります。
少し難しそうに見えるかもしれませんが、一度設定してしまえば次回からはかなり楽です。順番に見ていきましょう。
1. 開発者向けオプションを有効にする
機種やAndroidのバージョンによって表記は多少違いますが、一般的な流れは次のとおりです。
- 設定を開く
- デバイス情報、または端末情報のような項目を開く
- ビルド番号を連続で数回タップする
途中でロック解除や確認メッセージが出ることがありますが、そのまま案内に沿って進めれば大丈夫です。完了すると、開発者向けオプションが有効になった旨のメッセージが表示されます。
2. USBデバッグをオンにする
次に、設定内に追加された開発者向けオプションを開いて、USBデバッグをオンにします。
ここが一番ピンと来にくいところかと思いますが、要するに「このスマホを開発確認用としてPCから認識できるようにする設定」です。
この設定がオフのままだと、あとでPC側の chrome://inspect/#devices を開いても、端末が表示されないことがあります。
PCとAndroidスマホをUSB接続します
準備ができたら、USBケーブルでPCとAndroidスマホを接続します。
この時、スマホ側に「このPCからのUSBデバッグを許可しますか？」のような確認ダイアログが出ることがあります。表示されたら許可してください。
ここで許可しないまま進めると、PC側で端末が見つからないことがあります。
ポイント
- 接続したのに反応がない時は、いったんケーブルを抜き差ししてみる
- スマホ側のUSB接続モードがファイル転送系になっているか確認してみる
- 別のUSBポートや別のケーブルに替えると解決することもある
Chromeの開発者ツールでAndroid実機を確認する方法
ここからが本題です。PC側のChromeでAndroid実機を確認する流れを、順番に見ていきましょう。
1. PC側のChromeで chrome://inspect/#devices を開く
まず、PC側のChromeで chrome://inspect/#devices を開きます。
この画面は、接続されているAndroid端末と、その端末で開かれているChromeのタブを確認するための画面です。最初は少し分かりにくいのですが、接続できていればここに端末情報が表示されます。
2. 接続された端末が表示されているか確認する
Androidスマホが正しく認識されていれば、Remote Target のような一覧に端末名が表示されます。
さらに、スマホ側でChromeを開いていれば、そのタブ情報もここに並びます。何も出てこない場合は、まだ接続が通っていない可能性があります。
慌てて全部やり直す前に、次のあたりを見直してみてください。
- USBデバッグがオンになっているか
- スマホ側で接続許可をしているか
- USBケーブルがデータ通信に対応しているか
- PC側とAndroid側のChromeを開き直して改善しないか
3. スマホで確認したいページを開く
次に、Androidスマホ側のChromeで、表示確認したいページを開きます。
公開済みのページなら、そのまま普通に開けば大丈夫です。
ローカル開発中のページを見たい場合は、スマホからアクセスできる状態にしておく必要があります。このあたりは別テーマになるので、今後 localhost の確認方法や、Fly Local で作っているWordPressサイトをスマホや別PCで確認する方法も、別記事でまとめる予定です。
4. inspect を押してDevToolsを開く
PC側の chrome://inspect/#devices に、スマホで開いているページが表示されたら、その横にある inspect をクリックします。
すると、PC側に開発者ツールが開き、Android実機で表示中のページをそのまま検証できるようになります。
ここから、次のような確認ができます。
- 要素の確認
- Consoleのエラー確認
- Networkの通信確認
- CSSのオンオフ切り替え
- HTML構造の確認
実機確認をすると何が分かるのでしょうか
ここはけっこう大事なポイントです。
単に「スマホで見られる」というだけではなく、レスポンシブモードだけでは気づきにくい差を確認しやすくなります。
レスポンシブモードでは見えにくい崩れ
PC上の疑似表示では問題なく見えていても、実機だとフォントの見え方、改行位置、固定配置の重なり方が変わることがあります。
特に、position: fixed を使っている要素や、画面幅ぎりぎりで組んでいるレイアウトは差が出やすいです。
実務でも、PCでは大丈夫に見えたのに、実機で見ると「CTAが少し邪魔」「下部固定ボタンが思ったより大きい」といったことはよくあります。
Android実機ならではの表示差
Androidスマホでは、ブラウザUIの出方やアドレスバーの縮み方などの影響で、想定と違う見え方になることがあります。
このあたりは、PCのレスポンシブモードだけでは再現しきれないことがあります。なので、公開前の最終確認として実機を見る価値があるんですね。
タップ操作まわりの確認
PC前提で作ったUIは、スマホだと操作感が変わります。
たとえば、hover 前提の見せ方はそのまま使いにくいことがありますし、ボタンの押しやすさ、タップ範囲、指で触った時の窮屈さなどは、実機で見たほうが圧倒的に判断しやすいです。
余白感や文字サイズの実寸感
数値上は問題なさそうでも、実際のスマホで見ると、余白が詰まりすぎて見えたり、文字が少し小さく感じたりすることがあります。
このあたりは理屈だけでは決めづらいので、最後は実機で見て調整するのがオススメです。
うまく認識されない時はここを確認してみてください
もし chrome://inspect/#devices に端末が出てこない時は、次の点を見直してみてください。
- USBデバッグがオンになっているか
- 充電専用のUSBケーブルになっていないか
- スマホ側でUSBデバッグの接続許可をしているか
- PC側とAndroid側のChromeを開き直して改善しないか
- 一度ケーブルを抜き差しして再接続すると認識されないか
ポイント
設定ミスよりも、許可ダイアログの見落としやケーブルの問題で止まっていることは意外と多いです。
特に初回接続時は、スマホ側に確認が出ていないかをよく見てみてください。ここを見落としているだけで、ずっと認識されないことがあります。
補足として覚えておきたいこと
Chromeの開発者ツールでAndroid実機を確認できるようになると、かなり便利です。
ただ、最終確認では、スマホそのものを手に持って操作感まで見るのが大切です。
たとえば、スクロールしやすいか、片手で押しやすいか、固定ボタンが邪魔になっていないか、といった点は、DevToolsだけでは判断しきれないことがあります。
個人的には、DevToolsで原因を調べて、最後に実機を触って確認する流れが一番安心です。
また、今回の方法はAndroidスマホとChromeの組み合わせが前提です。iPhoneの実機確認は別の手順になるので、その点は切り分けて考えるのがよいかと思います。
まとめ
Chromeの開発者ツールを使えば、Android実機の表示確認はそこまで難しくありません。
最初は開発者向けオプションやUSBデバッグの設定で少し戸惑うかもしれませんが、一度つないでしまえば、その後の確認はかなりスムーズになります。
スマホ表示の崩れやタップ挙動の確認で困った時は、レスポンシブモードだけで終わらせず、Android実機での確認までセットで進めてみてください。理屈を理解してしまえば、今後の検証もだいぶ楽になります。
