hig-foundations

Apple HIG: デザインの基礎

質問する前に .claude/apple-design-context.md を確認してください。既存のコンテキストを活用し、まだカバーされていない情報についてのみ質問してください。

主要な原則

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

2. 最初からアクセシビリティを組み込む。 初日から VoiceOver、Dynamic Type、視差効果を減らす、コントラストを上げる、スイッチコントロールを考慮して設計します。すべてのインタラクティブ要素にはアクセシブルなラベルが必要です。

3. システムのカラーとマテリアルを使用する。 システムカラーはライト/ダークモード、コントラストの増加、vibrancy に適応します。ハードコードされた値よりもセマンティックカラー（label、secondaryLabel、systemBackground）を優先します。

4. プラットフォームのフォントとアイコンを使用する。 デフォルトでは SF Pro、SF Compact、SF Mono。セリフ体には New York。推奨サイズでタイプ階層に従います。アイコンには SF Symbols を使用します。

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

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

7. 国際化をサポートする。 テキストの伸縮、右から左へのスクリプト、さまざまな日付/数値形式に対応します。動的なコンテンツのサイズ調整には Auto Layout を使用します。

8. モーションを目的をもって使用する。 アニメーションは意味と空間的な関係を伝えるべきです。視差効果を減らす設定を尊重し、クロスフェードの代替手段を提供します。

リファレンス索引

リファレンス	トピック	主な内容
accessibility.md	アクセシビリティ	VoiceOver、Dynamic Type、色のコントラスト、運動アクセシビリティ、Switch Control、音声解説
app-icons.md	アプリアイコン	アイコングリッド、プラットフォーム固有のサイズ、単一のフォーカルポイント、透明性なし
branding.md	ブランディング	Apple のデザイン言語内へのブランドアイデンティティの統合、控えめなブランディング、カスタムティント
color.md	カラー	システムカラー、Dynamic Colors、セマンティックカラー、カスタムパレット、コントラスト比
dark-mode.md	ダークモード	浮き上がったサーフェス、セマンティックカラー、適応型パレット、Vibrancy、両モードでのテスト
icons.md	アイコン	グリフアイコン、SF Symbols の統合、カスタムアイコンデザイン、アイコンのウェイト、光学的位置合わせ
images.md	画像	画像解像度、@2x/@3x アセット、ベクターアセット、画像のアクセシビリティ
immersive-experiences.md	イマーシブ体験	AR/VR デザイン、空間的没入、快適ゾーン、段階的な没入レベル
inclusion.md	インクルージョン	多様な表現、性別にとらわれない言語、文化的配慮、インクルーシブなデフォルト
layout.md	レイアウト	マージン、スペーシング、配置、セーフエリア、適応型レイアウト、読みやすいコンテンツガイド
materials.md	マテリアル	Vibrancy、ブラー、半透明、システムマテリアル、マテリアルの厚み
motion.md	モーション	アニメーションカーブ、トランジション、連続性、Reduce Motion のサポート、物理ベースのモーション
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. モーション + アクセシビリティ + フィードバック -- すべてのアニメーションには Reduce Motion の代替手段が必要です。モーションは空間的な関係を強化するものであり、装飾であってはなりません。

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 が制作 · その他の開発者ツール