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

Contact Price

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

User Interface - 2018 - Three Philosophers

新しく発売されたiPhone XSの画面解像度は2,436 x 1,125で、これは近年PCでシェア率の高いフルHD(1920 x 1080)よりも広い画面領域です。しかし、iPhone向けのデザインはPCと同じ扱いにするのではなく、やはりスマートフォン向けのデザインを採用します。これはなぜでしょうか。

歴代iPhoneの解像度

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

機種(シリーズ)名 画面解像度
iPhone3G 320x480 1
iPhone4 640x960 2
iPhone5、SE 640x1136 2
iPhone 6、7、8 750x1334 2
iPhone XR 828x1792 2
iPhone 6 Plus、7 Plus、8 Plus 1080x1920 3
iPhone X、XS 1125x2436 3
iPhone XS Max 1242x2688 3

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

デザインの現場では

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

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

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

機種(シリーズ)名 画面サイズ ppi
iPhone3G 3.5インチ 163ppi
iPhone4 3.5インチ 326ppi
iPhone5、SE 4インチ 326ppi
iPhone 6、7、8 4.7インチ 326ppi
iPhone 6 Plus、7 Plus、8 Plus 5.5インチ 401ppi
iPhone X、XS 5.8インチ 458ppi
iPhone XR 6.1インチ 326ppi
iPhone XS Max 6.5インチ 458ppi

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~4倍のレンジがあります。dp指定する際はその特性上4dp単位で行うのが通例となっているようです。

まとめ

有名なAppleのサイトを見ましても、スクロールジャックなどの仕掛けもありますが、基本的にはシンプルに作成しようという意図が見え隠れしています。シンプルになれば、写真やフォントなど、構成要素のひとつひとつのクオリティが高く要求されてきますが、例えばSan Franciscoというフォント一つをとっても、今回取り上げた解像度の問題などと直面しながら磨き上げられていった結果の美しさなのだと思います。多様化すればするほど、本質部分は洗練されていきます。UIUXデザイナーとしては、対応に慌てふためくのではなく、デザインに打ち込みながら、様々なものが帰結してくる「1」という受け皿を大きくしていく過程を楽しんでいきましょう。