Apple HIG Designer

Apple の Human Interface Guidelines (HIG) に従った美しいネイティブ iOS アプリを設計します。ネイティブコンポーネント、適切なタイポグラフィ、セマンティックカラー、および Apple のデザイン原則を使用して、アクセシブルで直感的なインターフェースを作成します。

このスキルが実行できること

iOS アプリを設計・構築し、ネイティブな外観を備え Apple のガイドラインに従うのをサポートします:

• iOS コンポーネントの生成 - SwiftUI と UIKit コンポーネントを作成
• デザインの検証 - Apple HIG への準拠を確認
• アクセシビリティの確保 - VoiceOver、Dynamic Type、色のコントラスト
• デザイン原則の適用 - 明確性、配慮、深さ
• セマンティックカラーの使用 - 自動ダークモード対応
• タイポグラフィの実装 - San Francisco フォントシステム
• スペーシングの遵守 - 8pt グリッドシステムとセーフエリア

Apple のデザイン原則

1. 明確性 (Clarity)

コンテンツを明確かつ焦点を絞った状態にします。

テキストはあらゆるサイズで読みやすく、アイコンは正確で明確、装飾は控えめで適切であり、機能への焦点がデザインを駆動します。

// ✅ 明確で焦点を絞ったコンテンツ
Text("Welcome back, Sarah")
    .font(.title)
    .foregroundColor(.primary)

// ❌ 不明確で雑然とした
Text("Welcome back, Sarah!!!")
    .font(.title)
    .foregroundColor(.red)
    .background(.yellow)
    .overlay(Image(systemName: "star.fill"))

2. 配慮 (Deference)

UI はコンテンツの理解とインタラクションを助けますが、決してコンテンツと競合しません。

インターフェースはコンテンツに配慮し、軽い視覚的処理を使用してコンテンツに焦点を当て、コンテンツが息をする余地を与えます。

// ✅ コンテンツに焦点を当てた
VStack(alignment: .leading, spacing: 8) {
    Text("Article Title")
        .font(.headline)
    Text("Article content goes here...")
        .font(.body)
        .foregroundColor(.secondary)
}
.padding()

// ❌ 注意散漫な UI
VStack(spacing: 8) {
    Text("Article Title")
        .font(.headline)
        .foregroundColor(.white)
        .background(.blue)
        .border(.red, width: 3)
}

3. 深さ (Depth)

視覚的レイヤーと現実的なモーションは階層を示し、関係の理解を助けます。

個別の視覚的レイヤーと現実的なモーションはつやを与え、理解を促進します。タッチと発見性は喜びを高め、コンテキストを失わずに機能へのアクセスを可能にします。

// ✅ 明確な深さの階層
ZStack {
    Color(.systemBackground)

    VStack {
        // 高さを持つカード
        CardView()
            .shadow(radius: 8)
    }
}

// 深さのためのぼかしを使用
Text("Content")
    .background(.ultraThinMaterial)

iOS UI コンポーネント

ナビゲーション パターン

1. Navigation Bar

ナビゲーションとアクションのための上部バー。

NavigationStack {
    List {
        Text("Item 1")
        Text("Item 2")
    }
    .navigationTitle("Title")
    .navigationBarTitleDisplayMode(.large)
    .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
            Button("Add") {
                // Action
            }
        }
    }
}

ガイドライン:

• トップレベルビューには大きなタイトルを使用
• 詳細ビューにはインラインタイトルを使用
• アクションは現在のコンテキストに関連させる
• ツールバーアイテムは最大 2～3 個

2. Tab Bar

トップレベルの目的地のためのボトムナビゲーション。

TabView {
    HomeView()
        .tabItem {
            Label("Home", systemImage: "house")
        }

    SearchView()
        .tabItem {
            Label("Search", systemImage: "magnifyingglass")
        }

    ProfileView()
        .tabItem {
            Label("Profile", systemImage: "person")
        }
}

ガイドライン:

• タブは最大 3～5 個
• アイコンに SF Symbols を使用
• ラベルは簡潔に (1 語)
• タブを非表示にしたり無効にしない
• 同じビューでタブバーとツールバーを併用しない

3. List

スクロール可能なアイテムのリスト。

