swiftui-design-skill

SwiftUI デザインスキル

要約：AI が生成したようではなく、意図を持って丁寧に作り込まれた印象の SwiftUI アプリをデザインします。6 つのアンチスロップルールに従い、要件が曖昧な場合はデザインディレクションのワークフローを使い、リリース前には必ず 5 次元レビューに合格させます。

使用する場面

• SwiftUI のビューや画面をゼロから新しくデザインするとき
• 既存 UI の品質を確認または改善するとき
• iOS アプリのプロトタイプやモックアップを作成するとき
• ビジュアルスタイルやデザインディレクションを選ぶとき
• ブランドアセットを SwiftUI に組み込むとき
• 「UI がありきたりに見える」または「もっと良く見せて」と言われたとき
• ビジュアルデザインが必要な新機能を作るとき

使用しない場面

• UI を含まない、純粋なバックエンド／API 作業
• SwiftUI のコンパイルエラーの修正（代わりに swiftui-expert-skill を使用）
• 既存ビューのパフォーマンス最適化（swiftui-expert-skill を使用）
• アクセシビリティ要件への準拠のみ（swiftui-expert-skill のアクセシビリティトピックを使用）

前提条件

• Xcode 16 以降と iOS 18 以降／macOS 15 以降の SDK
• SwiftUI フレームワーク（明示的に依頼された場合を除き UIKit は使用しない）
• SwiftUI のビュー階層とモディファイアに関する知識

---

デザインの基本理念

次の 6 つの原則が、あらゆるデザイン上の判断の指針となります。実際のデザイン実務と、AI 生成 UI で見られるアンチパターンから導き出したものです。

原則 1：何もないところから始めず、まずコンテキストを確認する

画面をデザインする前に、次の点を確認します。

• 既存のデザインシステム、UI キット、または Figma ファイルはありますか？
• 確立されたビジュアル表現を持つ既存のコードベースはありますか？
• ブランドガイドラインやスタイルガイドはありますか？

コンテキストがない場合は、まず brand-spec.md を作成します（以下のブランドアセットプロトコルを参照）。

原則 2：ジュニアデザイナーモード — 早めに仮説を立て、素早く反復する

「完璧な」デザインができるまで待たないでください。プレースホルダーを使って、早い段階で仮説を提示します。

• 画像には、質の低い AI 生成 SVG よりもグレーのボックスを使うほうが優れています
• 適切な余白のシステムフォントは、余白の悪いカスタムフォントよりも優れています
• 粗くても誠実なレイアウトは、洗練されていてもありきたりなレイアウトより優れています

原則 3：最終案ではなく、バリエーションを提示する

「最終回答」を 1 つだけ提示するのではなく、必ず異なるデザインディレクションを 2～3 案提示します。各案には次の要素が必要です。

• 異なるデザイン哲学を表現している（例：エディトリアル、機能重視、表現豊か）
• その案が効果的な理由を明確に説明できる
• 色を変えただけではなく、見た目に明確な違いがある

原則 4：プレースホルダーは質の低い実装より優先する

実際のアセット（アイコン、画像、イラスト）を用意できない場合は、次のようにします。

• ラベルを明確に付けた、シンプルなグレーのプレースホルダーを使う
• AI 生成の SVG クリップアートは決して使わない
• 本番 UI でアイコンの代わりに絵文字を使わない
• アイコンには SF Symbols（Apple 標準搭載のアイコンライブラリ）を優先する

原則 5：まずはシステムに従い、詰め込みすぎない

すべての要素には、配置するだけの理由が必要です。UI 要素を追加する前に、次の点を確認します。

• これはユーザーの目的に役立ちますか？
• ほかの要素と統合できますか？
• 取り除いた場合、どうなりますか？

余白は空虚さではなく、機能の一部です。

原則 6：AI スロップを避ける

以下のパターンは、本番 UI では禁止です。詳しいルールについては references/anti-ai-slop.md を参照してください。

禁止するビジュアルパターン：

• ❌ 紫から青へのグラデーション背景
• ❌ 機能を示すアイコンとしての絵文字
• ❌ 左側にアクセントカラーの境界線を付けた角丸カード
• ❌ グラデーション上にテキストを中央配置した、ありきたりな「ヒーローセクション」
• ❌ Apple プラットフォームでディスプレイフォントとして使う Inter／Roboto
• ❌ 暗い背景にネオンを合わせた「サイバー」風のデザイン（#0D1117 をベースにするもの）
• ❌ 左右対称の 3 列機能グリッド
• ❌ AI が描いた SVG イラストや CSS のシルエット

