Chrome拡張機能「Mobile Layouter」の使い方と危険性について

自分のサイトやブログが、スマートフォンでどのように表示されているか確認したい場合があります。
Web制作に携わっている方なら、スマートフォンの機種によってレイアウト崩れが発生していないかチェックしておきたいですよね。

しかし、その為に世界中で発売されているスマートフォン全機種を揃えることは非現実的。

そこで、パソコンの画面上でスマートフォン画面表示を再現できるMobile Layouterの出番です！

今回は、Mobile Layouterの仕組みと使い方について詳しくご紹介します。

Mobile Layouterとは？

Mobile LayouterはGoogle Chromeのアドオン

Mobile Layouterは、パソコン用Webブラウザで圧倒的な世界トップシェアを誇る『Google Chrome』のアドオン・プログラムの一つです。アドオン・プログラムはGoogleのサードパーティーが開発するブラウザの拡張機能で、Webブラウザを自分好みにカスタマイズ可能。

広告をブロックしたり、タブをコントロールしたりと、さまざまな機能を持ったアドオン・プログラムがリリースされています。Google Chromeのアドオン・プログラムは、『Chrome ウェブストア』から入手できます。

≫ サイトの広告を表示させない方法

uBlock Originのchromeでの使い方！youtubeやブラウザの広告をブロック

Mobile Layouterで出来ること

『MobileLayouter』を使えば、Webデザイナーやオウンドブログライターが、スマートフォンを開かなくても、スマートフォンでの表示のされ方を確認できます。

スマートフォンでWebサイトを閲覧する人が爆発的に増えた現在では、パソコン用とスマートフォン用で2種類のレイアウトページを別々に製作するのが一般的です。パソコン用ページは、そのまま作業しているパソコンで確認できますが、スマートフォン用ページを確認するにはスマートフォンを開く必要があります。

さらに、iPhoneとAndroidではブラウザの種類・仕様が異なりますし、同じAndroidでもメーカー・機種により画面サイズが異なります。その為、あらゆるデバイスできちんと表示されるか確認するためには、全てのデバイスを物理的に手元に揃える必要があります。

しかし、世にある全てのスマートフォンを蒐集するのは非現実的。そこで、パソコン上で擬似的にさまざまなスマートフォンの表示状態を確認できる『MobileLayouter』があれば非常に便利なのです。

Mobile Layouterの危険性は？

Mobile Layouterを使用しても安全なのか、それとも危険なのか気になりますよね。安心してください！Mobile Layouterには違法性はないし、ウィルスにかかるようなことはありません。

単純にWebページの見え方（レイアウト）を変更するだけのプログラムです。詐欺罪や電子計算機損壊等業務妨害で逮捕される危険性もありませんので安心して使ってください。

Mobile Layouterのインストール

Google Chromeをインストール

まだパソコンにGoogle Chromeをインストールしていない方は、Google Chromeのインストールから始めましょう。

Google ChromeにMobileLayouterを追加

次に、『Chrome ウェブストア』を検索して開きます。

”ストアを検索”ボックスに、『mobilelayouter』と入力します。

候補が表示されるので、『mobilelayouter』をクリックします。

『MobileLayouter』のインストールウインドウが開くので、CHROMEに追加をクリックします。

確認ウインドウが展開するので、拡張機能を追加をクリックします。

無事に『MobileLayouter』がChromeに追加されました。

Chrome右上のChromeの設定ボタンから、その他のツール＞拡張機能をクリックすると、追加済のアドオンが確認できます。

拡張機能のなかに『MobileLayouter』が表示され、スイッチがオンになっているのが確認できます。

これでChromeで『MobileLayouter』を使用する準備が整いました。

MobileLayouterの使い方その1【スマートフォン用ブラウザ表示確認】

それではさっそく『MobileLayouter』でスマートフォンのブラウザ表示を確認してみましょう。

まずは、疑似スマートフォン画面で見てみたいWebサイトにアクセスします。

今回は、日本のWebデザインのスタンダードである『Yahoo!JAPAN』のトップページを見てみます。左右にカラムがバランスよく配置され、アクセスしたいページにスムーズに移動できるようデザインされています。広告も効果的な位置に配置されています。

Chrome画面右上に設置されたMLボタンをクリックして、『MobileLayouter』を起動します。

『MobileLayouter』が起動しました。画面上部の四角に囲まれた文字が、現在表示しているページレイアウト(UserAgentヘッダ）です。”default”は、パソコンにインストールされているChromeのことです。

その下に、”iPhone5s”や”nexus 4″など数機種が並んでいます。

まずは”iPhone 5s”をクリックしてみましょう。

すると、パソコンのブラウザ内にスマートフォン(iPhone 5s）の疑似画面が表示されます。画面横幅は、実際のiPhone5sと同じサイズで表示されています。

この操作は、タブごとに行えます。同じページをパソコン表示、iPhone表示、Android表示とタブを並べて表示のされ方を確認できるのです。

画面右上のタテヨコボタンを切り替えれば、スマートフォンの縦画面表示と横画面表示を切り替え可能。

画面左下のOptionボタンからは、さまざまな設定ができます。

Screenの設定で、backgroundに水色、borderに赤色を指定します。また、centeringもオンにしてみました。

設定変更後にページをリロードすると、このように表示されます。枠とセンタリングにより、実際のスマートフォン画面に近い感覚になりました。

さらに『MobileLayouter』では、画面左上の＋ボタンから擬似表示するデバイスを追加できます。

一覧からも機種を選べますし、検索もできます。こちらから機種を追加しておけば、メイン画面から機種を選択できるようになります。

Mobilelayouterでは、1400機種以上のデバイスを表示可能です。しかし、全ての機種をチェックするのは非現実的なので、人気機種をおさえたり、OSバージョンや画面サイズを網羅できるよう数機種をピックアップするとよいでしょう。

MobileLayouterの使い方その2【ゲーム】

MobileLayouterを使えば、パソコンでスマートフォンの画面サイズでブラウザゲームを楽しめます。

スマートフォン用のアプリは、スマートフォン用OS（iOSやAndroid）上でしか動きません。MobileLayouterは、擬似的にスマートフォン・ブラウザを再現しているだけで、OSはパソコン用(macOSやWindows）が動いているので、アプリ起動はできません。

MobileLayouterまとめ

Mobilelayouterは、パソコンでスマートフォンの画面表示レイアウトを確認できるとっても便利なChromeの拡張機能です。

Webサイトは、今後ますますスマートフォンからの閲覧比率が上昇していきます。スマートフォンで見ている人に向けて最適な表示レイアウトを提供するには、MobileLayouterでさまざまな機種での表示のされ方を確認したほうがよいでしょう。

MobileLayouterは、Webデザイナーやオウンドブログライターにとって欠かせないツールと言えます。Web制作に携わっているなら、今すぐChromeにMobileLayouterを追加しましょう。