List {
    Section("Today") {
        ForEach(items) { item in
            NavigationLink {
                DetailView(item: item)
            } label: {
                HStack {
                    Image(systemName: item.icon)
                        .foregroundColor(.accentColor)
                    Text(item.title)
                }
            }
        }
    }
}
.listStyle(.insetGrouped)

リストスタイル:

• .plain - エッジツーエッジの行
• .insetGrouped - 角丸でインセットされたセクション (iOS デフォルト)
• .sidebar - ナビゲーションサイドバー用

4. Sheet (モーダル)

コンテンツをモーダルで表示。

struct ContentView: View {
    @State private var showSheet = false

    var body: some View {
        Button("Show Details") {
            showSheet = true
        }
        .sheet(isPresented: $showSheet) {
            DetailView()
                .presentationDetents([.medium, .large])
        }
    }
}

Sheet Detents:

• .medium - 半画面
• .large - 全画面
• カスタム高さも利用可能

フォームコントロール

1. Button

主要なアクションコントロール。

// 塗りつぶしボタン (主要アクション)
Button("Continue") {
    // Action
}
.buttonStyle(.borderedProminent)

// 枠線付きボタン (副次アクション)
Button("Cancel") {
    // Action
}
.buttonStyle(.bordered)

// プレーンボタン (3 番目のアクション)
Button("Learn More") {
    // Action
}
.buttonStyle(.plain)

ボタンの階層:

1. Prominent - 主要アクション (画面あたり 1 つ)
2. Bordered - 副次アクション
3. Plain - 3 番目のアクション、リンク

ガイドライン:

• 最小タップターゲット: 44×44 ポイント
• ボタンラベルには動詞を使用
• 破壊的なアクションには確認を要求

2. TextField

テキスト入力コントロール。

@State private var username = ""
@State private var password = ""

VStack(alignment: .leading, spacing: 16) {
    // 標準テキストフィールド
    TextField("Username", text: $username)
        .textFieldStyle(.roundedBorder)
        .textContentType(.username)
        .textInputAutocapitalization(.never)
        .autocorrectionDisabled()

    // セキュアフィールド
    SecureField("Password", text: $password)
        .textFieldStyle(.roundedBorder)
        .textContentType(.password)
}

テキストコンテンツタイプ:

• .username - ユーザー名フィールド
• .password - パスワードフィールド
• .emailAddress - メールフィールド
• .telephoneNumber - 電話番号
• .creditCardNumber - クレジットカード

3. Toggle

ブール型コントロール (スイッチ)。

@State private var isEnabled = false

Toggle("Enable notifications", isOn: $isEnabled)
    .toggleStyle(.switch)

ガイドライン:

• ラベルは切り替えが制御する内容を説明
• 効果は即座に反映される必要あり
• 二者択一にのみ使用

4. Picker

選択コントロール。

@State private var selectedSize = "Medium"
let sizes = ["Small", "Medium", "Large"]

// メニュースタイル
Picker("Size", selection: $selectedSize) {
    ForEach(sizes, id: \.self) { size in
        Text(size).tag(size)
    }
}
.pickerStyle(.menu)

// セグメント化されたスタイル (2～5 オプション用)
Picker("Size", selection: $selectedSize) {
    ForEach(sizes, id: \.self) { size in
        Text(size).tag(size)
    }
}
.pickerStyle(.segmented)

ピッカースタイル:

• .menu - ドロップダウンメニュー (デフォルト)
• .segmented - セグメント化されたコントロール (2～5 オプション)
• .wheel - スクロール可能なホイール
• .inline - インラインリスト (フォーム内)

カードとコンテナ

Card View

struct CardView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Title")
                .font(.headline)

            Text("Description goes here with some details about the content.")
                .font(.subheadline)
                .foregroundColor(.secondary)
                .lineLimit(2)

            Spacer()

            Button("Action") {
                // Action
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
        .frame(width: 300, height: 200)
        .background(Color(.systemBackground))
        .cornerRadius(12)
        .shadow(color: .black.opacity(0.1), radius: 8, x: 0, y: 4)
    }
}

タイポグラフィ

San Francisco フォントシステム

最適な可読性のために設計された Apple のシステムフォント。

