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

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

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

Google拡張でFireMobileSimulatorを使う

Firefoxで人気のプラグイン「FireMobileSimulator」のGoogle Chrome版が便利です。これを入れるだけで、Google Chromeでスマホサイトの見え方を確認することができます。

表示を確認したい端末を選びます。

すると、こんな感じでスマホ向けのページを確認できます。

最近のスマートフォンだけでなく、ガラケーのシミュレートもできるため、絵文字や、文字数などのチェックに便利です。

端末は自由に追加可能。

そして、UserAgantも変更できる。UserAgantで自動的にPCかスマホか割り振りされるサイトの場合は、これを使うと便利ですね。

FireMobileSimulator for Google Chrome™

[sc name=”engeneer”]

SHARE

• Tweet

スキルアップにMENTA

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

YouTubeでも発信中！

PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表／個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました／福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 （詳しいプロフィール）