iOSアプリを開発するときに必要な画像の仕様をまとめました。
- アイコン
- スプラッシュ
- 各種UIBar
について記載しています。
その他の画像についてはこちらに記載しました。
なお、角丸半径については大まかな値ですので、 あくまで目安 としてお使いください。
#AppStore
スケール | サイズ(px) | 角丸半径(px) | 画像名(例) |
---|---|---|---|
x1 | 512 x 512 | 112 | iTunesArtwark |
x2 | 1024 x 1024 | 225 | iTunesArtwark@2x |
#iPhone
##各種仕様
◯:対応 ×:非対応
端末 | iOS 5 | iOS 6 | iOS 7 | iOS 8 | iOS 9 | 画面スケール | ディスプレイ | 解像度(px) | 相対サイズ | 画面密度(ppi) |
---|---|---|---|---|---|---|---|---|---|---|
~iPhone 3GS | ◯ | ◯ | × | × | × | x1 | 3.5 inch | 320 x 480 | 320 x 480 | 163 |
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 |
##スプラッシュ
ディスプレイ | サイズ(px) | 画像名(例) |
---|---|---|
3.5 inch | 320 x 480 | Defaults |
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 Portrait | 1242 x 2208 | Defaults-736h@3x |
5.5 inch Retina Landscape | 2208 x 1242 | Defaults-Landscape-736h@3x |
##アイコン
###ホーム
iOS 7 以降
画面スケール | サイズ(px) | 角丸半径(px) | 画像名(例) |
---|---|---|---|
x2 | 120 x 120 | 26 | Icon-60@2x |
x3 | 180 x 180 | 39 | Icon-60@3x |
iOS 6 以前
画面スケール | サイズ(px) | 角丸半径(px) | 画像名(例) |
---|---|---|---|
x1 | 57 x 57 | 13 | Icon-57 |
x2 | 114 x 114 | 25 | Icon-57@2x |
###設定
画面スケール | サイズ(px) | 角丸半径(px) | 画像名(例) |
---|---|---|---|
x1 | 29 x 29 | 6 | Icon-29 |
x2 | 58 x 58 | 13 | Icon-29@2x |
x3 | 87 x 87 | 18 | Icon-29@3x |
###Spotlight
iOS 7 以降
画面スケール | サイズ(px) | 角丸半径(px) | 画像名(例) |
---|---|---|---|
x2 | 80 x 80 | 18 | Icon-40@2x |
x3 | 120 x 120 | 27 | Icon-40@3x |
iOS 6 以前
画面スケール | サイズ(px) | 角丸半径(px) | 画像名(例) |
---|---|---|---|
x1 | 29 x 29 | 6 | Icon-29 |
x2 | 58 x 58 | 13 | Icon-29@2x |
#iPad
##スプラッシュ
iOS 7 以降
向き | 画面スケール | サイズ(px) |
---|---|---|
Portrait | x1 | 768 x 1024 |
Portrait | x2 | 1536 x 2048 |
Landscape | x1 | 1024 x 768 |
Landscape | x2 | 2048 x 1536 |
iOS 6 以前
#####StatusBar表示
向き | 画面スケール | サイズ(px) |
---|---|---|
Portrait | x1 | 768 x 1024 |
Portrait | x2 | 1536 x 2048 |
Landscape | x1 | 1024 x 768 |
Landscape | x2 | 2048 x 1536 |
#####StatusBar非表示
向き | 画面スケール | サイズ(px) |
---|---|---|
Portrait | x1 | 768 x 1004 |
Portrait | x2 | 1536 x 2008 |
Landscape | x1 | 1204 x 748 |
Landscape | x2 | 2048 x 1496 |
##アイコン
###ホーム
iOS 7 以降
画面スケール | サイズ(px) | 角丸半径(px) | 画像名(例) |
---|---|---|---|
x1 | 76 x 76 | 17 | Icon-76 |
x2 | 152 x 152 | 33 | Icon-76@2x |
iOS 6 以前
画面スケール | サイズ(px) | 角丸半径(px) | 画像名(例) |
---|---|---|---|
x1 | 72 x 72 | 16 | Icon-72 |
x2 | 144 x 144 | 32 | Icon-72@2x |
###設定
画面スケール | サイズ(px) | 角丸半径(px) | 画像名(例) |
---|---|---|---|
x1 | 29 x 29 | 6 | Icon-29 |
x2 | 58 x 58 | 13 | Icon-29@2x |
###Spotlight
iOS 7 以降
画面スケール | サイズ(px) | 角丸半径(px) | 画像名(例) |
---|---|---|---|
x1 | 40 x 40 | 9 | Icon-80 |
x2 | 80 x 80 | 18 | Icon-80@2x |
iOS 6 以前
画面スケール | サイズ(px) | 角丸半径(px) | 画像名(例) |
---|---|---|---|
x1 | 50 x 50 | 11 | Icon-50 |
x2 | 100 x 100 | 22 | Icon-50@2x |
#各種UIBar
##高さ
コード上で使う相対サイズです
UIBar | iPhone (Portrait) |
iPhone (Landscape) |
iPad |
---|---|---|---|
UIStatusBar | 20 | 20 | 20 |
UINavigationBar | 44 | 32 | 44 |
UIToolBar | 44 | 32 | 44 |
UITabBar | 49 | 49 | 49 |
##アイコンサイズ
多少サイズが違ってもちゃんと表示されるようです。
目安としてお使いください。
###UINavigationBar
画面スケール | サイズ(px) |
---|---|
x1 | 22 x 22 |
x2 | 44 x 44 |
x3 | 66 x 66 |
###UIToolBar
画面スケール | サイズ(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 |
#リンク
[ios_developer]: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27-SW1 "iOS Developer Library"
[iOS Developer Library : iOS Human Interface Guidelines : Icon and Image Design][ios_developer]