LoginSignup
32

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-01

@3x

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

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

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

筆者も先日、iPhone6 Plus対応のアプリを作っていた際に「@3x」関連でバタバタしたので、備忘録を兼ねて画像サイズ一覧を作成しようと思います。

そもそもiPhone6 / iPhone6 Plusのサイズ


iPhoneサイズ

これが、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版対応のテンプレートが公開されています!
ありがたく使わせて頂きます。

icon template

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(※)
最低1枚、最大5枚
4inch 640×1136,640×1096(※)
1136×640,1136×600(※)
最低1枚、最大5枚
4.7inch 750×1334,1334×750 最低1枚、最大5枚(※1)
5.5inch 1242×2208,2208×1242 最低1枚、最大5枚(※2)

この画像に関しては、アルファチャンネルなしで作成する必要があります。
(※)statusbarを含まない場合のサイズです。
(※1)iPhone6に対応している場合のみ、最低1枚必要です。
(※2)iPhone6 Plusに対応している場合のみ、最低1枚必要です。

まとめ


こうして見ると、@3xとして用意する数は、そんなに多くないんですが・・・。
従来の画像に加え、何を@3xとして用意する必要があるのか。を理解して作業に入らないと、必要ないサイズまで無駄に@3xで書き出したりして、無駄が増えます・・;

参考


iOS Human Interface Guideline - Launch Images

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32