ios-design

Apple SwiftUI iOS デザインのベストプラクティス

Apple 品質の iOS インターフェイスを SwiftUI で実装するための開発者向けガイドです。2 つの基礎となるデザイン書を土台にしています。

• Ken Kocienda — Creative Selection（ユーザーへの共感、コーディングの技、最善の解決策を選ぶ審美眼、反復的な改善を重ねるデモ文化）
• John Edson — Design Like Apple（システム思考、製品そのものがマーケティング、デザインを声に出して考えること、確信を持ってデザインすること）

8 つの原則ベースのカテゴリにわたる 62 のルールを収録しています。各ルールでは、具体的なアンチパターンを示し、名前のある原則に基づいて修正方法を説明したうえで、iOS 26 ／ Swift 6.2 における適切な SwiftUI の実装を提示します。

適用範囲と関連スキルとの関係

このスキルは構築と実装のガイドです。Apple 品質のパターンを使って、新しい SwiftUI インターフェイスをゼロから構築する方法を解説します。既存の UI をレビュー・リファクタリングする ios-ui-refactor と併用すると、このスキルが新規実装を担当し、後から ios-ui-refactor が監査します。新しい画面の構築にはこのスキルを、既存画面の評価と改善には関連スキルを使用してください。

クリニックのアーキテクチャ契約（iOS 26 ／ Swift 6.2）

このスキルのすべてのガイダンスは、クリニックのモジュール型 MVVM-C アーキテクチャを前提としています。

• Feature モジュールがインポートするのは Domain と DesignSystem のみです（Data や兄弟 Feature はインポートしません）
• App ターゲットが統合点となり、DependencyContainer、具体的なコーディネーター、Route Shell の配線を所有します
• Domain は純粋な Swift のまま、モデルに加えて、リポジトリ、*Coordinating、ErrorRouting、AppError の契約を定義します
• Data は SwiftData／ネットワーク／同期／リトライ／バックグラウンド I/O を所有し、Domain のプロトコルを実装します
• 読み取り／書き込みフローでは、デフォルトで stale-while-revalidate の読み取りと、楽観的なキューイング書き込みを使用します
• ViewModel はリポジトリのプロトコルを直接呼び出します（デフォルトのユースケース／インタラクター層は設けません）

適用する場面

以下の場合に、これらのガイドラインを参照してください。

• 新しい SwiftUI ビューや画面をゼロから構築する
• セマンティックカラー、システムタイポグラフィ、スペーシンググリッドの中から選ぶ（Edson のシステム思考）
• @State、@Binding、@Observable、@Environment を使って状態を管理する（Kocienda の技）
• 適切なコンポーネントを選ぶ：List と LazyVStack、Sheet と FullScreenCover（Kocienda の審美眼）
• @ViewBuilder、カスタムモディファイア、値型を使ってビューを構成する（Kocienda の創造的選択）
• NavigationStack、TabView、シートを使ってナビゲーションを実装する（Edson の対話）
• スタック、グリッド、フレーム、アダプティブレイアウトを使ってコンテンツを配置する（Edson のデザインを声に出して考えること）
• VoiceOver、タッチターゲット、ダークモード、視差効果を減らす設定への対応を確保する（Kocienda の共感）
• トランジション、読み込み状態、アニメーションの仕上げを追加する（Edson の「製品そのものがマーケティング」）

優先度別ルールカテゴリ

優先度	カテゴリ	原則	影響度	プレフィックス	ルール数
1	すべてのピクセルに込める共感	Kocienda「共感」· Edson「デザインは人のためにある」	CRITICAL	empathy-	8
2	ビジュアルシステム	Edson「システム思考」· Kocienda「収束」	CRITICAL	system-	8
3	技：基盤としての状態	Kocienda「技」	CRITICAL	craft-	7
4	創造的な構成	Kocienda「創造的選択」	HIGH	compose-	6
5	審美眼：適切な選択	Kocienda「審美眼」· Edson「確信を持ってデザインする」	HIGH	taste-	8
6	対話としてのナビゲーション	Edson「デザインは対話」· Kocienda「デモ」	HIGH	converse-	9
7	デザインを声に出して考える：レイアウト	Edson「デザインを声に出して考える」· Kocienda「交差点」	HIGH	layout-	8
8	製品が語る	Edson「製品そのものがマーケティング」· Kocienda「デモ文化」	MEDIUM	product-	8

