プレビュー画面が真っ白になってウェブサイトが表示されません。なぜですか？

対象のウェブサイトがセキュリティ対策として「X-Frame-Options」や「Content-Security-Policy」を設定し、他サイトからのiframe埋め込みを許可していない場合、ブラウザの仕様により表示がブロックされます。

ローカル環境のURL（localhost）もプレビューできますか？

はい、可能です。お使いのPCでローカルサーバーが立ち上がっていれば、http://localhost:3000 などのURLを入力してテストすることができます。

📱

responsive previewer,

レスポンシブプレビューアー

URLを入力するだけで12種類のデバイス幅で
レスポンシブデザインをワンクリックで切り替えプレビュー。

📱

12種類のデバイス対応

iPhoneからPCまで幅広く網羅

🔄

スケール・向き変更

画面縮小と縦横切り替え可能

🔒️

サーバー送信なし

クライアントサイドのみで安全に描画

※表示されない場合、対象サイトが埋め込みを制限している可能性があります。

縮小スケール:

向き:

デバイス:

URLを入力してプレビューを開始してください

Cronジェネレーター

🧩

JSON→TypeScript変換

🔒

HTTPヘッダー確認

about,

レスポンシブプレビューアーの概要

レスポンシブプレビューアーは、1つのURLを入力するだけでスマートフォン、タブレット、デスクトップなど様々な画面サイズでの見え方をブラウザ上で素早く確認できる無料のWeb開発支援ツールです。手元に複数の実機がなくても、代表的なデバイスの解像度（iPhone、iPad、PCなど）でデザインの崩れやレイアウトの挙動をテストできます。

how to,

使い方

STEP 1

URLを入力

プレビューしたいウェブサイトのURLを入力ボックスに貼り付け、「プレビュー」ボタンをクリックします。

STEP 2

デバイスを選択

Mobile、Tablet、Desktopのタブを切り替え、確認したい具体的なデバイス（例：iPhone 15 Pro Max）を選択します。

STEP 3

向きと縮小率を調整

縦向き（Portrait）と横向き（Landscape）を切り替えたり、画面に収まりきらない場合はスケール（50%、75%など）を変更して全体を確認します。

glossary,

用語集

レスポンシブデザイン (Responsive Web Design): ユーザーの画面サイズやデバイスの種類に応じて、レイアウトやデザインを柔軟に調整・最適化するWeb制作手法です。1つのHTMLで多様なデバイスに対応できます。
ビューポート (Viewport): ブラウザ上でウェブページが表示される領域のことです。モバイル端末では <meta name="viewport" ...> タグを使って表示幅を制御します。
メディアクエリ (Media Queries): 画面の幅や高さ、解像度などの条件に応じて適用するCSSを切り替えるCSS3の機能です。

faq,

よくある質問

Q.プレビュー画面が真っ白になってウェブサイトが表示されません。なぜですか？: 対象のウェブサイトがセキュリティ対策として「X-Frame-Options」や「Content-Security-Policy」を設定し、他サイトからのiframe埋め込みを許可していない場合、ブラウザの仕様により表示がブロックされます。
Q.ローカル環境のURL（localhost）もプレビューできますか？: はい、可能です。お使いのPCでローカルサーバーが立ち上がっていれば、http://localhost:3000 などのURLを入力してテストすることができます。

use cases,

活用シーン

📱

ウェブサイト制作時の確認

新しく作成したウェブページがスマートフォンやPCでどう見えるか、レイアウト崩れがないかを制作途中で素早くテストできます。

🚀

公開前の最終チェック

ブログ記事やLP（ランディングページ）を公開する前に、想定したデザイン通りに表示されるかを実機なしで確認できます。

🤝

クライアントへのデザイン共有

クライアントに対して、実際のウェブサイトが各種デバイスでどのように見えるかを共有する際の確認ツールとして利用できます。