apple-design-materials

Apple Design — マテリアルとアイコノグラフィ

Apple の表面特性: 半透明のガラスマテリアル、そしてアイコン/シンボルシステム。

使用すべき場面

• すりガラス/ガラスパネル、ナビ、シート、または Liquid Glass の見た目を構築するとき。
• アプリアイコンをデザインするとき (スクワークルは単なる角丸長方形ではありません)。
• SF Symbols を使用または模倣するとき。

基本ルール

• ガラスはレイヤーであり、塗料ではありません。 背後にあるものをサンプリング + ぼかし、その後、鮮やかなラベルで色味を加えます。Web での近似: backdrop-filter: blur() saturate() + 半透明の塗り + 上端の明るいハイライト。CSS では Apple のリアルタイムなレンズ効果/屈折は実現できません — 近似にとどめ、実際にできるふりをしないでください。
• ガラスの上にガラスを重ねない、そしてコントラストの低いテキストを情報量の多い半透明領域に置かないでください。常に prefers-reduced-transparency 向けの不透明なフォールバックを用意してください。
• スクワークルは G2 連続曲率形状 (コミュニティによってリバースエンジニアリングされた Bézier) であり、border-radius ではありません。clip-path/SVG、または corner-shape: squircle (Chrome 139+、Safari/Firefox は未対応) を使用してください。
• SF Symbols はフォントのウェイト + オプティカルサイズに一致させます。レンダリングモード (モノクロ / 階層 / パレット / マルチカラー) を意図的に 1 つ選んでください。すべてをマルチカラーにしないでください。

リファレンス

ファイル	用途
references/materials-liquid-glass.md	システムマテリアル名、Liquid Glass の挙動、CSS ガラスレシピ、SwiftUI .glassEffect()、忠実度の限界
references/iconography-sf-symbols.md	スクワークルの数式 + CSS/SVG、アイコングリッド、SF Symbols のウェイト/スケール/モード/エフェクト

よくある間違い

• すべてを過剰にぼかす。ガラスの上にガラス。reduce-transparency を無視する。
• 連続した角の代わりに単純な border-radius。グリッドから外れたアイコンアート。
• シンボルのウェイトが隣接するテキストと不一致。マルチカラーの過剰使用。

関連: マテリアルの色/コントラスト → apple-design-foundations · reduce-transparency 下のガラス → apple-design-tactics。