hig-foundations

Apple HIG：デザインの基礎

質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを活用し、そこに記載されていない情報だけを質問してください。

主な原則

1. 装飾よりコンテンツを優先します。 視覚的な雑然さを減らします。太い境界線や背景ではなく、システムが提供するマテリアルや控えめな区切り線を使います。

2. 最初からアクセシビリティを組み込みます。 初日から、VoiceOver、Dynamic Type、Reduce Motion、Increase Contrast、Switch Control に対応するよう設計します。すべてのインタラクティブ要素にアクセシブルな名前を付けます。意味的なコントロールラベルを再利用し、冗長な手動ラベルは避けてください。

3. システムカラーとマテリアルを使います。 システムカラーは、ライトモード／ダークモード、コントラストの強化、ビビッド表示に適応します。ハードコードされた値より、セマンティックカラー（label、secondaryLabel、systemBackground）を優先してください。

4. プラットフォームのフォントとアイコンを使います。 セマンティックなテキストスタイルを通じて、プラットフォームのシステムフォントを使います。SF Pro、SF Compact、SF Mono、New York は選択肢ですが、プラットフォームやライセンス上の制約があります。すべてのプラットフォームでデフォルトとは限りません。推奨サイズに従って文字の階層を設定してください。アイコンには SF Symbols を使います。

5. プラットフォームの慣習に合わせます。 外観と動作をシステム標準に沿わせます。直接的で応答性の高い操作を可能にし、すべてのアクションに明確なフィードバックを提供してください。

6. プライバシーを尊重します。 必要な場合にのみ権限を求め、その理由を明確に説明し、データを求める前に価値を提供してください。データ収集を最小限に抑える設計にします。

7. 国際化に対応します。 テキストの長さの変化、右から左に記述するスクリプト、さまざまな日付や数値の形式に対応します。動的なコンテンツのサイズ調整には Auto Layout を使います。

8. 目的を持ってモーションを使います。 アニメーションは意味や空間的な関係を伝えるものであるべきです。設定に応じた適切な低減版または静的な代替手段を用意して、Reduce Motion を尊重します。クロスフェードは選択肢の一つであり、すべてのアニメーションに必須ではありません。

リファレンスインデックス

リファレンス	トピック	主な内容
accessibility.md	アクセシビリティ	VoiceOver、Dynamic Type、色のコントラスト、身体的アクセシビリティ、スイッチコントロール、音声解説
app-icons.md	アプリアイコン	アイコングリッド、プラットフォーム固有のサイズ、単一の焦点、背景の不透明性とプラットフォーム固有の前景の透明度
branding.md	ブランディング	Appleのデザイン言語におけるブランドアイデンティティの統合、控えめなブランディング、カスタムの色合い
color.md	色	システムカラー、Dynamic Colors、セマンティックカラー、カスタムパレット、コントラスト比
dark-mode.md	ダークモード	浮き上がった面、セマンティックカラー、モードに合わせたパレット、ビビッド効果、両方のモードでのテスト
icons.md	アイコン	グリフアイコン、SF Symbolsとの統合、カスタムアイコンのデザイン、アイコンのウェイト、視覚的な位置合わせ
images.md	画像	画像解像度、@2x/@3xアセット、ベクターアセット、画像のアクセシビリティ
immersive-experiences.md	没入型エクスペリエンス	AR/VRデザイン、空間への没入、快適な領域、段階的な没入レベル
inclusion.md	インクルージョン	多様な人々の表現、ジェンダーに依存しない言葉遣い、文化的な配慮、インクルーシブなデフォルト
layout.md	レイアウト	マージン、間隔、配置、安全領域、アダプティブレイアウト、読みやすいコンテンツのガイド
materials.md	マテリアル	ビビッド効果、ぼかし、半透明、システムマテリアル、マテリアルの厚み
motion.md	モーション	アニメーションカーブ、トランジション、連続性、「視差効果を減らす」への対応、物理ベースのモーション
privacy.md	プライバシー	許可のリクエスト、利用目的の説明、プライバシー栄養表示、最小限のデータ収集
right-to-left.md	右から左への表記	RTLレイアウトのミラーリング、双方向テキスト、反転するアイコン、例外
sf-symbols.md	SF Symbols	シンボルのカテゴリ、レンダリングモード、可変カラー、カスタムシンボル、ウェイトの一致
spatial-layout.md	空間レイアウト	visionOSのウィンドウ配置、奥行き、人間工学に基づく領域、Z軸のデザイン
typography.md	タイポグラフィ	SF Pro、Dynamic Typeのサイズ、テキストスタイル、カスタムフォント、フォントウェイトの階層、行間
writing.md	ライティング	UIコピーのガイドライン、トーン、文字の大文字・小文字のルール、エラーメッセージ、ボタンラベル、簡潔さ

