レスポンシブチェッカーは、1つのページを複数の画面幅で表示するツールです。オンラインのチェッカーは、フレームへの埋め込みを許可している公開ページではよく動きますが、localhost、ログイン後のページ、埋め込みを禁止するヘッダーを送るサイトの3種類では動きません。フレームが真っ白になる原因はほとんどの場合、最後のもので、10秒で確認できます。そうしたページには、自分のブラウザ内で動くツール、つまりChrome DevToolsのデバイスモードやモバイル表示用の拡張機能を使います。
ページごとのチェッカーの選び方
| 確認したいページ | オンラインチェッカー | 代わりに使えるもの |
|---|---|---|
| フレームを許可する公開ページ | 使える | どのオンラインツールでも可 |
| フレームを禁止するページ | 白いフレームまたはエラー | DevToolsのデバイスモード、モバイル表示の拡張機能 |
| ログイン後のステージングサイト | 多くはログイン画面になる | ログイン済みのタブでDevToolsまたは拡張機能 |
| localhost | 使えない。ツールのサーバーから届かない | DevToolsまたは拡張機能。実機で見るならモバイルでlocalhostをテストする方法を参照 |
オンラインチェッカーが白いフレームを表示する理由
オンラインチェッカーの多くは、ページをiframeの中に読み込みます。サイトはX-Frame-Optionsヘッダー、またはContent-Security-Policyのframe-ancestorsルールで、フレーム内での表示をブラウザに禁止できます。MDNによると、X-Frame-Options: DENYはあらゆるフレームでの表示を禁止し、SAMEORIGINは親フレームがすべてページと同一オリジンの場合だけ許可します。<meta>タグに書いても効果はなく、HTTPヘッダーとしてのみ機能します。これを適用するのはツールではなくブラウザなので、どのチェッカーも回避できません。
大手サイトの多くは、いずれかのヘッダーを送っています。2026年10月28日に確認した時点で、bbc.comはX-Frame-Options: SAMEORIGINを返していたため、他サイトのフレームには表示できません。これはサイト側の判断で、あなたのレイアウトとは無関係です。
サイトがフレームを許可しているか10秒で確認する
ターミナルで次を実行し、2つのヘッダーを探します。
curl -sI https://example.com | grep -iE "x-frame-options|content-security-policy"X-Frame-Options: DENYかSAMEORIGIN、またはframe-ancestorsを含むContent-Security-Policyが見つかれば、オンラインチェッカーではそのページを表示できません。どちらもなければ、埋め込みは許可されています。Chromeでは、DevToolsを開いてNetworkでページのリクエストを選び、レスポンスヘッダーを読む方法もあります。
自分のサイトの場合、チェッカーのためにこれらのヘッダーを弱めないでください。訪問者をクリックジャッキングから守っています。フレームを必要としないツールでテストしましょう。
フレームが禁止されているときは、ブラウザ内のツールを使う
上のプレビューもオンラインチェッカーの一種で、ページをフレームに入れるため同じ制限があります。サイトが埋め込みを禁止している場合、オンラインのモバイル表示ツールは空のフレームを出さずにその旨を伝え、解決策は拡張機能になります。モバイル表示の拡張機能やDevToolsのデバイスモードはタブそのものを変更するので、ヘッダーは関係なく、ログインやlocalhostも通常のタブと同じように使えます。DevToolsはChromeモバイルエミュレーターのガイドで、選び方はモバイルシミュレーター拡張機能とDevToolsの違いで解説しています。
レスポンシブチェッカーでは判断できないこと
幅だけを変えるチェッカーは、ブラウザウィンドウの端をドラッグするのと同じです。サーバーがスマホに別のページを返しているか、長い文章や200%ズームでレイアウトがどうなるか、Safariでどう描画されるかは分かりません。幅のスイープから自動スクリーンショットまでの手順は、レスポンシブデザインのテスト方法にまとめています。チェッカーは最初の確認として使い、承認の根拠にはしないでください。
よくある質問
レスポンシブチェッカーで自分のサイトが白いページになるのはなぜですか。
多くの場合、サイトがX-Frame-Optionsか、フレームを禁止するCSPのframe-ancestorsルールを送っているためです。上で示した方法でレスポンスヘッダーを確認してください。localhostやログイン後のページは別の理由で、ツールのサーバーから届かないために失敗します。
オンラインのレスポンシブチェッカーでlocalhostをテストできますか。
できません。オンラインツールは、自分のパソコンにしかないアドレスには届きません。ローカルサイトを開いているタブでChrome DevToolsまたはモバイル表示の拡張機能を使ってください。
レスポンシブチェッカーだけでサイトを承認してよいですか。
いけません。数種類の幅でのレイアウトが分かるだけです。本当の承認には、極端なコンテンツでのテストと実機での確認も必要で、レスポンシブテストのガイドで説明しています。
出典:MDN、X-Frame-Options(2026年10月28日に確認)、2026年10月28日にcurlで取得したbbc.comのレスポンスヘッダー。