URLを入力するだけの簡単レスポンシブWebデザインチェックツール

RWD Check Tool レスポンシブWEBデザインチェックツール

現在ではブログやホームページなどのテンプレートはレスポンシブ対応が必須と言いますか、対応していないものは既に見向きもされないような状況ではないかと思います。しかし、テンプレートはレスポンシブ対応していても、自分で書いたコンテンツやウィジェット・プラグインで設置した部分に関しては何らかの対応が必要になる場合も少なくありません。

私自身が普段PCでしかサイトをブラウジングしない人なので、たまーにスマホから自分のサイトをチェックした時に「やだ、なにこれ…」という事は割と日常茶飯事だったりしますが(ちゃんと確認しなさいよ…)みなさんはそういった事の無いよう、URLを入力するだけで簡単にスマホ・タブレット・PCでの表示をまとめて確認出来るツールを紹介したいと思います。

スポンサーリンク

レスポンシブWebデザインチェックツール

WordPress公式ディレクトリにも登録されている国産テーマ「LIQUID」でお馴染みのLIQUID DESIGNのサイト上にあるツールです。

いつもお世話になっているのでひとつCMでも…お世話になってる割に結構ポカミス多くね?というのは言わない方向でお願いしたい。

スポンサーリンク
WordPress公式ディレクトリのLIQUIDとは別物と言っていいほど機能が充実してます。プロが選ぶWordPressテーマ!LIQUID PRESS

チェックツールの概要

このレスポンシブWebデザインチェックツールでは以下の5つのデバイスを想定した表示が確認出来ます。

  • iPhone5(320x568px)
  • iPhone6(375x667px)
  • iPhone6 Plus(414x736px)
  • iPad Air(768x1024px)
  • MacBook Air 11’(1366x768px)

なんで全部 Appleなのん…という感じはしますが、iPhone5・6にiPad・MacBookまで5つのデバイスを全て横並びにした状態でまとめて表示出来ます。私としては540px前後の解像度も欲しかったところですが、ブレークポイント的にはこのくらいあればOKなんでしょうかね?

メディアクエリで表示を切り分けているだけだと思われるので、UA(ユーザーエージェント)でPCとモバイルの振り分けを行っているような場合、当ツールでは確認出来ない可能性が…(未確認)

チェックツールの利用方法

操作は非常に簡単なので説明は不要な気もしますが、申し訳程度にツールの使い方と各ボタンの説明をしておきます。尚、リストと画像の数字は対応させてますんでご参考までに。

RWD Check Tool レスポンシブWEBデザインチェックツール 機能説明

  • ① 確認したいページのURLをコピペ、または入力します。
  • ② URLを入力したらRWD Checkをクリックします。
  • ③ 入力したURLを別タブ(ウィンドウ)で開きます。
  • ④ スマホやタブレットの枠的な何かの表示/非表示を切り替えます。
  • ⑤ 画面の縦横表示を切り替えます。
  • ⑥ デバイス表示画面を全体的に縮小/拡大します。(縮小 ⇔ 拡大)
RWDはResponsive Web Designの略です。

こんな感じで各デバイスが表示されます。デバイスはそれぞれが独立しているので、上から下まで画面をスクロールしてチェック可能です。

RWD Check Tool レスポンシブWEBデザインチェックツール

横に回転するとこんな感じ。

RWD Check Tool レスポンシブWEBデザインチェックツール 画面の横表示

うーん…ヘッダーと広告しか見えてないですが、さすがにこれは仕方ないですよね?Googleさん?

ブラウザの一番下まで行くとスクロールバーがあるので、それを移動させる事で他のデバイスを表示する事が出来ます。ズーム用のスライダーと併せて使いたいところですが、そっちは一番上にあるので微妙に使い勝手は悪いんですけどね?

RWD Check Tool レスポンシブWEBデザインチェックツール 一番下にスライダー

あなたのサイトはレスポンシブ対応出来てますか?

FirefoxとChromeだけでもレイアウトが崩れたりして大変なのに、スマホやタブレットまで…とか考えると本当に頭の痛い話です。当サイトも一旦どこかでCSS関連のチェックを徹底的にやらないと…とは思っているものの、時間よりむしろ気力の方が必要な気がする今日この頃です。

そんなわけでこのレスポンシブWebデザインチェックツール、本当に便利なので知らなかったーという方はぜひお試しを。

スポンサーリンク