スマートフォンの解像度と表示領域

UI・UXインターフェースiPhoneとデジタルピクセル

User Interface - 2023 - Three Philosophers

このページではiPhoneの歴代の画面解像度を紹介しています。少し専門的な話になりますが、例えばiPhone XSの画面解像度は2,436 x 1,125で、これは近年PCでシェア率の高いフルHD(1920 x 1080)よりも広い画面領域です。しかし実際にはスマートフォン向けのサイトやアプリ上で表示される情報量はPCほど多くありません。これにはデバイスピクセル比というものが関係しています。そのためこのページでは、まとめとしてppi(Pixel Per Inch)と画面サイズ(インチ)も紹介しています。

歴代iPhoneの解像度

2008年に発売されたiPhone3Gをはじめとして、歴代のiPhoneの解像度を見ていきましょう。

このように解像度(デバイスピクセル)は大きく向上しましたが、デザイン時のアプローチが基本的に変わらないのは、デバイスピクセル比が関係します。スマートフォンは写真などを綺麗に表示してくれる一方で、ブラウザ表示の視認性などを考慮して、端末側で(CSSピクセルによる)表示の調整が入りますので、iPhone SEやiPhone8など現在主流の端末で半分、iPhoneXSなどのハイエンド端末では3分の1の表示領域に最適化されます。

デザインの現場では

一昔前に750x1334というサイズをベースにしてPhotoshopでデザインしていたのは、(iPhone 6,7,8など)現在でもシェア率の高い端末で表示した際にアイコンなどの見た目を適正化、保持するためでした。
さらに遡るとデータサイズはおそらく640x960で、それはその当時の主流がiPhone4だったからです。
今まではデバイスピクセル比=2が主流でしたが、iPhoneX、XSなどデバイスピクセル比が3の機種の割合も非常に大きくなってきていますので、SVGイメージの導入など、画像の最適化が必須になりつつあります。他社への展開などデザインデータの様々な展開を考慮し、(写真を除いては)ベクターデータでの作成を心がけましょう。

近年あっという間に普及したFigmaやSketchなどのデザインソフトでは、それぞれのDP比で、割る2、割る3して、アートボード、フレームを配置するようになりました。iOSは375pxのデザインするケースが多いですね。

実際のサイズとピクセル密度

歴代iPhoneの画面サイズ(実寸)と1インチ(2.54センチ)あたりのピクセル数ppi(ピクセル・パー・インチ：pixel per inch)を見てみましょう。

XRを除いて、解像度に比例してピクセル密度も高くなります。端末が物理的に大きくなるだけではなく、画面の質も向上しているのは素晴らしいですね。現在も326ppiが主流ですが、plusとXの2種類のppi幅も把握しておくと良いと思います。iPhone3Gとここ最近の機種には3倍の差があり、丸ひとつ描画するにも見た目の違いは顕著です。SVG画像が台頭してきているのもそのためで、sketchやXDにはスケールファクターと呼ばれる@2x、@3xなどの画像書き出しオプションが用意されています。レイアウト自体に対するコーディングはさほど気にすることもないですが、画像に関しては解像度(resolution)ごとに複数用意しsrcsetなどで実装していきましょう。@2xまではボケ具合もそれなりでしたが、@3xの解像度では等倍のPngアイコンだと品質の低下が顕著になります。

AndroidとDP

グーグルのマテリアルガイドラインで示されるている、アンドロイド端末向けの単位はDP(density-independent pixels)です。dp解像度は前述のデバイスピクセル比を考慮した解像度と同じ感覚で捉えておけばよいと思いますが、ピクセルに換算した値は、端末により等倍のmdpiから0.75～４倍のレンジがあります。dp指定する際はその特性上4dp単位で行うのが通例となっているようです。

まとめ

いやぁ、世代別に見て行くと結構なバリエーションです。デベロッパーへの隷属性というか、デザインもエンジニアリングも、世代交代期には各所でそれなりのメンテナンスコストがかかります。
デザインにのみフォーカスしますと、例えばSan Franciscoというフォントなどは、今回取り上げた解像度の問題などと直面しながら磨き上げられていった結果としての美しさでもあると思います。多様化すればするほど、本質部分は洗練されていくのかもしれませんし、それが良いデザインの条件とも言えるでしょう。