拡張機能不要!PC版Chromeでスマホ表示画面を確認する方法をご紹介!

拡張機能不要!PC版Chromeでスマホ表示画面を確認する方法をご紹介!

Webサイトのスマホ表示画面を確認したい場合に、エミュレーターなどを導入しなくてもGoogle Chromeがあればすぐにスマホ表示画面を確認することができます。この記事では、PC版Chromeでスマホ表示画面を確認する方法をご紹介しています。


目次[非表示]

  1. スマホ表示を確認したいときはGoogle Chromeを使おう!
  2. Chromeでサイトをスマホ表示する方法
  3. まとめ

スマホ表示を確認したいときはGoogle Chromeを使おう!

スマートフォンが普及している現代では、レスポンシブWebデザインでスマホビューに対応したWebサイトが増えてきています。

そのため、Webデザイナーや趣味でWebサイトを制作している人は作成したWebサイトをスマホ表示させた時に、どのように表示されているか気になりますよね。

Webサイトのスマホビューを確認するのに、手持ちのAndroidスマホやiPhoneで確認しても、スマートフォンによって解像度はかなり変わってきますし、タブレットなどのデバイスのことを考慮すると困ってしまいますよね。

エミュレーターなどを使って確認したくても、エミュレーターでは再現が困難だったり起動に時間がかかったりとかなりの手間がかかってしまうため大変です。

そこで便利なのが、Google Chromeのデベロッパーツール(開発者ツール)です。パソコンのGoogle Chromeブラウザで素早くスマホ表示に切り替えて、どのように表示されるのか確認することができますよ。デフォルトの機能なのでアドオンの導入などの準備が不要なので、すぐにチェックすることができます。

この記事では、Google ChromeのデベロッパーツールでWebサイトをスマホ表示する方法をご紹介していきます。

Chromeでサイトをスマホ表示する方法

スマホ表示にしたいWebサイトにアクセスして、ウィンドウ右上のメニューボタンをクリックして開き「その他のツール」にマウスカーソルを乗せる
それでは、Google Chromeのデベロッパーツールの使い方を説明します。

まずはスマホ表示にしたいWebサイトにアクセスして、ウィンドウ右上のメニューボタンをクリックして開き「その他のツール」にマウスカーソルを乗せましょう。
サブメニューが表示されるので、「デベロッパーツール」をクリック
サブメニューが表示されるので、「デベロッパーツール」をクリックしましょう。
ウィンドウの右側にデベロッパーツールが表示
ウィンドウの右側にデベロッパーツールが表示されます。

デベロッパーツールはショートカットキーが設定されており、「Ctrlキー+Shiftキー+Iキー」の同時押しや、F12キーを押すことでも開くことができます。
デベロッパーツールの右上にあるメニューボタンをクリックしてメニューを開き、「Dock side」のボタンから好きな表示に変更
デベロッパーツールを表示する位置を変えたい場合は、デベロッパーツールの右上にあるメニューボタンをクリックしてメニューを開き、「Dock side」のボタンから好きな表示に変更しましょう。ボタンは左から「別のウィンドウで表示」「左側表示」「下側表示」「右側表示」となっています。
デベロッパーツールの左上に表示されているスマートフォンのアイコン
それでは、Webサイトをスマホ表示にしてみましょう。

デベロッパーツールの左上に表示されているスマートフォンのアイコンをクリックすることでスマホビューにすることができます。ショートカットキーはデベロッパーツールがフォーカスされている状態で「Ctrlキー+Shiftキー+Mキー」の同時押しです。
Webサイト
表示サイズがスマートフォンのサイズに変わりますが、

これだけではWebサイトがスマホ表示に切り替わりません。スマホ表示にするには、ブラウザの再読み込みボタンをクリックして再読み込みを行いましょう。

F5キー(MacであればCommant + Rキー)を押すことでも再読み込みが行われます。
スマホ表示
Webページを再読み込みすることで、スマホ表示に切り替えることができました。

スマホ表示にすることで、スマートフォン操作と同じようにクリックでタップ・ドラッグでスワイプ操作が行えるようになります。
デベロッパーツールのスマートフォンアイコン
スマホ表示から通常の表示に戻すには、デベロッパーツールのスマートフォンアイコンをクリックすることで元に戻すことが出ます。

もしくはショートカットキーの「Ctrlキー+Shiftキー+Mキー」の同時押しを行いましょう。

特定のスマホの設定を使う

ウィンドウ上部の「Responsive」の部分をクリック
Chromeには特定のスマートフォンの設定がプリセットとして用意されており、ウィンドウ上部の「Responsive」の部分をクリックすることでメニューから選択することができます。選べるプリセットはGalaxy・Pixel・iPhone・iPadの各機種となっています。
他のスマートフォンのプリセットを選択
「Edit」をクリックすると、他のスマートフォンのプリセットを選択したり、自分でプリセットの項目をカスタムして作成することができますよ。

解像度や表示サイズを変更する

「Responsive」を選択していると、その右側に解像度の数値入力欄が表示
「Responsive」を選択していると、その右側に解像度の数値入力欄が表示されます。

横×縦の解像度を320px~2560pxから選択することが可能となっています。

また、そのすぐ下に表示されている区切り付きのバーは中央が「Mobile S-320px」サイズ・端に行くにつれてM・L・Tabletサイズへと変化し、クリックすることで指定した解像度へ設定することができます。

解像度欄の右側に表示されているのは拡大倍率で、解像度をいじらずにWebサイトを拡大・縮小表示させることができます。

スマホの向きを変更する

ブラウザ上部メニューの右側にあるアイコンをクリック
スマホの向きはデフォルトでは縦になっています。

向きを変更するには、ブラウザ上部メニューの右側にあるアイコンをクリックしましょう。これでスマホの向きが横に切り替わりますよ。再度クリックすることて向きを縦に戻すことができます。

スマホのフレームを表示させる

​​​​​​​ブラウザウィンドウ右上のメニューボタンをクリックして「Show device frame」をクリック
スマートフォンのプリセットを使用している時に、フレーム表示に対応しているプリセットであればスマートフォンのフレームを表示させることができます。

ブラウザウィンドウ右上のメニューボタンをクリックして「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サイトのスマホ表示を確認することができますよ。ぜひ試してみてくださいね。


関連記事