apple-hig-designer

Apple HIG デザイナー

Apple の Human Interface Guidelines（HIG）に準拠したインターフェイスを Claude Code が作成できるようにする、プロフェッショナル品質のフロントエンドデザインスキルです。Apple のデザインチームの品質基準を実現します。

このスキルを使用するタイミング

ユーザーが次の内容をリクエストしたときに、このスキルを有効にします。

• Apple スタイルまたは iOS/macOS スタイルのインターフェイス
• HIG に準拠した UI コンポーネント
• SF Symbols の統合
• San Francisco のタイポグラフィの実装
• モダンなガラス効果（任意。ユーザーから明示的なリクエストが必要です）

トリガーフレーズ：

• 「Apple スタイルの……をデザインして」
• 「HIG に準拠した……を作成して」
• 「iOS/macOS スタイルのコンポーネント」
• 「苹果风格的界面」
• 「符合 HIG 的设计」

---

デザインの基本原則

Apple デザインの4つの柱

1. Clarity（明瞭さ）

   • すべての要素に目的があります
   • 不要な複雑さを排除します
   • ユーザーが説明なしですぐに理解できます
   • 明確な視覚的階層を使用します

2. Deference（コンテンツの尊重）

   • UI 要素はコンテンツを支え、競合しません
   • UI の装飾や視覚的なノイズを最小限に抑えます
   • コンテンツを主役にします
   • 控えめな背景や境界線を使用します

3. Depth（奥行き）

   • レイヤーによって明確な視覚的階層を作ります
   • シャドウ、ぼかし、半透明を目的に応じて使用します
   • モーションで空間的な関係を強調します
   • Z 軸で重要度を伝えます

4. Consistency（一貫性）

   • プラットフォームを問わず、慣れ親しんだパターンを使用します
   • 予測しやすいインタラクションにします
   • 視覚表現を統一します
   • プラットフォームの慣習を尊重します

---

デザインシステムの仕様

タイポグラフィシステム

フォントファミリー： San Francisco（SF Pro）

/* System Font Stack for Web */
:root {
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display',
                 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', SFMono-Regular, Menlo, Monaco, monospace;
}

/* Font Size Scale (iOS) */
--text-caption2: 11px;    /* Caption 2 */
--text-caption1: 12px;    /* Caption 1 */
--text-footnote: 13px;    /* Footnote */
--text-subhead: 15px;     /* Subheadline */
--text-body: 17px;        /* Body - Default */
--text-headline: 17px;    /* Headline (semibold) */
--text-title3: 20px;      /* Title 3 */
--text-title2: 22px;      /* Title 2 */
--text-title1: 28px;      /* Title 1 */
--text-large-title: 34px; /* Large Title */

タイポグラフィのルール：

• 20pt 以上のサイズには SF Pro Display を使用します
• 20pt 未満のサイズには SF Pro Text を使用します
• 一貫した行の高さ（1.2～1.5）を維持します
• 階層の表現にはサイズだけでなくウェイトも使用します

カラーシステム

/* Apple System Colors - Light Mode */
:root {
  /* Primary Colors */
  --system-blue: #007AFF;
  --system-green: #34C759;
  --system-indigo: #5856D6;
  --system-orange: #FF9500;
  --system-pink: #FF2D55;
  --system-purple: #AF52DE;
  --system-red: #FF3B30;
  --system-teal: #5AC8FA;
  --system-yellow: #FFCC00;

  /* Gray Scale */
  --system-gray: #8E8E93;
  --system-gray2: #AEAEB2;
  --system-gray3: #C7C7CC;
  --system-gray4: #D1D1D6;
  --system-gray5: #E5E5EA;
  --system-gray6: #F2F2F7;

  /* Semantic Colors */
  --label-primary: #000000;
  --label-secondary: rgba(60, 60, 67, 0.6);
  --label-tertiary: rgba(60, 60, 67, 0.3);
  --label-quaternary: rgba(60, 60, 67, 0.18);

  /* Backgrounds */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F2F2F7;
  --bg-tertiary: #FFFFFF;

  /* Separators */
  --separator: rgba(60, 60, 67, 0.29);
  --separator-opaque: #C6C6C8;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --system-blue: #0A84FF;
    --system-green: #30D158;
    --system-indigo: #5E5CE6;
    --system-orange: #FF9F0A;
    --system-pink: #FF375F;
    --system-purple: #BF5AF2;
    --system-red: #FF453A;
    --system-teal: #64D2FF;
    --system-yellow: #FFD60A;

    --system-gray: #8E8E93;
    --system-gray2: #636366;
    --system-gray3: #48484A;
    --system-gray4: #3A3A3C;
    --system-gray5: #2C2C2E;
    --system-gray6: #1C1C1E;

    --label-primary: #FFFFFF;
    --label-secondary: rgba(235, 235, 245, 0.6);
    --label-tertiary: rgba(235, 235, 245, 0.3);
    --label-quaternary: rgba(235, 235, 245, 0.18);

    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;

    --separator: rgba(84, 84, 88, 0.6);
    --separator-opaque: #38383A;
  }
}