代わりに行うこと：

• ✅ ニュートラルな背景に、温かみのあるアクセントカラーを 1 色使う
• ✅ アイコンには SF Symbols またはカスタムアイコンセットを使う
• ✅ 見出しにはセリフ体のディスプレイフォント（例：New York、Georgia）を使う
• ✅ 情報量を抑え、コンテンツにゆとりを持たせる
• ✅ 画面ごとに、労力を 120％注いだ印象的なディテールを 1 つ設ける
• ✅ 実際の写真、またはシンプルなプレースホルダーを使う

---

ブランドアセットプロトコル

特定のブランド向けの UI を構築する場合は、次の5段階の必須フローに従います。

1. 確認する — ブランドガイドライン、ロゴファイル、カラーパレット、タイポグラフィを依頼します
2. 検索する — 提供されていない場合は、ウェブで「[brand name] brand guidelines」を検索します
3. ダウンロードする — 実際のアセットファイル（PNG/SVG ロゴ、フォントファイル）を取得します
4. 検証する — 色が公式情報と一致していることを確認します（16進数の値を確認）
5. brand-spec.md を作成する — プライマリ／セカンダリカラー、フォント、ロゴの使用規則、スペーシングトークンを記録します

品質基準：実際のブランドカラー5色、検証済みデザイントークン10個、フォントファミリー2種類、8ptのスペーシンググリッド。

ブランドが存在しない場合は、次の内容を含む brand-spec.md を作成します。

• アクセントカラー1色（暖色系で、紫から青へのグラデーションではないもの）
• ニュートラルパレット1種類（暖色系の色味を持つグレー）
• ディスプレイフォント1種類＋本文フォント1種類（デフォルトの SF Pro でも問題ありません）
• 8ptのスペーシンググリッド

---

デザイン方針の策定ワークフロー

要件が曖昧な場合や、ユーザーから「どんなスタイルを使えばよいですか？」と尋ねられた場合は、次のワークフローに従います。

フェーズ1：背景を把握する（5分）

1. 質問する：アプリの内容、ユーザー、プラットフォーム（iOS/macOS/watchOS）を確認します。
2. 質問する：参考にしているアプリやウェブサイトがあるか尋ねます。
3. 確認する：既存のデザインシステムやブランドアセットを確認します。

フェーズ2：3つの方針を提案する

異なる流派に基づく、明確に異なるデザイン哲学を3つ提示します。

流派	方針の例
情報重視	データを中心としたクリーンなデザイン、チャートを多用、Bloomberg風
エディトリアル	雑誌風のレイアウト、セリフ体のタイポグラフィ、ゆとりのある余白
表現重視	大胆な色使い、非対称なレイアウト、動きを重視
機能重視	情報量の多い実用的なデザイン、等幅フォントのアクセント、装飾は最小限
温かみのあるミニマル	柔らかなニュートラルカラー、丸みのある形、控えめな質感

フェーズ3：視覚的な特徴を提示する

各方針について、次の内容を説明します。

• カラーパレット（16進数の値付きで3～5色）
• タイポグラフィの組み合わせ（ディスプレイ＋本文）
• レイアウトの密度（ゆったり／コンパクト／広々）
• シグネチャーとなるディテール（各画面につき、際立つ要素を1つ）

フェーズ4：ユーザーに選んでもらう

選択肢を明確に提示します。選択されたら、デザインシステムを確定します。

---

SwiftUI デザインワークフロー

ステップ1：デザインシステムを定義する（コーディング前）

次のデザイントークンを作成するか、既存のものを確認します。

// Requires: references/swift-extensions.md (Color(hex:) extension)
// DesignTokens.swift
enum DesignTokens {
    // Colors
    static let accent = Color(hex: "E85D3A")      // Warm coral
    static let background = Color(hex: "FAFAF8")   // Warm white
    static let textPrimary = Color(hex: "1A1A1A")   // Near-black
    static let textSecondary = Color(hex: "6B6B6B") // Muted gray
    
    // Typography
    static let displayFont = "New York"  // Serif for headings
    static let bodyFont = "SF Pro"       // System default
    
