Apple HIG 設計ガイド -- "System Native"
Apple Human Interface Guidelines (HIG) は、UIデザインにおける明瞭さ（Clarity）、敬意（Deference）、奥行き（Depth）の3原則を定義する。コンテンツが主役であり、UIは透明であるべき。iPhoneの設定アプリに見られるグループ化テーブルビュー、トグルスイッチ、ディスクロージャーインジケーターは、世界で最も洗練されたUIパターンの一つだ。
本記事では、iOS/macOS のネイティブUIから着想を得た「System Native」デザインシステムを解説する。iOSアプリ、macOSアプリ、Apple風Webアプリ全般に適用可能なテンプレートだ。
核心となる設計思想
Apple HIG準拠のアプリUI。#f2f2f7 のシステムグレー背景に白いカードが浮かび、#007aff のシステムブルーがアクションを導く。ユーザーが「学ぶ」必要がないほど直感的であること。
1. デザイン哲学 -- 「触れたくなるUI」
明瞭さ、敬意、奥行き
このテンプレートの根底にあるのは Apple の3原則だ。
全てが秩序正しく配置され、触れたくなる物理的な質感がある。#f2f2f7 のシステムグレー背景にグループ化された白いカード、青いアクションテキスト、丸みを帯びた角。44px のタッチターゲットは人間の指のサイズに最適化され、トグルスイッチの滑らかなアニメーションが物理的なフィードバックを暗示する。
iOS設定画面 プレビュー
以下はこのテンプレートを適用したiOS設定画面風のインターフェースだ。
2. カラーパレット
背景色
System Grey 6
#f2f2f7
Card White
#ffffff
Dark Card
#1c1c1e
システムカラー
Blue
#007aff
Green
#34c759
Red
#ff3b30
Orange
#ff9500
Purple
#af52de
3. コンポーネント詳細
グループ化テーブルビュー
iOS設定画面の基本構造。論理的にまとめられた設定項目を白いカードに収容する。
- 背景: #ffffff
- 角丸: 12px
- マージン: 0 16px
- セル高さ: 44px
- セパレーター: rgba(60,60,67,0.12)、左57pxインセット
トグルスイッチ
ON/OFFの物理的な切り替えを表現するコンポーネント。
- 幅: 51px / 高さ: 31px
- ON: トラック #34c759 / thumb 右寄せ
- OFF: トラック #e9e9eb / thumb 左寄せ
- Thumb: 27px / #ffffff / shadow 0 3px 8px rgba(0,0,0,0.15)
ナビゲーションバー
画面遷移の道標となる上部バー。
- 背景: white + backdrop-filter blur(20px)
- 高さ: 44px (Standard) / 96px (Large Title)
- 戻るボタン: #007aff
4. レスポンシブ戦略
| 画面サイズ | レイアウト | テーブル幅 | タイトル |
|---|---|---|---|
| iPhone SE (<375px) | コンパクト | フルワイド | Small Title |
| iPhone (375-428px) | 標準iOS | フルワイド | Large Title |
| iPad Portrait (768px) | Split View | max 600px | Large Title |
| iPad Landscape (1024px+) | 3カラム | max 600px | Large Title |
5. 実装チェックリスト
- [ ] システムグレー背景 (#f2f2f7)
- [ ] グループ化テーブル (白カード, 角丸12px)
- [ ] セル (44px高, アイコン+ラベル+値+>)
- [ ] セパレーター (左57pxインセット)
- [ ] トグルスイッチ (#34c759 ON / #e9e9eb OFF)
- [ ] ナビゲーションバー (blur backdrop)
- [ ] プロフィールカード (60pxアバター)
- [ ] 検索バー (角丸10px, グレー背景)
- [ ] セクションヘッダー/フッター