ピクセル密度

ピクセル密度は、画面上の一定の物理領域へ詰め込まれたピクセル数です。通常は1インチあたりのピクセル数（PPI）で表し、ディスプレイ上の文字や画像の鮮明さに影響します。

Related workflow terms: Retinaスクリーンショット.

ピクセル密度と画面の鮮明さ

ピクセル密度によって、通常の距離から個々のピクセルを見分けられるかが変わります。古いデスクトップモニターに多い約100 PPIの低密度では、ピクセルを見分けやすく、文字の輪郭がぎざついて見える場合があります。200 PPI以上の高い密度ではピクセルが見分けにくくなり、文字や画像の細部を滑らかに表示できます。

Appleは、一般的な閲覧距離でピクセルを見分けにくい密度のディスプレイに「Retina」という名称を広めました。腕を伸ばした程度の距離で見るノートパソコンなら、目安は約200 PPIです。顔の近くで見るスマートフォンでは、約300 PPIに近くなります。現在の上位スマートフォンには400 PPIを超えるものもあり、一般的な距離では個々のピクセルを見分けにくくなっています。

見た目の差は明確です。220 PPIのノートパソコンでは、110 PPIの外部モニターより同じ文字が鮮明に見えます。曲線が滑らかになり、細い線をはっきり描き、小さな文字のアンチエイリアスによる乱れも抑えられます。

ピクセル密度がスクリーンショットに与える影響

スクリーンショットは、ディスプレイが描画した物理ピクセルを記録します。110 PPIの標準密度モニターでは、幅1,440ピクセルのビューポートから幅1,440ピクセルの画像ができます。220 PPIで2倍のRetinaディスプレイなら、同じビューポートから幅2,880ピクセルの画像ができます。縦横それぞれ2倍で、総ピクセル数は4倍です。

実際の作業にも影響します。高密度ディスプレイで撮った画像は縦横の寸法とファイルサイズが大きくなりますが、細部を多く含みます。この画像を論理サイズ、つまり1倍へ縮小して表示すると、表示領域に必要な数より多くのピクセルを持つため、非常に鮮明に見えます。

撮影元のディスプレイが異なっても出力寸法をそろえたい場合は、自動撮影ツールでホスト画面に関係なくデバイスピクセル比を指定できます。1倍のモニターと3倍のスマートフォンから撮影しても、比較しやすい結果へそろえられます。

デバイスピクセル比

デバイスピクセル比（DPR）は、ピクセル密度とソフトウェアが扱う寸法を結び付けます。1つの論理ピクセル、つまりCSSピクセルに何個の物理ピクセルが対応するかを表します。DPR 1では、1 CSSピクセルが1物理ピクセルです。DPR 2では、1 CSSピクセルが2×2、合計4個の物理ピクセルになります。

OSとブラウザはDPRを使って画面を拡大・縮小します。幅100 CSSピクセルのボタンは、2倍ディスプレイでは幅200物理ピクセルで描画されます。利用者に見える論理的な大きさは同じですが、細部は2倍になります。

スクリーンショットでは、DPRが出力寸法を決めます。鮮明さを優先するマーケティング素材でも、ファイルサイズを抑えたいドキュメントでも、目的の解像度に合うDPRを把握する必要があります。

異なる端末から画像を集めた時点で、ピクセル密度の違いが問題になります。1倍の外部モニター、Retina MacBook、モバイルエミュレーションを混ぜると、DPRを意図してそろえない限り、出力寸法がばらつきます。

よくある失敗

• ピクセル密度とDPIを混同する： PPI（pixels per inch）は画面、DPI（dots per inch）はプリンターを表します。測る対象が異なります。「300 DPIのスクリーンショット」という言い方では実際の画面品質が分かりません。重要なのはピクセル寸法と、撮影したディスプレイのPPIです
• すべてのスクリーンショットが同じ解像度だと思う： 同じWebページでも、1倍モニターと3倍のスマートフォンでは画像寸法が大きく変わります。異なる端末の画像を比較または一括処理するときは、DPRを考慮してください
• 目的なく縮小する： 2倍の画像を1倍の寸法へ縮小すると、細部の半分を捨てます。Retina向けWebや印刷など、高解像度を使える出力先なら元の解像度を保ちます
• ファイルサイズへの影響を無視する： 3倍のスクリーンショットには、1倍の画像の9倍のピクセルがあります。圧縮しなければ、ファイルもそれに応じて大きくなります。撮影後に用途に合う画像の最適化を行い、画質と容量を調整します