【無料で使える】 レスポンシブデザインをチェックするためのツール

レスポンシブ・デザインで気になるのが、『あの端末では、このサイトはどんなふうに表示されるんだろう？ 』 と言うのがあります。

実際に実機を持っている場合、その実機で確認することもできますが、実機を持っていない場合、確認することが困難です。

また、スマートフォンやタブレット端末の場合、その実機以外のサイズも機種もありますので、自分の手持ちの機種でしか確認ができないと言うことになります。

ですので、できれば実機なしでもレスポンシブの状態を確認できるシュミレーターやツールが欲しいところだったりします。

Google Chrome

画面サイズやタップやスクロールの感じなどがかなり忠実に再現されている。
メジャーどころの端末は、だいたいこれでカバーできると思う。

昔はやたらと選択できる端末が多く、なんとKindleまで含まれていたが、現在は相当に数が絞られた。

１．　URLを開く
２．　Controlキー ＋ Shiftキー ＋ Iキーを同時押しする
３．　選択する端末を選ぶ
４．　縦向き・横向きを選ぶ
　　　（デフォルトでは縦向き）

右上の三本線のアイコンをクリックした後、その他のツールを選択し、デベロッパーツールを選択することでも、ディベロッパーツールを起動させることができる。

レスポンシブを選択した場合 Responsive を選択した場合は、右・下・斜めを自由に広げたり狭めたりできる。
これでスタイルの指定に抜けがあるか確認できる。

iPadはサイズが自動で縮小表示されるので、ボケて表示される。
100%で表示する場合は、％の指定を 『 100％ 』 にする。

PageSpeed Insights

PageSpeed Insights

Googleの提供しているスマホ・PC端末向けチェックサービス。

ユーザビリティの問題があるかどうか、表示速度を遅くしている何かしらの要因があるかどうかなど、あれやこれやチェックしてくれる。
スマホだけでなく、PC向けのチェックも同時にしてくれる。

CSSを複数読み込む場合、圧縮していない場合、Scriptを後から読み込んでいない場合などは、点数が著しく低くなる。

表示速度とユーザビリティ（タップしにくい要素があったり、枠からはみ出している要素があると注意される）のチェックはしてくれるが、スマホの横向きでの表示や、メインどころの端末でどう見えるか、タブレット端末ではどう表示されるかなどはわからない。

なので、Chromeでメインどころの端末でのチェックを、PageSpeed Insightsでページ表示を軽くするための作業を行うと良いと思う。

Google ウェブマスターツール　

検索ワード、インデックスの状況、リンク元などなど、サイトやブログの管理人のための便利ツールを利用できるGoogleのサービス。

この中の Fetch as Google では、お客にはどのように見えるのか、クローラーにはどのように見えるのかをチェックできる。

ただし、Fetch as Google は数回使うと、ロボットかどうかのめんどくさい確認をさせられるので、これはあまりおすすめじゃない。
（たまに使うぶんにはありだとは思う）

画像がよくわかりにくい場合、左下の丸い矢印マークをクリックすれば別の画像が表示される。
普通は３〜４枚程度の画像を選択すればOK。

でも、何度も何度もやっていると、１０枚近く選択させられるようになる。
不正解が増えても同じようになるので、不正解するかもしれない場合は、丸い矢印マークをクリックして、別の画像に切り替えた方が良い。

Fetch as Google の使い方

１．　ダッシュボードで見たいサイトを選ぶ
２．　右サイドバーのクロールをクリック
３．　Fetch as Google を選択

４．　サイトかブログのURLを入力
５．　取得してレンダリングをクリック

６．　パスのURLのリンクをクリック

ちなみに、robot.txt や htaccess ファイルなどで画像への直アクセスを禁止している場合、クローラーが画像への直アクセスができないため、Fetch as Google でも画像が表示されない。

モバイル フレンドリー テスト

モバイル フレンドリー テスト

Googleのモバイル用サイト判定チェックサービス。

スマホでも機種によってサイズは色々あるし、縦・横でも変わってくるので、モバイル フレンドリー テストでOKだったからOKと言うわけではない点が注意。

しかも、PageSpeed Insightsでそこそこしっかりチェックされるので、こちらは不要かもしれない。

User-Agent Switcher（Google Chrome のプラグイン）

このプラグインを入れるには、Chromeの拡張機能の追加で行う。
『 User-Agent Switcher 』 で検索すると出てくる。
多分大丈夫だとは思うが、一応、セキュリティの問題も考慮した方が良い。

【当てにならない星の数】 Chromeの拡張機能でマルウェアに感染した

端末によってテンプレートやCSSを切り替えているような場合は、これで確認できる。
ソースの確認はしやすい。
端末を切り替えると自動でページが更新される。

Internet Explorerの開発者ツール

１． URLを開く
２． F12キーを押す
３． エミュレーション（PCのアイコン）を選択
４． ブラウザプロファイルをWindows Phone にする
（ユーザーエージェントを切り替えるときは、ユーザーエージェント文字列を変更する）

エミュレーションの設定を変更すると、自動で更新される。
スマートフォンの選択は、何故か Windows Phone しかできない。

解像度 を カスタムに変更 し、幅と高さを指定すれば、スマホやiPadのサイズで見ることができる。

ただし、数値を自力で入力しないといけないため、結構めんどくさい。
Chromeのディベロッパーツールで確認した方が早くて便利。

Responsinator

Responsinator

端末やユーザーエージェントの偽装ができない。

なので、Wordpress などでユーザーエージェント（使用している端末）によって表示するテンプレートを変更したり、リダイレクトによる切り替えをしている場合は、正常に作動しているのかチェックできない。
（結論：Chromeで十分）

次ページ

【PC用】レスポンシブでレイアウトを組み替える【スマホ用】

前ページ

【レスポンシブで必須】 横並びと縦並びのスタイルをマスターする