axiom-design

デザインとHIG

ビジュアルデザイン、HIGへの準拠、Liquid Glass、SF Symbols、タイポグラフィ、アプリの構成に関する作業では、必ずこのスキルを使用してください。

Axiom エージェントを起動できませんか？ このルーターでエージェントに案内された場合は、その手順をインラインで実行してください。MCP 経由では axiom_get_agent が手順を返します。それ以外の場合は、以下のファイルを読んでください。ファイル検索と読み取りだけで確認できます。

ここで利用可能：skills/liquid-glass-auditor.md。

その他のエージェントについても、MCP 経由では axiom_get_agent が手順を返します。その場合は、axiom_xclog_*、axiom_xcsym_*、axiom_xcprof_* ツールを使って、xclog、xcsym、xcprof の各手順を実行してください。それ以外の場合は、Axiom のスキルから skills/<agent>.md を探してください。該当ファイルがなければ、このスイートのスキルを使って自分で作業し、PATH 上にある Axiom ツールを使用してください。

クイックリファレンス

症状／タスク	リファレンス
デザイン上の判断、HIGへの準拠、色、背景	skills/hig.md を参照
余白、パディング、マージン、インセットに使う値	skills/hig.md を参照
iPhone Duo 向けの設計 — ポーズ、側面のコントロール、画面の折り目に UI がかからないようにする方法	axiom-swiftui の skills/iphone-duo.md を参照
セクションインデックス／A–Z インデックスストリップ／アルファベットスクラバーをリストに付けるべきか	skills/hig.md を参照
セマンティックカラー、カスタムカラーのパターン、マテリアルのスタイル	skills/hig-ref.md を参照
Liquid Glass のエフェクト、導入、ブラーエフェクトからの移行	skills/liquid-glass.md を参照
アプリ全体への Liquid Glass の導入、プラットフォームごとの差異	skills/liquid-glass-ref.md を参照
後方互換性：UIDesignRequiresCompatibility によるオプトアウトと、27 SDK が OS 27 でこれを無視する理由	skills/liquid-glass.md（後方互換性）を参照
SF Symbols の描画モード、エフェクト、アニメーション	skills/sf-symbols.md を参照
SF Symbols API のシグネチャ、UIKit の同等機能、利用可能状況	skills/sf-symbols-ref.md を参照
シンボル名の存在確認／シンボルの利用可能状況や対応モードの確認（sfsymbols CLI）	skills/sf-symbols-ref.md（第11部）を参照
San Francisco フォント、テキストスタイル、Dynamic Type、トラッキング	skills/typography-ref.md を参照
アプリのエントリーポイント、認証フロー、ルートビューの切り替え、シーンのライフサイクル、ドキュメントベースのアプリ	skills/app-composition.md を参照
Apple Pay ボタン／Wallet パスのデザイン／Tap to Pay ボタン	axiom-payments スイートと、複数領域に関わる HIG の説明がある skills/hig.md を参照

判断ツリー

digraph design {
    start [label="Design task" shape=ellipse];
    what [label="What do you need?" shape=diamond];

    start -> what;
    what -> "skills/hig.md" [label="design decision,\nHIG compliance,\ncolor/background choice"];
    what -> "skills/hig.md" [label="spacing/padding/margin value"];
    what -> "skills/hig-ref.md" [label="semantic color API,\ncustom color code,\nmaterial style details"];
    what -> "skills/liquid-glass.md" [label="Liquid Glass effects,\nmigrate from blur,\nRegular vs Clear,\nopt-out key"];
    what -> "skills/liquid-glass-ref.md" [label="app-wide Liquid Glass plan,\nplatform differences"];
    what -> "skills/sf-symbols.md" [label="rendering mode choice,\nsymbol effects/animations,\ncustom symbols"];
    what -> "skills/sf-symbols-ref.md" [label="SF Symbols API syntax,\nUIKit equivalents,\navailability matrix"];
    what -> "skills/typography-ref.md" [label="font selection,\nDynamic Type,\ntext styles, tracking"];
    what -> "skills/app-composition.md" [label="@main entry point,\nauth flow, root view,\nscene lifecycle"];
}

