apple-design

Apple Design（Apple Human Interface Guidelines 参照スキル）

このスキルは、Apple の公式デザインリソース（developer.apple.com/design/）をすぐに使える参考資料としてまとめたものです。最新の公式ガイダンスに基づき、iOS／iPadOS／macOS／watchOS／visionOS／tvOS アプリのインターフェイス設計やレビューに関するアドバイスを提供できます。

根拠がある情報か、推測か

具体的な主張（ポイント値、コントラスト比、コンポーネントの正式名称、API 名など）は、すべて根拠がある情報か、推測のどちらかです。

• 根拠がある情報 — このスキルの references/ ファイルで確認したか、公式ページを取得して確認したものです。
• 推測 — 学習時の記憶に基づくものです。

推測は推測として明示し、仕様として扱わないでください。HIG はほぼ毎年 WWDC の時期に改訂され、2025 年 6 月にはマテリアル、アイコン、コントロールの外観のシステム全体がLiquid Glassに置き換わりました。そのため、「Apple のデザインガイドライン」に関する学習時の記憶は、この変更より前の情報であったり、複数のプラットフォームの仕様が混在していたりする可能性があります。根拠を確認できない主張については、その旨を伝え、公式 URL を案内してください。

「主要なアクションは片手で届く位置に配置する」といった定性的なアドバイスには、この対応は必要ありません。数値、正式名称、仕様については必要です。

HIG の全体構成

公式 HIG（developer.apple.com/design/human-interface-guidelines/）は、抽象的な内容から具体的な内容へと進む、次の 6 つの最上位セクションで構成されています。

1. はじめに — デザイン原則と、プラットフォームごとの概要（iOS／iPadOS／macOS／tvOS／visionOS／watchOS／ゲーム）
2. 基礎 — アクセシビリティ、アプリアイコン、カラー、マテリアル、タイポグラフィ、レイアウト、SF Symbols、モーション、プライバシー、ダークモードなど、あらゆるインターフェイスに共通する要素
3. パターン — オンボーディング、検索、取り消しとやり直し、マルチタスク、モダリティ、通知など、一般的なタスクや体験に関するデザインガイダンス
4. コンポーネント — 8 つのサブカテゴリに分類されたシステムコンポーネント：コンテンツ／レイアウトと整理／メニューとアクション／ナビゲーションと検索／表示／選択と入力／ステータス／システム体験
5. 入力 — ジェスチャ、Digital Crown、Apple Pencil、視線、ゲームコントローラなどの入力方法
6. テクノロジー — Siri、Wallet、HealthKit、SharePlay など、Apple の各種テクノロジーとの統合

完全なサイトマップとすべてのページ URL は、references/hig-sitemap.md にあります。

このスキルの使い方

まず、対象プラットフォームを特定してください。プラットフォームによって、人間工学、入力方法、コンポーネントの慣例は大きく異なります。iPhone を前提にした考え方を Apple Watch や Vision Pro に当てはめる前に、references/platforms.md の該当セクションを確認してください。その後、依頼に合った分岐に進んでください。

ブランチ A — 新しいものを設計する

1. これは基盤に関する質問か、特定のコンポーネント／パターンに関する質問かを判断します。
   • 色、タイポグラフィ／文字サイズ、SF Symbols、マテリアル（特に Liquid Glass）、アイコン、レイアウト／セーフエリア、アクセシビリティ → 下記のリファレンス索引にある該当ファイル
   • 特定のコントロール（ボタン、タブバー、サイドバー、リスト、ツールバー）の使い方 → references/components.md。記載がない場合は、references/hig-sitemap.mdで該当するスラッグを調べます。
   • インタラクションパターン（オンボーディングフロー、検索、取り消し、ジェスチャ） → references/patterns-gestures.md