// Dynamic Type テキストスタイル
Text("Large Title").font(.largeTitle)      // 34pt
Text("Title").font(.title)                 // 28pt
Text("Title 2").font(.title2)              // 22pt
Text("Title 3").font(.title3)              // 20pt
Text("Headline").font(.headline)           // 17pt semibold
Text("Body").font(.body)                   // 17pt regular
Text("Callout").font(.callout)             // 16pt
Text("Subheadline").font(.subheadline)     // 15pt
Text("Footnote").font(.footnote)           // 13pt
Text("Caption").font(.caption)             // 12pt
Text("Caption 2").font(.caption2)          // 11pt

Dynamic Type を使用したカスタムフォント

// Dynamic Type に合わせてスケーリングするカスタムフォント
Text("Custom Text")
    .font(.custom("YourFont-Regular", size: 17, relativeTo: .body))

フォントウェイト

Text("Light").fontWeight(.light)
Text("Regular").fontWeight(.regular)
Text("Medium").fontWeight(.medium)
Text("Semibold").fontWeight(.semibold)
Text("Bold").fontWeight(.bold)
Text("Heavy").fontWeight(.heavy)

タイポグラフィガイドライン

実施すること:

• ✅ 一貫性のためシステムフォント (San Francisco) を使用
• ✅ アクセシビリティのため Dynamic Type をサポート
• ✅ セマンティックテキストスタイル (.headline, .body など) を使用
• ✅ 本文テキストの最小サイズ: 17pt
• ✅ 行間: フォントサイズの 120～145%

実施しないこと:

• ❌ 多くのフォントサイズを使用しない (システムスタイルに従う)
• ❌ テキストを 11pt より小さくしない
• ❌ 長いテキストに大文字を使用しない
• ❌ Dynamic Type を無効にしない

カラー

セマンティックカラー

ライト/ダークモードに自動的に適応するカラー。

// UI エレメントカラー
Color(.label)                    // 主要テキスト
Color(.secondaryLabel)           // 副次テキスト
Color(.tertiaryLabel)            // 3 番目のテキスト
Color(.quaternaryLabel)          // ウォーターマークテキスト

Color(.systemBackground)         // 主要背景
Color(.secondarySystemBackground) // 副次背景
Color(.tertiarySystemBackground)  // 3 番目の背景

Color(.systemFill)               // 塗りつぶしカラー
Color(.secondarySystemFill)
Color(.tertiarySystemFill)
Color(.quaternarySystemFill)

Color(.separator)                // セパレータライン
Color(.opaqueSeparator)          // 非透明セパレータ

システムカラー

// 標準システムカラー (ダークモードに適応)
Color(.systemRed)
Color(.systemOrange)
Color(.systemYellow)
Color(.systemGreen)
Color(.systemMint)
Color(.systemTeal)
Color(.systemCyan)
Color(.systemBlue)
Color(.systemIndigo)
Color(.systemPurple)
Color(.systemPink)
Color(.systemBrown)
Color(.systemGray)

ダークモード対応のカスタムカラー

// 適応型カラーを定義
extension Color {
    static let customBackground = Color("CustomBackground")
}

// Assets.xcassets でカラーセットを作成し以下を含めます:
// - Any Appearance: #FFFFFF
// - Dark Appearance: #000000

色のコントラストガイドライン

WCAG AA 準拠:

• 通常テキスト: 最小コントラスト比 4.5:1
• 大型テキスト (24pt 以上): 最小コントラスト比 3:1
• UI コンポーネント: コントラスト比 3:1

カスタムカラー:

• 「コントラスト増加」を有効にして テスト
• 重要なテキストは 7:1 を目指す
• 両方のモードで十分なコントラストを提供

スペーシングとレイアウト

8 ポイントグリッドシステム

すべてのスペーシングは 8 の倍数であるべき。

// スペーシング値
.padding(8)      // 8pt
.padding(16)     // 16pt (標準)
.padding(24)     // 24pt
.padding(32)     // 32pt
.padding(40)     // 40pt
.padding(48)     // 48pt

// エッジ固有のパディング
.padding(.horizontal, 16)
.padding(.vertical, 24)
.padding(.top, 16)
.padding(.bottom, 16)

セーフエリア

デバイスのセーフエリアを尊重。

// セーフエリア内のコンテンツ (デフォルト)
VStack {
    Text("Content")
}

// セーフエリアを超えて拡張
VStack {
    Color.blue
}
.ignoresSafeArea()

// 上部のみを拡張
VStack {
    Color.blue
}
.ignoresSafeArea(edges: .top)

タップターゲット

最小インタラクティブサイズ: 44×44 ポイント。

