iPhone6 / 6Plus対応！申請時にも必要な＠3xに関するサイズまとめ！

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/cb28e49362009bbc139e7a881ea5f0e4.png" alt="@3x" />

遂にAppleからiPhone6とiPhone6 Plusが発売になりましたね。
画面が大きくなって、YouTubeやゲームをするときは捗りそうで有り難いことです！


しかし、手放しで喜んでいられないのが、WEb開発やアプリ開発の業界で生きている我々。
新機種が出る度に高解像度になっていく端末に合わせ、仕様を作り直していくのも大変な作業です。

そして、この度iPhone6 Plusのデビューに合わせて現れたのが「@3x」！
iPhoneアプリを申請する際は、今までのサイズに加えて「@3x」へ対応した画像も用意しなくてはいけなくなったし。
スマフォのサイトを用意する時は、「@3x」サイズも想定して画像やアイコンを作成する必要が出ました。。

筆者も先日、iPhone6 Plus対応のアプリを作っていた際に「@3x」関連でバタバタしたので、備忘録を兼ねて画像サイズ一覧を作成しようと思います。
<h2>そもそもiPhone6 / iPhone6 Plusのサイズ</h2>
<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/5589c60ab54c5d15f278f6a09d41b4d5.png" alt="iPhoneサイズ" />

これが、iPhone6とiPhone6 Plusの解像度です。デカイですね・・・

今回追加になったサイズに加え、作成しているアプリが、過去のiPhone端末をサポートしていたりすると、Splashscreenやiconなど含め、膨大なサイズバリエーションを作成することになります。
ちなみに、画面サイズの比較に関しては、<a href="http://www.paintcodeapp.com/news/iphone-6-screens-demystified" target="_blank">コチラ</a>のサイトが参考になりました。英語ですが、図で示してくれているので分かりやすかったです。
<h2>iPhoneアプリ申請時に必要な「@3x」一覧</h2>
さて、本題ですね。
iPhone6 Plusの登場により、新たに@3xの画像も用意して置かなくてはいけない画像達はコチラ↓！

###icon系
<table class="table table-bordered">
<thead>
<tr class="success">
<th style="text-align: center">サイズ(px)</th>
<th style="text-align: center">iOS6</th>
<th style="text-align: center">iOS7</th>
<th style="text-align: center">iOS8</th>
<th style="text-align: center">ファイル名(例)</th>
<th style="text-align: center">用途</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">57×57</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">icon-57.png</td>
<td style="text-align: center">iPhoneアイコン</td>
</tr>
<tr>
<td style="text-align: center">114×114</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">icon-57@2x.png</td>
<td style="text-align: center">iPhoneアイコン</td>
</tr>
<tr>
<td style="text-align: center">120×120</td>
<td style="text-align: center">-</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">-</td>
<td style="text-align: center">icon-60@2x.png</td>
<td style="text-align: center">iPhoneアイコン</td>
</tr>
<tr>
<td style="text-align: center">180×180</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">icon-60@3x.png</td>
<td style="text-align: center">iPhoneアイコン</td>
</tr>
<tr>
<td style="text-align: center">72×72</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">icon-72.png</td>
<td style="text-align: center">iPadアイコン</td>
</tr>
<tr>
<td style="text-align: center">144×144</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">icon-72@2x.png</td>
<td style="text-align: center">iPadアイコン</td>
</tr>
<tr>
<td style="text-align: center">76×76</td>
<td style="text-align: center">-</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">icon-76.png</td>
<td style="text-align: center">iPadアイコン</td>
</tr>
<tr>
<td style="text-align: center">152×152</td>
<td style="text-align: center">-</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">icon-76@2x.png</td>
<td style="text-align: center">iPadアイコン</td>
</tr>
<tr>
<td style="text-align: center">29×29</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">icon-29.png</td>
<td style="text-align: center">iPhone設定,<br>iPhone Spotlight,</br>iPad設定</td>
</tr>
<tr>
<td style="text-align: center">58×58</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">icon-29@2x.png</td>
<td style="text-align: center">iPhone設定,<br>iPad設定</br></td>
</tr>
<tr>
<td style="text-align: center">87×87</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">icon-29@3x.png</td>
<td style="text-align: center">iPhone設定</td>
</tr>
<tr>
<td style="text-align: center">80×80</td>
<td style="text-align: center">-</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">-</td>
<td style="text-align: center">icon-40@2x.png</td>
<td style="text-align: center">iPhone Spotlight</td>
</tr>
<tr>
<td style="text-align: center">120×120</td>
<td style="text-align: center">-</td>
<td style="text-align: center">-</td>
<td style="text-align: center">◯</td>
<td style="text-align: center">icon-40@3x.png</td>
<td style="text-align: center">iPhone Spotlight</td>
</tr>
</tbody>
</table>
なんでもかんでも@3x用意が必要な訳ではないんですね。

