検索
連載
Google Chrome完全ガイド:

PC版Chromeブラウザでスマホサイトをチェックする

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

PC用表示 関連情報
Share
Tweet
LINE
Hatena
「Google Chrome完全ガイド」のインデックス

連載目次

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

対象:PC版(デスクトップ版)Google Chrome


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

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

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

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

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

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

  • Windows OS: [Ctrl]+[Shift]+[I]キーまたは[F12]キー
  • macOS: [option]+[command]+[I]キー
まずGoogle Chromeの「デベロッパーツール」を呼び出します
まずGoogle Chromeの「デベロッパーツール」を呼び出します

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

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

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

  • Windows OS: [Ctrl]+[Shift]+[M]キー
  • macOS: [command]+[shift]+[M]キー
ブラウザペインをスマホ表示モードに切り替えます
ブラウザペインをスマホ表示モードに切り替えます

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

  • Windows OS: [Ctrl]+[R]キーまたは[F5]キー
  • macOS: [command]+[R]キー
ページの内容を読み込み直しましょう
ページの内容を読み込み直しましょう

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

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

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

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

  • Windows OS: [Ctrl]+[Shift]+[M]キー
  • macOS: [command]+[shift]+[M]キー

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

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

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

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

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

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

Device Name Width Height Device pixel ratio User agent string(例)
iPhone SE2 375 667 2 Mozilla/5.0 (iPhone; CPU iPhone OS 13_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.92 Mobile/15E148 Safari/604.1
iPhone XR/11 414 896 2
iPhone XS/11 Pro 375 812 3
iPhone XS Max/11 Pro Max 414 896 3
iPad gen7 810 1080 2 Mozilla/5.0 (iPad; CPU OS 13_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/85.0.4183.72 Mobile/15E148 Safari/604.1
iPad Pro "10.5/Air gen3 834 1112 2
iPad Pro "11 834 1194 2
iPad Pro "12.9 1024 1366 2
執筆時点でプリセットされていないiPhone/iPadの追加設定例
解像度は、iOSの拡大表示をオフにした([標準]を選んだ)場合のもの。またユーザーエージェント文字列は、機種よりもOSやWebブラウザ(クライアントアプリケーション)に依存するので、上記と異なる文字列を指定することもあります。

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

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

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

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

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

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

Copyright© Digital Advantage Corp. All Rights Reserved.

ページトップに戻る