基礎要素を組み合わせて適用する

原則がどのように相互作用するかを考慮します。

1. 色＋ダークモード＋アクセシビリティ -- カスタムパレットは、WCAGのコントラスト比を保ちながら、両方のモードで適切に機能する必要があります。まずシステムのセマンティックカラーから始めます。

2. タイポグラフィ＋アクセシビリティ＋レイアウト -- Dynamic Typeを拡大しても、レイアウトが崩れないようにする必要があります。あらゆる文字サイズに対応するには、テキストスタイルとAuto Layoutを使用します。

3. アイコン＋ブランディング＋SF Symbols -- カスタムアイコンは、SF Symbolsのウェイトと視覚的なサイズに合わせる必要があります。ブランド要素は、システムの慣例を上書きせずに統合します。

4. モーション＋アクセシビリティ＋フィードバック -- すべてのアニメーションに、「視差効果を減らす」設定に対応する代替手段が必要です。モーションは装飾ではなく、空間的な関係を伝えるために使います。

5. プライバシー＋ライティング＋オンボーディング -- 許可のリクエストでは、利用目的を明確かつ具体的に説明する必要があります。ユーザーがメリットを理解できるタイミングで表示します。

出力形式

1. 該当するHIGの基礎要素を、ファイルとセクションを示して引用します。
2. ユーザーが対象とするプラットフォーム間の違いを示します。
3. 具体的なコードパターンを提示します（SwiftUI/UIKit/AppKit）。
4. アクセシビリティへの影響を説明します（コントラスト比、Dynamic Typeによる拡大、VoiceOverの動作）。

質問事項

1. 対象としているプラットフォームはどれですか？
2. 既存のブランドガイドラインはありますか？
3. 目標とするアクセシビリティレベルはどれですか？（WCAG AA、AAA、Apple のベースラインなど）
4. システムカラーとカスタムカラーのどちらを使用しますか？

関連スキル

• hig-platforms -- 基礎原則がプラットフォームごとにどのように適用されるか（例：watchOS と macOS での文字サイズの違い）
• hig-patterns -- ライティングやアクセシビリティなどの基礎原則が重要となるインタラクションパターン
• hig-components-layout -- レイアウトの原則を実装する構造コンポーネント
• hig-components-content -- 色、タイポグラフィ、画像を使用したコンテンツ表示

---

Raintree Technology が作成 · その他の開発者ツール

使用する場面

このスキルは、概要で説明されているワークフローやアクションを実行する際に適用できます。

例

ユーザーのリクエスト：

このタスクには @hig-foundations を使用してください：Apple Human Interface Guidelines のデザイン基礎。

制限事項

• このスキルは、タスクが上記の説明された範囲に明確に一致する場合にのみ使用してください。
• 出力を、環境固有の検証、テスト、または専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、または成功基準が不足している場合は、作業を中止して確認を求めてください。

参照情報の状態

同梱されている Markdown の参照資料は、出典が示されたドキュメントのスナップショットであり、引用されたすべての仕様が現在も有効であることを証明するものではありません。実装前に、リンク先の Apple の情報源と対象の OS／SDK を確認し、アイコン形式、システムカラー、シンボルの利用可否、フォントメトリクス、API を検証してください。出典表示を保持してください。サードパーティのドキュメント、フォント、メディア、商標は、ここにリンクされているだけで自由に再利用できるようになるわけではありません。リモートの画像や動画は参照されているだけで、同梱も実行時のテストもされていません。

コントラストだけでは WCAG 準拠を証明できません。一般に、通常のテキストには AA で 4.5:1、大きなテキストには 3:1 が必要です（標準の太さで 18pt 以上、または太字で 14pt 以上）。大きなテキストの基準を下回る太字テキストに、一律に 3:1 の例外が適用されるわけではありません。APCA は別個の評価方法であり、WCAG 2.x のコントラスト基準に代わるものではありません。ターゲットサイズ、タイポグラフィのデフォルト、プラットフォームのガイドラインについても、デバイスや支援技術を用いたテストが必要です。