apple-design

Apple Design（ファミリーハブ）

Apple 流のデザインを実践するためのリファレンス — そしてファミリーの残りのメンバーへのインデックスです。Apple のシステム全体は、HIG の次の 3 つのテーマに支えられています。

• Clarity（明瞭さ） — あらゆるサイズでの可読性、精密なアイコン、機能に対する装飾の譲歩。
• Deference（控えめさ） — 流動的なモーションと、コンテンツを主役にするための、くっきりとした、大半が半透明の UI。クロームは後退します。
• Depth（奥行き） — 明確なレイヤーと現実的なモーションが、階層性と場所の感覚を伝えます。

2025 年の Liquid Glass 時代は、すべてのプラットフォームを単一の適応的で半透明なマテリアルのもとに統合します。設計目標は 階層性、調和、一貫性 です。完全な「なぜ」の背景（スキューモーフィズム → フラット → 奥行き → ガラス）については references/philosophy-and-evolution.md をお読みください — 単にぼかしを真似するのではなく、推論の仕方 を模倣しましょう。

⚠ まず抑制 — ただし抑制は両刃です

Apple のアイデンティティは Deference（控えめさ） です。Apple は、適用する以上に 差し控えます。「Apple っぽくする」が失敗する最大の要因は エフェクトが多すぎる ことですが、同程度に逆の失敗は、間違ったサーフェスで 少なすぎる ことです。

2 軸の判断 — 何らかのエフェクトに手を伸ばす前に両方を選びましょう:

軸	問い	ルール
抑制軸	私は装飾を加えているのか、意味を加えているのか？	装飾のみを加えるものはすべて削除します。ライトファースト、アクセントは 1 つ、タイポグラフィと余白が階層性を担い、ガラス = クロームのみ。
サーフェス軸	これはユーティリティ画面か、フラッグシップ／マーケティングページか？	ユーティリティ（アプリ／ダッシュボード／フォーム）: モーションはほぼ見えず、スプリングは ≤300ms、シネマティックなエフェクトは OFF。フラッグシップ（ランディング／ヒーロー／プロダクト）: モーションが 実体そのもの — 継続的なスクロール駆動の振り付けが必須。静的なページは失敗です。

同じ抑制の 規律、逆のモーション バジェット — サーフェスがバジェットを決めます。

• ライトがデフォルト、ダークは例外です。 ダークヒーローをデフォルトに しないでください。
• 本物のプロダクトを見せましょう — 本物のデバイスフレーム内の本物のスクリーンショットです。プレースホルダーや抽象的なブロブは、代用品ではなく失敗です。
• アクセントカラーは 1 つ、ニュートラルと余白を大量に。階層性を担うのは タイポグラフィと余白 — ボックス、ボーダー、グローではありません。
• ガラス = クロームのみ（ナビ／シート／サイドバー）、すべてのカードではありません。グラデーションテキストは 0〜1 回、すべての見出しではありません。Bento は一度だけ、それがふさわしい場所で。
• 何かを「Apple グレード」と呼ぶ前に、各エフェクトについて問いましょう: 「これを削除したら、デザインは意味を失うか、それとも単に装飾を失うだけか？」 装飾ならば、削除しましょう。 フラッグシップページではさらに問いましょう: 「少なくとも 1 つの継続的なスクロール駆動のシネマティックシーンがあるか、それともこれは死んだテンプレートか？」

抑制の模範例: frontend/css/landing.css（Deference、ライトファースト、アクセント 1 つ）。
生きた動きの模範例: apple.com/iphone（継続的なスクロール進行トランスフォーム、固定シーン、テーマモーフ、アンビエントフロート — シネマティックのベンチマーク）。

完全なガイド + スロップトラップ表 + 死んだテンプレートのガード + 抑制チェックリスト: references/restraint-and-antislop.md — 子スキルのエフェクトレシピの 前に 読んでください。

このハブを使う場面

• タスクが「Apple っぽく／プレミアムに感じさせる」であり、どのサブスキルが当てはまるかわからない → ここから始めて、ルーティングしましょう。
• 哲学／原則、時代の変遷、または横断的なルールを知りたい。

適切な子スキルへのルーティング

このファミリーは、技術的・機能的な実質的部分に重点を置いています — レイアウト/グリッドシステム、モーションの仕組み、インタラクションロジック（物事がどのように振る舞うのか、そしてその理由）。カラー/テーマ設定は軽量で置き換え可能な部分です（参考資料は1つ）。ここに過度に重きを置かないでください。

ニーズ	スキル
レイアウト/グリッド/余白 + 適応・レスポンシブロジック · タイポグラフィ（+ カラー）	apple-design-foundations
インタラクションロジック — ナビゲーションモデル、状態/読み込み/空/エラーの挙動、体感パフォーマンス、入力/フォーカス	apple-design-interaction
アニメーション/スプリング + タイミングと振り付け、ジェスチャー、ハプティクス、マイクロインタラクション	apple-design-motion
iOS/iPadOS/macOS/visionOS/watchOS のサーフェス + コンポーネントの構造	apple-design-os
Glass/ vibrancy 素材、アプリアイコン、SF Symbols	apple-design-materials
apple.com のマーケティングページ、スクローリー・テリング、フロントエンドエンジニアリング	apple-design-web
CDN/画像/動画の配信 + （リバースエンジニアリングされた）バックエンドアーキテクチャ	apple-design-backend
アクセシビリティ/インクルーシブデザイン + マーケティング/説得/ブランド戦術	apple-design-tactics
「このランディング/マーケティングページを生き生きと感じさせる」/ apple.com/iphone スタイルのスクローリー・テリング	apple-design-web（インタラクションの一覧、スクローリー・テリングのレシピ）+ apple-design-motion（連続スクロール進捗セクション、減衰 lerp プリミティブ、ピン留めシーン）

Apple の普遍的なルール（すべてに適用）

• コンテンツを優先する：クロームは静かで、半透明で、邪魔にならない。
• システムの書体スタックとセマンティックカラーを使用し、ハードコードされた hex は使わない（ライト/ダーク/コントラストに適応）。
• モーションはスプリングベースで、中断可能で、prefers-reduced-motion を尊重する。
• タッチターゲットは最低 44pt、レイアウトは Dynamic Type に合わせてリフローする必要があり、切り捨ててはならない。
• マテリアルは、透明度を下げる/コントラストを上げる設定の下で、優雅に劣化する必要がある。

信頼度ラベル（すべての参考資料で使用）

参考資料ファイル内の重要な主張はすべて、[observed]（製品で検証可能）、[documented]（Apple HIG/WWDC/ドキュメント）、[inferred]（推論による、未確認）、または [speculative]（教育に基づく推測）のいずれかでタグ付けされています。[inferred]/[speculative] は分析として扱い、決して事実として扱わないでください — これは apple-design-backend で最も重要です。

参考資料

• references/restraint-and-antislop.md — 最初に読んでください。 Apple の実際のデフォルト（ライトファースト、実製品、1つのアクセント）+ AI スロップの罠 + 抑制のチェックリスト。
• references/philosophy-and-evolution.md — HIG の原則、時代ごとの進化、そして各変化の背後にある理由。