デザイナーのための iOS

グラフィックス・データ

Photoshop などを利用して、iOS 用の素材を作る場合には解像度の違いを考慮する必要があります。一応、互換性のために高解像度である Retina 用の画像は無くても動作するようになっていますが、画像が荒くなってしまうのでアプリケーション自体見劣りしてしまいます。

画像について

• iOSでは、いくつかの画像フォーマットをサポートしていますが、透過をサポートしておりロスの少ない画像圧縮である PNGの利用が推奨です。

• ボタンを画像として作る場合、ローカライズ（いろいろな言語）に対応できるようにテキストの無い背景のみの画像を作るほうが良い。また、標準の画像と Retina に対応した画像を用意するのが望ましい。

• ボタンを押したときの画像は作らなくても、押した感じのマスクをかけてくれます。しかし、グラデーションや影を細かく調整したいなら、押したときの画像も用意したほうが良い。

• 標準の画像のファイル名のサフィックスに @2x が付いたものが Retina に対応した画像となります。

  imageButton.png

  imageButton@2x.png

• Photoshop を利用するなら、PSDから自動的にスケーリングや png 出力を行うアクションプラグインを作ってしまうと良いかもしれません。

• 基本的には、すべて同じディレクトリ（フォルダ）に画像ファイルが置かれるため、すべてユニークな名前にしなければなりません。ファイル名の命名規則を決めておくと良い。半角の英数字のみでセパレータとしてハイフンやアンダースコアを利用すると良い。

• Photoshop は、それほど圧縮率の良い PNG画像を出力してくれません。アプリケーションのサイズを小さくするための手段として、開発で利用する画像が確定した時点で別のツールを使って PNGを圧縮しなおすと良いかもしれません。

• 指で操作することを考え、画像ボタンなどを作るには 30 x 30 px 以上にすることが望ましい。

アイコンと起動画面（Splash）

• アプリケーションの機能部分の素材以外にも、アプリケーションの顔となるアイコンや起動時の Splash画面を作成しましょう。
• サイズについては、下の別項目の表を参考にしてください。
• アイコンは、角が自動的に丸くなるのでそれに影響されないようなデザインにする必要があります。また、アイコンの光沢については、Xcode 側で光沢を自動的につけるかどうか選択ができます。

  

  Xcodeのバージョンによっては、"Supporting Files" の中に入っている "アプリ名-info.plist" を表示し "icon files" の中にある "icon already includes gloss effect" の値を YES に変更する必要があります。
• Xcodeの設定で “Prerendered”（レンダリング済み）にチェックを入れることで、自動的に光沢を入れる機能が OFF になります。

  

• アイコンや起動画面（Splash）の背景色（カンバスカラー）は透過にすると黒になってしまいます。何らかの色や模様を背景にデザインした方が良いでしょう。

iPhoneのスクリーンサイズ

UI	サイズ	サイズ (Retina)
スクリーンサイズ	480 x 320 px	960 × 640 px
解像度	163 ppi	326ppi

iPad のスクリーンサイズ

UI	サイズ	サイズ (Retina)
スクリーンサイズ	1024 x 768 px	2048 × 1536 px
ステータスバー高さ	20 px	40 px
解像度	132 ppi	264 ppi

画像サイズ

起動画面(Splash)

ファイル名	サイズ
Default.png	320 x 480 px
Default@2x.png	640 x 960 px
Default-Portrait.png	768 x 1004 px
Default-Portrait@2x.png	1536 x 2008 px (Retina)
Default-Landscape.png	1024 x 748 px
Default-Landscape@2x.png	2048 x 1496 px (Retina)
Default-PortraitUpsideDown.png	768 x 1004 px
Default-PortraitUpsideDown@2x.png	1536 x 2008 px (Retina)
Default-LandscapeLeft.png	1024 x 748 px
Default-LandscapeLeft@2x.png	2048 × 1536 (Retina)
Default-LandscapeRight.png	1024 x 748 px
Default-LandscapeRight@2x.png	2048 × 1536 px (Retina)

※ 背景色（カンバスカラー）は透過にしてはいけない。透過の場合、背景が黒色で表示される。

アイコン

ファイル名	ファイル名	サイズ
iPhone アプリケーションアイコン （必須）	Icon.png	57 x 57 px
	Icon@2x.png	114 x 114 px (Retina)
iPad アプリケーションアイコン（必須）	Icon-72.png	72 x 72 px
	Icon-72@2x.png	144 x 144 px (Retina)
App Store アイコン	iTunesArtwork	512 x 512 px
		1024 x 1024 px
iPhone 設定/ Spotlight検索結果用	Icon-Small.png	29 x 29 px
	Icon-Small@2x.png	58 x 58 px (Retina)
iPad Spotlight 検索結果用	Icon-Small-50.png	50 x 50 px
	Icon-Small-50@2x.png	100 x 100 px (Retina)
Toolbar や Navigation bar アイコン	20 x 20 px 前後	20 x 20 px 前後
Tab bar アイコン	30 x 30 px 前後	30 x 30 px 前後

※App Store用のアイコンは、PNGフォーマットで拡張子不要

画面サイズ（iOS 7 以降）

その他

1. タッチ操作なので "mouse over" は無い

2. 正確な値はTechnical Q&A QA1686を確認しておく

3. iOS Human Interface Guidelines は読んでおく（日本語版は、PDFがあるが最新版ではないので注意が必要）