rakuishi.com

iOS と Android の画像周りチートシート

/ Tech

iOS 7 以降（iPad 含まない）、Android 4.0 以降で必要になる画像素材をまとめています。

アプリ内で使用する画像

iOS

iOS 7 以降に対応している iPhone 端末を挙げます。iPhone 3GS（比率：1x）などは、iOS 7 以降に対応していません。ですので、iOS 7 以降のアプリを作る際は、2x, 3x の 3 種類を用意すれば OK です。

端末名ポイントピクセルインチ比率ファイル名
iPhone 4, 4S320 x 480640 x 9603.5inch2xsample@2x.png
iPhone 5, 5s, 5c320 x 568640 x 11364.0inch2xsample@2x.png
iPhone 6, 6s375 x 667750 x 13344.7inch2xsample@2x.png
iPhone 6 Plus, 6s Plus414 x 7361242 x 22085.5inch3xsample@3x.png

iPhone 6 Plus が登場するまでは、Retina（レティナ） = 比率 2x の解釈で問題なかったのですが、登場以降、比率 1x 以外の高解像度画像も含むようになりました。ただ、サイト向けに Retina 対応をする時は、比率 2x の画像を用意するので現状は問題ありません。

Android

Android Developers - Screen Sizes and Densities によれば、hdpi, xhdpi, xxhdpi の 3 種類の解像度で、世界の全シェアの 8 割を占めています。日本では Android 4.0 以降が搭載された端末は、ほとんど xhdpi 以上であり、Analytics を見ている限り、98% は xhdpi 以上ですので、xhdpi と xxhdpi を用意すれば十分でしょう。

日本でよく使われているそれらの解像度を持った端末を挙げます。

端末名ピクセル比率フォルダ・ファイル名
Xperia Z3 Compact720 x 12802x (xhdpi)drawable-xhdpi/sample.png
Xperia Z3, Nexus 51080 × 19203x (xxhdpi)drawable-xxhdpi/sample.png

iOS と Android で用意する画像ファイル

2x, 3x を用意すれば OK です。以下のように、フォルダを分けて、ファイル名を付けて頂けるとエンジニアの作業がしやすいです。

ios/
├── sample@2x.png # 2x
├── sample@3x.png # 3x
android/
├── drawable-xhdpi/
│   └── sample.png # 2x
└── drawable-xxhdpi/
    └── sample.png # 3x

アイコン

iOS

不透過 PNG で用意します。角丸は OS 側で処理されます。

画像名ピクセル比率
icon-60@2x.png120 x 1202x
icon-60@3x.png180 x 1803x

Android

透過 PNG 可です。iOS とは違って、余白と影を付けないとデフォルトアイコンと馴染みません。192px は、Nexus 6 のような高解像度端末で必要になるアイコンです。今後、増えていくと思いますので用意しておくことを推奨します。

フォルダ・ファイル名ピクセル比率
mipmap-xhdpi/ic_launcher.png96 x 962x
mipmap-xxhdpi/ic_launcher.png144 x 1443x
mipmap-xxxhdpi/ic_launcher.png192 x 1924x

申請用画像

iOS

名称ピクセル枚数
スクリーンショット画像 3.5inch640 x 9601~5
スクリーンショット画像 4.0inch640 x 11361~5
スクリーンショット画像 4.7inch750 x 13341~5
スクリーンショット画像 5.5inch1080 x 19201~5
高解像度アイコン512 x 5121

Android

スクリーンショット画像については、許可されているサイズに幅があるため、iOS で作ったものが流用できると思います。

名称ピクセル枚数
スクリーンショット320~3840 x 320~38402〜8
高解像度アイコン512 x 5121
宣伝用画像1024 x 5001

画像を圧縮しましょう

基本的にすべての画像は提出する前に圧縮しましょう。

経験談として、iPhone 4 でアプリ開発していた時に、圧縮していない画像を載せたセルをスクロールした時にカクつくことがあったのですが、圧縮するとカクつかなくなりました。圧縮は、アプリのパフォーマンスに関わってきます。