Button("Tap") {
    // Action
}
.frame(minWidth: 44, minHeight: 44)

スペーシングガイドライン

// コンポーネントスペーシング
VStack(spacing: 8) {       // タイトなスペーシング
    Text("Line 1")
    Text("Line 2")
}

VStack(spacing: 16) {      // 標準スペーシング
    Text("Section 1")
    Text("Section 2")
}

VStack(spacing: 24) {      // ゆったりしたスペーシング
    SectionView()
    SectionView()
}

アクセシビリティ

VoiceOver サポート

目の見えない、または弱視ユーザー向けのスクリーンリーダー。

// アクセシブルラベル
Image(systemName: "heart.fill")
    .accessibilityLabel("Favorite")

// アクセシブル値
Slider(value: $volume)
    .accessibilityLabel("Volume")
    .accessibilityValue("\(Int(volume * 100))%")

// アクセシブルヒント
Button("Share") {
    share()
}
.accessibilityHint("Shares this item with others")

// エレメントをグループ化
HStack {
    Image(systemName: "person")
    Text("John Doe")
}
.accessibilityElement(children: .combine)

// VoiceOver から非表示
Image("decorative")
    .accessibilityHidden(true)

Dynamic Type

ユーザーの優先テキストサイズをサポート。

// システムフォントで自動的にサポート
Text("This text scales")
    .font(.body)

// スケーリングを制限 (必要な場合)
Text("This text has limits")
    .font(.body)
    .dynamicTypeSize(...DynamicTypeSize.xxxLarge)

// Dynamic Type を備えたカスタムフォント
Text("Custom font")
    .font(.custom("YourFont", size: 17, relativeTo: .body))

色覚異常

色覚異常のあるユーザーのために設計。

// 色のみに依存しない
HStack {
    Image(systemName: "checkmark.circle.fill")
        .foregroundColor(.green)
    Text("Success")
}

// 単なる色ではなく
Circle()
    .fill(.green)
// ❌ 色のみ

// より良い形状/アイコン付き
HStack {
    Image(systemName: "checkmark.circle.fill")
    Circle().fill(.green)
}
// ✅ 色 + 形状

モーション削減

ユーザーのモーション設定を尊重。

@Environment(\.accessibilityReduceMotion) var reduceMotion

var animation: Animation {
    reduceMotion ? .none : .spring()
}

Button("Animate") {
    withAnimation(animation) {
        // Animate
    }
}

コントラスト増加

高コントラストモードをサポート。

@Environment(\.colorSchemeContrast) var contrast

var textColor: Color {
    contrast == .increased ? .primary : .secondary
}

Text("Content")
    .foregroundColor(textColor)

ダークモード

ライトとダークの両方の外観をサポート。

自動サポート

// セマンティックカラーを使用 (自動)
Color(.label)                // 自動的に適応
Color(.systemBackground)     // 自動的に適応

ダークモードのテスト

// 両方のモードをプレビュー
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .preferredColorScheme(.light)

        ContentView()
            .preferredColorScheme(.dark)
    }
}

ダークモードガイドライン

実施すること:

• ✅ セマンティックカラーを使用
• ✅ コントラスト増加でテスト
• ✅ 透明度削減でテスト
• ✅ 両方のモードで十分なコントラストを確保

実施しないこと:

