デザイナーのための 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 以降)
その他
タッチ操作なので "mouse over" は無い
正確な値はTechnical Q&A QA1686を確認しておく
iOS Human Interface Guidelines は読んでおく(日本語版は、PDFがあるが最新版ではないので注意が必要)