design-audit

デザイン監査スキル

既存の SwiftUI View が Swift Design System に準拠しているかを体系的に監査する。

---

監査手順

1. 対象ファイルを読み込む: View のソースコードを全文読む
2. 6カテゴリで検査: 下記の監査カテゴリを順番に確認
3. 重大度を分類: Critical / Warning / Recommendation に分類
4. レポートを出力: 構造化された監査レポートを生成
5. 修正提案: 自動修正可能な箇所を提示

---

監査カテゴリ

1. トークン準拠性

ハードコードされた値がないか検出する。

検出対象	正しい使用	重大度
Color.red, .red, Color(hex:) など	colors.error, colors.primary 等	Critical
.font(.system(size:))	.typography(.bodyMedium) 等	Critical
.padding(16), spacing: 12 等の数値直指定	spacing.lg, spacing.md 等	Warning
cornerRadius: 8 等の数値直指定	radius.lg 等	Warning
.animation(.easeOut(duration:))	.animate(motion.tap, value:)	Warning

ColorPalette プロパティ一覧（これ以外の Color を使っていたら違反）:

• primary, onPrimary, primaryContainer, onPrimaryContainer
• secondary, onSecondary, secondaryContainer, onSecondaryContainer
• tertiary, onTertiary
• background, onBackground
• surface, onSurface, surfaceVariant, onSurfaceVariant
• error, onError, errorContainer, onErrorContainer
• warning, onWarning, success, onSuccess, info, onInfo
• outline, outlineVariant

SpacingScale 値一覧: none(0), xxs(2), xs(4), sm(8), md(12), lg(16), xl(24), xxl(32), xxxl(48), xxxxl(64)

Typography 一覧: displayLarge(57), displayMedium(45), displaySmall(36), headlineLarge(32), headlineMedium(28), headlineSmall(24), titleLarge(22), titleMedium(16), titleSmall(14), bodyLarge(16), bodyMedium(14), bodySmall(12), labelLarge(14), labelMedium(12), labelSmall(11)

2. コンポーネント使用

カスタム実装が既存コンポーネントで代替できないか確認する。

パターン	代替コンポーネント
手動の角丸+影+背景カード	Card(elevation:)
カスタムボタンスタイル	.buttonStyle(.primary/.secondary/.tertiary) + .buttonSize()
タイトル付きカードセクション	SectionCard(title:elevation:)
カスタムアイコンバッジ	IconBadge(systemName:size:)
カスタム進捗表示	ProgressBar
カスタムテキスト入力	DSTextField
カスタム通知バナー	Snackbar
タグ/フィルター UI	Chip + .chipStyle(.filled/.outlined)
フローティングボタン	FloatingActionButton
グリッドレイアウト	AspectGrid

3. アクセシビリティ

チェック項目	基準	重大度
accessibilityLabel	インタラクティブ要素に必須	Critical
タップターゲット	最小 44x44pt	Critical
Dynamic Type	.typography() 使用で自動対応	Warning
reduce motion	.animate() 使用で自動対応	Warning
コントラスト比	on* カラーと * カラーのペア使用	Warning

4. テーマ対応

チェック項目	基準	重大度
ThemeProvider	ルートに .theme(themeProvider)	Critical
Environment 宣言	@Environment(\.colorPalette) 等	Critical
ダークモード	colors.surface / colors.onSurface 等のペア使用	Warning
テーマ切替	複数テーマで表示が崩れないか	Recommendation

5. Preview カバレッジ

必須 Preview	説明	重大度
Default	通常状態	Warning
Dark Mode	.theme(ThemeProvider(initialMode: .dark))	Warning
Large Text	.environment(\.sizeCategory, .accessibilityExtraLarge)	Recommendation
Compact	最小コンテンツ	Recommendation
Edge Case	長文、大量データ	Recommendation
.theme(ThemeProvider())	すべての Preview に必須	Critical

6. 構造品質

チェック項目	基準	重大度
View の body 行数	40行以下推奨	Recommendation
ViewModifier 抽出	繰り返しの修飾は ViewModifier に	Recommendation
サブView 分割	独立した論理単位は別 View に	Recommendation
import DesignSystem	必須	Critical

---

重大度レベル

レベル	意味	対応
Critical	Design System 違反。修正必須	即座に修正
Warning	推奨パターンからの逸脱	早めに修正
Recommendation	改善提案	次回以降に検討

---

監査レポートフォーマット

# Design System 監査レポート

**対象**: `FileName.swift`
**日時**: YYYY-MM-DD
**スコア**: X / 6 カテゴリ合格

## サマリー

| カテゴリ | 結果 | Critical | Warning | Recommendation |
|---------|------|----------|---------|----------------|
| トークン準拠性 | ✅/❌ | 0 | 0 | 0 |
| コンポーネント使用 | ✅/❌ | 0 | 0 | 0 |
| アクセシビリティ | ✅/❌ | 0 | 0 | 0 |
| テーマ対応 | ✅/❌ | 0 | 0 | 0 |
| Preview カバレッジ | ✅/❌ | 0 | 0 | 0 |
| 構造品質 | ✅/❌ | 0 | 0 | 0 |

## 詳細

### 🔴 Critical

1. **[トークン準拠性]** L15: `.foregroundColor(.red)` → `.foregroundStyle(colors.error)`
2. **[テーマ対応]** L3: `@Environment` 宣言なし → `@Environment(\.colorPalette) private var colors` を追加

### 🟡 Warning

1. **[トークン準拠性]** L22: `.padding(16)` → `.padding(spacing.lg)`

### 🟢 Recommendation

1. **[構造品質]** body が 55 行 → サブView に分割を検討

---

よくある違反と自動修正

ハードコードカラー → セマンティックカラー

// Before
.foregroundColor(.red)
.background(Color.white)
.foregroundColor(.gray)

// After
.foregroundStyle(colors.error)
.background(colors.surface)
.foregroundStyle(colors.onSurfaceVariant)

直値スペーシング → トークン

// Before
.padding(16)
VStack(spacing: 8) { ... }

// After
.padding(spacing.lg)
VStack(spacing: spacing.sm) { ... }

直接フォント → Typography

// Before
.font(.system(size: 14, weight: .medium))
.font(.title)

// After
.typography(.bodyMedium)
.typography(.titleLarge)

直接アニメーション → Motion トークン

// Before
.animation(.easeOut(duration: 0.1), value: isActive)

// After
.animate(motion.tap, value: isActive)

カスタムカード → Card コンポーネント

// Before
content
    .padding(16)
    .background(Color.white)
    .clipShape(RoundedRectangle(cornerRadius: 12))
    .shadow(color: .black.opacity(0.1), radius: 4, y: 2)

// After
Card(elevation: .level2) {
    content
}

---

関連スキル

• design-system-workflow: トークン・コンポーネントの詳細リファレンス
• component-gen: 新規コンポーネント生成
• design-diff: 修正前後の視覚的差分
• ios-build-workflow: ビルド・テスト実行