iPhone6 plusが正式発表されたし@3x周りを調べてみた
※ iOS6以降で俯瞰して必要画像を見れるものを作りました
昨晩のApple Special EventでiPhone6やらApple Watchやらでましたね!
私は朝から@3xとかiPhone6 plusの独自UIやら独自ランドスケープビューでkillされまくってます。
あぁ…発売前から気が重い。。。
というわけで
“UIデザイナー向けのツール”は一旦置いといて
気が重い内容を調べるべくUIデザイナーが知りたい内容をまとめました。
(iOS8はGM版もでていないため、あくまで2014.09/10時点の情報です)
みんなで鬱まろうw
とりあえず全iOS端末をまとめてみてみる
iPhone, iPod touch (アスペクト比 16:9)
iPhone6 plus | iPhone6 | iPhone5(5s,5c), iPodtouch5 | |
---|---|---|---|
ディスプレイサイズ | 5.5" | 4.7" | 4" |
実ピクセル | 1920x1080 | 1334x750 | 1136x640 |
スクリーン座標 | 736x414 | 667x375 ※2 | 568x320 |
ppi | 401 | 326 | 326 |
@Nx | @3x ※1 | @2x | @2x |
正確なアスペクト比 | 16:9 | 16:8.9955 | 16:9.0141 |
※1
iPhone6 plusは@3xが割り当てられていますが、
実際には@2.46xぐらいなので@3xを縮小表示されていると思われる。
逆にきれいな@3xとなるppiは489ppi(163ppi*3x)となる。
※2
iPhone5のアイコン等のサイズはそのままで縦横が大きくなった感じ。
iPhone, iPod touch (アスペクト比 4:3)
iPhone4(4S), iPodtouch4 | iPhone3G(3GS), iPodtouch(1,2,3) | |
---|---|---|
ディスプレイサイズ | 3.5" | 3.5" |
実ピクセル | 960x640 | 480x320 |
スクリーン座標 | 480x320 | 480x320 |
ppi | 326 | 163 |
@Nx | @2x | 1 (@1x) |
iPad (アスペクト比 4:3)
iPad(3,4,Air) | iPad(1,2) | |
---|---|---|
ディスプレイサイズ | 9.7" | 9.7" |
実ピクセル | 2048x1536 | 1024x768 |
スクリーン座標 | 1024x768 | 1024x768 |
ppi | 264 | 132 |
@Nx | @2x | 1 (@1x) |
iPad mini (アスペクト比 4:3)
iPad mini2 | iPad mini1 | |
---|---|---|
ディスプレイサイズ | 7.9" | 7.9" |
実ピクセル | 2048x1536 | 1024x768 |
スクリーン座標 | 1024x768 | 1024x768 |
ppi | 326 | 163 |
@Nx | @2x | 1 (@1x) |
今回の発表で新たに必要になるであろう画像
- アプリアイコン ※3
- 画像素材 : @3x (基本的には全部)
- Launch Image : 2208×1242, 1334x750(px)
- iTunes Connect(申請用SS or 動画) : 2208×1242, 1334x750(px)
※3
アプリアイコンに関してちょっとどんなサイズ感なのかわからないので
心優しいエンジニアの方がimages.xcassetsとか見て教えてくれるはず…
いただきました!
で、ここでアレ?と思う人が出てくると思います。
“2208×1242(px)” ←このサイズってどっから出てきたの…??
@3x対応そのものは現状の“iPhone6 plus”対応になるので
1920x1080(px)じゃないの?とか私もそう思いました。
よくよく考えるとiPhone6 plusは上にも書いてあるとおり
@2.46xぐらいなんですよね。
スクリーン座標の736x414を正しい値として
それぞれを3倍(@3xなので)すると“2208×1242(px)”になります。
具体的にどういう工程でレンダリングされ表示されているかのフローは
iPhone3G(@1x) | iPhone5(@2x) | iPhone6(@2x) | iPhone6 Plus(@3x) | |
---|---|---|---|---|
1: スクリーン座標 | 480x320 | 568x320 | 667x375 | 736x414 |
2: レンダリングピクセル | 480x320 | 1136x640 | 1334x750 | 2208×1242 |
3: リサンプリング | — | されない | されない | ダウンサンプリング(レンダリングピクセル/1.15) |
4: 実際に表示されるピクセル(解像度) | 480x320 | 1136x640 | 1334x750 | 1920x1080 |
これでスッキリ!