feb19.jp

Nobuhiro Takahashi
Designer / Engineer

iOS UI Design 要点まとめ

iOS UI Design 要点まとめ

date
2016.3.30(Wed.)
tags
iOSDesign

iOS の UI デザインをする上で知っておきたい情報をまとめました。主にガイドラインからの抜粋、日本語での解釈になります。

Android についてはこちらにまとめています

ガイドライン

PDF になってたり日本語訳だったり iBooks にあるやつは基本的に古くて地雷なので Developer Center 上のドキュメントを頼りにするのが鉄板です。

単位

Xcode / プログラムコード上では @1x 解像度で値を指定をします。
レイアウトも @1x で作成し、パーツは @2x / @3x にスケールアップした PNG またはベクターデータ (PDF) で受け渡すのが効率的です。「偶数ピクセル問題」も必然的に回避できます。

@3x 解像度のデバイスで @1x の線を表示する場合は太くなってしまうので、2:1 で空白と線の塗りが作られた画像を作るなどして上手いことやります。

iPhone 4 以降 Retina 解像度に対応すべく Photoshop などラスタで細かく描けるツールを使い、 @2x 解像度で作ることが主流でした。 しかし iOS7 以降細かく書き込まれたグラフィックが主流でなくなり(フラットデザイン)、@3x 解像度に対応するまで細かく書き込むにしてもマシンパワーが必要になるだとか、プログラミング効率的に @1x 解像度に計算し直さないといけないだとかの問題で、今は Photoshop 一辺倒のデザイン制作はあまり効果的ではなさそうです(ゲームなど UI にも細かい書き込みが求められるものはまた違うと思いますが)。

デバイスごとの解像度

iPhone 系

Deviceスケール解像度画面比@1x時解像度
iPhone 初期,3G,3GS@1x320×4802:3320×480
iPhone 4, 4S@2x640×9609:16320×480
iPhone 5, 5s, 5c, SE@2x640×11369:16320×568
iPhone 6, 6s@2x750×13349:16375×667
iPhone 6 Plus, 6s Plus@3x1242×22089:16414×736

iPad 系

Deviceスケール解像度画面比@1x時解像度
iPad 初期,2,mini@1x768×10243:4768×1024
iPad 3,4,Air, iPad mini 2,3,4, Pro 9.7″@2x1536×20483:4768×1024
iPad Pro@2x2048×27323:41024×1366

フォント

英数字標準:San Francisco

フォントサイズが 20pt 未満の場合 SF UI Text を使用し、それ以上の時は SF UI Display を使用します。 最小フォントサイズは 11pt で、本文の基準は 16pt が推奨。 ちなみに “San Francisco Compact” は watchOS で使用します。

AppleTextStyleThumbnail

ウェイト構成例

ウェイトFont size (pt)
Ultralight64pt 以上
Thin48pt 以上
Light32pt 以上
Regular20pt 以上
Regular16pt 以上

iOS は自動的にフォントサイズに応じて Tracking (カーニング) を調整します。調整される値は Photoshop の値で上記 URL に定義されていますが、Sketch に変換した値も併記しました。

Sketch の letter spacing 変換公式

Spacing (Sketch) = Font size (pt) * Tracking (Photoshop) / 1000

SF UI Text

Font size (pt)Tracking (Photoshop)Spacing (Sketch)
6410.25
8260.21
9190.17
10120.12
1160.07
1200
13-6-0.08
14-11-0.15
15-16-0.24
16-20-0.32
17-24-0.41
18-25-0.45

SF UI Display

Font size (pt)Tracking (Photoshop)Spacing (Sketch)
20190.38
22160.35
28130.36
32120.38
36110.4
5070.35
6430.2
80+00

和文標準:Hiragino Sans(ヒラギノ角ゴ) El Capitan / iOS9 でプリインストール。 W3 / W6 が使用可能。

iOS8 までは Helvetica が英数字標準でした。

iOS でプリインストールされ使えるフォントリストをプログラムで出力することができます。

それか、8.2 まで対応しているフォントリストを掲載しているサイトが便利です。

テキストのスタイル

デフォルトで iOS に定義されているテキストのスタイルです。

