ディスプレイの解像度単位 dpiとppi(ドット=ピクセル)と、ポイントについて

coding-computer-data-577585 

最近、スマートフォンが出る度に表示解像度が大きくなりましたといって仕様を目にすることが増えている。たとえば iPhone 8  Plusや iPhone 7 Plusの画面は1080×1920 pixelだ。

片やパソコンディスプレイはどうだろうか。あなたのオフィスにあるパソコンのモニター解像度はだどうだろう? 私がいまこれを書いて日々仕事に使ってるモニターはなんとiPhone Plus とまったく同じ1080×1920 pixelなんですよ。両者の画面の物理的なサイズの違いは一目瞭然。iPhone  Plusは手のひらサイズも15*10センチ弱の画面に収まっており、私の使っているモニターは幅が50センチx高さ30センチ近くもある。

 もちろん「高精密度ディスプレイ」と呼ばれるRetinaやほかのブランドを使ったスマホは画面の密度が高いので、小さいサイズの中にもたくさんのピクセルがぎゅっ入る、ということだ。そこまでは分かる。

そこまではたいていの人が理解していると思うけれど、ディスプレイの「サイズ」ってなんだっけ?と混乱してきたので、少しここで整理してみます。(と思ったら少しではなかった…)

まずはじめに1ピクセル=1ポイントがあった

元々パソコンのディスプレイは、1ピクセル=1ポイントという設定でスタートしました。たとえば、グラフィックソフトではpx=pt で操作ができると思います。フォトショでサイズ指定欄に「px」でなく「pt」と単位込みで入力しても何ら変化がありません。

印刷業界にいち早く採用されたMacはこういうふうに作られた。

ポイントはもともと、印刷業界でフォント(書体)の大きさを示す単位です。イギリスやフランスなどでもPointが使われているし、日本でも活字のサイズを「ポ」という略称で呼びます(活字はスケーラブルではないので、セットごとに36ポとか言われていたそうです)。Wikipediaにも詳しく書いてある。で、Macはポイントの換算と同じようにディスプレイの解像度を1ピクセル=1ポイントにして72dpiで設計しました。

ポイントはアクチャル(物理的な)ものさしですが、pixelはバーチャルなサイズなので、物理的なサイズは可変です。単に液晶の最小表示粒子ということですから。。ところが、 1ピクセル=1ポイントにしたことで「ディスプレイで見たままのものが印刷でも得られる」という常識(Macの売り文句)ができあがります。

ちなみに 1ポイントは一般的に「1/72インチ」で、1インチが25.4ミリであることから、0.3527777….ミリとなります。ですから、ディスプレイの解像度が72dpiであった最初期のころは、ディスプレイで100パーセント表示したAdobe Illustratorで書かれた1ピクセルは同様に0.3527777….ミリだったはずです。

しかし実際にはどんどんディスプレイの解像度は上がっていきます。最初1インチ四方に72ピクセルしか入らなかったところに100ピクセルとか150ピクセルとかになっていく。パソコン画面で100%表示したグラフィックが印刷物より小さかったのは、そのせいなんですよねえ…

 

ディスプレイは高解像度・高細密度になっていった

CRTディスプレイは90年代に低電力で省スペースの液晶ディスプレイに取って代わられますが、液晶ディスプレイになっても高解像度・高細密度化は進みます。この仕様を示すスペックがいまひとつ前面に出てくることってないですが、ドットピッチと言うようです。もしくは印刷などと同じくppiで示します。アップルはiPhoneの仕様に必ずppiを入れていますが、他社は必ずしも入れていないようです。

またここでもppi?dpi?という疑問が湧きますが、ピクセルパーインチの場合はppiでドットパーインチはdpi。印刷ではドットで…という解説も目にしますが、ドットピッチと呼んでいることもあるからドット=ピクセルでよいと私は考えています。

たとえば解像度が 72dpiのディスプレイなら、ドットピッチはまま0.3527777ミリあたりになるはずです。しかし、96 dpiくらいの細かさのディスプレイならば、0.264ミリくらいになるはずです。私のディスプレイ(すでに9年前の発売製品です)の取説を読んでみると、ドットピッチ0.2655mmとあるから、だいたいの解像度が96dpiなのでしょう。価格.comを見るといまだにデスクトップディスプレイの一般的な製品はドットピッチが0.26-0.28mmのようです。(画素ピッチ」と表記されている)スペックで絞り込み商品検索してみると、キヤノン4Kの業務用ディスプレイでは画素ピッチが0.132mmになる計算(表示可能サイズを表示解像度でわればよい)。だいたい一般の倍の192dpiくらいなんだなーと理解できた。ざっくり、いまのデスクトップの高密度ディスプレイなら200dpiくらいと覚えればよさそう。

スマートフォンの解像度

