レスポンシブプレビュー
ブラウザのDevToolsを開かずに、スマートフォン・タブレット・デスクトップのサイズで任意のWebサイトをプレビューし、並べて比較できます。
Webサイトプレビュー
スマホ・タブレット・デスクトップを一目で比較
同じページを3つの幅で並べて表示できるため、サイズを切り替えることなくレイアウト崩れを確認できます。
スマートフォン390 x 844
タブレット768 x 1024
デスクトップ1440 x 900
使い方
レスポンシブプレビューツールは、選択したデバイスの幅と高さに合わせたiframe内にWebサイトを読み込み、画面に収まるように拡大縮小して表示します。これにより、ブラウザウィンドウのリサイズやDevToolsを開くことなく、スマートフォン・タブレット・デスクトップサイズでのレスポンシブデザインを確認できます。
- URLを入力してください
アドレスを入力して「プレビュー」をクリックするか、Enterキーを押してください。
- サイズを選択
デバイスのプリセットを選択するか、最大3,840 pxまでのカスタム幅と高さを設定してください。
- 比較
回転やデバイスフレームの切り替えを行うか、下にスクロールしてスマートフォン・タブレット・デスクトップをまとめて確認してください。
確認できることと確認できないこと
プレビューは選択したデバイスの論理CSSピクセルサイズでページを表示するため、レイアウトやブレークポイントの確認、およびCSSメディアクエリやsizes属性を使用するレスポンシブ画像の確認に正確です。
- デバイスピクセル比：iframeはRetinaディスプレイのより高い画素密度をシミュレートしないため、min-resolutionクエリによってのみ切り替わる画像は、実際のデバイスと完全に一致しない場合があります。
- タッチとホバー: マウス操作のブラウザタブであるため、ホバーのみのインタラクションはタッチスクリーンではなくデスクトップと同様に動作します。
- 埋め込みのブロック: X-Frame-Optionsまたはframe-ancestorsヘッダーを送信するサイトは、このツールを含むいかなるiframeでも読み込みを拒否します。これはサイト自身のセキュリティ設定であり、プレビューツールで上書きすることはできません。
ピクセルパーフェクトなテストのために
ブラウザ内蔵のデバイスエミュレーション（開発者ツールのデバイスツールバー）または実機を使ってください。このツールは複数の幅でレイアウトをすばやく確認するのに便利ですが、公開前の実機テストの代わりにはなりません。
よくある質問
ブラウザのDevToolsを使わずに異なる画面サイズでWebサイトをプレビューするにはどうすればよいですか？
サイトのURLを入力してプレビューをクリックしてください。次にデバイスプリセットからiPhone SE (375x667)、iPad (768x1024)、Desktop (1440x900)などを選択するか、カスタムの幅と高さを入力してください。サイトがそのビューポートに合わせた縮尺のiframe内に読み込まれます。回転をクリックすると縦向きと横向きを切り替えられます。
レスポンシブプレビューツールにはどのデバイスサイズが含まれていますか？
プリセットにはiPhone SE (375x667)、iPhone 14 (390x844)、iPad (768x1024)、iPad Pro (1024x1366)、MacBook (1280x800)、デスクトップ(1440x900)が含まれます。最大3,840 pxまでのカスタム幅と高さを入力し、「カスタムサイズを適用」をクリックすると、標準以外のブレークポイントもプレビューできます。
スマホ、タブレット、デスクトップを同時に比較できますか?
はい。メインプレビューの下にある比較セクションで、同じURLをスマホ、タブレット、デスクトップの幅で並べて表示できるため、サイズを1つずつ切り替えることなくレイアウト崩れを確認できます。
レスポンシブプレビューでウェブサイトが読み込まれないのはなぜですか?
多くのサイトはX-Frame-OptionsまたはContent-Security-Policy: frame-ancestors HTTPヘッダーによりiframe埋め込みをブロックしています。これらのヘッダーが送信されると、ブラウザはiframe内での表示を拒否します。これはサーバー側のセキュリティ対策であり、プレビューツールで回避することはできません。影響を受けるサイトには検索エンジン、SNS、銀行サイトなどが含まれます。
横画面でのレイアウトを確認するにはどうすればよいですか?
デバイスプリセット(例: 390x844のiPhone 14)を選択した後、「回転」ボタンをクリックしてください。これにより幅と高さが844x390に入れ替わり、横向きモードをシミュレートします。プレビュー上部に表示されるサイズもそれに合わせて更新されます。「回転」を再度クリックすると縦向きに戻ります。
iframeベースのレスポンシブプレビューの制限は何ですか?
プレビューは選択したビューポートの論理ピクセルサイズでサイトを表示しますが、デバイスの実際のdevice-pixel-ratioを再現するものではありません。高解像度画像やmin-resolutionを対象とするメディアクエリは、実機と同一に動作しない場合があります。ピクセル単位での正確なテストには、ブラウザのデバイスエミュレーションまたは実機を使用してください。