Apple HIG: Design Foundations
美しく高品質なアプリのために Apple デザインガイドラインをマスターする
公式の Human Interface Guidelines に従って、ネイティブな外観と操作性を持つ Apple 用アプリを構築しましょう。デザイン却下を回避し、すべてのプラットフォームにおいて Apple のアクセシビリティ、レイアウト、ビジュアル標準を満たすことを保証します。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "Apple HIG: Design Foundations". iOS で 17pt のテキストに必要なコントラスト比は何ですか?
النتيجة المتوقعة:
17pt までのテキスト(ウェイトに関係なく)の場合、Apple の Accessibility Inspector がベースラインとして使用する WCAG Level AA に適合するには、最小 4.5:1 のコントラスト比が必要です。18pt 以上のテキスト、または任意サイズの太字テキストの場合、要件は 3:1 に下がります。出典:accessibility.md の「Vision」セクション。
استخدام "Apple HIG: Design Foundations". SwiftUI でセマンティックシステムカラーを使用する方法を示してください
النتيجة المتوقعة:
ハードコードされた値の代わりに、Color.label、Color.secondaryLabel、Color.systemBackground などのセマンティックカラー API を使用します。これらはライト/ダークモードと「コントラストを上げる」設定に自動的に適応します:Text('Hello').foregroundColor(.label).background(Color.systemBackground)。出典:color.md の「System colors」セクション。
استخدام "Apple HIG: Design Foundations". テキストビューで Dynamic Type をサポートするにはどうすればよいですか?
النتيجة المتوقعة:
.body、.headline、.subheadline などのセマンティックテキストスタイルを適用すると、ユーザーの優先テキストサイズに自動的にスケーリングされます:Text('Hello').font(.body)。これらは iOS で 11pt から 23pt までの全範囲をサポートします。オーバーフローを防ぐために frame(maxWidth: .infinity) と適切なレイアウト制約と組み合わせます。出典:typography.md の「Supporting Dynamic Type」セクション。
التدقيق الأمني
آمنStatic analysis detected 2676 pattern matches across 18 markdown documentation files (4647 lines). All findings are confirmed FALSE POSITIVES from legitimate documentation content: Ruby backtick notation for inline code examples (e.g., `systemRed`, `label`), hardcoded URLs linking to Apple's official developer documentation, and 'C2 keywords' that are benign terminology in accessibility/design contexts (e.g., 'control' for Switch Control, 'access' for accessibility, 'capture' for screen capture guidelines). This skill contains only static markdown reference documentation with no executable code, network operations, or security risks. Safe to publish.
درجة الجودة
ماذا يمكنك بناءه
アクセシブルな iOS アプリを設計する
VoiceOver ラベル、Dynamic Type サポート、WCAG AA コントラスト比を実装することで、アプリが Apple のアクセシビリティ標準を満たすことを保証します。Accessibility Inspector でのテスト方法と、すべての対話要素に対するアクセシブルな代替手段の提供方法を学びます。
ダークモードサポートを実装する
セマンティックシステムカラーを使用して、ライトとダークの外観の両方に対応するアプリの配色を適応させます。両モードでのコントラストテスト方法、バイブラントマテリアルの適用方法、カスタムパレットが両外観で機能することを確認する方法を理解します。
タイポグラフィを標準化する
Apple のタイプスケールとテキストスタイルを使用して、テキストが Dynamic Type で適切にスケーリングされることを保証します。SF Pro とカスタムフォントの使い分け、フォントウェイト階層の実装方法、行間隔のベストプラクティスを学びます。
جرّب هذه الموجهات
iOS 用に背景色 #007AFF と白色のテキストを使用したボタンをデザインしています。この組み合わせはアクセシブルですか?どのようなコントラスト比を達成し、どの WCAG レベルに適合しますか?
SwiftUI でフォームを構築しており、ラベル、-secondary テキスト、エラー状態に対して正しいセマンティックカラーを使用する必要があります。ダークモードに適応するシステムカラーを使用したコードパターンを示してください。
ユーザーがアクセシビリティ設定で大きなフォントサイズを有効にすると、テキストレイアウトが崩れてしまいます。11pt から 23pt まで適切にスケーリングするように、テキストスタイルと Auto Layout を使用して SwiftUI ビューを構築する方法を示してください。
SF Symbols と視覚的な外観が一致するカスタムアイコンが必要です。シンボルウェイト、グリッドアライメント、レンダリングモードの設計仕様はどのようなものですか?シームレスに統合するカスタムシンボルのエクスポート方法を示してください。
أفضل الممارسات
- 質問する前に常に `.claude/apple-design-context.md` を確認して、既存のプロジェクトコンテキストを活用し、冗長な情報収集を回避します
- ガイダンスを提供する際は、追跡可能性とさらなる学習を可能にするために、ファイル名とセクションを明記して特定の HIG 基礎ドキュメントを引用します
- Apple ガイドラインは iOS、macOS、watchOS、tvOS、visionOS 間で大きく異なるため、早期にプラットフォームターゲット情報を取得します
- デザインパターンを提案する際は、コントラスト比、Dynamic Type サポート、VoiceOver 動作を含むアクセシビリティへの影響を常に説明します
تجنب
- RGB(0, 122, 255) のようなカラー値をハードコードしないでください - ダークモードとアクセシビリティ設定に自動的に適応する UIColor.systemBlue や Color.blue などのセマンティック API を使用します
- 16.0 のような固定フォントサイズを使用しないでください - 代わりに Dynamic Type でスケーリングし、ユーザーの優先テキストサイズを尊重する .body や .headline などのテキストスタイルを使用します
- 情報の伝達にカラーのみに依存しないでください - アクセシビリティのために形状、アイコン、テキストラベルなどの追加の視覚的インジケーターを常に提供します
- デザイン中のアクセシビリティテストを絶対にスキップしないでください - 提出前に Accessibility Inspector を早期に統合し、VoiceOver ナビゲーション、Dynamic Type スケーリング、コントラスト比を検証します