ios-ui-refactor

Apple HIG SwiftUI iOS 26 / Swift 6.2 のベストプラクティス

Rams、Segall、Edsonの考え方に基づき、Apple品質の基準でSwiftUIインターフェースを評価・リファクタリングするための、プリンシパルデザイナーの視点です。8つのカテゴリーにわたる51のルールを収録し、それぞれが3つの基礎的なデザイン書に示された具体的な原則に基づいています。

• Dieter Rams — Ten Principles for Good Design（「少なく、しかしより良く」「デザインは誠実であるべき」）
• Ken Segall — Insanely Simple（直感的で美しい製品を実現するための中核的な原則としてのシンプルさ）
• John Edson — Design Like Apple（デザイン重視の文化、完璧を目指すプロトタイピング、製品そのものがマーケティング）

カテゴリーは視覚的なレビューの流れに沿って並んでいます。まず取り除くもの、次に明確にするもの、そして誠実にするもの、見えなくするもの、体系化するもの、徹底するもの、長く使えるもの、最後に洗練させるものを確認します。

適用範囲と関連するスキル

このスキルはリファクタリングとレビューの視点であり、既存のUIを評価して、修正すべき視覚的なアンチパターンを特定します。ios-design（新しいUIの構築）、ios-hig（HIGへの準拠）、swift-refactor（コードレベルのリファクタリング）と併せて読み込む場合、このスキルは、より詳細な「誤り -> 正しい」変換と「適用しない場合」のガイダンスによって、重複するルールに優先します。既存画面の監査と改善にはこのスキルを、ゼロから実装する場合には関連スキルを使用してください。

Clinicアーキテクチャの契約（iOS 26 / Swift 6.2）

このスキルのすべてのガイダンスは、clinicのモジュール型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画面の視覚品質に関する問題をレビューする場合
• 画面上のすべての要素に存在意義があるかを監査する場合（Rams #10）
• ツールチップなしでインターフェースの使い方が自明かを評価する場合（Rams #4）
• 色、状態、階層が正しい情報を伝えているかを確認する場合（Rams #6）
• アニメーションやマテリアルが装飾ではなく、目立たない存在になっているかを確かめる場合（Rams #5）
• 余白、角丸、色が一貫したシステムを形成しているかを検証する場合（Edson「システム思考」）
• エッジケース（視差効果を減らす設定、タッチターゲット、セーフエリア）に対応しているかを確認する場合（Rams #8）
• これまで実現できなかったインタラクションを洗練させるiOS 26 / Swift 6.2のAPIを採用する場合（Edson「デザインを語る」）

優先度別のルールカテゴリー

優先度	カテゴリー	原則	影響度	接頭辞	ルール数
1	少なく、しかしより良く	Rams #10 + Segall「ミニマルに考える」	CRITICAL	less-	7
2	自明なデザイン	Rams #4 + Segall「人間を考える」	CRITICAL	evident-	6
3	誠実なインターフェース	Rams #6 + Segall「率直に考える」	CRITICAL	honest-	6
4	目立たないデザイン	Rams #5 + Edson「製品そのものがマーケティング」	HIGH	invisible-	6
5	部品ではなく、システム	Edson「システム思考」+ Rams #8	HIGH	system-	6
6	細部まで徹底する	Rams #8 + Rams #2	HIGH	thorough-	7
7	流行より長く使えること	Rams #7 + Edson「確信を持ってデザインする」	MEDIUM-HIGH	enduring-	5
8	反復を通じた洗練	Edson「デザインを語る」+ Rams #1/#3	MEDIUM	refined-	8

クイックリファレンス

1. より少なく、しかしより良く（重要）

Rams #10：「優れたデザインとは、可能な限りデザインを少なくすることです。」Segall：Appleは、何千ものことにノーと言うことで成功しました。

• less-single-focal - 画面ごとに主要な焦点を1つにします
• less-type-restraint - 画面ごとに異なる書体の表現を3～4種類に抑えます
• less-one-typeface - アプリでは書体を1種類にし、ウェイトとサイズで変化をつけます
• less-color-restraint - 彩度の高い色は、小さなインタラクティブ要素に限定します
• less-one-color-purpose - セマンティックカラーごとに用途を1つだけ割り当てます
• less-purposeful-motion - すべてのアニメーションで、状態の変化を伝えるか、フィードバックを提供します
• less-fewer-controls - 中核となるタスクに役立たないコントロールを取り除きます

2. ひと目でわかるデザイン（重要）

Rams #4：「優れたデザインは、製品を理解しやすくします。」Segall：インターフェイスは、人々が理解できる言葉で語る必要があります。

• evident-visual-weight - サイズ、ウェイト、コントラストを組み合わせて階層を表現します
• evident-whitespace-grouping - 余白を使って概念ごとのグループを分けます
• evident-progressive-disclosure - 情報量が多い場合は、段階的開示を使います
• evident-reading-order - 視覚的な重みを論理的な読み順に合わせます
• evident-navigation-intent - タスクや作成にはシートを、階層を掘り下げる場合はプッシュ型のナビゲーションを使います
• evident-label-clarity - 曖昧なアイコンではなく、明確なラベルを使います

