画面解像度、PPI、ピクセル密度を解説
MacBookで端末情報を開くと、1512×982 @2.0xのように表示されます。パネル自体は3024×1964です。論理的な表示サイズとパネルの画素数を、それぞれ示している場合があります。この差が解像度、PPI、「Retina」に関する混乱の大半を説明します。
4つの数値、4つの問い
解像度 — パネルが物理的に持つ画素数。1920×1080(Full HD)、2560×1440(QHD)、3840×2160(4K)です。これは数であって品質ではありません。55インチのテレビと27インチのモニターが同じ解像度でも、近くからの見え方はまったく異なります。
PPI(1インチあたりのピクセル数) — 画素がどれだけ密に並ぶか。対角線上の画素数を対角インチで割ります。同じ3840×2160でも、27インチモニターでは163 PPI、55インチテレビでは80 PPIです。目が実際に経験する数値です。
視聴距離 — 同じ画素でも、離れるほど小さく見えます。450 PPIのスマートフォンと110 PPIのモニターを密度だけで比較しにくいのはこのためです。視野角あたりの画素数と、使う人の視力も関係します。
端末ピクセル比(DPR) — CSSピクセルとデバイスピクセルの比率です。@2.0xは2倍を示しますが、OSの拡大縮小やブラウザのズームが関わるため、いつもパネルの物理配列をそのまま表すとは限りません。
論理解像度と物理解像度が異なる理由
220 PPIでUIを1:1描画すると、全ボタンが極小になります。そこでOSは論理レイアウトを快適な大きさで描き、各論理ピクセルを物理ピクセルの2×2または3×3ブロックへ対応させます。ソフトウェアには幅1512の画面、パネルには3024が描かれます。論理単位では半分の大きさ、物理単位では2倍の密度です。「Retina」、Windowsの表示スケーリング、Androidのdp単位はすべてこの仕組みです。
1512×982 @2.0xは、論理キャンバス1512×982、各点を物理2×2画素で描く3024×1964パネルと読める場合があります。ただし、これがパネルの物理解像度に必ず一致するわけではありません。スクリーンショットが「大きすぎる」ことと、新しいノートPCでウェブ画像がぼけることは、この仕組みを反対側から見たものです。ウェブ開発者が2×画像を用意する理由でもあります。2×画面上の幅300ピクセル要素には物理600ピクセルがあり、1×素材は引き伸ばされます。
1.25×や1.5×の小数スケーリングは複雑です。論理ピクセルが物理格子に一致しないため、OSは高い解像度で描いてから縮小します。通常は問題ありませんが、細い文字がわずかに揺らぐ場合があります。Windowsモニターが微妙にぼけるなら、125%や150%かを確認してください。
どこまで鮮明なら十分か
個別画素を識別できなくなる密度という旧来の「Retina」目安は、一般的な視力で約60ピクセル/度です。実用上は次の程度です。
| 画面 | 一般的な距離 | 快適な密度 |
|---|---|---|
| スマートフォン | 25〜30 cm | 400+ PPI |
| ノートPC | 45〜55 cm | 200〜260 PPI |
| デスクトップモニター | 60〜75 cm | 110〜160 PPI(「Retina級」は220) |
| リビングのテレビ | 2〜3 m | 4Kで十分。8Kとの差はサイズや距離による |
密度が高くなるほど、追加の画素による違いは小さく感じられることがあります。一方で、描画する画素が増えると処理負荷も増えます。ベンチマークでは、画面サイズが比較に過度に影響しないよう、内部描画サイズに上限を設けています。
自分の画面を読む
解像度チェッカーは論理解像度、推定物理ピクセル、DPR、アスペクト比をライブ表示し、対角サイズを入力するとPPIを計算します。ホームページの詳しい端末情報はGPU、色深度、実測リフレッシュレートも表示します。新しい端末では2点を確認してください。
- 拡大率が意図した値か。 DPRが1.0でも、それだけで問題とは限りません。文字の大きさ、OSの設定、ブラウザのズームを合わせて確認します。
- 推奨解像度を使っているか。 拡大縮小や非ネイティブ入力は細線をぼかす場合があります。テストパターンで確認するときも、ブラウザの倍率やモアレの影響を考慮してください。
中古端末を選ぶときは、PPIだけでなくパネルの状態も重要です。高精細でも焼き付きやタッチの不具合がある画面では使いにくいことがあります。数値と実際の状態を合わせて判断しましょう。