PCのGoogleChromeでスマホ画面を表示！モバイルとの切り替え方法は？

スマホの普及が進んだことで、Webサイトの作りもモバイルファースト化が進み、PC上での表示は昔のままなのにスマホの表示画面は日々更新されていることもあります。なかにはInstagramのように、PCからのブラウザアクセスでは写真のアップロード機能すらない、というものまであり、PC上でのWebアクセスで不便を感じることも増えてきました。

また、Blogを作成したり、サイトを制作したり、ブラウザゲームを開発したりしている場合、スマホやタブレット上でどういう表示がされているのかを確認する必要が出てきます。とはいえ、そのためだけにさまざまなiPhone、iPad、Androidの各機種を揃えるのは現実的ではありません。

そこでおすすめするのが、PCのブラウザ上でのスマホの表示画面への切り替えです。実は、ブラウザはサイトにアクセスする際に「自分はMac版のSafariです」「私はiOSのSafariです」といった自己紹介（ユーザーエージェント）を伝えるのですが、これをスマホ用のものに偽ることが可能なため、PC上でもスマホ画面の表示をエミュレートできるのです。

スマホの表示画面への切り替えは、Internet Explorer 11（IE 11）、Microsoft Edge、Firefoxなどでも可能ですが、今回紹介するGoogle Chromeのデベロッパーツールを使っての画面切り替え方法が一番のおすすめです。

なお、冒頭に挙げたInstagramの場合は、拡張機能を使うことでより簡単かつ便利に利用できるようになるので、そちらの方法をおすすめします。以下のリンク先の記事を参考にしてください。

Google Chromeでのスマホ画面表示をおすすめする理由の一つは、スマホ画面のエミュレーションの完成度の高さです。上のChromeのスクリーンショットを見ればおわかりの通り、完全とまでは言えませんが、実際のスマホに非常に近い画面を表示してくれます。

Google Chromeをおすすめするもうひとつの理由が、特別な拡張機能を追加せずとも、標準状態のGoogle Chromeに組み込まれているデベロッパーツールを利用することで容易にスマホの画面をエミュレートできることです。

このふたつの理由に基づいて、これからGoogle Chromeによるスマホ画面の切り替え方法をお伝えします。

PC・Mac上のGoogle Chromeでサイトの画面をスマホ表示（モバイルデバイス表示）に切り替えるには、上にも記したようにデベロッパーツールを利用します。

Google Chromeでデベロッパーツールを開く前に、まずはスマホ表示したいサイトにアクセスします。今回はこの applica.info を例に採ります。

目的のサイトにGoogle Chromeでアクセスしたら、右上の「︙」アイコンをクリックしてプルダウンメニューを表示します。その中から「その他のツール」を選び、「デベロッパーツール」を選択します。

すると右側半分〜1/3にデベロッパーツール画面が表示されます。左側のサイトのグラフィックやテキストの要素をクリックすると、右のデベロッパーツール画面にその部分がハイライトで表示されますが、今回はその辺りにまでは踏み込みません。

デベロッパーツールを使うには、場合によっては右側だと不便な場合があります。デベロッパーツールの「︙」をクリックすると一番上に「Dock side」という項目がありますので、そこでデベロッパーツール画面の配置を変更できます。選択できるのは、「別ウインドウ」「左側」「下側」「右側」の4種類です。今回は試しに「下側」を選んでみます。

するとデベロッパーツールが下側に移動します。PC向けのサイト表示でデベロッパーツールを使うのであればこちらのほうが使いやすいでしょう。

デベロッパーツールを適当な位置に配置し終えたら、デベロッパーツールの左上にある「デバイスの切り替え」ボタンをクリックします。PCなら「Ctrl＋Shift＋M」、Macなら「Command＋Shift＋M」のキーボードショートカットも使用できます。

するとブラウザの画面の外枠がスマホ表示画面に切り替わります。しかし内容の表示は変わっていませんので、Google Chromeの「再読み込み」ボタンをクリックします。PCなら「F5」、Macなら「Command＋R」のキーボードショートカットも利用できます。

以上でGoogle Chromeの画面表示がスマホ画面表示に切り替わります。

逆に、スマホ画面表示からPC画面表示に切り替える際には「スマホ表示のアイコンを押してから再読み込み」で記したデベロッパーツールの左上にある「デバイスの切り替え」ボタンをクリックします。この切り替えボタンはトグルスイッチなので、一度押すたびに「スマホ表示」⇔「PC表示」と交互に切り替わります。

Google Chromeのデベロッパーツールでスマホ画面に切り替える基本の方法が理解できたところで、さらに細かい設定を変更する方法をお伝えします。

Google Chromeでモバイルデバイスの画面を表示できるとはいえ、スマホとタブレットでは解像度が違いますし、スマホの中、タブレットの中でもそれぞれに解像度は異なります。

