iOSアプリに必要な画像についてです。
- アプリアイコン画像について
- ストア用素材について
- スプラッシュ画像について
- ボタンに画像を使う場合について
- 各種UIBarに使われてる画像について
- 参考iPhoneの画面サイズ、@2x,@3xについて
1.と2.については厳密にサイズをあわせる必要があります。
3.以降は多少サイズが違ってもちゃんと表示されます。
目安としてお使いください。
1.アプリアイコン画像について
アプリアイコン画像はmakeappiconというサービスに 1536x1536 の画像を放り込めば
命名規則も合った形でリサイズしたzipファイルをくれます。
そのzip渡せば必要画像は揃うので、iOSエンジニアがAssets.xcassetsによしなに放り込んで設定してくれます。
2.ストア用素材について
サイズについて
| 機種 | 縦横 | サイズ(px) |
|---|---|---|
| iPhone | たて | 1242 × 2208 |
| iPhone | よこ | 2208 x 1242 |
| iPad | たて | 2048 × 2732 |
| iPad | よこ | 2732 × 2048 |
iPhone用に5.5インチサイズのもの、 iPad用は12.9インチサイズのものがあれば大丈夫になりました！
参考
アルファについて
ストア用画像には透過、アルファチャンネルを含めることが出来ません
PhotoShopで書き出すときはアルファチャンネルのチェックを外して書き出してください。
アルファ入ってないはずなのに...ってときはこちら
3.スプラッシュ画像について
iPhone
| ディスプレイ | サイズ(px) | 画像名(例) |
|---|---|---|
| 3.5 inch Retina | 640 x 960 | Defaults@2x |
| 4.0 inch Retina | 640 x 1136 | Defaults-568h@2x |
| 4.7 inch Retina | 750 x 1334 | Defaults-667h@2x |
| 5.5 inch Retina たて | 1242 x 2208 | Defaults-736h@3x |
| 5.5 inch Retina よこ | 2208 x 1242 | Defaults-Landscape-736h@3x |
iPad
| 向き | 画面スケール | サイズ(px) |
|---|---|---|
| たて | x1 | 768 x 1024 |
| たて | x2 | 1536 x 2048 |
| よこ | x1 | 1024 x 768 |
| よこ | x2 | 2048 x 1536 |
4.ボタンに画像を使う場合について
アプリアイコン画像はApple human interface guidelinesによると
アプリケーション内のタップ可能な要素には、約44×44ポイントのターゲット領域を割り当てる。
とあるのでエンジニアはだいたい44 * 44のサイズでボタンを設置します。
このときボタンに画像を設定できるので44 * 44のサイズで画像があると画像とボタンを別々に追加しなくていいので
嬉しいです。
実際に44 * 44 いっぱいいっぱいで画像を用意するとアイコンとしては大きすぎるので、
画像部分は30 * 30くらいが良いです
（上下左右に6pxづつマージン開けて背景透過で44 * 44で書き出す)
ベクター画像で作ってるのであれば44 * 44で作って、@2x = 88 * 88, @3x = 132 * 132 のように書き出してもらう感じです。
ビットマップ画像で作ってるのであれば132 * 132で作って、@2x = 88 * 88, @3x = 132 * 132 のように書き出してもらう感じです。
5.各種UIBar
高さ
| UIBar | iPhone (Portrait) |
iPhone (Landscape) |
iPad |
|---|---|---|---|
| UIStatusBar | 20 | 20 | 20 |
| UINavigationBar | 44 | 32 | 44 |
| UIToolBar | 44 | 32 | 44 |
| UITabBar | 49 | 49 | 49 |
各種UIBarに使われてる画像について
UINavigationBar(画面上部に出てるタイトルとか入るバー)
| 画面スケール | サイズ(px) |
|---|---|
| x1 | 22 x 22 |
| x2 | 44 x 44 |
| x3 | 66 x 66 |
UIToolBar(ボタンが1個~複数個入ってまとまってるバー)
| 画面スケール | サイズ(px) |
|---|---|
| x1 | 22 x 22 |
| x2 | 44 x 44 |
| x3 | 66 x 66 |
UITabBar(画面下部に出てる画面切り替えるバー)
| 画面スケール | サイズ(px) | 最大サイズ(px) |
|---|---|---|
| x1 | 25 x 25 | 48 x 32 |
| x2 | 50 x 50 | 96 x 64 |
| x3 | 75 x 75 | 144 x 96 |
6.参考iPhoneの画面サイズ、@2x,@3xについて
各種仕様
◯:対応 ×:非対応
| 端末 | iOS 5 | iOS 6 | iOS 7 | iOS 8 | iOS 9 | 画面スケール | ディスプレイ | 解像度(px) | 相対サイズ | 画面密度(ppi) |
|---|---|---|---|---|---|---|---|---|---|---|
| iPhone 4 | ◯ | ◯ | ◯ | × | × | x2 | 3.5 inch Retina | 640 x 960 | 320 x 480 | 326 |
| iPhone 4s | ◯ | ◯ | ◯ | ◯ | ◯ | x2 | 3.5 inch Retina | 640 x 960 | 320 x 480 | 326 |
| iPhone 5 | × | ◯ | ◯ | ◯ | ◯ | x2 | 4.0 inch Retina | 640 x 1136 | 320 x 568 | 326 |
| iPhone 5c iPhone 5s |
× | × | ◯ | ◯ | ◯ | x2 | 4.0 inch Retina | 640 x 1136 | 320 x 568 | 326 |
| iPhone 6 | × | × | × | ◯ | ◯ | x2 | 4.7 inch Retina | 750 x 1334 | 375 x 667 | 326 |
| iPhone 6 Plus | × | × | × | ◯ | ◯ | x3 | 5.5 inch Retina | 1242 x 2208 | 414 x 736 | 401 |
| iPhone 6s | × | × | × | × | ◯ | x2 | 4.7 inch Retina | 750 x 1334 | 375 x 667 | 326 |
| iPhone 6s Plus | × | × | × | × | ◯ | x3 | 5.5 inch Retina | 1242 x 2208 | 414 x 736 | 401 |
iPhone3GSが@1xで、これが基準に作られてます。(Appleガイドラインの44 * 44とかは@1xでの話)
@1xは基準となりますがiPhone3GSが開発対象に入ることはもう無いと思うので、@1xの素材は結構不要だったりします。
iPhone4以降のRetinaディスプレイは画素数が2倍なのでpixcelサイズの2倍の大きさの画像が必要になります。
更に、iPhone6PlusやiPhone7Plusなどの端末はRetinaかつ画面大きいので3倍サイズが必要になります。