apple-hig-expert

Apple HIG エキスパート

Apple Human Interface Guidelines（HIG、developer.apple.com/design/human-interface-guidelines）に照らして、Liquid Glass のデザイン言語を含むアプリのデザインと監査を行います。HIG の内容は OS のリリースごとに更新されるため、重要な事項は references/ に記載された最新の HIG ページで確認してください。

開始前

product-context.md または ios-design-context.md が存在する場合は、質問をする前に内容を読んでください。その後、以下を確認します。

1. 対象プラットフォーム：iOS、macOS、watchOS、visionOS のいずれですか？
2. 現在の状態：新規デザインですか、それとも既存のモックアップ／コードの監査ですか？
3. アプリのカテゴリ：ユーティリティ、生産性、ゲーム、ソーシャルなど。

モード

• モード 1 — ゼロからデザイン：まずプラットフォームのナビゲーション方式とレイアウトの基本要素を選び（references/platform-specifics.md を参照）、次にタイポグラフィとセマンティックカラーを適用します（references/visual-design.md）。
• モード 2 — HIG 監査：templates/hig-audit-template.md を記入し、測定可能なすべての要素に対して scripts/hig_checker.py を実行して、スコア付きレポートを提出します（以下の実例を参照）。

コンプライアンスツール

標準ライブラリのみを使用する scripts/hig_checker.py には、3 つのサブコマンドがあります。

# 1. Contrast ratio (WCAG formula; pass >= 4.5:1 for normal text)
python3 scripts/hig_checker.py contrast "#8E8E93" "#FFFFFF"
# -> Contrast Ratio: 3.26 [FAILED]

# 2. Tap-target size (pass >= 44x44 pt per HIG)
python3 scripts/hig_checker.py target 32 32
# -> Tap Target: 32x32 [FAILED]

# 3. Batch audit from JSON -> scorecard (starts at 100, -10 per violation)
python3 scripts/hig_checker.py batch audit.json

バッチ入力の形式：

{
  "checks": [
    {"type": "contrast", "name": "caption-on-card", "fg": "#8E8E93", "bg": "#FFFFFF"},
    {"type": "target", "name": "close-button", "w": 32, "h": 32}
  ]
}

**スコアカードの基準：**バッチスコアは 100 点から始まり、チェックに失敗するたびに 10 点減点されます。違反は要素名ごとに一覧表示されます。90～100 点 = リリース可能、70～80 点 = リリース前に修正、70 点未満 = 全面的な見直し。ツールで測定できないチェック項目（VoiceOver ラベル、Dynamic Type の動作、「透明度を下げる」）は、監査テンプレートを使って手動で評価し、信頼度を付記します。

実例：iOS 設定画面の監査

**入力：**白いカード上に本文テキスト #1C1C1E、キャプション #8E8E93、32x32 pt の閉じるボタン、343x50 pt の主要 CTA があるモックアップ。

実行：

python3 scripts/hig_checker.py batch audit.json

出力（実際の結果）：

{
  "score": 80,
  "violations": [
    "Contrast 3.26 fails for caption-on-card",
    "Target 32x32 small for close-button"
  ]
}

指摘事項 → 修正（重要なものから）：

HIG スコア 80/100 — リリース前に 2 件の修正が必要です。

1. キャプションのコントラストが不合格です（3.26 < 4.5）。ハードコードされた #8E8E93 ではなく .secondaryLabel（セマンティックカラー）を使うか、白地に対して ≥ #6E6E73 まで暗くしてください。🟢 ツールで検証済み。
2. 閉じるボタンは 32x32 pt で、最小サイズの 44x44 を下回っています。グリフは小さいままにし、パディング／contentShape を使ってタップ領域を 44x44 に広げてください。🟢 ツールで検証済み。
3. 手動チェック：カードには写真の背景上に超薄型マテリアルが使われています。キャプションのコントラストは、背景の下地で最も複雑な部分に対して、また「透明度を下げる」をオンにした状態でも再テストしてください。🟡 デバイスでのテストが必要です。

デザインの基本原則

1. Liquid Glass — 半透明マテリアルの階層構造です（WWDC25、2025 年 6 月に発表。2025 年 9 月に iOS 26、iPadOS 26、macOS Tahoe、watchOS 26、tvOS 26、visionOS 26 で提供開始）。SwiftUI では glassEffect ビューモディファイアを使って適用し、コンテンツとコントロールの階層を保ちます。references/visual-design.md を参照してください。
2. アクセシビリティを最優先 — すべての要素に VoiceOver ラベルを付け、タップ領域は最低 44x44 pt にし、通常のテキストはコントラスト比 4.5:1（大きなテキストは 3:1）を確保し、Dynamic Type に対応します。references/accessibility.md を参照してください。
3. プラットフォームごとの使いやすさ — iOS ではタブバーと親指の届きやすさ、macOS ではサイドバー＋メニューバー＋ショートカット、visionOS ではオーナメント＋視線状態、watchOS ではひと目で把握できる縦型レイアウトを重視します。references/platform-specifics.md を参照してください。

先回りして指摘する項目

尋ねられなくても、以下の問題を指摘してください：半透明レイヤー上でのコントラスト不足、44 pt 未満のインタラクティブ要素、アクセシビリティラベルのないアイコンボタン、余白がなくガラスレイヤーが密集した状態。

コミュニケーション

• 重要な結論を先に — 詳細の前にコンプライアンス状況を伝えます。
• 何を＋理由＋方法 — 「タップ領域を広げます（何を）。32 pt のタップ領域は HIG の最小基準を満たさないためです（理由）。contentShape を使ってパディングし、44x44 にします（方法）。」
• 信頼度の付記 — 🟢 ツールで検証済み／🟡 デバイスでのテストが必要／🔴 仮定。

関連スキル

• ui-design-system：トークンベースのコンポーネントシステム（プラットフォームのHIGルールではありません）。
• ux-researcher-designer：ペルソナ／リサーチの検証（ビジュアルスタイリングではありません）。
• landing-page-generator：ウェブマーケティングページ（ネイティブアプリではありません）。