最近のデバイスに対応したブレイクポイントがすぐに分かる！ レスポンシブを設計する際に役立つツール -ScreenSize.net
Post on:2026年8月5日
sponsorsr
各デバイスのスクリーンサイズの一覧表、ブレイクポイントはいくつに設定すればいいのか、ブレイクポイントが機能しているかなど、レスポンシブを実装する際に役立つツールがまとめて利用できるScreenSize.netを紹介します。
各デバイスに対応した推奨ブレイクポイント、各デバイスで採用されているスクリーンサイズ・アスペクト比、異なるデバイスによる表示の比較、ブレイクポイントの検証、メディアクエリによるブレイクポイント、サイズを変更したときのチェック、レスポンシブ対応の画像や背景画像の計算機など、これらすべてが無料で利用できます。
ScreenSize.netは、最近の各デバイスに対応したレスポンシブを設計する際に役立つツールを提供しているサイトです。
デバイスは、スマホ・タブレット・ラップトップ・デスクトップ、iPhone, iPad, Androidをはじめ、かなりの種類が網羅されています。
ツールは主に、4つのカテゴリに分かれています。
- デバイス関連
- ブレイクポイント関連
- スクリーン関連
- 計算機関連
それらの中から特に便利なツールをいくつか紹介します。
まずはデバイス関連、スマホ・タブレット・ラップトップ・デスクトップにおける一般的なスクリーンサイズの一覧。
上記は推奨値の一覧ですが、スマホ・タブレット・ラップトップ・デスクトップの各デバイスに採用されているサイズ・名称・アスペクト比もまとめてられています。
Common Screen Resolutions: デスクトップ
異なるデバイスを実物大の輪郭線にして、重ね合わせたり、並べて表示したり、実際のサイズで表示したりして比較もできます。
Screen Size Comparison: iPhone 17 Pro vs 27" 4Kモニター
スマホの各デバイスごとの一覧もあります。
左上から、スマホのスクリーンサイズ一覧、iPhoneのスクリーンサイズ一覧、iPhoneのビューポート一覧、Galaxyのスクリーンサイズ一覧
ここまでは、デバイス関連のデータでした。続いては、ブレイクポイント関連。
まずは、レスポンシブのブレイクポイントのチェッカー。
現在のビューポートで使用されているレスポンシブブレイクポイントを確認し、TailwindとBootstrapのデフォルト設定を比較し、サイズ変更中にメディアクエリをコピーします。
一般的なレスポンシブ幅を参照し、現在のビューポートをテストし、モバイルファーストのメディアクエリをコピーして、実際のレイアウトデバッグに役立つツール。
実際のUIシナリオ、リアルタイムのビューポートステータス、コピー可能なQAチェックリストを使用して、レスポンシブレイアウトをより体系的にテストします。
また、各スクリーンサイズでコンポーネントがどのように表示されるかの確認もできます。
続いては、計算機関連。
レスポンシブ対応の画像・背景画像などのサイズやsrcsetのコードを生成するツール、PPI計算機、アスペクト比計算機が揃っています。
最後は、スクリーン関連。
使用しているスクリーンサイズ、解像度、ビューポートサイズ、アスペクト比をチェックできます。
sponsors