1. デザイン上の判断／HIGへの準拠／色や背景の選択ですか？ → skills/hig.md 1a. セマンティックカラー API、カスタムカラーコード、またはマテリアルのスタイルについて詳しく知る必要がありますか？ → skills/hig-ref.md
2. Liquid Glass のエフェクト／ブラーからの移行／Regular と Clear のバリアントの選択ですか？ → skills/liquid-glass.md 2a. アプリ全体への Liquid Glass の導入やプラットフォームごとの差異を計画していますか？ → skills/liquid-glass-ref.md 2b. Liquid Glass のオプトアウト／UIDesignRequiresCompatibility／後方互換性についてですか？ → skills/liquid-glass.md（後方互換性）
3. SF Symbols の描画モード／シンボルエフェクト／カスタムシンボルですか？ → skills/sf-symbols.md 3a. SF Symbols API の構文／UIKit の同等機能／利用可能状況の確認が必要ですか？ → skills/sf-symbols-ref.md
4. フォントの選択／Dynamic Type／テキストスタイル／トラッキング／行送りですか？ → skills/typography-ref.md
5. アプリのエントリーポイント／認証フロー／ルートビューの切り替え／シーンのライフサイクルですか？ → skills/app-composition.md
6. SwiftUI ビューの実装ですか？ → /skill axiom-swiftui
7. TextKit／リッチテキスト編集／Writing Tools ですか？ → /skill axiom-uikit
8. アクセシビリティへの準拠（VoiceOver、コントラスト、タッチターゲット）ですか？ → /skill axiom-accessibility
9. Liquid Glass の導入状況を UI で監査しますか？ → liquid-glass-auditor（エージェント — 移行の機会と導入の完全性に関する不足を明らかにします：バリアントの適切な使い分け、ネストの整理、26以前のスタイル未適用フォールバック、セマンティックなツールバー配置、UIDesignRequiresCompatibility によるオプトアウト、アクセシビリティの再確認。スコアは ADOPTED／PARTIAL／NOT ADOPTED）
10. CarPlay アプリのデザイン、カテゴリ、運転中の注意散漫を防ぐルールですか？ → /skill axiom-media（carplay-hig.md）

プラットフォーム固有のHIG

• watchOSのデザイン（一覧性の高いUI、watchOS 10のナビゲーション）→ axiom-watchosを参照（skills/design-for-watchos.md）

競合時の判断

designとswiftui：UIを構築する場合：

1. まずdesignを使用 — どのようなものを作るか（色、マテリアル、タイポグラフィ、レイアウトの意図）を、実装方法より先に決めます。
2. 次にswiftuiを使用 — デザイン上の決定をSwiftUIコードで実装します。

designとaccessibility：色やタイポグラフィを選ぶ場合：

• コントラストやDynamic Typeへの準拠は？ → accessibilityを使用
• どのセマンティックカラーやテキストスタイルを選ぶかは？ → designを使用

design（liquid-glass）とswiftui：Liquid Glassを実装する場合：

• Liquid Glassとは何か、RegularとClearのどちらを使うか、移行戦略 → designを使用（skills/liquid-glass.md）
• .glassEffect()修飾子のSwiftUIコード → designを使用（skills/liquid-glass-ref.md）してから、周囲のビューコードにはswiftuiを使用

design（app-composition）とswiftui：アプリのアーキテクチャを構成する場合：

• @mainエントリ、認証ステートマシン、ルートビューの切り替え、シーンのライフサイクル → designを使用（skills/app-composition.md）
• NavigationStack、NavigationSplitView、タブ構成 → swiftuiを使用

designとmedia（CarPlay）：CarPlay向けにデザインする場合：

• 一般的なiOS HIGの原則（色、タイポグラフィ、Liquid Glass）→ designを使用
• CarPlay固有のルール（アプリカテゴリ、エンタイトルメント審査、テンプレート専用UI、ドライバーの注意散漫、カテゴリごとのデザインルール）→ axiom-mediaを呼び出す（skills/carplay-hig.md）
• CarPlayのルールはiOS HIGより厳しく、App Store審査だけでなく、エンタイトルメント審査でも適用されます。

重要なパターン

HIGの迅速な判断（skills/hig.md）：

• 背景色の判断ツリー（メディア重視か標準か）
• タイポグラフィの選択（headline、body、caption）
• 色の使用ガイドラインと、セマンティックカラーとカスタムカラーの使い分け
• HIG準拠のデザインレビューチェックリスト

HIG総合リファレンス（skills/hig-ref.md）：

• プラットフォームごとの利用可否を含む、すべてのセマンティックカラー
• ダークモードに対応したカスタムカラーのパターン
• 背景の階層とマテリアルスタイル
• すべての色と背景パターンのコード例

Liquid Glass（skills/liquid-glass.md）：

• Liquid Glassとは何か、ぼかし効果との違い
• RegularとClearのバリエーション選択
• iOS 26以前のマテリアルからの移行戦略
• ティント、視認性、適応動作に関する問題のトラブルシューティング
• Liquid Glassの実装に関するエキスパートレビュー基準
• UIDesignRequiresCompatibilityによるオプトアウトと、SDK × OSの実測動作

Liquid Glassの導入（skills/liquid-glass-ref.md）：

• アプリ全体への導入計画（アイコン、コントロール、ナビゲーション、メニュー）
• プラットフォーム固有の動作（iOS、iPadOS、macOS、tvOS、watchOS）
• Liquid Glassインターフェースのアクセシビリティ準拠

