axiom-hig

Apple ヒューマンインターフェイスガイドライン — クイックリファレンス

このスキルを使う場面

次のような場合に使用します：

• ビジュアルデザインに関する判断（色、背景、タイポグラフィ）
• HIG への準拠について UI を確認する
• 「暗い背景を使うべきですか？」という質問に答える
• デザイン案を選ぶ
• 関係者にデザインの判断を説明する
• よくあるデザインに関する質問をすばやく調べる

関連スキル

• 詳細な説明やコード例については axiom-hig-ref を使用します
• iOS 26 のマテリアルデザインの実装とバージョン条件付きデザイン（同じアプリで Liquid Glass 導入前と Liquid Glass の両方をサポートする）については axiom-liquid-glass を使用します
• iOS 26 アプリ全体への導入ガイドと後方互換性の方針については axiom-liquid-glass-ref を使用します
• アクセシビリティのトラブルシューティングについては axiom-accessibility-diag を使用します

バージョン条件付きデザイン

iOS 25（Liquid Glass 導入前）と iOS 26 以降の両方をサポートする場合は、導入方針について axiom-liquid-glass を参照してください。#available(iOS 26, *) をいつ使用するか、どのように適切にフォールバックするか、どのシステムコンポーネントが Liquid Glass を自動的に採用し、どれに明示的なオプトインが必要かを説明しています。

---

クイック判断ツリー

背景色の判断

Is your app media-focused (photos, videos, music)?
├─ Yes → Consider permanent dark appearance
│        WHY: "Lets UI recede, helps people focus on media" (Apple HIG)
│        EXAMPLES: Apple Music, Photos, Clock apps use dark
│        CODE: .preferredColorScheme(.dark) on root view
│
└─ No → Use system backgrounds (respect user preference)
         CODE: systemBackground (adapts to light/dark automatically)
         GROUPED: systemGroupedBackground for iOS Settings-style lists

Apple のガイダンス：「まれなケースでは、インターフェイスをダークな外観のみにすることを検討してください。たとえば、メディアを没入感のある形で閲覧できるアプリでは、恒久的にダークな外観にすることが適切な場合があります。」

色の選択に関する判断

Do you need a specific color value?
├─ No → Use semantic colors
│        label, secondaryLabel, tertiaryLabel, quaternaryLabel
│        systemBackground, secondarySystemBackground, tertiarySystemBackground
│        WHY: Automatically adapts to light/dark/high contrast
│
└─ Yes → Create Color Set in asset catalog
         1. Open Assets.xcassets
         2. Add Color Set
         3. Configure variants:
            ├─ Light mode color
            ├─ Dark mode color
            └─ High contrast (optional but recommended)

重要な原則：「現在のインターフェイススタイルに合わせて自動的に調整される、labelColor のようなセマンティックカラー名を使用してください。」

フォントの太さに関する判断

Which font weight should I use?
├─ ❌ AVOID: Ultralight, Thin, Light
│            WHY: Legibility issues, especially at small sizes
│
├─ ✅ PREFER: Regular, Medium, Semibold, Bold
│             WHY: Maintains legibility across sizes and conditions
│
└─ Headers: Semibold or Bold for hierarchy
            Body: Regular or Medium

Apple のガイダンス：「細いフォントウェイトは避けてください。Ultralight、Thin、Light ではなく、Regular、Medium、Semibold、Bold のウェイトを優先してください。」

---

基本原則のチェックリスト

UI をリリースする前に

すべての画面で次の項目を確認してください：

外観

• ライトモードで動作する
• ダークモードで動作する
• コントラストを上げるが有効でも問題なく表示される
• 透明度を下げるが有効でも問題なく表示される

タイポグラフィ

• ダイナミックタイプに対応している（テキストを 200% まで拡大できる）
• 細いフォントウェイトを使っていない（最小でも Regular）
• どのテキストサイズでも階層が明確である
• 大きなテキストサイズでもテキストが途切れない

アクセシビリティ