2. 何をするかだけでなく、なぜそうするかを説明します。references/principles.mdにあるデザイン原則、または具体的な公式の根拠に基づいて説明します（「Appleがそう言っているから」ではなく、「Appleの標準サイズである44×44ptでも、コントロールを快適にタップできるようにするため」）。
3. 実際のデザインファイルやプロトタイプを作成する段階になったら、標準のシステムコントロールを一から描き直すのではなく、references/resources.mdにある公式の UI Kits、フォント、SF Symbols、Icon Composerを案内します。

完了の条件： 回答に含まれるすべての数値、コンポーネント名、API名に根拠があり、各推奨事項に理由が示されていること。

ブランチ B — 既存のデザインをレビューする

references/principles.mdにある8つすべての原則を順番に確認し、それぞれに明確な判定を示します。判定は「適合」「違反（具体的な要素を明記）」「該当なし」のいずれかです。次に、レビュー対象となる仕様（タップ対象、文字サイズ、コントラスト、セーフエリアなど）をreferences/accessibility.mdとreferences/layout.mdに照らして確認します。

完了の条件： 問題がなかった原則も含め、8つすべてに判定が示されていること。そうすれば、ユーザーはレビューが網羅的に行われたと確認できます。また、引用するすべての仕様に根拠があること。

ブランチ C — 1つの事実を調べる

まず下記のリファレンス索引を確認します。ここにある要約で、ほとんどの質問に答えられます。要約に必要なコンポーネントの記載がない場合や、正確なポイント値またはAPI名が必要な場合は、references/hig-sitemap.mdから該当するURLを開きます。

HIGページの取得： ページはJavaScriptでレンダリングされるシングルページアプリなので、通常のWebFetchでは本文ではなくページタイトルだけが取得されることがよくあります。取得結果が不自然に短い場合は、ブラウザツールに切り替えます（移動 → 1〜2秒待機 → get_page_text）。それでも取得できない場合は、URLをユーザーに伝え、コンテンツを取得できなかったことを説明します。

8つのデザイン原則（クイックリファレンス）

詳しい説明はreferences/principles.mdを参照してください。ここでは、デザイン上のトレードオフでどちらの方向に進むべきかを素早く判断するのに役立つ、各原則の要約を示します。

• 目的 — どう作るかを決める前に、人々にとって本当に重要なことを明確にします
• 主体性 — ユーザーの邪魔をせず、自由に探索できるようにし、失敗のコストを低く抑えます（取り消し、復元）
• 責任 — 人々のデータと信頼に責任を持ち、権限やデータの使用について透明性を保ちます
• 親しみやすさ — 人々がすでに知っている概念を取り入れ、視覚表現や操作の一貫性を保って、学習の負担を軽減します
• 柔軟性 — アクセシビリティは出発点であり、後付けの修正ではありません。さまざまなデバイス、入力方法、状況に合わせて対応します
• シンプルさ — 必要なものだけを残して明確な階層を構築します。シンプルさはミニマリズムと同じではありません
• 品質 — 細部の一つひとつに、どれだけ大切に考えているかが表れます。リリースをゴールとせず、磨き続けます
• 喜び — どのような感情を引き起こしたいかを理解しつつ、喜びが目の前のタスクよりも目立たないようにします

プラットフォームのクイックリファレンス（詳細は references/platforms.md）

プラットフォーム	一言での位置づけ	主なナビゲーション	主な入力方法
iOS	外出先での片手操作や、細切れの利用に適しています	フローティングタブバー（Liquid Glass）	マルチタッチ、音声
iPadOS	大画面での生産性と創作、マルチタスクに適しています	タブバー ↔ サイドバー、アダプティブ	タッチ、外部キーボード／トラックパッド、Apple Pencil
macOS	長時間集中して作業したり、複数のウィンドウを使ったりする用途に適しています	メニューバー + サイドバー	キーボード、ポインティングデバイス
watchOS	手首でさっと確認し、1分未満で操作する用途に適しています	Digital Crown によるナビゲーション	Digital Crown、アクションボタン、シンプルなジェスチャ
visionOS	空間コンピューティングや、現実空間に浮かぶウィンドウに適しています	フローティングタブバー／サイドバー	視線 + 間接／直接ジェスチャ

