解像度とは？ウェブ（iOS・Android）における物理値・論理値の関係を調べてみた

本記事は、2019.03.24に個人ブログで公開したものを移行してきたものです

ソフトウェア、ハードウェアを関係なく、「解像度」というワードを様々なシーンで耳にする。そもそも「解像度」を調べたところ、かなり難しく複雑な感じになっていた。今回の記事では以下の2点を中心に調べたことをまとめてみた！

・「解像度」って何もの？
・「物理値」と「論理値」って何もの？

「解像度」とは？

解像度とは、ディスプレイなどが、画像などのオブジェクトをどれだけ細かく表現できるかを数値化したもの。「解像度」と一言で言っても表し方は2つある。

1つ目は、絶対解像度（総量表示）。pxという単位を使って表し、100px（幅） × 100px（高さ）のように表記される。pxが省略され、100 × 100という場合もある。

2つ目は、相対解像度（ピクセル密度表示） 。ppiという単位で表し、意味はpixels per inch。1インチ（2.54cm）の中にピクセルがいくつあるかで解像度を表す。

あと、ppiの計算方法が気になる方は、以下の記事が参考になる。三平方の定理がなつかしい…

ディスプレイのppiを計算する

これを踏まえて、Apple公式サイトのiPhoneのスペックを見てみる。「iPhone XS」の絶対解像度は、1,125 × 2,436、「iPhone XS Max」の絶対解像度は、1,242 × 2,688となっている。相対解像度は458ppiとなっている。ちなみに、300ppiを超えると、人間の目では細かすぎて認識できない領域らしい。

※ 以下、Appleの表記は「高さ×幅」だが、本記事では「幅×高さ」の順番で統一

ここで、こんな疑問を持つ、デザイナーやエンジニアがいるかもしれない。普段、私たちが目にする「iPhone XS」のサイズは375 × 812だったり、「iPhone XS Max」は414 × 896じゃなかったっけ？？と。

物理値と論理値

ここで2つの物理値と論理値という話しがでてくる。

もともと、物理値と論理値の関係（ピクセル比）は1:1で、その状態をドットバイドットと呼ぶ。

ただ、「iPhone 4（2010）」に採用された「Retina Display（Appleが高画素密度のディスプレイ）」頃からの流行りとして、ドットバイドットではなく、1:2になったり、「iPhone 6 Plus（2014）」からは1:3になっている。さらにややこしい。

ちなみに、Retina Display対応で2倍、3倍のサイズで作りましょう！っていうのはここからきている。

物理値
物理値とは、上記で言うApple公式サイトに掲載された1,125 × 2,436だったり、1,242 × 2,688という値のこと。ハードウェアが持っている値を表しているため「デバイスピクセル」と呼ばれることもある。

論理値
一方、論理値とは、デザイナーやエンジニアがよく目にする375 × 812だったり、414 × 896という値のことを指す。

「iPhone XS」のピクセル比は1:3、つまり3（高さ）×3（幅）つまり9つの物理ピクセルを1つの論理ピクセルとして扱う。この見かけの1ピクセルにするメリットは、小さいiPhoneに高画素密度なディスプレイを詰め込めること。そして、1インチあたりのピクセル数は、先述のppiで表記される。

ウェブやアプリに関わるデザイナーやエンジニアが普段から意識しているのは、論理値だった。それぞれに独自の呼び方があるので、そちらもメモしておく。

ウェブ：ピクセル（CSSピクセル）
ウェブだと、「ピクセル（CSSピクセル）」と呼び、CSS及びJavascriptなどが参照できる。

iOS：pt
iOSだと、CSSピクセルにあたるものが「ポイント」という単位で表される。ポイントだと、グラフィック（DTP）系の人だと、Illustratorで出てくるptと勘違いしそうだが、同じ名前だけど別物。

DTPのポイント（pt）とピクセル（px）ついては以下の記事が参考になるので興味のある方は読んでみてください。

【CSS】WEBにおける文字サイズのポイント指定とピクセル指定の違い ｜ KLUTCHE

Macが72ppiでWindowsが96ppiなのはなぜなのか？ - 中小企業むけWebコンサルティング会社【株式会社ラウンドナップ】Macが72ppiでWindowsが96ppiなのはなぜなのか？

Android：dp(dip)
Androidだと、Density-independent Pixel（密度非依存ピクセル）という呼ばれ、デバイスピクセルを何個かのグループに分け、それに応じて倍率をいい感じにしてくれるそう。

画面互換性の概要  |  Android Developers

dpに関しては、今回の記事をまとめるにあたり、はじめて知った単位で、Androidアプリ向けのデザインファイルとかどう作ってるのかな…。気になるところ。

まとめ

これまでたくさん用語が出てきたが、すべてを完結にまとめるとこんな感じ：

・解像度：画像などのオブジェクトをどれだけ細かく表現できるかを数値化
・絶対解像度：100px（幅） × 100px（高さ）と表記、単位はpx
・相対解像度：1インチ（2.54cm）の中にピクセルがいくつあるかを表し、単位はppi
・物理値：ハードウェアが持つ値のことで、デバイスピクセルとも呼ばれる・論理値：ソフトウェアでハードウェアが持つ値をピクセル比に応じて調整した値
・ピクセル比：物理値と論理値の比率、Retina Displayは1:2や1:3

うーーん、難しいので、この記事あってるのか心配になっているが、もし間違え等ありましたら、DMで優しくご教授いただけると幸いです…

〜 参考にしたサイト様たち 〜

・https://www.indetail.co.jp/blog/171208/
・https://parashuto.com/rriver/development/pixel-related-info-for-coping-with-retina-displays
・https://www.dotproof.jp/2014/09/11/iphone-6-ppi/
・https://aloerina01.github.io/blog/2016-12-27-1