Google Chrome完全ガイド：Google Chromeでスマートフォンサイトをチェックする
Webサイトのスマートフォン表示の確認は結構面倒な作業です。でもGoogle Chromeのデベロッパーツールでエミュレートすれば、デストップ版ブラウザでスマートフォンサイトを簡単に表示できます。
スマートフォンが広く普及し、昨今では多くのWebサイトが、画面の狭いスマートフォンに対応した専用のビュー（表示）を備えるようになってきました。
サイトがスマートフォンでどう見えるのかは、実際にスマートフォンで表示してみればよいでしょう。ただ、タブレットやスマートフォンにはさまざまな機種や解像度があるため、どう見えるかを全て実機でテストするのは困難です。
こんなときは、デスクトップ版Google Chrome（以下、Chromeと略）の「デベロッパーツール（開発者ツール）」を利用すると、PCで簡単にスマートフォンサイトの確認ができます。その操作方法もそれほど難しくありません。
■記事内目次
デベロッパーツールでスマートフォンのWebブラウザをエミュレートするには
Chromeでスマートフォンによる表示を確認するには、最初に対象のWebページを表示してから、右上のメニューボタンをクリックして［その他のツール］−［デベロッパー ツール］をクリックします。あるいは、［Ctrl］＋［Shift］＋［I］キーまたは［F12］キーを押します（macOSでは［Option］＋［Command］＋［I］キー）。
以下のようにデベロッパーツールのペインが現れたら、ブラウザペインが見やすいように、その位置を変えましょう。デベロッパーツール内の右上にあるメニューボタンをクリックして［Dock side］から適切な位置を選びます。ここでは下端に移動してみます。
続いて表示モードをスマートフォンに変えましょう。それには次の画面にある（5）のアイコンをクリックするか、デベロッパーツールにフォーカスを置いた状態で［Ctrl］＋［Shift］＋［M］キーを押します（macOSでは［Command］＋［Shift］＋［M］キー）。
これでブラウザペインはスマートフォン表示モードに切り替わりました。しかし、デザインなど表示内容はまだPC用のままです。ここで再読み込みボタンをクリックするか［F5］キーを押して、ページの内容を再度読み込み直しましょう（macOSでは［Command］＋［R］キー）。
これで完全にブラウザペインの内容がスマートフォン用に切り替わりました。以上のようにPCとスマートフォンの間で表示モードを切り替えたときには、必ずページを読み込み直しましょう。
この表示モードでは、マウスカーソルを指代わりとして、タッチしたり画面をドラッグしたりできます。
スマートフォン表示モードでは、前述の切り替えアイコンが水色で表示されます。PC表示に戻すには、再びこのボタンをクリックするか、デベロッパーツールにフォーカスを置いた状態で［Ctrl］＋［Shift］＋［M］キーを押します（macOSでは［Command］＋［Shift］＋［M］キー）。
エミュレートするスマートフォンの種類を指定するには
iPhoneやNexus、Galaxyなどのスマートフォンについては、あらかじめ画面解像度やユーザーエージェントなどの設定がプリセットされていて、メニューから選ぶだけで簡単にエミュレートできます。特定のスマートフォンでの表示を確認したい場合は、このプリセットされた設定を選ぶと簡単です。
スマートフォンの画面解像度を細かく変えるには
エミュレートしたいスマートフォンがプリセットされた設定にない場合、手動で解像度などを設定することも可能です。
スマートフォン表示で画面解像度を個別に設定するには、スマートフォンを選ぶためのメニューで［Responsive］を選び、その隣の欄に横（水平）／縦（垂直）の解像度の数値を記入します。また、その下のバーをクリックすると、ワンタッチで横の解像度を320〜2560pxの範囲で選択できます。
解像度を変えずにスマートフォンの画面表示を拡大／縮小するには
画面解像度を変更すると、ブラウザペインが極端に小さくなって文字が読めなくなることがあります。そのときには次の画面にある（1）のメニューを開いて、表示倍率を変更します。
スマートフォンの画面の向きを変えるには
スマートフォンには画面の向きがあります。次の画面にある（1）のアイコンをクリックすると、そのたびに画面の向きを縦／横と切り替えられます。
スマートフォンのフレーム（枠）を表示するには
スマートフォン表示の際、スマートフォンの枠（フレーム）も一緒に表示させることもできます。それにはブラウザペイン内の右上に表示されているメニューボタン（次の画面の（1））をクリックし、表示されたメニューで［Show device frame］をクリックします。
すると冒頭の画面のように、スマートフォンのフレームが画面を囲うように現れます。
ただし、エミュレート対象のスマートフォンによっては、このフレームが用意されていないことがあります。執筆時点でフレームが表示されるのは、iPhone 5／SE／6／7／8／6 Plus／7 Plus／8 PlusとiPadに限られるようです。
もっと細かい設定をカスタマイズするには
ブラウザペイン内の右上に表示されているメニューボタン（次の画面の（1））をクリックすると、さらに細かい設定をするためのメニューが表示されます。
| メニュー項目名 | 機能 |
|---|---|
| Show media queries | スタイルシートのメディアクエリがどのように設定されているか、グラフィカルな表示で確認できるようになります |
| Show rulers | ピクセル単位の目盛り（ルーラー）が表示されます |
| Add device pixel ratio | いわゆるRetinaディスプレイにおける解像度の倍率（デバイスピクセル比）を指定できるようになります |
| Add device type | デバイスとして携帯機器（Mobile）かPC（Desktop）を選択できるようになります。これによりユーザーエージェント文字列が変わります |
| スマートフォン表示での詳細設定 | |
【注意】エミュレーションは完全ではない
以上のようにChromeのデベロッパーツールを使うことで、簡単にスマートフォンサイトの表示が確認できます。
ただし、完全にスマートフォンをエミュレートできるわけではありません。スマートフォン上のiPhone（iOS）版あるいはAndroid OS版Chromeでの表示と比べると、細かい部分で表示内容が食い違うこともあります。
Webサイトのデザインなどを変更した際は、この機能を使って正しく表示できるか確認すると手軽で便利です。しかし、実機でのテストを完全に置き換える機能ではないので、過信は禁物でしょう。
■更新履歴
【2018/12/05】スクリーンショットを更新し、最新版Google Chromeに合わせて操作方法を更新しました。また注意点やフレームの表示方法を追記しました。
【2017/12/04】スクリーンショットを更新しました。また最新版Google Chromeに合わせて操作方法を更新しました。
【2016/05/18】最新版Google Chromeに合わせて操作方法を更新しました。
【2015/11/02】最新版Google Chromeに合わせて操作方法を更新しました。また画像解像度などのカスタマイズについて追記しました。
【2014/03/20】初版公開。
Copyright© Digital Advantage Corp. All Rights Reserved.
編集部からのお知らせ
ITmediaはアイティメディア株式会社の登録商標です。