クイックリファレンス

1. すべてのピクセルに共感を込める（CRITICAL）

Kocienda：「共感とは、他者の視点から世界を見ようとすることです。」Edson：デザインは、デバイスを手にする人から始まります。

• empathy-semantic-colors - セマンティックカラーを使い、ハードコードした値は使わないでください
• empathy-dark-mode - 最初からダークモードに対応してください
• empathy-foreground-style - foregroundColorではなくforegroundStyleを使ってください
• empathy-safe-areas - コンテンツには常にセーフエリアを尊重してください
• empathy-voiceover-labels - すべてのインタラクティブ要素にVoiceOverラベルを追加してください
• empathy-touch-targets - タッチターゲットは最低44x44ポイントを確保してください
• empathy-reduce-motion - 常に「視差効果を減らす」が有効な場合の代替表示を用意してください
• empathy-readable-width - iPadではテキスト幅を読みやすい範囲に制限してください

2. ビジュアルシステム（CRITICAL）

Edson：「オブジェクト間の関係を見るために、ズームアウトしてください。」Kocienda：収束とは、多くの判断を重ね、ひとつの一貫した全体へと絞り込むことです。

• system-typography - システムのタイポグラフィスタイルを使い、固定サイズは使わないでください
• system-visual-hierarchy - サイズ、ウェイト、色を使って明確な視覚的階層を確立してください
• system-spacing-grid - すべての間隔に4ptを基本単位として使ってください
• system-material-backgrounds - 奥行きとレイヤー感を出すために、マテリアル背景を使ってください
• system-sf-symbols - 一貫したアイコン表現のためにSF Symbolsを使ってください
• system-gradients - 装飾ではなく、視覚的な奥行きを出すためにグラデーションを適用してください
• system-standard-margins - システム標準のマージンを一貫して使ってください
• system-stack-config - スタックの配置と間隔を明示的に設定してください

3. クラフト：基盤としての状態管理（CRITICAL）

Kocienda：「クラフトとは、高品質な結果を実現するために技術を活かすことです。」

• craft-state-local - ビュー内で使う値型には@Stateを使ってください
• craft-state-binding - 子ビューで値を変更する場合は@Bindingを使ってください
• craft-state-environment - アプリ全体で共有するデータには@Environmentを使ってください
• craft-state-observable - モデルクラスには@Observableを使ってください
• craft-avoid-body-state - ビューのbody内で状態を作成しないでください
• craft-minimize-scope - 再レンダリングを減らすため、状態のスコープを最小限にしてください
• craft-state-bindable - @Observableのバインディングには@Bindableを使ってください

4. 創造的な構成（HIGH）

Kocienda：「創造的な選択とは、優れたソフトウェアを構成と再構成によって作り上げることです。」

• compose-body-some-view - bodyからはsome Viewを返し、具体型は返さないでください
• compose-custom-properties - ビューを設定可能にするため、プロパティを使ってください
• compose-modifier-order - ビューモディファイアを正しい順序で適用してください
• compose-viewbuilder - 柔軟なスロットベースの構成には@ViewBuilderを使ってください
• compose-prefer-value-types - ビューのデータには値型を優先してください
• compose-prefer-composition - ビューを再利用する際は、継承より構成を優先してください

5. センス：正しい選択（高）

Kocienda：「センスとは、磨かれた判断力であり、唯一の正しい解決策を選ぶ能力です。」Edson：1つのアプローチに決めて、それを完璧に仕上げます。

