apple-design-skill

Apple デザイン（Human Interface Guidelines）

このスキルには、references/ 配下に Apple の Human Interface Guidelines のローカルミラーが含まれています。非公式のコンテンツであり、sosumi.ai 経由で抽出されたものです。HIG のコンテンツはすべて Apple Inc. に帰属します。一般知識や学習データではなく、これらのファイルに基づいて回答してください。HIG のガイダンスは具体的かつ正確で、時間とともに変化します。

対象範囲

HIG の 6 つのセクションが references/ 配下にミラーされています。

セクション	パス	対象
はじめに	references/getting-started/	クロスプラットフォームのデザイン原則と、プラットフォームごとの記事（iOS、iPadOS、macOS、watchOS、tvOS、visionOS、ゲーム）
基礎	references/foundations/	色、タイポグラフィ、マテリアル、モーション、SF Symbols、アイコン、アクセシビリティ、ダークモード、プライバシー、レイアウト、ブランディング、ライティング
パターン	references/patterns/	オンボーディング、検索、ドラッグ＆ドロップ、通知、取り消し／やり直し、フィードバック、マルチタスク、設定など、一般的なタスクや体験
コンポーネント	references/components/	8 つのカテゴリに分類された、システム定義の UI コンポーネント：コンテンツ、レイアウトと整理、メニューとアクション、ナビゲーションと検索、表示、選択と入力、ステータス、システム体験
入力	references/inputs/	入力方法：ジェスチャ、Apple Pencil、Digital Crown、キーボード、ポインティングデバイス、Camera Control、Action ボタン、リモコン、視線
テクノロジー	references/technologies/	統合可能なプラットフォームテクノロジー：Siri、Apple Pay、HealthKit、SharePlay、AirPlay、Sign in with Apple など

各セクションには、ランディングページとなる index.md があります。コンポーネントは、階層が 1 つ追加されている唯一のセクションです。その index.md には 8 つのカテゴリフォルダが記載され、各フォルダには独自の index.md と個別のコンポーネント記事があります。残りの 5 つのセクションはフラットな構成で、各セクションの index.md から同じフォルダ内の記事ファイルに直接リンクしています。

Liquid Glass（Apple の現在のクロスプラットフォームマテリアル）は、単独の記事ではありません。foundations/materials.md、foundations/color.md、foundations/motion.md と、特定のコンポーネント記事（buttons.md、tab-bars.md、toolbars.md、sidebars.md、widgets.md など）で取り上げられています。「liquid glass」に関するリクエストには、まず foundations/materials.md を参照し、次に該当するコンポーネントの記事を加えてください。

適切な記事を見つける

1. 最短ルート：references/topic-index.md を grep します。これは、すべての記事のパスと1行の説明をまとめた一覧です。コンポーネント、パターン、またはテクノロジーの名前（または近い同義語）を検索してください。ほとんどの場合、閲覧するよりもこちらのほうが速く見つかります。

   grep -i "sheet" references/topic-index.md
   

2. 閲覧ルート：キーワード検索で明確な一致が見つからない場合は、該当セクションの index.md を読みます（Components の場合は、まず references/components/index.md を読み、カテゴリを選んでから、そのカテゴリの index.md を読みます）。
3. 回答する前に、該当する記事を最後まで読みます。HIG の記事は短く、構造化されています（構成、動作、ガイドライン、プラットフォーム固有の考慮事項）。ざっと読むのではなく、全体を読んでください。

このファイルの残りの部分では、質問と回答がそれぞれ1つの場合を想定しています。次の2つのセクションでは、複数の記事の内容を1つの成果物にまとめる必要がある生成タスク、つまり新しいコンポーネントや画面全体の設計を扱います。

新しいコンポーネントの設計

「Liquid Glass のプライマリボタンを設計する」や「X 用のセグメントコントロールのバリエーションを作成する」のような依頼には、次のワークフローを使います。

1. topic-index.md を使って、references/components/ から最も近い既存のシステムコンポーネントを見つけます。ゼロからコンポーネントを作るのではなく、それを起点として拡張してください。

2. ビジュアルやインタラクションの表現に関わる横断的な基盤を参照します。foundations/materials.md（マテリアル／Liquid Glass の表現）、foundations/color.md、foundations/typography.md、foundations/motion.md（インタラクションのフィードバックとアニメーション）を確認します。

3. foundations/accessibility.md を確認します。コントラスト、Dynamic Type、VoiceOver、最小タッチターゲット（たとえば、components/menus-and-actions/buttons.md に記載されている 44×44pt／visionOS では 60×60pt のルール）を確認してください。

4. コンポーネントを複数のプラットフォームで動作させる必要がある場合は、該当する getting-started/designing-for-<platform>.md を確認し、デバイス固有の制約を調べます。

