遂に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 |
ちなみに、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×960,640×920(※) 960×640,960×600(※) |
最低１枚、最大５枚 |
| 4inch | 640×1136,640×1096(※) 1136×640,1136×600(※) |
最低１枚、最大５枚 |
| 4.7inch | 750×1334,1334×750 | 最低１枚、最大５枚(※1) |
| 5.5inch | 1242×2208,2208×1242 | 最低１枚、最大５枚(※2) |
この画像に関しては、アルファチャンネルなしで作成する必要があります。
(※)statusbarを含まない場合のサイズです。
(※1)iPhone6に対応している場合のみ、最低１枚必要です。
(※2)iPhone6 Plusに対応している場合のみ、最低１枚必要です。
まとめ
こうして見ると、@3xとして用意する数は、そんなに多くないんですが・・・。 従来の画像に加え、何を@3xとして用意する必要があるのか。を理解して作業に入らないと、必要ないサイズまで無駄に@3xで書き出したりして、無駄が増えます・・；参考
iOS Human Interface Guideline - Launch Images日本語版はまだ公開されていないので、残念ですが。
このへんの情報を参考にまとめました。