こんにちは、今や現代の生活になくてはならない存在であるスマートフォン。
その普及率は、普段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のデベロッパーツールを使用しても確認することができますが、どうしてもデバイス１つずつを選択しながらの確認作業となってしまいます。
その点、「mobile browser emulator」ではインストールするだけで、一瞬にして様々なデバイスで確認することができるので、作業の時間短縮に大きく貢献してくれます。
今後、WEB制作会社で働いている人も働いていない人も、色々なデバイスで確認することは非常に重要だと思います。
こういった便利なツールを利用して、今後もホームページやブログの運営をしてみてはいかがでしょうか？
最後までお読みいただきありがとうございました。