こんにちは、今や現代の生活になくてはならない存在であるスマートフォン。
その普及率は、普段WEB制作会社として働きながら実感する日々です。

というのも、僕がWEB業界に入った当初、お客さんのアナリティクスの状況を見ても、業種にもよりますがパソコン7割、スマートフォンが2割、そのほか1割程度がタブレットという状態でした。
しかし、現在だとパソコンとスマートフォンの割合が半々だったり、スマートフォンがパソコンの割合を大幅に超えて逆転しているホームページが多々あります。

スポンサーリンク




WEB業界で働いているとスマホ確認は必須

今やWEB業界で働いている人にとって、しっかりと表示やユーザビリティを確認することが必須となってきているスマートフォン!

今回はそんなWEB業界で働いている僕が、会社のパソコンにインストールして常に使用しているChrome拡張機能「mobile browser emulator」をご紹介したいと思います。

「mobile browser emulator」とは?

「mobile browser emulator」とは、5つのスマートフォンと2つのタブレットのサイズで動作や表示を一度に確認できるGoogle Chromeの拡張機能です。

確認可能なスマートフォンサイズと機種

スマートフォンでは、以下の5つの表示状況と動作確認をすることが可能です。

  • 320×480(スタンダードなモバイル解像度)
  • 320×533(多くのSamsung、HTC、LG)
  • 320×568(iPhone5)
  • 360×640(Galaxy:S3,S4,S5、Nexus、Xperia:P,S,Z)
  • 375×667(iPhone6)

確認可能なタブレットサイズと機種

タブレットでは、以下の2つの表示状況と動作確認をすることが可能です。

  • 768×1024(iPad、iPad mini、Galaxy. Tab A,S2)
  • 800×1280(7、8、10.1Androidタブレット)

「mobile browser emulator」の使い方

利用するために、「mobile browser emulator」を以下からご使用のChromeブラウザへインストールします。

「mobile browser emulator」インストールはこちら

インストールが終わると、Chromeブラウザの右上に「m」の赤いマークが表示されます。

続いて確認したいサイトを表示させ、「m」のボタンをクリックすると、それぞれのサイズ表示が出てきますので、確認したいサイズをクリックします。
すると、クリックしたサイズの確認画面が別タブで表示されますので、そこで動作や表示の確認をすることが可能です。

全てのサイズを一度に確認したい場合

「mobile browser emulator」では、全てのサイズを同時に開き確認することが可能です。
「m」のボタンをクリックした後に、「Phones」や「Tablets」の青いボタンをダブルクリックすると、一度にそれぞれのデバイスの確認タブが開き、同時に確認することができます。

まとめ

いかがでしたでしょうか?
スマートフォンでの確認は、Chromeのデベロッパーツールを使用しても確認することができますが、どうしてもデバイス1つずつを選択しながらの確認作業となってしまいます。

その点、「mobile browser emulator」ではインストールするだけで、一瞬にして様々なデバイスで確認することができるので、作業の時間短縮に大きく貢献してくれます。
今後、WEB制作会社で働いている人も働いていない人も、色々なデバイスで確認することは非常に重要だと思います。

こういった便利なツールを利用して、今後もホームページやブログの運営をしてみてはいかがでしょうか?

最後までお読みいただきありがとうございました。

スポンサーリンク