Skip to content →

Google Chromeをスマホシミュレーターに!スマホサイトのデザインを確認する方法!

スマホサイトを作る際、最終的には実機でデザインや動作の確認をしますが、その前のコーディングの段階では、いちいち実機で確認すると時間がかかって効率が悪いです。

そんな時に、素早く確認する方法として、まず一番いいのはMacの場合、Xcodeをインストールするというもの。そうするとiOSシミュレータがついてきます。ただし、これはWindowsでは使えない方法です。

Google拡張でFireMobileSimulatorを使う

Firefoxで人気のプラグイン「FireMobileSimulator」のGoogle Chrome版が便利です。これを入れるだけで、Google Chromeでスマホサイトの見え方を確認することができます。
firemobilesimulator
表示を確認したい端末を選びます。
firemobilesimulator
すると、こんな感じでスマホ向けのページを確認できます。
firemobilesimulator
最近のスマートフォンだけでなく、ガラケーのシミュレートもできるため、絵文字や、文字数などのチェックに便利です。

端末は自由に追加可能。
端末リスト
そして、UserAgantも変更できる。UserAgantで自動的にPCかスマホか割り振りされるサイトの場合は、これを使うと便利ですね。
端末編集
FireMobileSimulator for Google Chrome™

[sc name=”engeneer”]

SHARE

PROFILE

入江 慎吾
教える、学べるオンラインメンターサービスMENTAの代表 / 2-30個のサービスをつくり、M&Aで億単位の売却 / 受託開発20年→受託をやめサービス開発に専念→個人開発でつくったMENTAがヒット→ランサーズグループにジョイン / YouTubeで「サービスづくりで生きていく」配信中 / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営(詳しいプロフィール)

SUBSCRIBE

メールマガジンに登録いただけると、ブログの新着記事をお知らせいたします。(励みにもなります!)また、YouTubeチャンネルでも個人開発・サービスについての情報を発信中です。

SPONSOR

Published in デザイン 開発奮闘記