論理ピクセルと物理ピクセル
CSSやデザインツールで使うピクセルは論理ピクセル（CSSピクセル）という抽象的な単位です。Retinaや高解像度ディスプレイでは、実際には1 CSSピクセルに対して4つ（2×2）または9つ（3×3）の物理ピクセルを使ってより鮮明な表示を実現しています。
デザイン制作時の基準解像度
FigmaやSketchなどのデザインツールでは1x（論理ピクセル）を基準に作業します。エクスポート時に2x（Retina）・3x（Super Retina）で書き出すことで高解像度デバイスでも鮮明に表示されます。モバイルデザインは375pxまたは390px幅を基準にすることが多く、この一覧の論理解像度がその根拠になります。
レスポンシブデザインのブレークポイント参考
一般的なCSSブレークポイントはモバイル375〜430px・タブレット768〜1024px・デスクトップ1280px以上です。この一覧の論理解像度と比較することで、実際のデバイス分布に基づいたブレークポイント設定の根拠を確認できます。
よくある質問
画像はどのサイズで書き出せばいいですか？
3xデバイス（iPhone 15 Pro・Galaxy S24 Ultraなど）に対応するには表示サイズの3倍で書き出す必要があります。HTMLのsrcset属性を使って1x・2x・3xを提供すると、ブラウザが画面のDPRに応じて最適な解像度を自動的に読み込みます。
PPIとDPIの違いは何ですか？
PPI（Pixels Per Inch）は画面のピクセル密度を表し、DPI（Dots Per Inch）はもともと印刷用語です。画面の解像度を表す場合はPPIが正確ですが、実務では混用されることもあります。