• コントラスト比が最低でも 4.5:1 である
• 小さいテキストではコントラスト比が 7:1 以上である（推奨）
• タッチターゲットが 44x44 ポイント以上である
• 情報が色だけで伝えられていない
• すべてのインタラクティブ要素に VoiceOver ラベルがある

モーション

• 視差効果を減らす設定を尊重する
• アニメーションをキャンセルまたはスキップできる
• コントロールなしで動画が自動再生されない

ローカライズ

• 画像内にハードコードされた文字列がない
• 右から左に記述する言語に対応している
• テキストの方向が適切である

---

よくあるデザインに関する質問

Q: アプリの背景を暗くすべきですか？

A: コンテンツを主役にするメディア中心のアプリ（写真、動画、音楽）に限ります。それ以外ではシステムの背景色を使ってください。

Apple 純正アプリの例：

アプリ	背景	理由
Music	ダーク	アルバムアートが主役
Photos	ダーク	画像が主役
Clock	ダーク	夜間の使用
Notes	システム	書類の編集
Settings	システム	実用性を重視

コード：

// ❌ WRONG - Don't override unless media-focused
.background(Color.black)

// ✅ CORRECT - Let system decide
.background(Color(.systemBackground))

Q: 適切な背景色は何ですか？

A: ライトモードとダークモードに自動的に適応する systemBackground を使用してください。iOS の設定アプリのようにコンテンツをグループ化する場合は、systemGroupedBackground を使用してください。

色の階層：

• プライマリ：systemBackground - メインの背景
• セカンダリ：secondarySystemBackground - グループ化する要素
• ターシャリ：tertiarySystemBackground - セカンダリ内のグループ化

// ✅ Standard list
List { }
    .background(Color(.systemBackground))

// ✅ Grouped list (Settings style)
List { }
    .listStyle(.grouped)
    .background(Color(.systemGroupedBackground))

Q: 読みやすさを確保するにはどうすればよいですか？

A: セマンティックなラベルカラーを使用し、コントラスト比を 4.5:1 に保ち、細いフォントウェイトを避けてください。

ラベルの階層：

// Most prominent
Text("Title").foregroundStyle(.primary)

// Subtitles
Text("Subtitle").foregroundStyle(.secondary)

// Tertiary information
Text("Detail").foregroundStyle(.tertiary)

// Disabled text
Text("Disabled").foregroundStyle(.quaternary)

Q：SF Symbols とカスタムアイコンのどちらを使うべきですか？

A： ブランド固有の画像が必要でない限り、SF Symbols を使ってください。Dynamic Type に合わせて拡大・縮小され、外観にも自動的に適応します。

SF Symbols のメリット：

• 5,000 種類以上のシンボルを収録（SF Symbols 5）
• ライトモード／ダークモードに自動で適応
• Dynamic Type に合わせて拡大・縮小
• 「文字を太くする」のアクセシビリティ設定に応じて太くなる
• San Francisco フォントに対応する 9 種類のウェイト

カスタムアイコンを使う場合：

• ブランド固有の画像
• SF Symbols にない、アプリ固有のコンセプト
• 独自のビジュアルスタイルが必要な場合

Q：ライトモード／ダークモードとユーザーによる選択のどちらにすべきですか？

A： 必ず両方に対応してください。アプリ独自の外観設定は作成しないでください。

Apple のガイダンス： 「アプリ独自の外観設定は作成しないでください。ユーザーは、アプリがシステム全体のダークモード設定を尊重することを期待しています。アプリ独自の外観モードのオプションを設けると、希望する外観にするために複数の設定を調整しなければならず、ユーザーの手間が増えます。」

Q：必要なコントラスト比はどのくらいですか？

A： 通常のテキストでは最低 4.5:1、小さいテキストでは 7:1 を推奨します。

WCAG のコントラスト基準：

• AA（必須）： 通常のテキストは 4.5:1、大きいテキストは 3:1（18pt 以上／太字は 14pt 以上）
• AAA（強化）： 通常のテキストは 7:1、大きいテキストは 4.5:1
• Apple のガイダンス： AA の要件を自動的に満たすセマンティックカラーを使用してください

