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」のキーボードショートカットも利用できます。