先に言ったようにiPhoneのRetinaなどは、一般的なPCディスプレイよりぐっと高精密度になってきています。アップルの製品紹介ではたとえばRetina HDディスプレイで解像度が326ppiもしくは401ppiとなっています。まさに上記のパソコンディスプレイの倍ですね。有機EL搭載のiPhone Xは458ppiとなっています。

Retinaは世代を追って段階的に高密度になっているので製品によって200〜400ppiくらいの差があるということか(開発用のRetinaの解像
度についてはqiitaのまとめが
あります。ここに物理的なピクセルでなくて開発用のポイントで…とありますが後述。)。iPhoneでなくても同価格帯のAndroidスマートフォンもほぼ同じような性能を備えていると思います。

ちなみにいまのところ世界最高クラスの高密度な液晶ディスプレイは651ppiくらいまでいっているそうと読んだけれども、ソニーのXperia XZ Premiumは4K対応で解像度は800ppiくらいあるとか?(XZでモデルチェンジして物理サイズもアップしたからわからないですがが)。商業印刷で使われるオフセット印刷の網点密度は175lpiと1インチの中に175本の線が印刷できる細かさで、それをデータで担保するには倍の350dpiがあればよいとされています。高級印刷などでは400lpiのものなどがあるということで解像度を単純計算すれば800dpiレベルの精密度と言えるかなと思います。600dpiはすでにオフセット印刷のなめらかさを超えている。。


論理的なドット単位とは?

そのように細かくなめらかな表現が可能になったスマートフォンのディスプレイですが、物理的なサイズとしてはやっぱり小さいわけです。だからもしも「私のiPhoneとPCディスプレイは同じ解像度だからWebサイトやグラフィックを同じピクセル数だけ表示することができる(表示できちゃう)」としても、 物理的な倍率としては小さい。幅高さ1/3で面積1/9くらいですからね。小さいと読めないんだよね。

これでスマホサイトとPCサイトなんかを同時に調整するための「レスポンシブサイト」や多様な端末に対応する「スマホアプリ」の開発にあたって、iPhone/iPadの場合は「ポイント」という論理的単位(でも実際は物理サイズを意識した換算数だと思う)を使っているんだそうで。一般の低解像度モバイルディスプレイは倍率1.0で1ポイント=1ピクセルが成り立つが、高解像度モバイルディスプレイでは一般に倍率2.0で1ポイント=2ピクセルなります。中心となるポイントが整数となるように線を描かないと線が細る…(iOSにおける描画と印刷ガイドの16ページあたり) 

ここでアップルがいきなり論理的な数値を「ポイント」にしていることが面白い。最初に紹介したように、もともとのポイントは「0.352mm」の物理的なサイズがあるので。解説では「このポイントという単位はこの空間を表す計算上の数値にすぎません」みたいな説明だけれど(they only make sense in this mathematical coordinate space.)、実際には72dpiの世界観と均衡を保つための換算値なのかなあと思ったらそうじゃない。ベースとなったのは初代iPhoneの1ポイント=1ピクセルを差し、160dpiのこととか。しかしポイントとピクセルを対応したとしても、端末のサイズによって物理サイズに落とし込むことはできないこともよくわかります。アップル製品は少ないけれどAndroid製品はめちゃくちゃ多いから同様なものとして開発者向けにdpという概念があるんですね。dp/dipの説明すごいわかりやすいけども。アップルはそれを「ポイント」と呼び、グーグルはそれを「独立したピクセル」と呼んだ、のでしょうか…。

このような「論理的なサイズの単位」を知ることはアプリだけでなくサイト制作をするときにも役立つと思われる。たとえばiPhone向けサイトでは、論理サイズ(ドット=ポイント)でなく、倍率をかけたピクセルサイズでデザインします。でも実際の物理ピクセル数ではオフィスレベルのPCのピクセルサイズを超えてしまっているから縮小した感じを想定して幅細縦長にデザインするわけですよね…。きっとビューポートとかメディアクエリでデザインを切り分けて…?と思うけれどより具体的な環境はもうちょっとわからないのでここでは割愛します。

画面の解像度が上がったとき、ベクターデータは常に再描画できるので最適な解像度でビジュアルを表示できます。一方でラスターデータはピクセルドットでできたものなので物理的なピクセルに併せてデザインしないと画像がぼやけるとか。さすがにアプリのパーツでなければそこまで考えなくていいんだと思うんですが、それにしても毎年解像度上がる、通信スピードも上がるとなっていくと、まだ環境(ベストな解像度)は変化するように思われますよね。まずPCのディスプレイはまだまだ高細密度が普及してないけどこれどうなるのとか(RetinaデスクトップはたしかiPhone 5くらいと同じ160dpiらしい)。

といったことをずっと昨日読んだりしていて疲れた。。