URLを入力するだけの簡単レスポンシブWebデザインチェックツール
現在ではブログやホームページなどのテンプレートはレスポンシブ対応が必須と言いますか、対応していないものは既に見向きもされないような状況ではないかと思います。しかし、テンプレートはレスポンシブ対応していても、自分で書いたコンテンツやウィジェット・プラグインで設置した部分に関しては何らかの対応が必要になる場合も少なくありません。
私自身が普段PCでしかサイトをブラウジングしない人なので、たまーにスマホから自分のサイトをチェックした時に「やだ、なにこれ…」という事は割と日常茶飯事だったりしますが（ちゃんと確認しなさいよ…）みなさんはそういった事の無いよう、URLを入力するだけで簡単にスマホ・タブレット・PCでの表示をまとめて確認出来るツールを紹介したいと思います。
レスポンシブWebデザインチェックツール
WordPress公式ディレクトリにも登録されている国産テーマ「LIQUID」でお馴染みのLIQUID DESIGNのサイト上にあるツールです。
http://lqd.jp/lab/rwd.htmlいつもお世話になっているのでひとつCMでも…お世話になってる割に結構ポカミス多くね？というのは言わない方向でお願いしたい。
チェックツールの概要
このレスポンシブWebデザインチェックツールでは以下の5つのデバイスを想定した表示が確認出来ます。
- iPhone5（320x568px）
- iPhone6（375x667px）
- iPhone6 Plus（414x736px）
- iPad Air（768x1024px）
- MacBook Air 11’（1366x768px）
なんで全部 Appleなのん…という感じはしますが、iPhone5・6にiPad・MacBookまで5つのデバイスを全て横並びにした状態でまとめて表示出来ます。私としては540px前後の解像度も欲しかったところですが、ブレークポイント的にはこのくらいあればOKなんでしょうかね？
チェックツールの利用方法
操作は非常に簡単なので説明は不要な気もしますが、申し訳程度にツールの使い方と各ボタンの説明をしておきます。尚、リストと画像の数字は対応させてますんでご参考までに。
- ① 確認したいページのURLをコピペ、または入力します。
- ② URLを入力したらRWD Checkをクリックします。
- ③ 入力したURLを別タブ（ウィンドウ）で開きます。
- ④ スマホやタブレットの枠的な何かの表示/非表示を切り替えます。
- ⑤ 画面の縦横表示を切り替えます。
- ⑥ デバイス表示画面を全体的に縮小/拡大します。（縮小 ⇔ 拡大）
こんな感じで各デバイスが表示されます。デバイスはそれぞれが独立しているので、上から下まで画面をスクロールしてチェック可能です。
横に回転するとこんな感じ。
うーん…ヘッダーと広告しか見えてないですが、さすがにこれは仕方ないですよね？Googleさん？
ブラウザの一番下まで行くとスクロールバーがあるので、それを移動させる事で他のデバイスを表示する事が出来ます。ズーム用のスライダーと併せて使いたいところですが、そっちは一番上にあるので微妙に使い勝手は悪いんですけどね？
あなたのサイトはレスポンシブ対応出来てますか？
FirefoxとChromeだけでもレイアウトが崩れたりして大変なのに、スマホやタブレットまで…とか考えると本当に頭の痛い話です。当サイトも一旦どこかでCSS関連のチェックを徹底的にやらないと…とは思っているものの、時間よりむしろ気力の方が必要な気がする今日この頃です。
そんなわけでこのレスポンシブWebデザインチェックツール、本当に便利なので知らなかったーという方はぜひお試しを。