swiftui

SwiftUI エクセレンス・プレイブック

Apple純正アプリの隣に並んでも違和感のない、世界水準のSwiftUIインターフェースを設計・構築するための実践ガイドです。

絶対に守るべき6つの原則

1. コンテンツを最優先する — UIは額縁であり、絵そのものではありません
2. 測定可能な理由がない限りシステムコンポーネントを使う — アクセシビリティ、プラットフォームの動作、デザインの更新を無料で利用できます
3. 画面ではなく状態を設計する — すべての画面で、読み込み中、空、エラー、オフライン、一部のみ表示、権限拒否に対応します
4. アクセシビリティは制約条件です — Dynamic Type、VoiceOver、視差効果を減らす／透明度を下げる、コントラストを上げる
5. パフォーマンスは機能の一つです — 操作を「瞬時に感じられる」ようにし、引っかかりが発生したら計測します
6. 巧妙さより一貫性を重視する — 最良のインターフェースは、そうあるべきだと感じられます

クイックリファレンス：ADA評価基準

カテゴリ	要件
楽しさ	成功した瞬間に限って小さな喜びを加え、明瞭さを損なわない
革新性	発見しやすさ、状態の伝達、複雑さの簡素化に取り入れる
操作性	予測可能で、直接的で、寛容であり、プラットフォームに適している
包括性	Dynamic Type XXL以上、VoiceOver、色だけに意味を持たせない、視差効果の低減
ビジュアル	一貫したリズム、調和の取れたマテリアル、控えめな色合い

デザインワークフロー（ステップごと）

1. 体験を定義する — 10行の仕様書を作成します：目標、主なアクション、状態、エッジケース、プラットフォーム
2. 情報アーキテクチャをスケッチする — TabView、NavigationSplitView、階層型ナビゲーションを検討します
3. 階層を設計する — 各場面にヒーロー要素を1つ、主要なCTAを1つ配置し、段階的に情報を開示します
4. まずデザイントークンを構築する — 余白、角丸、タイポグラフィ、モーション、色
5. コンポーネントを構築する — カード、行、ボタン、空の状態、フィルター
6. 構造を統合する — NavigationStack、NavigationSplitView、TabView、シート
7. モーションを追加する — 理解と因果関係の把握を向上させるものだけを追加します
8. アクセシビリティとパフォーマンスを確認する — Dynamic Type、VoiceOver、Instruments

Liquid Glassのクイックルール（iOS 26以降）

推奨事項：

• コンテンツの上に浮かぶナビゲーション／コントロール層にガラスを使用します
• 近くにあるガラス要素はGlassEffectContainerでまとめます
• カスタムコントロールにはglassEffect(.interactive)を使用します
• モーフィングするトランジションにはglassEffectIDを使用します

避けること：

• コンテンツ層（テーブル、書類）にガラスを使うこと
• ガラスを重ねること
• すべてに色合いを付けること — 主要なアクションや意味を示す要素に限ります
• ツールバーの背後にカスタム背景を配置すること（スクロール端の効果はシステムに任せます）

レイアウトの要点

コンテナ	用途
List	大規模なデータセット、選択、スワイプアクション、編集モード
ScrollView + LazyVStack	カスタムサーフェス、カード、複合コンテンツ
Grid	フォーム、設定、密度の高い構造化レイアウト
LazyVGrid	レスポンシブなギャラリー
NavigationSplitView	iPad／Mac向け階層型アプリ
NavigationStack	階層の深いナビゲーションフロー

アニメーションの原則

• モーションは因果関係、階層、連続性を伝えます
• 命令的な振り付けではなく、状態駆動型のアニメーションを使います
• 有機的なUIにはスプリング、フェードにはイーズイン／イーズアウトを使います
• カスタムトランジションは、印象的な場面に限って使います
• 視差効果を減らす設定に対応する代替手段を必ず用意します

パフォーマンスのルール

ルール	実装
Bodyの処理は軽量にする	body内でソート、フィルタリング、フォーマット、I/Oを行わない
安定した識別子を使う	ForEach(items, id: \.id)を使い、\.selfは使わない。body内でUUID()を生成しない
依存関係を適切に管理する	@Stateはローカルに保ち、モデル全体ではなくBindingを渡す
計測する	引っかかりにはSwiftUI instrument（Instruments 26）を使います

アクセシビリティのチェックリスト

• システムのテキストスタイルを使用し、XXL以上でも文字が切れない
• レイアウトが適応する（スタックは縦向きになり、行は複数行になる）
• 分かりにくいコントロールにVoiceOverのラベル／ヒントを設定する
• フォーカス順序が読み上げ順序と一致する
• タッチターゲットを最低44×44ptにする
• 視差効果を減らす設定では、視差効果をなくして不透明度を使う
• 透明度を下げる設定では、要素間の分離を強める

コンポーネントの基本要素（これらを作成）

1. 画面の骨組み
2. セクションヘッダー
3. カードの背景
4. リスト行
5. プライマリ／セカンダリ／アイコンボタン
6. 空の状態
7. ローディングスケルトン
8. エラーバナー
9. フォームフィールド行
10. チップ／タグ／ピル

リファレンス全文

実装パターン、コードレシピ、デザイントークン、Liquid Glass の詳細、ADA レビューチェックリスト全文については、次を参照してください。

参照：swiftui-playbook.md