スマホ表示を確認したいときはGoogle Chromeを使おう！
スマートフォンが普及している現代では、レスポンシブWebデザインでスマホビューに対応したWebサイトが増えてきています。
そのため、Webデザイナーや趣味でWebサイトを制作している人は作成したWebサイトをスマホ表示させた時に、どのように表示されているか気になりますよね。
Webサイトのスマホビューを確認するのに、手持ちのAndroidスマホやiPhoneで確認しても、スマートフォンによって解像度はかなり変わってきますし、タブレットなどのデバイスのことを考慮すると困ってしまいますよね。
エミュレーターなどを使って確認したくても、エミュレーターでは再現が困難だったり起動に時間がかかったりとかなりの手間がかかってしまうため大変です。
そこで便利なのが、Google Chromeのデベロッパーツール（開発者ツール）です。パソコンのGoogle Chromeブラウザで素早くスマホ表示に切り替えて、どのように表示されるのか確認することができますよ。デフォルトの機能なのでアドオンの導入などの準備が不要なので、すぐにチェックすることができます。
この記事では、Google ChromeのデベロッパーツールでWebサイトをスマホ表示する方法をご紹介していきます。
Chromeでサイトをスマホ表示する方法
まずはスマホ表示にしたいWebサイトにアクセスして、ウィンドウ右上のメニューボタンをクリックして開き「その他のツール」にマウスカーソルを乗せましょう。
デベロッパーツールはショートカットキーが設定されており、「Ctrlキー+Shiftキー+Iキー」の同時押しや、F12キーを押すことでも開くことができます。
デベロッパーツールの左上に表示されているスマートフォンのアイコンをクリックすることでスマホビューにすることができます。ショートカットキーはデベロッパーツールがフォーカスされている状態で「Ctrlキー+Shiftキー+Mキー」の同時押しです。
これだけではWebサイトがスマホ表示に切り替わりません。スマホ表示にするには、ブラウザの再読み込みボタンをクリックして再読み込みを行いましょう。
F5キー（MacであればCommant + Rキー）を押すことでも再読み込みが行われます。
スマホ表示にすることで、スマートフォン操作と同じようにクリックでタップ・ドラッグでスワイプ操作が行えるようになります。
もしくはショートカットキーの「Ctrlキー+Shiftキー+Mキー」の同時押しを行いましょう。
特定のスマホの設定を使う
解像度や表示サイズを変更する
横×縦の解像度を320px～2560pxから選択することが可能となっています。
また、そのすぐ下に表示されている区切り付きのバーは中央が「Mobile S-320px」サイズ・端に行くにつれてM・L・Tabletサイズへと変化し、クリックすることで指定した解像度へ設定することができます。
解像度欄の右側に表示されているのは拡大倍率で、解像度をいじらずにWebサイトを拡大・縮小表示させることができます。
スマホの向きを変更する
向きを変更するには、ブラウザ上部メニューの右側にあるアイコンをクリックしましょう。これでスマホの向きが横に切り替わりますよ。再度クリックすることて向きを縦に戻すことができます。
スマホのフレームを表示させる
ブラウザウィンドウ右上のメニューボタンをクリックして「Show device frame」をクリックしましょう。
その他の設定
- Show media Queries：スタイルシートに書かれているメディアクエリの区切り線が表示される
- Show rulers：画面の左側に目盛りが表示される
- Add device pixel ratio：上部バーにDPRメニューを追加して、ハードウェア・スタイルシートのピクセルサイズ比率を設定できる
- Add device type：上部バーにMobile/Desktopメニューを追加して、PCとモバイルデバイス・スクリーンタッチ機能のオン・オフを選択できる
まとめ
拡張機能不要！PC版Chromeでスマホ表示画面を確認する方法をご紹介！いかがでしたしょうか？
Webデザイナーや趣味でWebサイトを作成している人の中には、Webサイトがスマートフォンでどのように表示されるか確認したい方もいらっしゃるかと思います。
Google Chromeのデベロッパーツールを使えば、ブラウザ単体でWebサイトのスマホ表示を確認することができますよ。ぜひ試してみてくださいね。