iOS Mobile Design

iOS Human Interface Guidelines (HIG) と SwiftUI パターンをマスターして、Apple プラットフォームに自然に統合された洗練されたネイティブ iOS アプリケーションを構築します。

このスキルを使う場面

• Apple HIG に従った iOS アプリインターフェースの設計
• SwiftUI ビューとレイアウトの構築
• iOS ナビゲーションパターン (NavigationStack, TabView, sheets) の実装
• iPhone と iPad の適応的レイアウトの作成
• SF Symbols とシステムタイポグラフィの使用
• アクセシブルな iOS インターフェースの構築
• iOS 固有のジェスチャーとインタラクションの実装
• Dynamic Type と Dark Mode 対応の設計

コア概念

1. Human Interface Guidelines の原則

明確さ: コンテンツが読みやすく、アイコンが正確で、装飾が控えめ 配慮: UI がユーザーのコンテンツ理解を助け、それ自体が目立たない 奥行き: ビジュアルレイヤーとモーションが階層を表現し、ナビゲーションを可能にする

プラットフォーム別の考慮事項:

• iOS: タッチファースト、コンパクトディスプレイ、ポートレート向き
• iPadOS: より大きなキャンバス、マルチタスキング、ポインタ対応
• visionOS: 空間コンピューティング、アイ/ハンド入力

2. SwiftUI レイアウトシステム

スタックベースレイアウト:

// 垂直スタック（配置とスペーシング付き）
VStack(alignment: .leading, spacing: 12) {
    Text("Title")
        .font(.headline)
    Text("Subtitle")
        .font(.subheadline)
        .foregroundStyle(.secondary)
}

// 柔軟なスペーシングを持つ水平スタック
HStack {
    Image(systemName: "star.fill")
    Text("Featured")
    Spacer()
    Text("View All")
        .foregroundStyle(.blue)
}

グリッドレイアウト:

// 利用可能な幅を埋める適応的グリッド
LazyVGrid(columns: [
    GridItem(.adaptive(minimum: 150, maximum: 200))
], spacing: 16) {
    ForEach(items) { item in
        ItemCard(item: item)
    }
}

// 固定列グリッド
LazyVGrid(columns: [
    GridItem(.flexible()),
    GridItem(.flexible()),
    GridItem(.flexible())
], spacing: 12) {
    ForEach(items) { item in
        ItemThumbnail(item: item)
    }
}

3. ナビゲーションパターン

NavigationStack (iOS 16+):

struct ContentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            List(items) { item in
                NavigationLink(value: item) {
                    ItemRow(item: item)
                }
            }
            .navigationTitle("Items")
            .navigationDestination(for: Item.self) { item in
                ItemDetailView(item: item)
            }
        }
    }
}

TabView (iOS 18+):

struct MainTabView: View {
    @State private var selectedTab = 0

    var body: some View {
        TabView(selection: $selectedTab) {
            Tab("Home", systemImage: "house", value: 0) {
                HomeView()
            }

            Tab("Search", systemImage: "magnifyingglass", value: 1) {
                SearchView()
            }

            Tab("Profile", systemImage: "person", value: 2) {
                ProfileView()
            }
        }
    }
}

4. システム統合

SF Symbols:

// 基本的なシンボル
Image(systemName: "heart.fill")
    .foregroundStyle(.red)

// レンダリングモード付きシンボル
Image(systemName: "cloud.sun.fill")
    .symbolRenderingMode(.multicolor)

// 可変シンボル (iOS 16+)
Image(systemName: "speaker.wave.3.fill", variableValue: volume)

// シンボルエフェクト (iOS 17+)
Image(systemName: "bell.fill")
    .symbolEffect(.bounce, value: notificationCount)

Dynamic Type:

// セマンティックフォントを使用
Text("Headline")
    .font(.headline)

Text("ユーザーの設定に応じてスケールするボディテキスト")
    .font(.body)

// Dynamic Type を尊重するカスタムフォント
Text("Custom")
    .font(.custom("Avenir", size: 17, relativeTo: .body))

5. ビジュアルデザイン

色とマテリアル:

// ライト/ダークモードに自動適応するセマンティックカラー
Text("Primary")
    .foregroundStyle(.primary)
Text("Secondary")
    .foregroundStyle(.secondary)

// ブラー効果用のシステムマテリアル
Rectangle()
    .fill(.ultraThinMaterial)
    .frame(height: 100)

// オーバーレイ用のビブラントマテリアル
Text("Overlay")
    .padding()
    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))

シャドウと奥行き:

// 標準的なカード影
RoundedRectangle(cornerRadius: 16)
    .fill(.background)
    .shadow(color: .black.opacity(0.1), radius: 8, y: 4)

// 浮き上がった外観
.shadow(radius: 2, y: 1)
.shadow(radius: 8, y: 4)

クイックスタートコンポーネント

import SwiftUI

struct FeatureCard: View {
    let title: String
    let description: String
    let systemImage: String

    var body: some View {
        HStack(spacing: 16) {
            Image(systemName: systemImage)
                .font(.title)
                .foregroundStyle(.blue)
                .frame(width: 44, height: 44)
                .background(.blue.opacity(0.1), in: Circle())

            VStack(alignment: .leading, spacing: 4) {
                Text(title)
                    .font(.headline)
                Text(description)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .lineLimit(2)
            }

            Spacer()

            Image(systemName: "chevron.right")
                .foregroundStyle(.tertiary)
        }
        .padding()
        .background(.background, in: RoundedRectangle(cornerRadius: 12))
        .shadow(color: .black.opacity(0.05), radius: 4, y: 2)
    }
}

ベストプラクティス

1. セマンティックカラーを使用: ライト/ダークモード自動対応のため、常に .primary, .secondary, .background を使用してください
2. SF Symbols を活用: 一貫性と自動アクセシビリティのためシステムシンボルを使用してください
3. Dynamic Type に対応: 固定サイズではなく、セマンティックフォント (.body, .headline) を使用してください
4. アクセシビリティを追加: .accessibilityLabel() と .accessibilityHint() モディファイアを含めてください
5. セーフエリアを尊重: safeAreaInset を尊重し、スクリーン端に固定パディングを避けてください
6. 状態復元を実装: ユーザーの状態を保持するために @SceneStorage を使用してください
7. iPad マルチタスキングをサポート: スプリットビューとスライドオーバーに対応する設計をしてください
8. 実機でテスト: シミュレータは完全なハプティクスとパフォーマンス体験をキャプチャしていません

よくある問題

• レイアウトの崩れ: .fixedSize() は慎重に使用してください。柔軟なレイアウトを優先してください
• パフォーマンスの問題: 長いスクロールリストには LazyVStack/LazyHStack を使用してください
• ナビゲーションのバグ: NavigationLink の値が Hashable であることを確認してください
• Dark Mode の問題: ハードコーディングされた色を避けてください。セマンティックカラーまたはアセットカタログカラーを使用してください
• アクセシビリティの失敗: VoiceOver を有効にしてテストしてください
• メモリリーク: クロージャ内での強い参照循環に注意してください