余白システム

8pt グリッドシステム：

:root {
  --space-1: 4px;   /* Extra small */
  --space-2: 8px;   /* Small */
  --space-3: 12px;  /* Medium-small */
  --space-4: 16px;  /* Medium */
  --space-5: 20px;  /* Medium-large */
  --space-6: 24px;  /* Large */
  --space-8: 32px;  /* Extra large */
  --space-10: 40px; /* 2X large */
  --space-12: 48px; /* 3X large */
}

タッチターゲットの要件：

• iOS： 最小 44×44 ポイント
• visionOS： タップ領域は最小 60 ポイント
• 視覚的に小さな要素には、常に十分なパディングを追加します

角丸（コンセントリックデザイン）

:root {
  /* Base radius values */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px; /* Capsule */
}

/* Concentric Rule: inner_radius + padding = outer_radius */
/* Example: 8px inner + 8px padding = 16px outer */

---

コンポーネントのパターン

以下のコンポーネントは Apple HIG の規約に従う必要があります。CSS の完全な実装については、resources/design-tokens.css と resources/ui-patterns.md を参照してください。React コンポーネントの例については、resources/components.jsx を参照してください。

ボタン

• プライマリ： カプセル形状（border-radius: 9999px）、min-height: 44px、system-blue の背景、白いテキスト、ウェイト 600
• セカンダリ： 同じカプセル形状、rgba(0, 122, 255, 0.1) の背景に system-blue のテキスト
• 押下時のフィードバック： :active で scale(0.98)

ガラス効果（任意 — リクエストがあった場合のみ）

• ガラス／すりガラス効果は、ユーザーから明示的なリクエストがあった場合にのみ使用します
• デフォルトのデザインでは、読みやすさとパフォーマンスのために不透明な背景を使用します
• 半透明の背景と backdrop-filter: blur(20px) saturate(180%) を使用します
• ガラス効果を使わない場合の代替手段を必ず用意します

カード

• デフォルト： 不透明な背景（--bg-tertiary）、border-radius: 16px、控えめな box-shadow
• グループスタイル： 外側に --bg-secondary、内側のアイテムに --bg-tertiary を使用し、--separator で区切ります

入力フィールド

• min-height: 44px、背景は --bg-secondary、border-radius: 12px
• フォーカス状態：box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.3)

タブバー

• 画面下部に固定し、height: 49px にセーフエリアのパディングを加えます
• 各タブに最小 44x44pt のタッチターゲットを設けます
• テキストラベルを必ず表示します（アイコンのみにはしません）
• 選択状態には塗りつぶし SF Symbols、未選択状態にはアウトラインを使用します
• 通知用のバッジ（赤い楕円、白いテキスト）に対応します

ツールバー

• 3つのセクションで構成します：先頭（戻る／タイトル）、中央（ツール）、末尾（アクション）
• 項目グループは最大 3 つです
• SF Symbols を枠線なしで使用します
• プライマリアクションには、末尾側で .prominent スタイルを使用します
• 戻るボタンは、シンボルのみの円形にします（テキストなし）

シート

• デテント：large（100％）、medium（50％）
• グラバーインジケーターを表示します（36x5px、中央揃え）
• 完了ボタン：右上、キャンセルボタン：左上
• 半透明の背景 rgba(0,0,0,0.4)

アラート

• 重要な情報にのみ使用します（必要最小限にとどめます）
• ボタンは最大3つです。具体的な動詞を使ったタイトルを付け、「OK」は避けます
• キャンセル：先頭側、破壊的操作：意図しない破壊的操作にのみ使用します
• 幅：270px、border-radius: 14px

リストとテーブル

• 行の高さは最低44pxです
• 情報ボタン：画面遷移せずに詳細を表示します
• 開示インジケーター（>）：サブビューへ移動します
• グループ化スタイル：角丸10px、インセット区切り線は60pxから開始します

---

アニメーションのガイドライン

