iOSアプリの画像サイズについてまとめ直した


iOSアプリに必要な画像についてです。

1. アプリアイコン画像について
2. ストア用素材について
3. スプラッシュ画像について
4. ボタンに画像を使う場合について
5. 各種UIBarに使われてる画像について
6. 参考iPhoneの画面サイズ、@2x,@3xについて


----
1.と2.については厳密にサイズをあわせる必要があります。

3.以降は多少サイズが違ってもちゃんと表示されます。
目安としてお使いください。


# 1.アプリアイコン画像について
[makeappicon link]: https://makeappicon.com/
アプリアイコン画像は[makeappicon][makeappicon link]というサービスに 1536x1536 の画像を放り込めば
命名規則も合った形でリサイズしたzipファイルをくれます。
そのzip渡せば必要画像は揃うので、iOSエンジニアがAssets.xcassetsによしなに放り込んで設定してくれます。

# 2.ストア用素材について
#### サイズについて
機種|縦横|サイズ(px)|
:---:|:---:|:---:
iPhone|たて|1242 × 2208
iPhone|よこ|2208 x 1242
iPad|たて|2048 × 2732
iPad|よこ|2732 × 2048

[store_screenshot link]: http://qiita.com/mono0926/items/0b1122e5a254f945f6b0
iPhone用に5.5インチサイズのもの、 iPad用は12.9インチサイズのものがあれば大丈夫になりました！
[参考][store_screenshot link]

#### アルファについて
[store_alpha link]: http://nadegiri.main.jp/?p=389
ストア用画像には透過、アルファチャンネルを含めることが出来ません
PhotoShopで書き出すときはアルファチャンネルのチェックを外して書き出してください。
アルファ入ってないはずなのに...ってときは[こちら][store_alpha link]


# 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 link]: https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
アプリアイコン画像は[Apple human interface guidelines][apple link]によると

```
アプリケーション内のタップ可能な要素には、約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<br>(Portrait)|iPhone<br>(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<br>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倍サイズが必要になります。