tangmyy/apple-ui-design

Apple UI Design

Appleにインスパイアされた、クリーンでミニマル、プレミアムなUIデザインシステム。

使用するタイミング

• 優れたUXを必要とするモダンなインターフェースを構築するとき
• クリーンでミニマルな美しさを追求するとき
• Appleのような洗練されたアニメーションを実装するとき
• プレミアムなユーザーエクスペリエンスをデザインするとき
• デザイン品質をレビューするとき

ワークフロー

ステップ1: タイポグラフィシステムの適用

適切な階層（ヒーロー、タイトル、本文、キャプション）でSF Pro Displayを使用します。

ステップ2: カラー哲学の適用

適切なコントラストでライト/ダークモード変数を使用します。

ステップ3: スペーシングシステムの適用

4/8/16/24/48/96pxのスペーシングリズムに従います。

ステップ4: チェックリストの確認

タッチターゲット、コントラスト、アニメーションが基準を満たしていることを確認します。

---

コア原則

1. 明瞭さ - コンテンツが主役、UIは背景に消える
2. 従属 - UIはコンテンツに奉仕し、競合しない
3. 奥行き - レイヤリングで階層を生み出す

タイポグラフィ

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;

/* 階層 */
--text-hero: 600 48px/1.1;      /* 大胆な主張 */
--text-title: 600 32px/1.2;     /* セクション見出し */
--text-body: 400 17px/1.5;      /* 読みやすいコンテンツ */
--text-caption: 400 13px/1.4;   /* 補足情報 */

カラー哲学

/* ライトモード */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--accent: #0071e3;

/* ダークモード */
--bg-primary: #000000;
--bg-secondary: #1d1d1f;
--text-primary: #f5f5f7;

スペーシングシステム

--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px;   /* セクション間隔 */

主要パターン

カード

.card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

ボタン

.btn-primary {
  background: var(--accent);
  color: white;
  padding: 12px 24px;
  border-radius: 980px;  /* ピル形状 */
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

繊細なアニメーション

/* マイクロインタラクション */
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

/* ページ要素 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

UXルール

すべきこと	すべきでないこと
たっぷりとした余白	窮屈なレイアウト
1つの主要アクション	複数の競合するCTA
段階的な開示	すべてを表示
繊細なフィードバック	不快なアニメーション
システムフォント	装飾的なフォント

チェックリスト

• タッチターゲットが44px以上
• コントラスト比が4.5:1以上
• 最大コンテンツ幅が約680px
• 一貫したスペーシングリズム
• ダークモード対応
• スムーズな60fpsアニメーション