PCでスマホ、タブレット表示を確認しよう！レスポンシブチェックツール

以前の記事でも紹介していますが、近年WEBサイトをPCだけでなく、スマートフォンやタブレット端末から見るユーザーが増えてきています。

あなたのWEBサイトはレスポンシブWEBデザイン（RWD）が綺麗に表示されていますか？

いろんなサイズのデバイス（機種）でいちいちチェックするのは大変ですよね。

そこで簡単にスマートフォンやタブレット、PCでレスポンシブ（スマホ対応）イメージの表示を確認するツールを紹介したいと思います。

紹介するツールは、

• 表示イメージだけでも、iPhoneやiPad air、Macbook airにはめこんだイメージでも表示できる
• デバイスを横にした場合の表示もできる
• スライドするだけで表示サイズや気になるデバイスを見ることができる
• もちろん様々なデバイスのイメージ上をスワイプすることで下部まで見える

使い方は非常に簡単で、

• URLを貼り付け
• クリック

以上です。

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

メニューバーの使い方

1. 下記のURLへアクセスします。
   http://lqd.jp/lab/rwd.html
2. 上記のメニューバーイメージのようにもともと「https://lqd.jp/rwd/」と記載してある表記をレスポンシブ（スマホ対応）イメージで表示したいURLへ貼り替える。（イメージ①部分）
3. 「RWD Check」をクリック（イメージ②部分）

メニューバーイメージ説明

　①：表示させたいURLを入力欄

　②：①で入力したURLをレスポンシブ（スマホ対応）イメージの表示

　③：入力したURLのWEBページへリンク

　④：デバイスにはめ込み有無

　⑤：デバイスを横にした場合の表示

　⑥：スライドすることでWEB上の表示サイズを変更

対応機種（サイズ）一覧

iPhone5（320x568px）/iPhone6（375x667px）/iPhone6 Plus（414x736px）

iPad Air（768x1024px）

MacBook Air 11’（1366x768px）

※注意事項※
仕様などによってスマートフォンやタブレットでなければ見えないものもあります。

理由としては、

• サーバの設定（X-Frame-Options）で、iframe表示を許可していない場合は表示できません。
• ユーザーエージェントによる判定には対応していません。

などによるものです。

「サーバの設定（X-Frame-Options）で、iframe表示を許可していない場合」の解決方法は、Apacheもしくは.htaccessに

[text]
Header always append X-Frame-Options SAMEORIGIN
[/text]

という記述を削除すると解決できます。

【関連記事】

• 無料Wordpressプラグインでレスポンシブ（スマホ対応）のデメリットを解消！スマホ/PC表示切替できる「LIQUID RWD PLUS」他
• WordPressテーマの必須機能「SEO・レスポンシブ・Bootstrap・商用利用可」を備えた簡単高機能な国産テーマまとめ
• おしゃれなPinterest風。簡単カスタマイズのオウンドメディアマガジン向けWordPressテーマ「LIQUID SMART」
• 多言語化コーポレートサイト制作に最適！日本語対応のWordPressテーマ「LIQUID CORPORATE」
• おしゃれなポートフォリオが作れる！簡単にカスタマイズできる日本語対応WordPressテーマ「LIQUID PORTFOLIO」
• カスタマイズ簡単なオウンドメディアマガジン向け国産WordPressテーマ「LIQUID MAGAZINE」シーズン
• 無料でシンプル、カスタマイズ簡単な日本語対応WordPressテーマ「LIQUID LIGHT」