テスト： オンラインのコントラスト計算ツールまたは Xcode の Accessibility Inspector を使用してください。

Q：タッチターゲットの最小サイズはどのくらいですか？

A： iOS／iPadOS では 44x44 ポイントとし、ターゲット間に間隔を設けてください。

プラットフォームごとの仕様：

• iOS／iPadOS：最小 44x44 ポイント
• macOS：最小 20x20 ポイント。主要なアクションでは、より大きくします
• watchOS：システムコントロールを使用します（小さな画面向けに最適化されています）
• tvOS：フォーカスを明確にするため、60 ポイント以上の間隔を設けます

---

デザインレビューのチェックリスト

あらゆるデザインをレビューするとき

デザインレビュー、App Store への提出、ステークホルダーへのプレゼンテーションで、このチェックリストを使用してください。

コンテンツ優先のデザイン

• UI はコンテンツを優先していますか？（注目を奪い合っていませんか？）
• ブランディングは控えめですか？（すべての画面にロゴを表示していませんか？）
• 背景はコンテンツに適していますか？（メディアアプリは暗く、それ以外はシステムに合わせていますか？）

プラットフォームとの一貫性

• iOS／iPad／Mac のネイティブアプリのように感じられますか？
• システムカラーとフォントを使用していますか？
• 標準的なジェスチャは期待どおりに機能しますか？
• ナビゲーションパターンは馴染みのあるものですか？

アクセシビリティへの準拠

• すべてのコントラスト比が要件を満たしていますか？
• すべてのタッチターゲットが 44x44 ポイント以上ですか？
• 色以外の方法でも情報を伝えていますか？
• VoiceOver のラベルはすべて揃っていますか？
• Dynamic Type に対応していますか？

ライトモードとダークモード

• どちらの外観モードでも機能しますか？
• 色は自動的に適応しますか？
• 色の値をハードコードしていませんか？
• コントラストを上げる設定をテストしましたか？

ローカライズへの対応

• 画像に文字列をハードコードしていませんか？
• RTL 言語に対応していますか？
• テキストが途中で切れていませんか？
• レイアウトはテキストサイズに合わせて適応しますか？

---

デザインレビューでのプレッシャー：HIG の判断を守る

問題点

デザインレビューでは、次のような意見が出ることがあります。

• 「ブランドの一貫性のために、すべての画面にロゴを追加しましょう」
• 「より洗練されて見えるので、細いフォントウェイトを使いましょう」
• 「カスタムの外観切り替えを作りましょう。ダークモードを好むユーザーもいます」
• 「ブランドを見せるために、この画面にはスプラッシュ画面が必要です」

これらは HIG に反しています。プロとして異議を唱える方法を紹介します。

要注意事項 — HIG に反する要望

次のいずれかが出た場合は、このスキルを参照してください。

• ❌ 「ナビゲーションバーにロゴを追加する」 — スペースを浪費し、コンテンツへの注意をそらします
• ❌ 「Ultralight フォントを使う」 — 読みやすさに問題があり、アクセシビリティ要件を満たしません
• ❌ 「カスタムのダークモード切り替え」 — ユーザーの手間を増やし、システム設定を無視します
• ❌ 「ブランディングのためのスプラッシュ画面」 — 起動画面にブランディングを含めることはできません
• ❌ 「すべてのテキストにブランドのカスタムカラーを使う」 — コントラスト要件を満たせない可能性があります

プロとして異議を唱える方法

ステップ 1：HIG のガイダンスを示す

"I want to make this change, but let me show you Apple's guidance:

[Show the relevant HIG section from this skill or hig-ref]

Apple explicitly recommends against this because..."

Step 2: リスクを示す

コントラストに関する問題の場合：

• コントラスト比4.5:1を満たすデザインを示す
• 提案されたデザイン（基準を満たさない）を示す
• App Storeで却下されるリスクを説明する

