iOSアプリ・Webシステム開発のイリテク

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

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

このエントリーをはてなブックマークに追加

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

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

SPONSOR

Google拡張でFireMobileSimulatorを使う

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

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

このエントリーをはてなブックマークに追加

記事を書いている人

入江 慎吾
イリテク(株)代表。Webシステム/iOSアプリの開発を行っています。月額固定の専属エンジニアサービスおよび、 自社でクラウド見積請求書サービス CLOUD PAPERを運用中!

イリテクの最新記事をフォロー

  • follow us in feedly
    RSSで最新記事を取得

関連記事

SPONSER

ITを通してビジネスを加速させます!

御社の顧問エンジニアとして、デザイン・システムに関わる様々なご相談をお受けしております。企画・提案だけでなく、実際に手を動かして開発まで行います。また、システムにとどまらず、デザイン案件もお受けできるのが強みです。
顧問エンジニアサービス
SPONSOR

NEW ENTRIES
FACEBOOK
Twitter
CATEGORY
開発したWebサービス
RECRUIT
Webサービスを一緒に開発して頂けるPHPエンジニア募集!週1回のリモート勤務!