iframe対応サイト例:
※ セキュリティ上、iframe内ではフォーム送信・ポップアップは無効化されます。レイアウト確認用途でご利用ください。
デバイスを選択（横スクロール可）
URLを入力してプレビューを開始
URLを入力して「プレビュー」ボタンを押すと、選択したデバイス幅でページを表示します。
※ セキュリティ設定によりプレビューできないサイトもあります。自社サイトや制作中のサイトに最適です。
—
レスポンシブデザインとは？
レスポンシブデザインとは、スマートフォン・タブレット・PCなど異なる画面サイズのデバイスで、Webサイトが最適なレイアウトで表示される設計手法です。CSSの@mediaクエリを使って、画面幅に応じてレイアウト・フォントサイズ・余白を切り替えることで実現します。
主要ブレークポイント（目安）は以下の通りです：スマートフォン縦（〜767px）、タブレット（768〜1024px）、PCデスクトップ（1025px〜）。ただし、Googleの推奨は「コンテンツが折れるポイントに応じて柔軟に設定する」こと。特定の数値に縛られず、デザインに合わせて設定するのがベストプラクティスです。
2026年の主要デバイス解像度一覧
| カテゴリ | デバイス | 幅（px） | 高さ（px） | 備考 |
|---|---|---|---|---|
| スマートフォン | iPhone SE（第3世代） | 375 | 667 | 小型スマホの基準 |
| スマートフォン | iPhone 15 | 390 | 844 | 標準サイズ |
| スマートフォン | iPhone 15 Pro Max | 430 | 932 | 最大画面サイズ |
| スマートフォン | Galaxy S24 | 412 | 915 | Android代表 |
| タブレット | iPad Air（M2） | 820 | 1180 | 最も普及しているタブレット |
| タブレット | iPad Pro 13" | 1024 | 1366 | 大型タブレット |
| PC | ノートPC（1280） | 1280 | 800 | 最小PC基準 |
| PC | Full HD | 1920 | 1080 | デスクトップ標準 |
iframeプレビューが使えないサイトについて
本ツールはiframeを使ってWebページを埋め込み表示しています。しかし多くの本番Webサイトは X-Frame-Options: SAMEORIGIN/DENY または
Content-Security-Policy: frame-ancestors 'none'
というHTTPヘッダーを設定しており、外部サイトからのiframe埋め込みをブロックします。
- プレビューできるサイト: 自社制作サイト・開発中のローカルサーバー・ステージング環境・iframe許可設定済みのサイト
- プレビューできないサイト: Google・Amazon・Facebook・大手メディア等（セキュリティポリシーによりブロック）
- 確認方法: ブラウザのDevToolsで「Network」→ レスポンスヘッダーの
X-Frame-Optionsを確認
レスポンシブデザイン確認のベストプラクティス
- ブラウザのDevTools（F12）の「デバイスモード」— 最も精密。本ツールと組み合わせて使用
- 実機テスト — 最終確認は必ず実際のデバイスで。タッチ操作・フォント表示が異なる場合あり
- 本ツールの使いどころ — 制作中のサイトを複数デバイス幅で素早く確認。ブラウザを切り替えずに幅の違いを直感的に把握
- Lighthouse（Chrome拡張）でモバイルユーザビリティスコアを定期的にチェック