Google Chrome完全ガイド：PC版Chromeブラウザでスマホサイトをチェックする

Webサイトのスマートフォン（スマホ）表示の確認は、さまざまな画面サイズがあるため結構面倒な作業です。でもPC版Google Chromeのデベロッパーツールでエミュレートすれば、デスクトップ版ブラウザでスマホサイトを簡単に表示できます。

連載目次

デスクトップ版Google Chromeでスマホ表示

　スマートフォン（スマホ）が広く普及し、昨今では多くのWebサイトが、画面の狭いスマホに対応した専用のビュー（表示）を備えるようになってきました。

　サイトがスマホでどう見えるのかは、もちろん実際にスマホで表示してみるのが確実です。ただ、スマホやタブレットにはさまざまな機種があり、画面の解像度も異なるため、どう見えるかを全て実機でテストするのは困難です。

　こんなときは、デスクトップ版Webブラウザの「スマホ表示」機能（スマートフォンのWebブラウザのエミュレーション）を利用すると、PCで簡単にスマホサイトの確認ができます。操作方法もそれほど難しくありません。

　本Tech TIPSでは、Windows OS／macOSのデスクトップ版Google Chrome（以下、Chromeと略）の「デベロッパーツール（開発者ツール）」でスマホ表示を確認する方法を紹介します。

デベロッパーツールでスマホのWebブラウザをエミュレートするには

　Chromeでスマホによる表示を確認するには、最初に対象のWebページを表示してから、右上のメニューボタンをクリックして［その他のツール］−［デベロッパー ツール］をクリックします。次のキーボードショートカットでも呼び出せます。

まずGoogle Chromeの「デベロッパーツール」を呼び出します

　以下のようにデベロッパーツールのペインが現れたら、ブラウザペインが見やすいように、その位置を変えましょう。デベロッパーツール内の右上にあるメニューボタンをクリックして［Dock side］から適切な位置を選びます。ここでは下端に移動してみます。

見やすくなるようにデベロッパーツールの位置を変えます

　続いて表示モードをスマホに変えましょう。それには次の画面にある（5）のアイコンをクリックします。あるいは、デベロッパーツールにフォーカスを置いた状態で、以下のショートカットキーを押します。

ブラウザペインをスマホ表示モードに切り替えます

　これでブラウザペインはスマホ表示モードに切り替わりました。しかし、デザインなど表示内容はまだPC用のままなので、ページの内容を再度読み込み直しましょう。それには次の画面にある（6）の再読み込みアイコンをクリックするか、以下のショートカットキーを押します。

ページの内容を読み込み直しましょう

　これで完全にブラウザペインの内容がスマホ用に切り替わりました。以上のようにPCとスマホの間で表示モードを切り替えたときには、必ずページを読み込み直しましょう。

スマホ向けのページが表示されました

　この表示モードでは、マウスポインターを指代わりとして、タッチしたり画面をドラッグしたりできます。

　スマホ表示モードでは、前述の切り替えアイコンが水色で表示されます。PC表示に戻すには、再びそのアイコンをクリックするか、デベロッパーツールにフォーカスを置いた状態で、以下のショートカットキーを押します。

• Windows OS： ［Ctrl］＋［Shift］＋［M］キー
• macOS： ［command］＋［shift］＋［M］キー

エミュレートするスマホの種類を指定するには

　iPhoneやNexus、Galaxyなどのスマホについては、あらかじめ画面解像度やユーザーエージェントなどの設定がプリセットされていて、メニューから選ぶだけで簡単にエミュレートできます。特定のスマホでの表示を確認したい場合は、このプリセットされた設定を選ぶと簡単です。

エミュレートするスマホの種類を選びます

　上の画面でメニューに表示されているスマホは、プリセットの一部です。その他のプリセットはメニューの［Edit］をクリックすると表示され、メニューに追加できます。さらに、まったく新規にスマホの設定（解像度やユーザーエージェント文字列など）を追加することも可能です。

エミュレートするスマホの設定を追加します

　例えばiPhoneの場合、執筆時点でiPhone XS以降の機種はほとんどプリセットされていません。そこで筆者は下表のような設定を追加して利用しています（あくまで一例です）。

スマホの画面解像度を細かく変えるには

　エミュレートしたいスマホが前述のプリセットにない場合、ブラウザペイン上で解像度などを動的に変更することも可能です。

　スマホ表示で画面解像度を個別に設定するには、スマホを選ぶためのメニューで［Responsive］を選び、その隣の欄に横（水平）／縦（垂直）の解像度の数値を記入します。また、その下のバーをクリックすると、ワンタッチで横の解像度を320〜2560pxの範囲で選択できます。

スマホの画面解像度を変更します

解像度を変えずにスマホの画面表示を拡大／縮小するには

　画面解像度を変更すると、ブラウザペインが極端に小さくなって文字が読めなくなることがあります。そのときには次の画面にある（1）のメニューを開いて、表示倍率を変更します。