iPhoneやAndroidの画面をパソコン上で確認できる！ Chromeの「デベロッパーモード」の便利すぎる機能
そう感じたことはないだろうか？
これはWebページで、スマートフォンとパソコンなど閲覧するデバイスごとに最適化して表示されるように設計されているからだ。
では、パソコン上でスマートフォン用のWebページを表示したい、
そのときは、どうすればよいだろうか？
実は、Google Chromeを使っているなら簡単なのだ。
今回は、その方法を紹介しよう。
●Chromeのデベロッパーモードとは？
現在のWebページの多くは、パソコン、スマートフォン、タブレットなど、デバイスごとに最適化されたデザインで表示されている。たとえば、パソコンなら横幅が広く、スマートフォンなら縦長のレイアウトで表示がされている。
つまり、同じWebページでも、パソコンで見るページとスマーフォンで見るページでは、デザインが異なっているということだ、もちろん、表示される情報は基本的に同じだが、個々の情報の位置やサイズなどのレイアウトは異なっているのである。
これは、Webページを制作に携わっているディレクターやデザイナーには当たり前のことだ。Webサイト制作では、さまざまなデバイスでの表示を確認してWebページを制作するのが、WebディレクターやWebデザイナーの重要な仕事になっている。
実は、パソコン版のGoogle Chromeには、こうした仕事をサポートする便利な機能が用意されている。それが、「デベロッパーツール」だ。
「テベロッパーツール」を使うと、iPhoneやGalaxyなどの機種を指定して、その機種でどのように表示されるのか？ パソコン上で確認ができるのだ。
「デベロッパーツール」は、その名前の通り、Webサイトを開発する人向けの機能だが、一般ユーザーでも「いま、パソコンで見ているページはiPhoneではどのように見えるのだろう」といったときに、簡単に表示を確認できるので、使い方を覚えておくと便利だ。
Google Chromeのデベロッパーツール。スマートフォンやタブレットでWebページがどのように表示されるかを確認できる。
●Chromeのデベロッパーツールの使い方
ここでは、実際にデベロッパーツールを利用して、iPhoneでの表示を確認する方法を説明しよう。
右上の［Google Chromeの設定］をクリックし、メニューで［その他のツール］の［デベロッパーツール］を選択する。
デベロッパーツールに切り替わる。左側にWebページ、右側にソースコードが表示される。表示を確認するだけなら、右側のソースコードは無視していい。
左側のツールバーで「Responsiv」と表示されているボタンをクリックしてメニューを開き、機種を選択する。ここでは［iPhone 6/7/8 Plus］を選択する。
ツールバーの更新ボタンをクリックするか、［F5］キーを押してページを更新する。機種を選択しただけでは表示が切り替わらないので要注意だ。
iPhone 6/7/8 Plusの表示に切り替わる。
デバイスのフレームも表示できる。左側のツールバー右端のボタンをクリックしてメニューを開き、［Show device frame］を選択する。
デバイスのフレームが表示される。なお、機種によってフレームが表示されない場合もある。
左側の表示では、リンクをクリックしてページを切り替えることもできるので、iPhoneでの操作を擬似的に再現することも可能だ。
デベロッパーツールを終了するには、ツールバー右端の［×］をクリックすればいい。これで、もとのパソコンでの表示に戻る。
開発者向けの機能なので難しく感じるかもしれないが、ほかのデバイスでの表示を確認したいときは、一般ユーザーにとっても重宝する機能だ。
パソコン上で、iPhoneやiPadと同じWebページを閲覧、確認できるのは、実に新鮮なので、Chromeユーザーは、ぜひ一度試してみてほしい。
井上健語（フリーランスライター）