しかしGoogle Chromeのデベロッパーツールでは、小はAtomやJelly Proといった小型スマホの432×240ピクセルから、大はiPad Pro 12.1インチの2,732×2,048ピクセルまで、それぞれの解像度に対応することが可能です。

Google Chromeでは、具体的なスマホの機種名を選んで解像度を変更できます。ただし、対応しているのはiPhone、iPad、Pixel 2、Galaxyなどの限られた機種のみです。解像度を変更するにはスマホ表示画面の上にある、デフォルトでは「Responsive」と表示されている機種名部分をクリックして、プルダウンメニューから目指す機種を選択します。

すると機種名表示が「iPhone X」に代わり、解像度もそれに合わせて変更されます。ただし、本来の解像度そのままではなく、そのときのGoogle Chromeの画面サイズに合わせた縮小率で表示される点に注意してください。

解像度は、機種名を「Responsive」にセットしておくと数値を自由に変更できます。

また、その下の切れ目の入ったバーを使うとワンクリックで設定されている解像度に変更できます。内側から320、375、425、768、1024、1440、2560ピクセルの各横解像度がプリセットされています。ここではタブレット用の768ピクセルを選択してみます。

すると「400×812ピクセル」だったモバイルデバイス画面が、「768×942ピクセル」のタブレット画面に切り替わりました。

解像度を変更すると、Google Chromeのモバイルデバイス表示画面にうまくスマホの画面が収まらなかったり、逆に小さくなりすぎて見づらく感じたりすることがあります。そんなときは画面の縮小率を変更するのがおすすめです。この場合、解像度表示の右にある縮小率表示部分をクリックしてプルダウンメニューから適当な解像度を選択します。

縮小率表示部分が「75％」に変更され、スマホ表示が小さくなりました。

ブラウザゲームなどを試したいときは、画面の向きを変えたくなります。そんなときにはモバイルデバイス表示画面の上の右の方にある「ローテート」ボタンをクリックします。

このボタンをクリックすることで、画面を「縦」⇔「横」と切り替えられます。

スマホ表示画面は、そのままでは範囲が見分けづらく、ちょっと画面が締まらないように見えてしまいます。そんなときには、スマホのフレームを一緒に表示させることで締まった画面にすることができます。

そのためには、モバイルデバイス表示画面の上の右端にある「︙」ボタンをクリックしてプルダウンメニューから「Show device frame」を選択します。

これでいっそう、スマホの画面らしくなります。

前節の「スマホのフレームを表示する」で触れた、モバイルデバイス表示画面の上の右端にある「︙」ボタンをクリックして現れる、プルダウンメニューのなかの項目を利用するとさらに細かい設定をカスタマイズできます。

• Show media queries……CSSのメディアクエリの設定をグラフィックで表示
• Show rulers……ピクセル単位の物差し（ルーラー）の表示
• Add device pixel ratio……Retinaディスプレイの倍率の指定
• Add device type……ユーザーエージェントを変更してモバイルデバイスかPCを指定
• Capture screenshot……モバイルデバイス画面のスクリーンショットの撮影。フレーム付きでスクリーンショットが撮れる
• Capture full size screenshot……画面外部分もスクロールした全画面のスクリーンショットの撮影

ここまで説明してきた通り、Google Chromeのデベロッパーツールによるスマホ画面は非常によくできていますが、パーフェクトというわけではありません。

Google Chromeのデベロッパーツールでスマホ表示になった場合、その中でクリックやスワイプなどの操作が可能です。たとえば適当な記事をクリックすれば、しっかりと目指す記事へ移行します。

下図のように、なんの問題もなくスマホ表示でリンク先の記事が表示されます。

しかし、PCなら「Ctrl＋クリック」、Macなら「Command＋クリック」を使って別タブでリンク先の記事を開くと、画面が崩れてしまい、改めてデベロッパーツールを使ってスマホ表示に設定し直す必要があります。

Google Chromeのスマホ表示のエミュレーションは非常に優秀ですが、それでも完全というわけにはいきません。細かい部分や、意外な部分で本物とは異なる表示をすることがあります。特にモバイルデバイス向けの開発を行っている場合は、Google Chromeのデベロッパーツールでは問題がなかったからと安心するのは危険です。

以上、Google Chromeでスマホ画面に切り替える方法をお伝えしました。このやり方は、本来はデベロッパーツールの名の通り、開発者がブラウザゲームや各種サイトのスマホやタブレット画面での表示され方を確認するための方法です。

しかし、モバイルファーストとなった現在では、この方法はモバイル通信を使用せずにスマホやタブレット対応のブラウザゲームを楽しんだり、タブレットを持っていなくてもタブレット対応のゲームに挑んだり、スマホ専用サイトへアクセスするための便利な手段となりました。このChromeを用いた方法で、PC上でスマホの楽しみを存分に味わってください。