用途Font size(pt)line-height
Body / 本文1622
Call Out / 吹き出し1521
Caption 1 / キャプション1116
Caption 2 / キャプション21114
Footnote / 脚注1218
Subhead / 小見出し1520
Headline / ヘッドライン16 Bold22
Title 1 / 見出し12834
Title 2 / 見出し22228
Title 3 / 見出し32024

和文で長文の場合デフォルトのままだと行が詰まって読みにくい感があります。これを基準に調整するといいかもしれません。

(和文であればもう少し小さくしてもいいかも)

その他標準的な View コンポーネントテキストのスタイル

UI のテキストは 17pt を主体にして、 サブテキストが 11pt、12pt、13pt が使われ、 その他専用のビューで 10pt、15pt、20pt が使われています。

場所サイズ
ナビゲーションバーのタイトルと、バックボタン17
ナビゲーションバーのサブテキスト12
テーブルビューのセルのテキスト17
テーブルビューのセルのサブテキスト11
テーブルビューのセクションヘッダー、フッター13
SMS のメッセージバブル17
検索バーのテキスト15
検索バーのキャンセルボタン17
ツールバーのボタン17
ツールバーのサブテキスト12
タブバーのテキスト10
アラートビューのタイトルとボタン17
アラートビューのサブテキスト13
アクティビティビューのテキスト12
ピッカーのボタンラベル20
セグメンテットコントロールのテキスト13

画像のサイズ

場所サイズ
ツールバー、ナビゲーションバーのアイコン22×22
タブバーのアイコン25×25 (最大 48×32)

ボタン

最低 44 x 44 は確保する
ボタンとボタンの間も開けて配置する

色名カラーコード備考
#EFEFE4 背景
灰色#CECED2
#000000 テキスト
#007AFF リンク

iOS7 よりアプリ毎にテーマカラーが設定されています。

色名カラーコード備考
水色#5AC8FA ビデオ
黄色#FFCC00 メモ
橙色#FF9500 iBooks
濃いピンク#FF2D55 Apple News
青色#007AFF Safari
緑色#4CD964 メッセージ
濃いオレンジ#FF3B30 カレンダー
灰色#8E8E93 設定

アプリケーションアイコンサイズ

サイズ用途スケールファイル名例備考
120×120, 180×180iPhone 6, 5, 4, 6Plus, SE@2x, @3xcon-60@2x.png, icon-60@3x.png
76×76, 152×152iPad, mini@1x, @2xicon-76.png, icon76@2x.png
57×57iPhone 5, 4@1x, @2xicon-57.png, icon-57@2x.pngiOS6以前
72×72iPad, mini@1x, @2xicon-72.png, icon-72@2x.pngiOS6以前
40×40Spotlight 用アイコン@1x, @2x, @3xicon-40.png, icon-40@2x.png, icon-40@3x.png
29×29設定画面で使われるアイコン@1x, @2x, @3xicon-29.png, icon-29@2x.png, icon-29@3x.png
50×50iPad の設定や Spotlight 用アイコン@1x, @2xicon-50.png, icon-50@2x.pngiOS6以前

アプリストアに提出するときに必要になる画像・動画アセット

アイコン

サイズファイル名
1024×1024iTunesArtwork@2x.png

スクリーンショット

3.5”、4” は最低 1 枚必須。
4.7”、5.5” 、iPad もバイナリ的に対応していれば必須。
iPad Pro は任意。

ちなみにスクリーンショットに「ステータスバー」を含めてしまうと、時間やバッテリ、回線接続状況が表示されているので紛らわしいとのことで、含めるべきではありません。

デバイス解像度
3.5”640×960 or 640×920 or 960×640 or 960×600
4”640×1196 or 640×1136 or 1136×600 or 1136×940
4.7”750×1334 or 1334×750
5.5”1242×2208 or 2208×1242
iPad768×1024 or 768×1004 or 1024×768 or 1024×748 or 1536×2048 or 1536×2008 or 2048×1536 or 2048×1496
iPad Pro2048×2732 or 2732×2048

スクリーンキャプチャ映像(任意)

デバイス解像度
4”1920×1080 or 1136×640 or 1080×1920 or 640×1136
4.7”1334×750 or 750×1334
5.5”1920×1080 or 1080×1920

スマホから見られることが多いので縦画面動画 (1080×1920) が良さそう。 ビットレートやファイルサイズなども決められているので公式ドキュメント要熟読です。