連載
» 2017年12月04日 05時00分 公開

Google Chrome完全ガイド:Google Chromeブラウザでスマートフォンサイトをチェックする

Webサイトのスマートフォン表示の確認は結構面倒な作業です。でもGoogle Chromeのデベロッパーツールでエミュレートすれば、デストップ版ブラウザでスマートフォンサイトを簡単に表示できます。

[小川誉久, 島田広道,デジタルアドバンテージ]
「Chrome完全ガイド」のインデックス

連載目次

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

 サイトがスマートフォンでどう見えるのかは、実際にスマートフォンで表示してみればよいでしょう。ただ、タブレットやスマートフォンにはさまざまな機種や解像度があるため、どう見えるかを全て実機でテストするのは困難です。

 こんなときは、Google Chromeの「デベロッパーツール(開発者ツール)」を利用するとPCで簡単にスマートフォンサイトを確認できます。その操作方法もそれほど難しくありません。

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

 PC版のGoogle Chromeでスマートフォンでの表示を確認するには、最初に対象のWebページを表示してから、右上のメニューボタンをクリックして[その他のツール]−[デベロッパー ツール]をクリックします。あるいは、[Ctrl]+[Shift]+[I]キーまたは[F12]キーを押します(macOSでは[Option]+[Command]+[I]キー)。

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

 以下のようにデベロッパーツールのペインが現れたら、ブラウザペインが見やすいように、その位置を変えましょう。デベロッパーツール内の右上にあるメニューボタンをクリックして[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))をクリックすると、さらに細かい設定をするためのメニューが表示されます。

もっと細かい設定をカスタマイズする もっと細かい設定をカスタマイズする

 例えば[Add device pixel ratio]をクリックすると、いわゆるRetinaディスプレイにおける解像度の倍率(デバイスピクセル比)を指定できるようになります。

 また[Add device type]をクリックすると、デバイスとして携帯機器(Mobile)かPC(Desktop)を選択できるようになります。これによりユーザーエージェント文字列が変わります。

 [Show media queries]をクリックすると、スタイルシートのメディアクエリがどのように設定されているか、グラフィカルな表示で確認できるようになります。

 [Show rulers]をクリックすると、ピクセル単位の目盛り(ルーラー)が表示されます。

 このようにGoogle Chromeのデベロッパーツールを使うことで、簡単にスマートフォンサイトの表示が確認できます(エミュレーションなので実機との差異はありますが)。Webサイトのデザインなどを変更した際は、この機能を使って正しく表示できるか確認すると手軽で便利でしょう。

■更新履歴

【2017/12/04】スクリーンショットを更新しました。また最新版Google Chromeに合わせて操作方法を更新しました。

【2016/05/18】最新版Google Chromeに合わせて操作方法を更新しました。

【2015/11/02】最新版Google Chromeに合わせて操作方法を更新しました。また画像解像度などのカスタマイズについて追記しました。

【2014/03/20】初版公開。


「Chrome完全ガイド」のインデックス

Chrome完全ガイド

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。