前提知識

インチとポイント

紙で文字サイズなどを表現するときにはポイントという単位を使います。

1ポイント ＝ 1/72インチ

と定められています。 どちらも物理的に計測できる長さなので、単位の変換ができるわけです(メートルとインチの変換ができるように)。

ピクセルとは

デジタルの世界ではこの物理的な単位をそのまま扱うことは少し難しいです。なぜならウインドウのサイズと解像度の組み合わせが様々で、ウインドウによって描画できる1ドットのサイズ(描画できる最小の単位)が異なるからです。 そこで用意されたのが、論理的に最小単位を示すピクセルです。サイズは違えどウインドウで表現できる最小の1ドット = 1pxとして定義されたわけです。

つまり日頃CSS等で8px のように指定しているピクセルは、論理的な単位(論理ピクセル)なのです。

論理ピクセルと物理ピクセル

従来は「論理」の部分は気にしなくても問題ありませんでした。それが昨今では意識する必要が出たわけです。その理由は、ウインドウで表現できる最小の1ドット ≠ 1pxというケースが出てきたからです。より高解像度にするために1pxを画面上2×2ドットをつかって表現しよう(論理上の1px = 画面上では2px)という新しいルールのディスプレイが現れたわけです。

そして、論理1pxを画面上で何pxとして描画するかの比率をデバイスピクセル比といいます(デバイスピクセル比2のためのグラフィックデータを@2xと表現したりします)。

まとめると、

画面上での1px(物理ピクセル) ≠ CSS等で指定する1px(論理ピクセル)

ということです。これを言い換えると

物理解像度 ≠ 論理解像度

ということになります。

実際にiPhone4では物理解像度960×640なのに対して、論理解像度480×320であり、デバイスピクセル比は2です。画面上の960×640ものドットを使って、たった480×320のものを表現しようとしている、と考えると如何に高解像度かがイメージできるかもしれません。

ちなみにiPhone6Plusではデバイスピクセル比が3ですが、これはちょっと特殊な計算が必要です。 @3xの画像データを用意すると覚えておくだけでも対処はできますが、理論をわかりやすく図解している記事があったので紹介しておきます。
iPhone 6で改めて考える画面解像度とUI | dotproof

ピクセル密度(dpi / ppi)

さて、ここまで、物理ピクセルと論理ピクセルが異なることについて説明してきましたが、正確には画面のサイズだけでデバイスピクセル比が決まるわけではありません。例えばiPhone4とiPhone5は画面サイズが違うのにどちらもデバイスピクセル比が2です。この理由がピクセル密度にあります。

ピクセル密度とは、1インチを何ピクセルで表現するかを表します。単位はppi (pixel per inch)が字面的に適切な感じがしますが、dpi (dot per inch)とも表現されます。画面上ではドットとピクセルが同義なわけですね。 iPhone4とiPhone5は画面のサイズが違う = 画面のインチ数が違うわけですが、どちらもピクセル密度が約320dpiであるため、1粒のドットのサイズが違うだけで総ドット数は同じということになります。そのため画面サイズが違っていても同じデバイスピクセル比という状態になるわけです。

Androidでは必須の単位 dip

今度はAndroidのお話。Androidはデバイス毎に画面サイズや解像度が異なりますが(つまりピクセル密度が異なりますが)、それでも表示サイズを保つための仕組みがあります。 それが「端末に依存しないピクセル」という(またまた)論理上の単位です。dip(Device-Independent Pixel)と表現されます。「密度に依存しないピクセル」という意味でdip(Density-Independent Pixel)という場合もありますが今のところ区別は不要です。 ちなみに、dipをdpと表現したりもします。

Androidの世界では160dpiを基準としていて、160dpiの画面での1pxを1dipと定義します。

px = dip × (dpi / 160)

つまりこうなるわけです(このへんはかなり数学っぽくて懐かしい感じです😌)。
たとえば32dipは…

  • 160dpiの画面では　32px
  • 240dpiの画面では　48px

として表示されるということです。このように、開発者は画面毎のピクセル密度を気にせずサイズ指定をすることができるようになるのでした。ありがたや。

Android用の汎用サイズと汎用密度

デバイス非依存ピクセル(密度非依存ピクセル)のおかげで、開発者はピクセル密度を気にせずにすむようになりましたが、それでもiOSに比べて画面サイズが多様で大変なイメージは残りますよね。ということでAndroidでも画面サイズがある程度汎用化されています。イマドキは hdpi 〜 xxhdpi に該当する端末がかなり多くなってきていますね。iOSと同じで@2x、@3xがあれば事足りそうな感じです😌

以下、汎用密度の対応表。

汎用dpi 倍率 範囲
ldpi x0.75 〜120dpi
hdpi x1.5 〜240dpi
xhdpi x2 〜320dpi
xxhdpi x3 〜480dpi
xxxhdpi x4 〜640dpi

まとめ

  • 1ポイント ＝ 1/72インチ
  • プログラム上で指定するピクセルは論理ピクセル
  • 物理解像度 ≠ 論理解像度 の場合、デバイスピクセル比を意識する必要アリ
  • ピクセル密度(dpi / ppi)とは1インチを何ピクセルに分割するかを示すもの
  • dip = Device Independent Pixel (デバイス非依存ピクセル) はAndroid界では必須
  • デザインデータのやりとりなどでは、論理/物理ピクセルどちらで話しているかの認識をあわせる