対象ソフトウェア：デスクトップ（PC）版Google Chromeブラウザ

解説

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

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

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

操作方法

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

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

Google Chromeによるスマートフォンによる見え方の確認方法（その1）
ここでは、＠ITのスマートフォン表示を確認してみる。
　 （1）このメニューボタンをクリックする。
　 （2）［その他のツール］－［デベロッパーツール］を選択する。Windowsなら［F12］キー、Mac OS Xなら［Option］＋［Command］＋［I］キーを押しても呼び出せる。

▼

Google Chromeによるスマートフォンによる見え方の確認方法（その2）
　 （3）これがデベロッパーツール。デフォルトではブラウザペインの右側または下側に表示される。別のウィンドウに表示させることも可能（後述）。
　 （4）デベロッパーツールのウィンドウ上端にある、このアイコンをクリックする。［Ctrl］＋［Shift］＋［M］キーを押してもよい。

▼

Google Chromeによるスマートフォンによる見え方の確認方法（その3）
　 （5）ブラウザペインがスマートフォン表示モードに切り替わった。ただしこの時点では、デザインなど表示内容はまだデスクトップ向けのままだ。
　 （6）このプルダウンリストボックスから、エミュレートしたいスマートフォン／タブレットを選択すると、それに合わせて画面解像度やユーザーエージェント文字列などがセットで切り替わる。［Responsive］を選ぶと解像度などを細かく変更できる（後述）。また［Edit］を選ぶと、もっと多くのデバイスから選択できる他、自分でエミュレーションしたいデバイスを追加できる。
　 （7）（6）の後に、必ずWebページを再読み込みする。これでスマートフォンとしての画像解像度やユーザーエージェント文字列などの情報がWebサーバに送信される。

▼

Google Chromeによるスマートフォンによる見え方の確認方法（その4）
　 （8）再読み込みにより、スマートフォン向けのデザインで表示されたWebページ。マウスカーソルを指代わりとして、タッチしたり画面をドラッグしたりできる。また、［Shift］キー押しながらマウスを上下にドラッグすると、ピンチイン／ピンチアウトも可能。
　 （9）スマートフォン表示モードでは、このアイコンが水色で表示される。PC表示に戻すには、再びこのボタンをクリックするか、［Ctrl］＋［Shift］＋［M］キーを押す。
　 （10）デベロッパーツールのウィンドウが邪魔な場合は、その位置を変更できる。それにはまず、このメニューアイコンをクリックしてメニューを開く。
　 （11）左から「ブラウザペインとは別のウィンドウ」「ブラウザペインの下端」「ブラウザペインの右端」というように、デベロッパーツールの位置を選択できる。

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

スマートフォン表示を細かくカスタマイズする（その1）
　 （1）デバイスとして［Responsive］を選ぶと、エミュレートしたい画面の水平解像度をピクセル単位で指定できる。
　 （2）画面を表示する際の倍率を変更できる。
　 （3）デバイスの代表的な水平解像度をワンクリックで選択できる。真ん中から端に向かって「320px」「376px」「425px」「768px」「1024px」「1440px」「2560px」。
　 （4）もっと細かく設定を変更するには、このメニューボタンをクリックする。

▼

スマートフォン表示を細かくカスタマイズする（その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】初版公開。