Responsive Preview

レスポンシブプレビューとは？

レスポンシブプレビューは、iframe 内で指定したビューポートサイズの Web ページを読み込み、スマートフォンやタブレット、ノート PC などの画面での表示を確認できるツールです。iPhone SE・iPhone 12/13・iPad・ノート PC・デスクトップ・フル HD などのプリセットに加え、幅と高さの手動指定にも対応しています。

主な機能

• iPhone、iPad、ノート PC、デスクトップ、フル HD などのデバイスプリセットを内蔵
• 幅と高さ（200〜4000px）を自由に指定可能
• プロトコルなしの URL には https:// を自動付与
• サイズ変更が即反映される iframe プレビュー
• サンプルとクリアのワンボタン操作

利用シーン / 注意点

リニューアルや連携確認の際に、ページがさまざまな画面サイズでどう見えるかを素早く確認するのに便利です。プレビューは対象サイトの設定に左右され、X-Frame-Options や CSP で埋め込みを禁止しているサイトは空白になります。これはサイト側の方針であり、本ツールの問題ではありません。

使い方

1. プレビューしたい URL を入力します
2. デバイスプリセットを選ぶか、幅と高さを手動入力します
3. プレビューをクリックすると、そのビューポートでページが読み込まれます