• taste-list-vs-lazyvstack - システム機能には List、カスタムレイアウトには LazyVStack を選びます
• taste-sheet-vs-fullscreen - タスクには sheet、没入感を重視する場合には fullScreenCover を選びます
• taste-picker - データ型に適したピッカースタイルを選びます
• taste-grid-vs-lazygrid - 整列したデータには Grid、スクロール可能なコレクションには LazyVGrid を選びます
• taste-button - アクションの重要度に合ったボタンスタイルを使います
• taste-textfield - 適切なキーボードとコンテンツタイプを指定してテキスト入力を設定します
• taste-alerts - アラートは、重要で対応を妨げる情報にのみ使います
• taste-action-sheets - 文脈に応じた複数選択のアクションには確認ダイアログを使います

6. 会話としてのナビゲーション（高）

Edson：「デザインとは、製品と人との対話です。」Kocienda：デモとは、インターフェイスが明確に語りかけているかを確かめる対話です。

• converse-navigationstack - プログラムから制御でき、型安全なナビゲーションには NavigationStack を使います
• converse-tabview - 並列的なナビゲーションには TabView でアプリのセクションを整理します
• converse-sheet-item - データに応じてシートを表示するには item バインディングを使います
• converse-dismiss - モーダルを閉じるには環境の dismiss を使います
• converse-toolbar - ツールバー項目を適切な意味上の位置に配置します
• converse-tab-bar - 最上位のセクション間を移動するにはタブバーを使います
• converse-nav-bar - コンテキストが伝わるようにナビゲーションバーを設定します
• converse-hierarchy - コードを書く前に、明確なナビゲーション階層を設計します
• converse-search - searchable モディファイアを使って検索を組み込みます

7. デザインを声に出す：レイアウト（高）

Edson：「デザインを声に出す――レイアウトが必然に感じられるまで、何度もプロトタイプを作ります。」Kocienda：テクノロジーとリベラルアーツの交差点です。

• layout-stacks - 手動で配置する代わりにスタックを使います
• layout-spacer - 柔軟にスペースを配分するには Spacer を使います
• layout-frame-sizing - 明示的なサイズ制約には frame() を使います
• layout-zstack - 意図的にレイヤーを重ねる構成には ZStack を使います
• layout-grid - スクロールしない、整列した表形式のコンテンツには Grid を使います
• layout-lazy-grids - スクロール可能な複数列レイアウトには LazyVGrid を使います
• layout-adaptive - 異なるサイズクラスにはアダプティブレイアウトを使います
• layout-scroll-indicators - スクロール可能なコンテンツが長い場合はスクロールインジケーターを表示します

8. プロダクトが語る（中）

Edson：「プロダクトそのものがマーケティングです。」Kocienda：Steve Jobs の厳しい目に耐えられるよう、すべてのアニメーションとローディング状態を作り込みます。

• product-transitions - 表示されるビューには意味のあるトランジションを使用します
• product-loading-states - 終わりのないスピナーではなく、誠実なローディング状態を表示します
• product-with-animation - 明示的な状態駆動型アニメーションには withAnimation を使用します
• product-matched-geometry - コンテキストに沿った起点からのトランジションには matchedGeometryEffect を使用します
• product-list-cells - 標準的なレイアウトでリストセルをデザインします
• product-content-unavailable - 空の状態やエラー状態には ContentUnavailableView を使用します
• product-segmented - 視認性が高く、相互排他的なオプションにはセグメントコントロールを使用します
• product-menus - インターフェースを煩雑にせず、副次的なアクションにはメニューを使用します

使用方法

詳しい説明とコード例については、各リファレンスファイルをお読みください。

• セクションの定義 - カテゴリー構成、原則の出典、影響レベル
• ルールのテンプレート - 新しいルールを追加するためのテンプレート

リファレンスファイル

ファイル	説明
references/_sections.md	カテゴリーの定義と原則の根拠
assets/templates/_template.md	新しいルールのテンプレート
metadata.json	バージョンとリファレンス情報