タイミング関数

:root {
  /* Apple's preferred easing */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  /* Spring-like easing */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

継続時間のスケール

:root {
  --duration-instant: 100ms;  /* Micro-interactions */
  --duration-fast: 200ms;     /* Hover, focus states */
  --duration-normal: 300ms;   /* Standard transitions */
  --duration-slow: 500ms;     /* Complex animations */
}

インタラクションのフィードバック

/* Press feedback */
.interactive {
  transition: transform var(--duration-instant) var(--ease-out);
}

.interactive:active {
  transform: scale(0.97);
}

/* Hover glow */
.interactive:hover {
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
}

---

SF Symbols の統合

レンダリングモード

1. モノクロ： すべてのレイヤーに単色を使用します
2. 階層： 不透明度の変化で奥行きを表現します
3. パレット： レイヤーごとにカスタムカラーを指定します
4. マルチカラー： Apple 固有のシンボルカラーを使用します

使用ガイドライン

• ツールバー／ナビゲーション： アウトライン版を使用します
• タブバー： 塗りつぶし版を使用します
• テキストサイズに合わせる： シンボルは SF フォントに自動的に揃います
• テキストによる代替を提供する： 必ず aria-label を含めます

Web での実装（アイコンフォントによる代替）

<span class="sf-symbol" aria-label="Settings">􀣋</span>


<svg class="icon" aria-hidden="true">
  <use href="#icon-gear"></use>
</svg>

---

アクセシビリティ要件

色のコントラスト

• 通常のテキスト： 最低4.5:1（WCAG AA）
• 大きなテキスト： 最低3:1
• インタラクティブ要素： 状態を明確に区別できるようにします

動き

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

セマンティック HTML

<button type="button">Action</button>
<nav aria-label="Main navigation">...</nav>
<main role="main">...</main>

---

出力形式

Apple スタイルの UI コードを生成する際は、必ず以下を含めます。

1. 完全で実行可能なコード（CSS/React/Vue）
2. CSS カスタムプロパティによるライトモード／ダークモード対応
3. HIG に準拠する理由を説明するデザインの根拠
4. デバイスごとのレスポンシブブレークポイント
5. アクセシビリティ属性（aria-*、role など）

デフォルトの動作

• 読みやすさを高めるため、デフォルトで不透明な背景を使用します
• ガラス／ぼかし効果は、ユーザーから明示的に要求された場合にのみ使用します
• backdrop-filter に対応していないブラウザー向けに、ガラス効果を使わない代替表示を必ず用意します

出力構成の例

/**
 * Apple HIG Compliant Component
 *
 * Design Decisions:
 * - Uses SF Pro system font stack for native feel
 * - 44pt minimum touch target for accessibility
 * - Capsule shape for primary actions (HIG recommendation)
 * - Solid background for optimal readability
 * - Supports prefers-color-scheme for auto theming
 */

const AppleButton = ({ children, variant = 'primary', ...props }) => {
  return (
    <button
      className={`btn btn-${variant}`}
      {...props}
    >
      {children}
    </button>
  );
};

---

ベストプラクティスのチェックリスト

デザイン出力を確定する前に、以下を確認します。

• タイポグラフィ： 適切なサイズ基準で SF Pro を使用している
• カラー： ライトモード／ダークモード用のバリエーションを備えたシステムカラーを使用している
• 間隔： 8pt グリッドに従っている
• タッチターゲット： 最低44×44ptである
• 角丸： 同心円状の関係を維持している
• アニメーション： Apple 標準のイージングカーブを使用している
• アクセシビリティ： WCAG AA に準拠し、動きを減らす設定に対応している
• 一貫性： プラットフォームの慣習に合っている
• 背景： デフォルトでは不透明にし、ガラス効果は要求があった場合にのみ使用している

---

追加リソース

ローカルリファレンス（詳細な実装についてはこちらを参照してください）

• デザインパターンの全容と実例については、REFERENCE.md を参照してください
• CSS カスタムプロパティとデザイントークンについては、resources/design-tokens.css を参照してください
• React コンポーネントのテンプレートについては、resources/components.jsx を参照してください
• UI パターンの詳細なドキュメントについては、resources/ui-patterns.md を参照してください

外部リファレンス

• Apple Human Interface Guidelines
• Apple Design Resources
• SF Symbols
• Apple Fonts

---

このスキルにより、Claude Code は Apple の厳格なデザイン基準を満たすインターフェースを生成し、一貫性があり、アクセシブルで、美しいユーザー体験を実現します。