連載
» 2016年05月18日 05時00分 UPDATE

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

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

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

連載目次

対象ソフトウェア:デスクトップ(PC)版Google Chromeブラウザ



解説

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

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

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

操作方法

 PC版のGoogle Chromeでスマートフォンでの表示を確認するには、対象のWebページを表示してから、Google Chromeの[メニュー]の[その他のツール]−[デベロッパー ツール]を選択する。

 デベロッパーツールのウィンドウが現れたら、以下のように操作して、Google ChromeにスマートフォンのWebブラウザをエミュレートさせる。

Google Chromeによるスマートフォンによる見え方の確認方法(その1) Google Chromeによるスマートフォンによる見え方の確認方法(その1)
ここでは、@ITのスマートフォン表示を確認してみる。
  (1)このメニューボタンをクリックする。
  (2)[その他のツール]−[デベロッパー ツール]を選択する。Windowsなら[F12]キー、Mac OS Xなら[Option]+[Command]+[I]キーを押しても呼び出せる。
Google Chromeによるスマートフォンによる見え方の確認方法(その2) Google Chromeによるスマートフォンによる見え方の確認方法(その2)
  (3)これがデベロッパーツール。デフォルトではブラウザペインの右側または下側に表示される。別のウィンドウに表示させることも可能(後述)。
  (4)デベロッパーツールのウィンドウ上端にある、このアイコンをクリックする。[Ctrl]+[Shift]+[M]キーを押してもよい。
Google Chromeによるスマートフォンによる見え方の確認方法(その3) Google Chromeによるスマートフォンによる見え方の確認方法(その3)
  (5)ブラウザペインがスマートフォン表示モードに切り替わった。ただしこの時点では、デザインなど表示内容はまだデスクトップ向けのままだ。
  (6)このプルダウンリストボックスから、エミュレートしたいスマートフォン/タブレットを選択すると、それに合わせて画面解像度やユーザーエージェント文字列などがセットで切り替わる。[Responsive]を選ぶと解像度などを細かく変更できる(後述)。また[Edit]を選ぶと、もっと多くのデバイスから選択できる他、自分でエミュレーションしたいデバイスを追加できる。
  (7)(6)の後に、必ずWebページを再読み込みする。これでスマートフォンとしての画像解像度やユーザーエージェント文字列などの情報がWebサーバに送信される。
Google Chromeによるスマートフォンによる見え方の確認方法(その4) Google Chromeによるスマートフォンによる見え方の確認方法(その4)
  (8)再読み込みにより、スマートフォン向けのデザインで表示されたWebページ。マウスカーソルを指代わりとして、タッチしたり画面をドラッグしたりできる。また、[Shift]キー押しながらマウスを上下にドラッグすると、ピンチイン/ピンチアウトも可能。
  (9)スマートフォン表示モードでは、このアイコンが水色で表示される。PC表示に戻すには、再びこのボタンをクリックするか、[Ctrl]+[Shift]+[M]キーを押す。
  (10)デベロッパーツールのウィンドウが邪魔な場合は、その位置を変更できる。それにはまず、このメニューアイコンをクリックしてメニューを開く。
  (11)左から「ブラウザペインとは別のウィンドウ」「ブラウザペインの下端」「ブラウザペインの右端」というように、デベロッパーツールの位置を選択できる。

 上記の(6)で[Responsive]を選ぶと、画面解像度を細かく変更できる。さらに、通信速度を3Gと同程度に落としたり、ピクセル密度を変えたりしたときの表示の具合なども確認できる。

スマートフォン表示を細かくカスタマイズする(その1) スマートフォン表示を細かくカスタマイズする(その1)
  (1)デバイスとして[Responsive]を選ぶと、エミュレートしたい画面の水平解像度をピクセル単位で指定できる。
  (2)画面を表示する際の倍率を変更できる。
  (3)デバイスの代表的な水平解像度をワンクリックで選択できる。真ん中から端に向かって「320px」「376px」「425px」「768px」「1024px」「1440px」「2560px」。
  (4)もっと細かく設定を変更するには、このメニューボタンをクリックする。
スマートフォン表示を細かくカスタマイズする(その2) スマートフォン表示を細かくカスタマイズする(その2)
  (5)それぞれクリックしてチェックをオンにすると、設定を変更できるようになる。
  (6)[Show device pixel ratio]をオンにすると、いわゆるRetinaディスプレイにおける解像度の倍率を指定できるようになる。
  (7)[Show device type]をオンにすると、デバイスとして携帯機器(Mobile)かPC(Desktop)を選択できるようになる。これによりユーザーエージェント文字列が変わる。
  (8)[Show throttling]をオンにすると、Webページの読み込み時の通信速度を、GPRS/2G/3G/4G/DSL/Wi-Fiといった選択肢から指定できるようになる。
  (9)[Show media queries]をオンにすると、CSSのメディアクエリがどのように設定されているか、グラフィカルな表示で確認できるようになる。
  (10)[Show rulers]をオンにすると、目盛り(ルーラー)が表示される。

 その他のデベロッパーツールの使い方については、以下の関連リンクを参照していただきたい。

■更新履歴

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

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

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


「Tech TIPS」のインデックス

Tech TIPS

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

@IT Special

- PR -

TechTargetジャパン

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

Focus

- PR -

RSSについて

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

メールマガジン登録

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