アプリのアイコン、起動イメージを用意するときのメモ


自分で描くときも、デザイナーさんに依頼するときも毎回忘れるのでまとめる。必要な案件の際に更新するので内容が古かったり間違っていることも。

## iOS

### ガイドライン

 * [Icon and Image Sizes (iOS Human Interface Guidelines)](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html)
 * [Launch Images (iOS Human Interface Guidelines)](https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LaunchImages.html)
 * [Technical Q&A QA1686 App Icons on iPad and iPhone - iOS Developer Library] (http://developer.apple.com/library/ios/#qa/qa1686/_index.html)

### アプリアイコン (共通)

|サイズ|ファイル名|対象|必須|
|:--|:--|:--|:--:|
|29 x 29|Icon-Small.png|iPhoneのSettings|Settings bundleを含んでいる場合は特に推奨|
|58 x 58|Icon-Small@2x.png|Retina iPhoneのSettings|
|512 x 512|iTunesArtwork|AppStore|○|
|1024 x 1024|iTunesArtwork@2x|AppStore for Retina|○|


### アプリアイコン (iOS7+)

|サイズ|ファイル名|対象|必須|
|:--|:--|:--|:--:|
|40 x 40|Icon-40.png|iPadのSpotlight|-|
|80 x 80|Icon-40@2x.png|Retina iPadのSpotlight|-|
|120 x 120|Icon-40@3x.png|Retina HD iPhone (5.5-inch)のSpotlight|-|
|60 x 60|Icon-60.png|iPhoneのホーム|○|
|120 x 120|Icon-60@2x.png|Retina iPhoneのホーム|○|
|180 x 180|Icon-60@3x.png|Retina HD iPhone (5.5-inch)のホーム|○|
|76 x 76|Icon-76.png|iPadのホーム|○|
|152 x 152|Icon-76@2x.png|Retina iPadのホーム|○|

* 固定のファイル名を使うのはiOS 3.1.3以前の互換用のためであり、iOS 5以降ではInfo.plistファイルの``CFBundleIcons``、iOS 3.2以降では``CFBundleIconFiles``にファイルを指定する
* Xcode 5からは``Images.xcassets``で管理できる

### アプリアイコン (iOS6)

|サイズ|ファイル名|対象|必須|
|:--|:--|:--|:--:|
|50 x 50|Icon-Small-50.png|iPadのSpotlight||
|100 x 100|Icon-Small-50@2x.png|Retina iPadのSpotlight||
|57 x 57|Icon.png|iPhoneのホーム|○|
|114 x 114|Icon@2x.png|Retina iPhoneのホーム|○|
|72 x 72|Icon-72.png|iPadのホーム|○|
|144 x 144|Icon-72@2x.png|Retina iPadのホーム|○|

### Webアイコン

 * [Configuring Web Applications - Safari Developer Library](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)

|サイズ|対象|メタタグの例|
|:--|:--|:--|:--:|
|60 x 60|iPhone|``<link rel="apple-touch-icon" href="/touch-icon-iphone.png">``|
|76 x 76|iPad|``<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png">``|
|120 x 120|Retina iPhone|``<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png">``|
|152 x 152|Retina iPad|``<link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png">``|

### 起動イメージ (iPhone)

|サイズ|ファイル名(例)|対象|
|:--|:--|:--|:--|
|320 x 480|Default.png|iPhone|
|640 x 960|Default@2x.png|Retina iPhone (3.5-inch)|
|640 x 1136|Default-iOS7-568h@2x.png|Retina iPhone (4-inch)|
|750 x 1334|Default-iOS8-667h@2x.png|Retina HD iPhone (4.7-inch) 縦向き(Portrait)|
|1242 x 2208|Default-iOS8-736h@3x.png|Retina HD iPhone (5.5-inch) 縦向き(Portrait)|
|2208 x 1242|Default-iOS8-Landscape-736h@3x.png|Retina HD iPhone (5.5-inch) 横向き(Landscape)|

* iPhone 6 Plus(5.5-inch)はLandscapeがある


### 起動イメージ (iPad iOS7)

|サイズ|ファイル名(例)|対象|
|:--|:--|:--|:--|
|768 x 1024|Default-iOS7-Portrait-1024h.png|iPad縦向き(Portrait)|
|1024 x 768|Default-iOS7-Landscape-768h.png|iPad横向き(Landscape)|
|1536 x 2048|Default-iOS7-Portrait-1024h@2x.png|Retina iPad縦向き(Portrait)|
|2048 x 1536|Default-iOS7-Landscape-768h@2x.png|Retina iPad横向き(Landscape)|

### 起動イメージ (iPad iOS6)

|サイズ|ファイル名(例)|対象|
|:--|:--|:--|:--|
|768 x 1004|Default-Portrait.png|iPad縦向き(Portrait)|
|1024 x 748|Default-Landscape.png|iPad横向き(Landscape)|
|1536 x 2008|Default-Portrait@2x.png|Retina iPad縦向き(Portrait)|
|2048 x 1496|Default-Landscape@2x.png|Retina iPad横向き(Landscape)|


* 起動イメージのファイル名で自動選択させる場合の書式は以下のようになる。ただし任意の名前のファイルをplistファイルで指定することができるためこの命名ルールは必須ではない
* Xcode 5からは``Images.xcassets``で管理できる


```
<basename><usage_specific_modifiers><scale_modifier><device_modifier>.png
```

|変数||
|:--|:--|
|basename|``Default``またはInfo.plistの``UILanchImageFile``キーの値|
|usage_specific_modifiers|``-568h`` など|
|scale_modifier|``@2x`` など|
|device_modifier|``~ipad``, ``~iphone``|

## Android

### ガイドライン

 * [Iconography | Android Developers](http://developer.android.com/design/style/iconography.html)
 * [Graphic Assets for your Application - Google Play for Developers Help](https://support.google.com/googleplay/android-developer/answer/1078870?hl=en)
* [Material Design Style Icons](http://www.google.com/design/spec/style/icons.html)
* [Google Material Design Icons](https://github.com/google/material-design-icons/releases)


### アプリアイコン

|サイズ|Scale|ファイル名(例)|対象|DPI|
|:--|:--|:--|:--|:--|
|36 x 36|x0.75|drawable-ldpi/ic_launcher_home.png|Android low-density (LDPI)|〜120|
|48 x 48|x1|drawable-mdpi/ic_launcher_home.png|Android baseline (MDPI)|〜160|
|72 x 72|x1.5|drawable-hdpi/ic_launcher_home.png|Android high density (HDPI)|〜240|
|96 x 96|x2|drawable-xhdpi/ic_launcher_home.png|Android x-high density (XHDPI)|〜320|
|144 x 144|x3|drawable-xxhdpi/ic_launcher_home.png|Android xx-high density (XXHDPI)|〜480|
|192 x 192|x4|drawable-xxxhdpi/ic_launcher_home.png|Android xxx-high density (XXXHDPI)|〜640|
|512 x 512|-|GooglePlay.png|Google Play|-|

### Webアイコン

[Support for theme-color in Chrome 39 for Android](http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android)

```
<meta name="theme-color" content="#db5945">
<link rel="icon" sizes="192x192" href="nice-highres.png">
```

## Chrome Web App / Extension

### ガイドライン

 * [Supplying Images - Chrome Web Store &mdash; Google Developers](https://developer.chrome.com/webstore/images)

### アイコン

|サイズ|対象|必須|
|:--|:--|:--:|
|16 x 16|infoバー用|-|
|19 x 19|アドレスバー用|-|
|48 x 48|拡張機能一覧など用|-|
|128 x 128|128は余白入りサイズでアイコン自体は96 x 96|○|
|440 x 280|Chrome Web Storeプロモーション画像Small|○(Extensionは省略可)|
|920 x 680|Chrome Web Storeプロモーション画像Large|-|
|1400 x 560|Chrome Web Storeプロモーション画像Marquee|-|

## Windows

### ガイドライン

 * [Icons](https://msdn.microsoft.com/en-us/library/dn742485.aspx)

### デスクトップアイコン

* icoファイルに含めるサイズ: 16x16, 32x32, 48x48, 256x256

## OS X

### ガイドライン

 * [Designing App Icons (OS X Human Interface Guidelines)](https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGuidelines/Designing.html)

### デスクトップアイコン

|サイズ|ファイル名|
|:--|:--|
|16 x 16|icon_16x16.png|
|32 x 32|icon_16x16@2x.png|
|32 x 32|icon_32x32.png|
|64 x 64|icon_32x32@2x.png|
|128 x 128|icon_128x128.png|
|256 x 256|icon_128x128@2x.png|
|256 x 256|icon_256x256.png|
|512 x 512|icon_256x256@2x.png|
|512 x 512|icon_512x512.png|
|1024 x 1024|icon_512x512@2x.png|

## 補足

* 記載の都合上、iPod touchはiPhoneに含む
* iOSはRetinaの場合はRetina向け(Example@2x.png)の画像を探し、なければノーマル(Example@png)を拡大して使う。過去互換も踏まえて必須にはなっていないがほぼ必須に近い推奨
 * ただしiPhone (4-inch)の非Retinaは存在しないため、Retina iPhone (4-inch)向けの起動画面がない場合は上下に黒帯が入ったiPhone (3.5-inch)のサイズでアプリが実行される
* サイズ以外にもガイドラインがあるためドキュメントは目を通しておく、デザイナーが英語に抵抗がある場合は日本語ドキュメントを教えてあげる
 * iOS: https://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf
* iOSではiTunesの特集向けに600x600ピクセル以上のプロモーション画像をAppleから依頼される場合がある

## あるある

* デザインを依頼するときにファイル名指定しておかないとあとでリネームが面倒
* アプリのデザインを依頼後、ストアやマーケット向けのデザインが必要になってまとめてお願いしとけばよかったとなる
* デバイスの解像度が増えときベクター素材がないとあたふたする、デザインの納品は必ずソースを必ずもらっておくべし