ちなみに、icon作成では最早おなじみとなった(？)PixelResortから早速iOS8版対応のテンプレートが公開されています！
ありがたく使わせて頂きます。

<img src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/template4.jpg" alt="icon template" />

<a href="http://appicontemplate.com/ios8#" target="_blank">App Icon Template</a> (PixelResort)

###Splashscreen系
<table class="table table-bordered">
<thead>
<tr class="success">
<th style="text-align: center">端末</th>
<th style="text-align: center">OS</th>
<th style="text-align: center">サイズ(px)</th>
<th style="text-align: center">ファイル名(仮)</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">~iPhone3GS</td>
<td style="text-align: center">~iOS8</td>
<td style="text-align: center">W320×H480</td>
<td style="text-align: center">Default.png</td>
</tr>
<tr>
<td style="text-align: center">iPhone4/4S</td>
<td style="text-align: center">iOS4~</td>
<td style="text-align: center">W640×H960</td>
<td style="text-align: center">Default@2x.png</td>
</tr>
<tr>
<td style="text-align: center">iPhone5/5S/5C</td>
<td style="text-align: center">iOS6~</td>
<td style="text-align: center">W640×H1136</td>
<td style="text-align: center">Default-568h@2x.png</td>
</tr>
<tr>
<td style="text-align: center">iPhone6</td>
<td style="text-align: center">iOS8~</td>
<td style="text-align: center">W750×H1334</td>
<td style="text-align: center">Default-667h@2x.png</td>
</tr>
<tr>
<td style="text-align: center">iPhone6 Plus</td>
<td style="text-align: center">iOS8~</td>
<td style="text-align: center">W1242×H2208</td>
<td style="text-align: center">Default-736@3x.png</td>
</tr>
</tbody>
</table>


###アプリ説明用の画像系
<table class="table table-bordered">
<thead>
<tr class="success">
<th style="text-align: center">端末サイズ(inch)</td>
<th style="text-align: center">サイズ(px)</td>
<th style="text-align: center">必要枚数</td>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center">3.5inch</td>
<td style="text-align: center">640×960,640×920(※)<br>960×640,960×600(※)</br></td>
<td style="text-align: center">最低１枚、最大５枚</td>
</tr>
<tr>
<td style="text-align: center">4inch</td>
<td style="text-align: center">640×1136,640×1096(※)<br>1136×640,1136×600(※)</br></td>
<td style="text-align: center">最低１枚、最大５枚</td>
</tr>
<tr>
<td style="text-align: center">4.7inch</td>
<td style="text-align: center">750×1334,1334×750</td>
<td style="text-align: center">最低１枚、最大５枚(※1)</td>
</tr>
<tr>
<td style="text-align: center">5.5inch</td>
<td style="text-align: center">1242×2208,2208×1242</td>
<td style="text-align: center">最低１枚、最大５枚(※2)</td>
</tr>
</tbody>
</table>

この画像に関しては、アルファチャンネルなしで作成する必要があります。
(※)statusbarを含まない場合のサイズです。
(※1)iPhone6に対応している場合のみ、最低１枚必要です。
(※2)iPhone6 Plusに対応している場合のみ、最低１枚必要です。
<h2>まとめ</h2>
こうして見ると、@3xとして用意する数は、そんなに多くないんですが・・・。
従来の画像に加え、何を@3xとして用意する必要があるのか。を理解して作業に入らないと、必要ないサイズまで無駄に@3xで書き出したりして、無駄が増えます・・；
<h2>参考</h2>
<a href="https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html#//apple_ref/doc/uid/TP40006556-CH22-SW1" target="_blank">iOS Human Interface Guideline</a> - Launch Images

日本語版はまだ公開されていないので、残念ですが。
このへんの情報を参考にまとめました。