SF Symbols（skills/sf-symbols.md）：

• レンダリングモードの選択（Monochrome、Hierarchical、Palette、Multicolor）
• シンボル効果の選択（Bounce、Pulse、Scale、Wiggle、Rotate、Breathe、Draw）
• カスタムシンボルの作成ワークフロー
• 効果が再生されない場合やウェイトが一致しない場合のトラブルシューティング

SF Symbols API（skills/sf-symbols-ref.md）：

• レンダリングモードと効果の正確なAPIシグネチャ
• すべてのSwiftUIシンボルAPIに対応するUIKit／AppKitの同等機能
• プラットフォーム別の利用可否一覧
• 設定オプション（ウェイト、スケール、可変値）

タイポグラフィ（skills/typography-ref.md）：

• San Franciscoフォントシステム（Pro、Compact、Mono、New York）
• Dynamic Typeによる拡大縮小に対応したテキストスタイル
• トラッキングと行送りの値
• 国際化に関する考慮事項

アプリの構成（skills/app-composition.md）：

• @mainエントリポイントとルートビューパターン
• 認証ステートマシン（ログイン、オンボーディング、メイン画面） -ちらつきのないルートビューの切り替え
• scenePhaseのライフサイクル処理と状態の復元
• ドキュメントベースのアプリ：OS27の@Observableドキュメントモデル（ReadableDocument／WritableDocument）とDocumentGroup

安易な理由付け

考え	実際
「見栄えのよい色を選べばいい」	セマンティックカラーは、ダークモード、アクセシビリティ設定、プラットフォームに自動的に適応します。カスタムカラーでは、これらすべてを手動で対応する必要があります。skills/hig.md に判断フローチャートがあります。
「Liquid Glass は単なるぼかし効果だ」	Liquid Glass は、レンズ効果、色合い、適応動作を備えた独自のマテリアルシステムです。代わりに .blur() を使うと、見た目が不適切になります。違いについては skills/liquid-glass.md で説明しています。
「どの SF Symbol のレンダリングモードを使うべきか分かっている」	適切なモードは状況によって異なります（ツールバーにはモノクロ、奥行きには階層、ブランドカラーにはパレット）。skills/sf-symbols.md に判断フローチャートがあります。
「フォントサイズをハードコードしよう」	ハードコードしたサイズは Dynamic Type を機能させず、HIG に違反し、アクセシビリティレビューにも通りません。skills/typography-ref.md でテキストスタイルシステムを確認できます。
「認証状態をブール値で処理しよう」	ブール値では、競合状態なしにログイン、オンボーディング、メインの各状態を表現できません。skills/app-composition.md にステートマシンのパターンがあります。
「Liquid Glass の採用には UI 全体を書き換える必要がある」	標準的な SwiftUI／UIKit コンポーネントのほとんどは、自動的に対応します。まず最新の Xcode でビルドしてから、確認してください。段階的に進める方法は skills/liquid-glass-ref.md にあります。
「SF Symbol のアニメーションは後で追加しよう」	シンボルエフェクトは、ユーザーがインタラクティブなフィードバックを感じ取るための主要な手段です。これを付けずにリリースすると、動作していないように感じられます。選び方については skills/sf-symbols.md で説明しています。
「コードは動くのだから、デザインレビューは省略しよう」	HIG への準拠は App Store の審査に影響します。正しく機能していても、違和感のあるアプリは審査で却下されます。skills/hig.md にレビュー用チェックリストがあります。

使用例

ユーザー：「背景はダークとライトのどちらにすべきですか？」 -> 参照：skills/hig.md

ユーザー：「セカンダリテキストにはどのセマンティックカラーを使うべきですか？」 -> 参照：skills/hig-ref.md

ユーザー：「アプリに Liquid Glass を実装するにはどうすればよいですか？」 -> 参照：skills/liquid-glass.md

ユーザー：「アプリ全体で Liquid Glass の採用を計画したいです」 -> 参照：skills/liquid-glass-ref.md

ユーザー：「SF Symbol が平坦に見えるので、奥行きを持たせたいです」 -> 参照：skills/sf-symbols.md

ユーザー：「シンボルエフェクト用の SwiftUI API は何ですか？」 -> 参照：skills/sf-symbols-ref.md

ユーザー：「本文にはどのフォントを使うべきですか？」 -> 参照：skills/typography-ref.md

ユーザー：「ログイン画面とメイン画面を切り替えるにはどうすればよいですか？」 -> 参照：skills/app-composition.md

ユーザー：「アプリの UI が HIG に準拠しているか確認してください」 -> 参照：skills/hig.md、続いてコントラスト／Dynamic Type については /skill axiom-accessibility

ユーザー：「ダウンロードボタンのアイコンをアニメーションさせたいです」 -> 参照：skills/sf-symbols.md