iPhone 6/6 Plusの画像製作はどうすればいいのか

4.7インチのiPhone 6のディスプレイの解像度は1,334×750ピクセル、5.5インチのiPhone 6 Plusの解像度は1,920×1,080ピクセルになることが発表されましたが、アプリやWEB開発での画像制作はどうすればいいのか、ちょっと調べてみました！

iPhone 4〜5sまでは基本的にはiPhone 3GS以前の解像度である480×320ピクセルをベースにピクセルバイピクセルの整数倍された画像（@2x）が使用されていきました。

つまり、iPhone 3GSで50×50ピクセルの画像があったらRetinaディスプレイが採用されたiPhone 4以降のモデルのために100×100ピクセルの画像を準備する必要があるということです。

iPhone 5s以前の画面解像度の関係

iPhoneの解像度の関係性はこんな感じでiPhone 3GS以前の画面解像度が全てのiPhoneにおいてベースとなっています。

	画面解像度	ベース解像度	ピクセル密度	整数倍
iPhone 3GS	480×320	480×320	162ppi	@1x
iPhone 4/4s	960×640	480×320	326ppi	@2x
iPhone 5/5s	1,136×640	568×320	326ppi	@2x

iPhone 6/6 Plusの画像は@2xと@3x

そして、iPhone 6のベースとなる解像度は667×375ピクセル、iPhone 6 Plusが726×414ピクセルになっているそうです。

iPhone 6に関しては画素密度が326ppiとiPhone 5s以前と同じ画素密度なので@2xの画像をそのままディスプレイサイズを拡大しただけでそのまま使えば大丈夫ということになります。

iPhone 6 Plusに関してはディスプレイ領域を拡大しつつ画素密度も401ppiと細かくなっているので今までに比べるとかなり複雑になるのかな..と思いきや、@2xの画像にプラス@3xを追加するだけで大丈夫なんだとか。

しかし、726×414ピクセルの@3xは「2208×1242ピクセル」になり1920×1080ピクセルではありませんがこれが大丈夫なのには理由があります。

	画面解像度	ベース解像度	ピクセル密度	整数倍
iPhone 6	1334×750	667×375	326ppi	@2x
iPhone 6 Plus	1920×1080	736×414	401ppi	@3x

iPhone 6 Plusはダウンスケーリング処理されている？

しかし、iPhone 6 Plusはソフトウェア処理により2208×1242ピクセルを1920×1080ピクセルにダウンスケーリングする機能が搭載されています。

So yes, confirmed: iPhone 6 Plus renders at 1242×2208 (414x736pt @3x) and downscales to the 1080p panel. No 1:1 pixels. RIP 1 pixel lines

— Steve T-S (@stroughtonsmith) 2014, 9月 9

これはMacBook Pro Retinaディスプレイに搭載されているスケーリング機能と同じで、MacBook Proは3,840×2,160ピクセルに対応した画像を1,920×1,080ピクセルにダウンスケーリングすることで15インチの2,880×1,800ピクセルという解像度のディスプレイで1,920×1,080ピクセルの画面表示が美しく表示させることを実現しています。

このスケーリング技術はそれなりのプロセッサ能力が必要となる技術ですが、64bitデュアルコアプロセッサA8チップだからこそ実現できたものなのかもしれません。

少し前までiPhone 6 Plusは2GBのRAMが搭載されるという情報があり、このスケーリング技術を使うためにメモリ容量が増えたのかなと思っていましたが、結果としてはiPhone 6 Plusも1GBのRAMとちょっと厳しいスペックとなっています。（実際に動作がモタツクことがあります）

過去の機種のiPhone 4s以前の960×640ピクセルに対応したアプリをiPhone 5/5sで起動すると上下に黒い幕ができる現象が出ていました。これはアスペクト比が変わってしまったことで発生していた現象でした。

今回の画面解像度の変化はアスペクト比は16:9のままでiOS 8では画面解像度の違いを違和感なく表示させることができるようになるとAppleは発表会で明らかにしており、実際に今までのアプリはそのまま拡大表示させています。

ただ拡大しているわけではなくアンチエイリアス処理をしているのでドットのシャギーは目立ちませんが若干ボケた表示になっています。

また、4インチの1,136×640ピクセルに最適化されたアプリを単純に拡大しているので文字だけが大きくて若干スマートではないかもしれません。この辺りはアプリがiPhone 6とiPhone 6 Plusにネイティブに対応することで解決することなので時間の問題なのかもしれません。

いずれにしろ、開発者は今まで通り16:9のアスペクトで@2xと@3xの画像を準備すればいいってことになります！

iPhone 6が1,334×750ピクセル、iPhone 6 Plusの1920×1020ピクセルの解像度になったことで、ついにiOSもAndroidのように解像度の断片化が始まったか…と心配しましたがとりあえずは拡大することでアプリの利用はできるのであんまり心配する必要はないのかもしれません。

追記：iPhone 6/6 Plusが発売したことで内容を大幅に見直しました。