スマートフォンサイトのプレビュー(画面表示)確認できるサービス

スマフォ画面表示

スマートフォンでホームページを閲覧する際

ブラウザや機種によって見え方が変わってきます。

作成したサイトの表示を確認するためにアップロードし、

実機でいちいち確認するのはかなり手間となります。

スマートフォンサイトを専門に作成している会社であれば

様々なスマートフォンの実機を取り揃えているかもしれないですが

フリーランスの方や規模の大きくない製作会社、

スマホサイトの案件が少ない会社などは揃えることが難しいと思われます。


  1. Web上で様々なデバイスのサイズ(画面表示)確認ができるScreenfly
  2. オフラインでスマートフォンのサイズ(画面表示)確認ができるMobilizer
  3. ブラウザーで確認できるWindow Resizer

Web上で様々なデバイスのサイズ(画面表示)確認ができるScreenfly

実機が揃えられない方や会社に優しいサービスとして

quirktools.comのScreenflyがあります。

入力フォームにURLを入力するだけでPC、スマホ、タブレットの

様々な機種の解像度に合わせてプレビューできるホームページです。

Screenfly

Screenfly

確認できるPCサイズ

・1024*600
・1024*768
・1280*800
・1366*768
・1440*900
・1600*900
・1680*1050
・1920*1080
・1920*1200

PC画面サイズ

PC画面サイズ

確認できるタブレットサイズ

・Kindle Fire HD7 533*853
・Kindle Fire 600*800
・Samsung Galaxy Tab 600*1024
・Google Nexus7 603*966
・Apple ipad 1~3/Mini 768*1024
・Kindle Fire HD8.9 800*1280

タブレットサイズ

タブレットサイズ

確認できるスマートフォンサイズ

・Motorola RAXR V3m 176*220
・Motorola RAXR V8  240*320
・BlackBerry 8300  320*240
・Apple iPhone 3 & 4 320*480
・LG Optimus S 320*480
・Samsung Galaxy SⅡ 320*533
・Asus Galaxy7 320*533
・Apple iPhone5 320*568
・Samsung Galaxy S3/4 360*640

スマートフォンサイズ

スマートフォンサイズ

オフラインでスマートフォンのサイズ(画面表示)確認ができるMobilizer

サーバーにアップしてから確認する必要がない

オフラインで使えるシミュレーターMobilizer

mobilizer

mobilizer

ダウンロードをしてMobilizer.airをダブルクリックでインストールを開始します。

(※AdobeのAdobe Airが必要となります。)

mobilizer.air

mobilizer.air

起動させるとURLを入れるフォームがでてくるので確認したいサイトや

ローカルのファイルまでのルートを入力します。

mobilizer_form

mobilizer_form

プレビューがみたい機種をPhonesから選択します。

mobilizer_phones

mobilizer_phones

iPhone5を選択するとこのような感じでデスクトップにシミュレーターが出てきます。

シュミレーター

シュミレーター

私のPCでの環境下ではとても重くて使えなかったのですが色々なサイトやブログで紹介されており、

評価も悪くないようなので一応載せておきました。

ブラウザーで確認できるWindow Resizer

Google Chromeのプラグイン(拡張機能)で下記サイズにブラウザウィンドウが縮小・拡大されます。

Window Resizer

Window Resizer

スマホのサイズは320*480しかありませんが

PCのブラウザーですぐに確認できるので簡易的に使えて便利です。

以上3つのシュミレーターの紹介でした。


Pocket