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

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

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

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

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

スポンサーリンク

Google Chrome

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

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

1. URLを開く
2. Controlキー + Shiftキー + Iキーを同時押しする
3. 選択する端末を選ぶ
4. 縦向き・横向きを選ぶ
   (デフォルトでは縦向き)



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

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

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


PageSpeed Insights

PageSpeed Insights


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

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

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

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

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


Google ウェブマスターツール 

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

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

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

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

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


Fetch as Google の使い方

1. ダッシュボードで見たいサイトを選ぶ
2. 右サイドバーのクロールをクリック
3. Fetch as Google を選択

4. サイトかブログのURLを入力
5. 取得してレンダリングをクリック

6. パスの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の開発者ツール

1. URLを開く
2. F12キーを押す
3. エミュレーション(PCのアイコン)を選択
4. ブラウザプロファイルをWindows Phone にする
(ユーザーエージェントを切り替えるときは、ユーザーエージェント文字列を変更する)


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


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

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


Responsinator

Responsinator



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

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


次ページ

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

前ページ

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


スポンサーリンク