レスポンシブデザインの見え方を簡単にチェックできるシミュレーター【Responsinator】

Responsinator

ワードプレスなどでレスポンシブデザインのサイトを作ったら、iPhoneをはじめAndroidなど各種端末での見え方もチェックしておかなくてはいけません。

そのための便利なシミュレーターをご紹介します。

スポンサーリンク

Responsinator

レスポンシネーターと読むのでしょうか(^^;

一番使われているiPhone5をはじめ、iPhone6、iPhone6Plus、Android、iPadなどでのサイトの見え方がURLを入力するだけで順番に確認していけるのです。

> Responsinator はこちらから

Responsinatorの使い方

画面の左上にサイトのURLを入力するところがありますので、そこにチェックしたいサイトのURLを入力して【Go】ボタンをクリックするだけ。

responsinator_1

まず、iPhone5 の画面が出てきます。実際にスクロールバーを使って画面を下に見ていくこともできます。

実際の私のiPhone5の画面と比べると、スクロールバーがある分少しだけ幅が狭くなっているようですが、ほぼ同じです(^^

次はiPhone5を横にしたときの見え方。

responsinator_2

これがすぐチェックできるのは嬉しいです。

私はあまり画面を横にして見ることはないのですが、私の友人はすぐに横にする人でした(笑)

そしてiPhone6。

responsinator_3

こうやって、連続してチェックしていけるのは本当に便利です。いちいち設定を変えなくてもいいので、とても効率よくチェックできます。

そしてAndroid。

responsinator_4

Androidも4パターンくらいのシミュレーションが表示されますよ♪

そのあとはiPadの縦・横と続きます。

無料で使えるので、ぜひ使ってみてください(^^)

ちなみに・・・私のサイト、iPadでなんか変かも(^^;

みなかったことにしよう。

私が普段使うシミュレーターは、「Chromeデベロッパー・ツール」ですが、こちらは見た目がおしゃれなのと(笑)、メインの端末の見え方を一気に確認できるところがいいかな、と思います。

とりあえず主要な端末でのチェックはやっておこう

11月、12月とかなりアクセスの多かった私のサイトのアクセスを見ると、以下のような感じでした。

ga_mobile

ターゲットが若者だったので、モバイルでのアクセスは全体の約90%。上位を見ると、iPhoneが70%以上を占めていました。

もし自分のスマホがiPhone以外のものなら、こういったシミュレーターでiPhoneでの見え方をチェックするのは必須だ!

ということが言いたかったのでした(^^)

スポンサーリンク