tvOS は references/platforms.md では概要をまとめていません。tvOS に関する質問には、references/hig-sitemap.md を参照して designing-for-tvos を取得してください。（tvOS の仕様はアクセシビリティ、タイポグラフィ、レイアウトの各リファレンスファイルで扱っています。）

Liquid Glass を一段落で説明

2025 年に導入されたこの新しいマテリアルは、コンテンツレイヤーではなく、コントロールとナビゲーションのレイヤー（タブバー、サイドバー、ツールバー）向けです。標準のシステムコンポーネントには自動的に適用されます。カスタムコンポーネントでは控えめに使用してください。バリエーションは 2 種類あります。レギュラー（視認性を保ち、ほとんどの場合に使用）と クリア（背後にあるリッチメディアの背景を見やすくする）です。デフォルトでは固有の色を持たず、背後にある色で色付けされます。色を適用する場合は控えめにし、手前のシンボルやテキストよりも背景に色を付けることを優先してください。詳細なルールは references/materials-color.md を参照してください。

アクセシビリティの仕様（要約。正式な情報は references/accessibility.md を参照してください）

仕様	iOS/iPadOS	macOS	tvOS	watchOS	visionOS
デフォルトのテキストサイズ	17pt	13pt	29pt	16pt	17pt
テキストの最小サイズ	11pt	10pt	23pt	12pt	12pt
デフォルトのコントロールサイズ	44×44pt	28×28pt	66×66pt	44×44pt	60×60pt
コントロールの最小サイズ	28×28pt	20×20pt	56×56pt	28×28pt	28×28pt
テキストのコントラスト（≤17pt）	4.5:1（WCAG AA）	同左	同左	同左	同左

デフォルトはデザイン目標であり、最小値は下限です。 コントロールの推奨サイズとして、iOS/iPadOS/watchOS では 44×44pt、visionOS では 60×60pt を示してください。ボタンのガイダンスでは、これらのサイズをボタンの下限として具体的に示しています。「コントロールの最小サイズ」の行にある大幅に小さい値は、アクセシビリティのページに記載された絶対的な下限です。デザイン目標としてユーザーに提示しないでください。

視覚、聴覚、運動、発話、認知に関するアクセシビリティの詳細なガイダンスは、references/accessibility.md を参照してください。

リファレンスファイル一覧

ファイル	内容
references/principles.md	8つのデザイン原則の詳しい説明と、その適用方法
references/platforms.md	iOS/iPadOS/macOS/watchOS/visionOS のデバイス特性、人間工学、ベストプラクティス
references/materials-color.md	マテリアル、Liquid Glass、カラーシステムの全ルール
references/typography-symbols.md	フォントファミリー、Dynamic Type、SF Symbols の描画モード／ウェイト／アニメーション
references/layout.md	視覚的階層、サイズクラス、セーフエリア、適応性
references/accessibility.md	信頼できる仕様表と、5つのアクセシビリティ領域に関するガイダンス
references/components.md	ボタン、タブバー、サイドバー、リスト／テーブル、ツールバーのベストプラクティス
references/app-icons.md	レイヤー構造のアイコンデザイン、Icon Composer のワークフロー、Liquid Glass のアイコン表示
references/patterns-gestures.md	ジェスチャーデザインの原則、プラットフォーム標準のジェスチャー、一般的なインタラクションパターン
references/resources.md	公式 UI キット、フォント、SF Symbols、Icon Composer、その他のダウンロード
references/hig-sitemap.md	このスキルでまだ扱っていない情報を調べるための、HIG の URL 一覧

公式コンテンツの引用に関する注意

HIG のテキストは Apple の著作物です。ユーザーに説明する際は、原文を長く転載するのではなく、要点となるルールとその理由を自分の言葉で言い換えてください。正確な文言が重要な場合（マーケティングコピーや法律に関わる表現など）は、原文をそのまま回答に再掲するのではなく、公式 URL を案内して、ユーザー自身に原文を読んでもらってください。