• ❌ 純粋な黒 (#000000) を使用しない - systemBackground を使用
• ❌ 色を自動的に反転しない
• ❌ ユーザーの設定を想定しない

SF Symbols

Apple のアイコンシステム (3000 以上のシンボル)。

// 基本シンボル
Image(systemName: "heart")

// 色付きシンボル
Image(systemName: "heart.fill")
    .foregroundColor(.red)

// サイズ調整シンボル
Image(systemName: "heart")
    .imageScale(.large)

// フォントベースのサイジング
Image(systemName: "heart")
    .font(.title)

// マルチカラーシンボル
Image(systemName: "person.crop.circle.fill.badge.checkmark")
    .symbolRenderingMode(.multicolor)

// 階層的レンダリング
Image(systemName: "heart.fill")
    .symbolRenderingMode(.hierarchical)
    .foregroundColor(.red)

SF Symbols ガイドライン

• 利用可能な場合、システムシンボルを使用
• 視覚的なウェイト一貫性を維持
• セマンティック意味にマルチカラーを使用
• コンテキストに適切にサイズ調整

アプリアイコン

アイコンサイズ

iOS:
- 1024x1024 (App Store)
- 180x180 (iPhone @3x)
- 120x120 (iPhone @2x)
- 167x167 (iPad Pro)
- 152x152 (iPad @2x)

watchOS:
- 1024x1024 (App Store)
- 196x196 (49mm)
- 216x216 (45mm)

アイコンデザインガイドライン

実施すること:

• ✅ シンプルで認識可能な形状を使用
• ✅ アイコン空間全体を塗りつぶす
• ✅ デバイスでテスト (モックアップだけでなく)
• ✅ 一貫した視覚的スタイルを使用

実施しないこと:

• ❌ テキストを含めない (非常に小さい場合)
• ❌ 写真を使用しない
• ❌ Apple ハードウェアを複製しない
• ❌ 透明性を使用しない

アニメーションとモーション

標準アニメーション

// スプリングアニメーション (自然、バウンシー)
withAnimation(.spring()) {
    offset = 100
}

// リニアアニメーション
withAnimation(.linear(duration: 0.3)) {
    opacity = 0
}

// イーズイン/アウト
withAnimation(.easeInOut(duration: 0.3)) {
    scale = 1.2
}

ジェスチャー駆動

@State private var offset = CGSize.zero

var body: some View {
    Circle()
        .offset(offset)
        .gesture(
            DragGesture()
                .onChanged { value in
                    offset = value.translation
                }
                .onEnded { _ in
                    withAnimation(.spring()) {
                        offset = .zero
                    }
                }
        )
}

モーションガイドライン

• アニメーションは 0.3 秒以下に保つ
• インタラクティブ要素にはスプリングアニメーションを使用
• モーション削減設定を尊重
• すべてのインタラクションに視覚的フィードバックを提供

ベストプラクティス

ナビゲーション

• 階層型 - ドリルダウンに NavigationStack を使用
• フラット - ピア目的地に TabView を使用
• コンテンツ駆動型 - メディアアプリに使用

フィードバック

• 視覚的 - タップ時にハイライト
• ハプティック - UIImpactFeedbackGenerator を使用
• オーディオ - システムサウンドは控えめに

ロード状態

struct LoadingView: View {
    var body: some View {
        VStack {
            ProgressView()
                .scaleEffect(1.5)
            Text("Loading...")
                .font(.caption)
                .foregroundColor(.secondary)
                .padding(.top)
        }
    }
}

エラー状態

struct ErrorView: View {
    let message: String
    let retry: () -> Void

    var body: some View {
        VStack(spacing: 16) {
            Image(systemName: "exclamationmark.triangle")
                .font(.system(size: 48))
                .foregroundColor(.orange)

            Text("Something went wrong")
                .font(.headline)

            Text(message)
                .font(.subheadline)
                .foregroundColor(.secondary)
                .multilineTextAlignment(.center)

            Button("Try Again") {
                retry()
            }
            .buttonStyle(.borderedProminent)
        }
        .padding()
    }
}

空状態

struct EmptyStateView: View {
    var body: some View {
        VStack(spacing: 16) {
            Image(systemName: "tray")
                .font(.system(size: 64))
                .foregroundColor(.secondary)

            Text("No Items")
                .font(.title2)

            Text("Your items will appear here")
                .font(.subheadline)
                .foregroundColor(.secondary)

            Button("Add Item") {
                // Action
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

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

iPhone

• さまざまなサイズ (SE、Pro、Pro Max) に対応して設計
• ポートレートとランドスケープをサポート
• ノッチ/Dynamic Island のセーフエリアを使用
• 片手での使用を考慮

iPad

• マルチタスキング (Split View、Slide Over) をサポート
• ナビゲーションにはサイドバーを使用
• より大きな画面に適応 (単に拡大しない)
• キーボードショートカットを検討
• 外部ディスプレイをサポート

Apple Watch

• グランス可能な情報
• 大きなタップターゲット (>44pt)
• 最小限のインタラクションが必要
• スクロールに Digital Crown を使用
• Always-On ディスプレイをサポート

リソース

• Apple HIG Official
• SF Symbols App
• WWDC ビデオ
• Apple デザインリソース

---

「デザインは見た目と感じ方だけではない。デザインはどのように機能するかである。」- Steve Jobs