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

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

iOS

ガイドライン

• Icon and Image Sizes (iOS Human Interface Guidelines)
• Launch Images (iOS Human Interface Guidelines)
• [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	[e-mail]	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	[e-mail]	Retina iPadのSpotlight	-
120 x 120	[e-mail]	Retina HD iPhone (5.5-inch)のSpotlight	-
60 x 60	Icon-60.png	iPhoneのホーム	○
120 x 120	[e-mail]	Retina iPhoneのホーム	○
180 x 180	[e-mail]	Retina HD iPhone (5.5-inch)のホーム	○
76 x 76	Icon-76.png	iPadのホーム	○
152 x 152	[e-mail]	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	[e-mail]	Retina iPadのSpotlight
57 x 57	Icon.png	iPhoneのホーム	○
114 x 114	[e-mail]	Retina iPhoneのホーム	○
72 x 72	Icon-72.png	iPadのホーム	○
144 x 144	[e-mail]	Retina iPadのホーム	○

Webアイコン

• Configuring Web Applications - Safari Developer Library

|サイズ|対象|メタタグの例|
|:--|:--|:--|:--:|
|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|[e-mail]|Retina iPhone (3.5-inch)|
|640 x 1136|[e-mail]|Retina iPhone (4-inch)|
|750 x 1334|[e-mail]|Retina HD iPhone (4.7-inch) 縦向き(Portrait)|
|1242 x 2208|[e-mail]|Retina HD iPhone (5.5-inch) 縦向き(Portrait)|
|2208 x 1242|[e-mail]|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|[e-mail]|Retina iPad縦向き(Portrait)|
|2048 x 1536|[e-mail]|Retina iPad横向き(Landscape)|

起動イメージ (iPad iOS6)

|サイズ|ファイル名(例)|対象|
|:--|:--|:--|:--|
|768 x 1004|Default-Portrait.png|iPad縦向き(Portrait)|
|1024 x 748|Default-Landscape.png|iPad横向き(Landscape)|
|1536 x 2008|[e-mail]|Retina iPad縦向き(Portrait)|
|2048 x 1496|[e-mail]|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
• Graphic Assets for your Application - Google Play for Developers Help
• Material Design Style Icons
• Google Material Design Icons

アプリアイコン

サイズ	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

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

Chrome Web App / Extension

ガイドライン

• Supplying Images - Chrome Web Store — Google Developers

アイコン

サイズ	対象	必須
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

デスクトップアイコン

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

OS X

ガイドライン

• Designing App Icons (OS X Human Interface Guidelines)

デスクトップアイコン

サイズ	ファイル名
16 x 16	icon_16x16.png
32 x 32	[e-mail]
32 x 32	icon_32x32.png
64 x 64	[e-mail]
128 x 128	icon_128x128.png
256 x 256	[e-mail]
256 x 256	icon_256x256.png
512 x 512	[e-mail]
512 x 512	icon_512x512.png
1024 x 1024	[e-mail]

補足

• 記載の都合上、iPod touchはiPhoneに含む
• iOSはRetinaの場合はRetina向け([e-mail])の画像を探し、なければノーマル(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から依頼される場合がある

あるある

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