外観の切り替えの場合：

• iOSの「設定」→「画面表示と明るさ」を示す
• ユーザーはすでにこの設定を変更できることを説明する
• 2つの別々の設定によって混乱が生じる様子を示す

Step 3: 妥協案を提示する

"I understand the brand concern. Here are HIG-compliant alternatives:

1. Use your brand color as the app's tint color
2. Feature branding in onboarding (not launch screen)
3. Use your accent color for primary actions
4. Include subtle branding in content, not chrome"

Step 4: 決定事項を記録する

却下された場合：

Slack message to PM + designer:

"Design review decided to [violate HIG guidance].

Important risks to monitor:
- App Store rejection (HIG violations)
- Accessibility issues (users with visual impairments)
- User complaints (departure from platform norms)

I'm flagging this proactively. If we see issues after launch,
we'll need an expedited follow-up."

デザイン上の決定を受け入れる場合

デザイナーがHIGを覆す正当な理由を持っている場合もあります。次の条件を満たす場合は受け入れてください。

• HIGのガイダンスを理解している
• 却下やアクセシビリティ上のリスクを受け入れる意思がある
• 決定事項を書面で記録している
• リリース後のフィードバックを継続的に確認することを約束している

---

HIGの3つの基本原則

デザイン上のすべての決定は、次の原則を支える必要があります。

1. 明瞭さ

定義： コンテンツを最優先し、インターフェイス要素はコンテンツを引き立てるものにします。

実践方法：

• 余白を活用する
• すべての要素に目的を持たせる
• ユーザーの役に立たないものはすべて取り除く
• ユーザーが説明を読まなくても、何ができるか分かるようにする

2. 一貫性

定義： 標準的なUI要素と、なじみのあるパターンを使用します。

実践方法：

• 標準的なジェスチャは期待どおりに動作する
• ナビゲーションはプラットフォームの慣習に従う
• 色とフォントにはシステムの値を使用する
• なじみのあるコンポーネントを、なじみのある場所に配置する

3. 控えめさ

定義： UIがコンテンツと注目を奪い合わないようにします。

実践方法：

• 大胆な背景ではなく、控えめな背景を使う
• 不要なときはナビゲーションを目立たなくする
• コンテンツを主役にする
• ブランディングは控えめにする

HIGより：「控えめさは、周囲の視覚要素がコンテンツと競合せず、コンテンツが際立つようにすることで、アプリを美しくします。」

---

プラットフォーム別のヒント

iOS

• ポートレート表示を優先したデザイン
• 片手で届く範囲を考慮する
• メインのナビゲーションには画面下部のタブバーを使う
• スワイプで戻るジェスチャ

iPadOS

• サイドバーに適応できるレイアウト
• Split Viewに対応する
• ポインター操作
• 任意のウインドウサイズに対応（iOS 26以降）

macOS

• コマンドにはメニューバーを使う
• 情報量の多いレイアウトも許容される
• ポインターを中心とした操作
• ウインドウの枠とコントロール

watchOS

• ひと目で確認できるインターフェイス
• 画面全体に広がるコンテンツ
• 余白は最小限にする
• Digital Crownでの操作

tvOS

• フォーカスベースのナビゲーション
• 3メートルの視聴距離
• 大きなタッチ領域
• ジェスチャ対応リモコン

visionOS

• 空間的なレイアウト
• ガラス素材
• 快適な視聴距離
• 頭部に固定されたコンテンツは避ける

---

リソース

WWDC: 356, 2019-808

ドキュメント: /design/human-interface-guidelines, /design/human-interface-guidelines/color, /design/human-interface-guidelines/dark-mode, /design/human-interface-guidelines/typography

スキル: axiom-hig-ref, axiom-liquid-glass, axiom-liquid-glass-ref, axiom-accessibility-diag

---

最終更新: Apple HIG（2024-2025）、WWDC25-356、WWDC19-808に基づく スキルの種類: 規律（迅速な判断、チェックリスト、プレッシャーのかかる状況）