3. 誠実なインターフェイス（重要）

Rams #6：「優れたデザインは誠実です。」Segall：飾らずに明快であること。

• honest-semantic-colors - セマンティックカラーを使い、黒や白をハードコードしないようにします
• honest-contrast - WCAG AAのコントラスト比を確保します
• honest-dark-mode - カスタムカラーごとにライトモードとダークモードのバリエーションを定義します
• honest-foreground-style - foregroundColorではなくforegroundStyleを使います
• honest-depth-cues - ドロップシャドウで奥行きを表現するのではなく、レイヤー化にはマテリアルを使います
• honest-loading-states - 終わりのないスピナーではなく、実際の進行状況を表示します

4. 目立たないデザイン（高）

Rams #5：「優れたデザインは控えめです。」Edson：製品そのものがマーケティングです。

• invisible-spring-physics - すべてのUI遷移で、スプリングアニメーションをデフォルトとして使います
• invisible-spring-presets - 通常の動作には.smooth、インタラクティブな動作には.snappy、楽しさを演出するには.bouncyを使います
• invisible-no-easing - UI要素にはlinearやeaseInOutよりもスプリングを優先します
• invisible-system-materials - カスタムの半透明背景ではなく、システムマテリアルを使います
• invisible-symbol-effects - 手動でシンボルをアニメーションさせず、組み込みのsymbolEffectを使います
• invisible-content-transitions - テキストや数値の変更にはcontentTransitionを使います

5. 部分ではなく、システムとして考える（HIGH）

Edson：「デザインとはシステム思考です。」Rams #8：何事も恣意的に決めたり、偶然に任せたりしてはいけません。

• system-spacing-grid - すべての間隔に4ptを基本単位として使用する
• system-consistent-padding - すべての画面で一貫したパディングを使用する
• system-corner-radii - コンポーネントの種類ごとに角丸の半径を統一する
• system-alignment - 画面内でコンテンツの種類ごとに配置を統一する
• system-color-naming - カスタムカラーには色相ではなく役割に基づいた名前を付ける
• system-brand-integration - ブランドのカラーパレットをiOSのセマンティックカラーの役割に対応付ける

6. 細部に至るまで徹底する（HIGH）

Rams #8：「デザインプロセスにおける配慮と正確さは、ユーザーへの敬意を示します。」Rams #2：ユーザーが確実に使えないなら、その製品は失敗です。

• thorough-reduce-motion - 常に視差効果を減らす場合の代替手段を用意する
• thorough-touch-targets - すべてのインタラクティブ要素を少なくとも44x44ポイントにする
• thorough-safe-areas - 常にセーフエリアを尊重する
• thorough-readable-weights - 本文に細いフォントウェイトを使用しない
• thorough-vibrancy-levels - コンテンツの重要度に合わせてビブラシーのレベルを調整する
• thorough-material-thickness - コントラストの要件に応じてマテリアルの厚さを選ぶ
• thorough-background-interaction - ピークスタイルのシートでは背後の画面とのインタラクションを有効にする

7. 流行よりも長く使えること（MEDIUM-HIGH）

Rams #7：「優れたデザインは長く続きます。」Edson：製品の世代を超えて続く表現スタイルを貫きます。

• enduring-system-text-styles - Appleのテキストスタイルを使用し、固定のフォントサイズは使用しない
• enduring-weight-not-caps - 強調にはALL CAPSではなくウェイトを使用する
• enduring-swipe-back - システムの戻るスワイプジェスチャーを決して妨げない
• enduring-zoom-navigation - コレクションから詳細へのナビゲーションにはズームトランジションを使用する
• enduring-card-modularity - ダッシュボードレイアウトには独立性の高いカードを使用する

8. 試行を重ねて磨き上げる（MEDIUM）

Edson：「デザインを声に出して考える」— すべてのインタラクションが必然に感じられるまで、粘り強くプロトタイプを作ります。Rams #1：イノベーションは真の目的に役立つものです。

• refined-scroll-transitions - スクロール位置に応じた視覚効果にはscrollTransitionを使用する
• refined-phase-animator - 複数段階のアニメーションシーケンスにはPhaseAnimatorを使用する
• refined-mesh-gradients - 高品質な動的背景にはMeshGradientを使用する
• refined-text-renderer - ヒーローテキストのアニメーションに限りTextRendererを使用する
• refined-inspector - 末尾側の詳細パネルにはインスペクターを使用する
• refined-multi-detent - ドラッグインジケーター付きの複数のシート停止位置を用意する
• refined-matched-geometry - コンテキストに応じた起点からのトランジションにはmatchedGeometryEffectを使用する
• refined-no-hard-cuts - ごく短いアニメーションでも、状態間の遷移には常にアニメーションを使用する

使用方法

詳しい説明とコード例については、個別のリファレンスファイルを参照してください。

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

参考ファイル

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