iPhone6 / 6Plus対応！申請時にも必要な＠3xに関するサイズまとめ！
遂にAppleからiPhone6とiPhone6 Plusが発売になりましたね。
画面が大きくなって、YouTubeやゲームをするときは捗りそうで有り難いことです！
しかし、手放しで喜んでいられない人もいのが、WEb開発やアプリ開発の業界で生きている我々。
新機種が出る度に高解像度化されいく端末に合わせ、仕様を作りなおしていくのも大変な作業です。
そして、この度iPhone6 Plusのデビューに合わせて現れたのが「@3x」！
iPhoneアプリを申請する際は、今までのサイズに加えて「@3x」へも対応した画像を用意しなくてはいけなくなったし、スマフォのサイトを用意する時は、「@3x」サイズも想定して作成する必要がでました。。
筆者も先日、iPhone6 Plus対応のアプリを作っていた際に「@3x」でバタバタしましたので、備忘録を兼ねて画像サイズ一覧を作成しようと思います。
そもそもiPhone6 / iPhone6 Plusのサイズ
これが、iPhone6とiPhone6 Plusの解像度です。デカイですね・・・
今回追加になったサイズに加え、作成しているアプリが、過去のiPhone端末をサポートしていたりすると、Splashscreenやiconなど含め、膨大なサイズバリエーションを作成することになります。
ちなみに、画面サイズの比較に関しては、コチラのサイトが参考になりました。英語ですが、図で示してくれているので分かりやすかったです。
iPhoneアプリ申請時に必要な「@3x」一覧
さて、本題ですね。
iPhone6 Plusの登場により、新たに@3xの画像も用意して置かなくてはいけない画像達はコチラ↓！
icon系
| サイズ(px) | iOS6 | iOS7 | iOS8 | ファイル名(例) | 用途 |
|---|---|---|---|---|---|
| 57×57 | ◯ | ☓ | ☓ | icon-57.png | iPhoneアイコン |
| 114×114 | ◯ | ☓ | ☓ | icon-57@2x.png | iPhoneアイコン |
| 120×120 | ☓ | ◯ | ☓ | icon-60@2x.png | iPhoneアイコン |
| 180×180 | ☓ | ☓ | ◯ | icon-60@3x.png | iPhoneアイコン |
| 72×72 | ◯ | ☓ | ☓ | icon-72.png | iPadアイコン |
| 144×144 | ◯ | ☓ | ☓ | icon-72@2x.png | iPadアイコン |
| 76×76 | ☓ | ◯ | ◯ | icon-76.png | iPadアイコン |
| 152×152 | ☓ | ◯ | ◯ | icon-76@2x.png | iPadアイコン |
| 29×29 | ◯ | ◯ | ◯ | icon-29.png | iPhone設定,iPhone Spotlight,iPad設定 |
| 58×58 | ◯ | ◯ | ◯ | icon-29@2x.png | iPhone設定,iPad設定 |
| 87×87 | ☓ | ☓ | ◯ | icon-29@3x.png | iPhone設定 |
| 80×80 | ☓ | ◯ | ☓ | icon-40@2x.png | iPhone Spotlight |
| 120×120 | ☓ | ☓ | ◯ | icon-40@3x.png | iPhone Spotlight |
なんでもかんでも@3x用意が必要な訳ではないんですね。
ちなみに、icon作成では最早おなじみとなった(？)PixelResortから早速iOS8版対応のテンプレートが公開されています！
ありがたく使わせて頂きます。
App Icon Template (PixelResort)
Splashscreen系
| 端末 | OS | サイズ(px) | ファイル名(仮) |
|---|---|---|---|
| 〜iPhone3GS | 〜iOS8 | W320×H480 | Default.png |
| iPhone4/4S | iOS4~ | W640×H960 | Default@2x.png |
| iPhone5/5S/5C | iOS6~ | W640×H1136 | Default-568h@2x.png |
| iPhone6 | iOS8~ | W750×H1334 | Default-667h@2x.png |
| iPhone6 Plus | iOS8~ | W1242×H2208 | Default-736@3x.png |
アプリ説明用の画像系
| 端末サイズ(inch) | サイズ(px) | 必要枚数 |
|---|---|---|
| 3.5inch | 640×920,620×960,960×600,960×640 | 最低１枚、最大５枚 |
| 4inch | 640×1096,640×1136,1136×600,1136×640 | 最低１枚、最大５枚 |
| 4.7inch | 750×1334,1334×750 | 最低１枚、最大５枚(※1) |
| 5.5inch | 1242×2208,2208×1242 | 最低１枚、最大５枚(※2) |
この画像に関しては、アルファチャンネルなしで作成する必要があります。
(※1)iPhone6に対応している場合のみ、最低１枚必要です。
(※2)iPhone6 Plusに対応している場合のみ、最低１枚必要です。
まとめ
こうして見ると、@3xとして用意する数は、そんなに多くないんですが・・・。
従来の画像に加え、何を@3xとして用意する必要があるのか。を理解して作業に入らないと、必要ないサイズまで無駄に@3xで書き出したりして、無駄が増えます・・；
参考
iOS Human Interface Guideline – Launch Images
日本語版はまだ公開されていないので、残念ですが。
このへんの情報を参考にまとめました。