    // Spacing (8pt grid)
    static let spaceXS: CGFloat = 4
    static let spaceS: CGFloat = 8
    static let spaceM: CGFloat = 16
    static let spaceL: CGFloat = 24
    static let spaceXL: CGFloat = 32
    static let spaceXXL: CGFloat = 48
    
    // Corner radius
    static let radiusS: CGFloat = 8
    static let radiusM: CGFloat = 12
    static let radiusL: CGFloat = 16
}

ステップ2：レイアウトの階層を構築する

references/layout-patterns.md のレイアウトパターンに従います。

• 主要なコンテンツコンテナーから始めます
• 縦方向の流れには VStack、横方向には HStack を使用します
• グリッドレイアウトには LazyVGrid / LazyHGrid を使用します
• ページ形式のコンテンツには .scrollTargetBehavior(.paging) を指定した ScrollView を使用します
• GeometryReader は避け、containerRelativeFrame を優先します（iOS 17以降）

ステップ3：タイポグラフィの階層を適用する

references/typography-color.md に従います。

• ディスプレイ（画面タイトル）：セリフ体、28～34pt、太字
• 見出し（セクションタイトル）：サンセリフ体、20～24pt、セミボールド
• 本文（コンテンツのテキスト）：サンセリフ体、15～17pt、レギュラー
• キャプション（ラベル、メタデータ）：サンセリフ体、12～13pt、セカンダリカラー

ステップ4：シグネチャーとなるディテールを加える

各画面には、120％の力を注ぐ要素を1つ設けます。カスタムアニメーション、独自のレイアウトの選択、印象的な色使いなどです。これがデザインを記憶に残るものにします。

例：

• ブランドカラーのアニメーションを使ったカスタムのプルリフレッシュ
• タップするとスプリングアニメーションで展開するカード
• ブランドのディスプレイフォントを特大サイズで使ったヘッダー
• スクロール時の控えめな視差効果

ステップ5：チェックリストに照らして確認する

リリース前に、5項目のデザインレビューを実施します（references/design-review.md を参照）。

---

よくある間違いとその修正方法

間違い	修正方法
UIColor または NSColor を使用する	SwiftUI ネイティブの Color を使用します
サイズ指定に UIScreen.main.bounds を使用する	containerRelativeFrame またはジオメトリベースのモディファイアを使用します
あらゆる場所でデフォルトの青いティントを使う	デザイントークンでカスタムのアクセントカラーを定義します
間隔のシステムがない（パディング値がばらばら）	8pt グリッドを使用します：4、8、16、24、32、48
アイコンに絵文字を使う	SF Symbols またはカスタムアイコンアセットを使用します
紫と青のグラデーション背景	暖色系の無彩色を単色で使用します
すべてのコンテンツを巨大な VStack 1つにまとめる	明確な階層を持つ意味的なセクションに分割します
視覚的な階層がない（すべて同じサイズ）	3種類以上の文字スケール（ディスプレイ、見出し、本文、キャプション）を使用します
ダークモードを考慮しない	外観に応じて適応するセマンティックカラーを定義します
汎用的な「ようこそ！」ヒーローセクション	実際のコンテンツをすぐに表示します

---

クイックリファレンス：トピック案内

トピック	参照ファイル
アンチ AI スロップルール（詳細）	references/anti-ai-slop.md
レイアウトパターンとグリッド	references/layout-patterns.md
タイポグラフィとカラーシステム	references/typography-color.md
5次元デザインレビュー	references/design-review.md
Swift 拡張機能（必須）	references/swift-extensions.md
ブランド仕様テンプレート	templates/brand-spec.md

---

検証チェックリスト

SwiftUI のデザインを完成とする前に、次の項目を確認してください。

• デザイントークンが定義されている（カラー、フォント、間隔）
• 禁止されている AI スロップのパターンが含まれていない
• タイポグラフィに明確な階層がある（3種類以上のスケール）
• 間隔が8ptグリッドに沿っている
• ダークモードのカラーが定義され、テストされている
• 各画面に特徴的なディテールが1つある
• アイコンに絵文字ではなく SF Symbols が使われている
• タップ領域が最小44×44ptである
• GeometryReader または UIScreen.main.bounds を使用していない
• 5次元レビューのすべての評価項目でスコアが7/10以上である