5. 次のテンプレートを使って成果物を作成します。

   # <Component name>
   
   **Base system component:** <name + references/ path>
   **Purpose:** <what it's for>
   
   ## Anatomy
   <parts that make up the component>
   
   ## States & variants
   <default, pressed/hover, disabled, selected, sizes, etc.>
   
   ## Sizing & spacing
   <concrete values pulled from the HIG article, not invented>
   
   ## Material & color
   <e.g. Liquid Glass treatment, tint, contrast behavior in light/dark>
   
   ## Motion & feedback
   <press/hover/transition behavior>
   
   ## Accessibility
   <contrast, Dynamic Type, VoiceOver label/traits, minimum hit target>
   
   ## Platform notes
   <differences across iOS/iPadOS/macOS/watchOS/tvOS/visionOS, if any>
   
   ## Implementation note
   This spec covers design intent (look, behavior, states, sizing, accessibility) grounded in HIG text. It does not
   specify SwiftUI/UIKit/AppKit API names — verify exact modifiers/APIs against current framework documentation
   rather than assuming them from HIG prose, which never contains API references.
   

画面の設計

「すべての本を表示するライブラリ画面を作成する」のような依頼には、次のワークフローを使います。HIG のドキュメントではコンポーネントとパターンを扱い、画面全体は扱わないため、まず依頼を分解します。

1. 次の3つの要素に分解します。

   • ナビゲーションシェル — タブバー、サイドバー、ナビゲーションスタックのいずれにするかを決めます。components/navigation-and-search/ と、対象プラットフォームの getting-started/designing-for-<platform>.md を参照してください。
   • 主要なコンテンツコンポーネント — リスト、テーブル、グリッド、分割ビューについては components/layout-and-organization/、画像、テキスト、グラフについては components/content/ を参照します。
   • 補助的なパターン — patterns/searching.md、patterns/loading.md、patterns/onboarding.md、および空状態／エラー状態の処理を確認します。

2. デフォルトのガイダンスを超えるカスタマイズが必要な要素には、上記の「新しいコンポーネントの設計」ワークフローを適用します。

3. 画面の対象プラットフォームを明示します。画面構成の慣例（タブバーかサイドバーか、全画面かマルチペインか）はプラットフォームによって異なります。

4. 次のテンプレートを使って成果物を作成します。

   # <Screen name>
   
   **Purpose:** <what the screen is for>
   **Platform(s):** <iOS/iPadOS/macOS/watchOS/tvOS/visionOS>
   
   ## Navigation shell
   <tab bar / sidebar / navigation stack choice, and why, per platform if it differs>
   
   ## Primary content
   <component(s) used to present the core content, with references/ paths>
   
   ## Supporting patterns
   <search, loading, onboarding, etc., with references/ paths>
   
   ## States
   <loading / empty / error / populated>
   
   ## Accessibility
   <notable considerations beyond what's already covered per-component>
   
   ## Implementation note
   Same boundary as component specs: this is design intent, not API syntax.
   

回答方法

• 記事に実際に書かれている内容を引用します。記載されていないガイダンスを作り出さないでください。
• HIG の記事では、1 つのファイルに複数のプラットフォームが記載され、プラットフォーム固有のサブセクション（「iOS, iPadOS」「macOS」「watchOS」「visionOS」など）が含まれていることがよくあります。回答がどのプラットフォームに該当するかを明示してください。iOS 向けのガイダンスが macOS や watchOS にも当てはまると決めつけないでください。
• 質問が複数のセクションにまたがる場合（たとえば「破壊的なアクションをどのように表示すべきか？」は、buttons.md のような Components の記事と、color.md や feedback.md のような Foundations または Patterns の記事に関係します）、最初に見つかった記事だけで済ませず、複数の記事を確認してください。
• 質問がミラーされたコンテンツの範囲外であれば、そのことを明示し、HIG のガイダンスであるかのように推測を示すのではなく、Apple プラットフォームに関する一般知識を補足してください。
• 記事の画像は、削除されず、代替テキストも付いた実際の docs-assets.developer.apple.com URL です。視覚的な詳細や構造の詳細が文章による説明より重要な場合は、画像を直接取得して表示してください。
• このスキルが権威を持つのはデザインの意図についてであり、API 名についてではありません。この区別は、コンポーネントや画面の仕様に関する回答だけでなく、すべての回答に当てはまります。

注意点

• references/components/navigation-and-search/tab-bars.md と references/components/layout-and-organization/tab-views.md は別のコンポーネントです。タブバーはアプリのトップレベルのセクション間を移動するためのもので、タブビューはその場でコンテンツのペインを切り替えるためのものです。混同しないでください。
• クロスプラットフォームのデザイン原則は references/getting-started/design-principles.md にあり、プラットフォームごとのデバイス特性は references/getting-started/designing-for-<platform>.md にあります。いずれも Components の配下ではありません。
• これは静的なコンテンツのミラーであり、コンプライアンスチェッカーではありません。特定のアプリにおける HIG 違反を自動的に検出することはできません。該当する記事のガイダンスに照らして、ユーザーの実際の UI を判断してください。