Posted at

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

More than 1 year has passed since last update.

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


  1. アプリアイコン画像について

  2. ストア用素材について

  3. スプラッシュ画像について

  4. ボタンに画像を使う場合について

  5. 各種UIBarに使われてる画像について

  6. 参考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倍サイズが必要になります。