apple-design

Apple デザイン（HIG ＋ Liquid Glass 版）

このスキルを使うと、出力が実際に Apple らしくなります。「余白を増やしただけの汎用的なミニマルデザイン」ではありません。違いは、具体的な数値（文字サイズの段階、角丸、タップ領域、イージング）と、抑制の美学にあります。ここに記載した仕様は、2026 年半ば時点の Apple の Human Interface Guidelines をもとにまとめたもので、2025 年以前のフラットな見た目ではなく、現在の Liquid Glass デザイン言語を反映しています。

最初に知っておくべきこと：Liquid Glass

2025 年以降、Apple プラットフォームでは、画面を常に 2 つのレイヤーに分けています。

1. コンテンツレイヤー — アプリの実際のコンテンツです。画面の端から端まで広がり、あらゆる要素の下をスクロールし、不透明な背景と標準のマテリアルを使用します。
2. 機能レイヤー（Liquid Glass） — コントロールとナビゲーション（タブバー、ツールバー、サイドバー、ボタン）です。動的なガラス素材の上で、コンテンツの上に 浮かびます。独自の色はなく、下にあるものを屈折させ、背後のコンテンツに応じてライト／ダークに適応し、デフォルトではシンボルをモノクロに保ちます。

実践的なルール：バーは画面の端に貼り付いた全幅の帯ではなく、浮かぶ丸角またはカプセル状の島にします。コンテンツがその下をスクロールする様子を見えるようにします。スクロールエッジエフェクト（段階的なぼかし／フェード）で浮かぶコントロールとコンテンツを分けます。デフォルトでくっきりした細い線を使うことは避けます。ガラス上の色使いは控えめにします。目立つアクション（例：完了）の背景だけに色を付け、それ以外はすべてモノクロに保ちます。コンテンツレイヤーのカードをガラスで作らないでください。ガラスはインタラクティブなクローム専用です。

適切なリファレンスの選び方

成果物	参照先
アプリ UI — あらゆる画面、コンポーネント、フロー	references/hig-foundations.md ＋ references/hig-components.md
UX フロー、コピー、空／エラー／読み込み状態、オンボーディング、設定、検索	references/hig-patterns.md
マーケティング／ランディング／製品ページ	references/marketing-pages.md
HTML/CSS/JS または React+Tailwind の構築（トークン、ガラスのレシピ、モーションコード）	references/code-implementation.md（上記に加えて参照）
Figma 作業（フレーム、変数、テキストスタイル、エフェクト）	references/figma-workflow.md（上記に加えて参照）

複数の要素が混在する依頼（アプリのスクリーンショットを掲載したランディングページなど）では、ページにはマーケティングのルールを適用し、アプリとして描かれているものには HIG のルールを適用します。

基本理念（すべてに適用）

Apple が掲げる原則 — 目的、主体性、責任、親しみやすさ、柔軟性、シンプルさ、丁寧な作り、喜び — は、実践では次のように表れます。

• 画面／セクションごとに 1 つのアイデア。 各ビューでは、1 つの主役となる要素を使って 1 つの要点を伝えます。ごちゃついて感じたら、要素を小さくするのではなく、減らします。
• コンテンツを優先し、クロームは控えめに。 コントロールは最小限にして上に浮かべ、コンテンツを画面の端から端まで広げます。
• 階層はタイポグラフィで表現する — ボックスや枠線ではなく、サイズやウェイトに大きな差をつけます。本文は 17pt（iOS）／13pt（macOS）。見出しは本文より数段階大きくし、1 段階だけにしないでください。
• クロームはほぼモノクロに。 色合いはインタラクティブであることを示します。色の付いたものはタップできるように見えるため、静的な装飾には色を付けないでください。ビューごとに色を付ける要素は、最大でも 1 つか 2 つにします。
• 影を重ねるのではなく、マテリアルで奥行きを表現する。 ガラス、背景レベルの段階（システム → セカンダリ → ターシャリ）、不透明度 8〜30％の細い線を使います。影は本当に浮いているものだけに使い、柔らかく不透明度を低くします。
• 動きは物理法則に基づき、入力と連動させる。 すぐに収束するスプリングとスクロール連動の変形を使います。閉じるときの動きの方向は、表示時の方向に合わせます。常に「視差効果を減らす」設定を尊重します。
• 許容性。 簡単に取り消せるようにし、閉じ方を分かりやすく示し、取り消せない破壊的な操作に限って確認を求めます。

フォント戦略（フォントを選ぶ前にお読みください）

Apple の SF Pro／SF Compact／New York フォントは、Apple プラットフォーム向けのデザインおよび開発にのみライセンスされています。

• Apple デバイスで表示するプロトタイプ：システムスタック -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif を使用します。Mac／iPhone では本物の SF がレンダリングされます。
• クライアント向けの本番制作／Apple 以外での配布：Inter を推奨し（SF に似た字形にするには font-feature-settings: "cv05", "cv11" を使用）、その理由をクライアントに伝えてください。納品物に SF フォントファイルを埋め込まないでください。
• Figma：SF Pro を使用して問題ありません（デザイン用途は無料です）。代替フォントには Inter を使用します。
• SF は可変フォントで、光学サイズが動的に調整されます。サイズが大きくなるほどトラッキングを詰めて再現します。17px で約 -0.003em → 48px で -0.015em → 80px 以上で -0.022em です。

品質基準 — 納品前にセルフチェック

1. もう一つ要素を減らせますか？（たいてい減らせます。実行してください。）
2. バーやコントロールはスクロール端の効果とともにコンテンツ上に浮いていますか？それとも不透明な帯になっていますか？（帯状なら2025年以前のデザインです。）
3. インタラクティブではない要素に色が付いていませんか？複数のコントロールの背景に色が付いていませんか？
4. タップ領域は十分な余白を確保したうえで、44×44pt 以上（macOS では 28×28）ありますか？
5. ボタンは Apple らしいカプセル形／角丸長方形に見えますか？1px の枠線付き長方形（Material）になっていませんか？リップル効果（Android）はありませんか？
6. ダークサーフェスは、ベースが #000、段階的に高くなる面が #1c1c1e 系、テキストが #f5f5f7 系になっていますか？純白のテキストは使っていませんか？
7. すべてのジェスチャーに画面上の代替手段があり、すべての破壊的操作に「キャンセル」がありますか？
8. 何気なく見た人でも、これを Apple アプリまたは apple.com のスクリーンショットだと受け入れるでしょうか？

ユーザーのブランドが厳格な Apple のルールと相容れない場合（例：ホテルのゴールドのアクセントカラー）、構成と控えめな表現は保ち、色合いだけを差し替えて、その旨を伝えてください。