Apple Liquid Glass — すべてのプラットフォームに対応するデザイン言語

スコープ: AppleのLiquid Glassの外観を備えるべきあらゆるインターフェース（ウェブページ、ウェブアプリ、ElectronまたはTauriのデスクトップアプリ、AndroidまたはFlutterのアプリ、ネイティブAppleアプリ）。以下のデザインルールはどこでも同じですが、背景、ブラー、ベンドの実装方法だけが異なります。まずルートを選択してください:

ビルド対象	ルート
Web, Electron, Tauri, WebView	`assets/tokens.css` + `assets/refraction.js` (このファイルとリファレンス)
iOS, iPadOS, macOS 26+ ネイティブ	システムマテリアル: SwiftUI `glassEffect`, UIKit `UIGlassEffect` — 決してフェイクを使用しないこと
Android (Compose)	Haze `haze-glass` レシピ
Flutter	`BackdropFilter` + `ImageFilter.shader`
Windows / Linux ネイティブ	アプリ内で描画; ウィンドウマテリアル (Mica, Acrylic) はLiquid Glassではない

プラットフォーム別のコード、バージョン制限、フォールバック: references/platforms.md。アプリのフロー、ナビゲーション、画面仕様については mobile-ux-designer を参照してください。

このスキルは、Appleのデザイン言語をゼロから導出し直す必要をなくすために存在します。ここにあるものはすべて、Apple自身のヒューマンインターフェースガイドラインとその図から読み取ったものであり、記憶やAppleに関するブログ記事から得たものではありません。Appleが実際に何かを明記していない場合、このスキルはルールを invent するのではなく、そのように明記します。その正直さが重要です。なぜなら、ほとんどの「Apple風」の作品は、自信を持って invent されたルールを適用することで失敗するからです。

他のすべてが従う単一のアイデア

Appleのインターフェースは2つのレイヤーから成り、言語全体はそれらを区別することにあります:

コンテンツレイヤー — アプリが実際に扱うもの。不透明。ソリッドな表面、リアルなシャドウ、ガラスはありません。テキストはここに存在し、動く背景の上に決して配置してはいけません。
機能レイヤー — ツールバー、サイドバー、タブバー、ポップオーバー、メニュー、フローティングコントロール。ここにLiquid Glassが存在します。コンテンツの上に浮かび、それを屈折させ、決して競合しません。

Appleはこれを直接述べています: 「コンテンツレイヤーにLiquid Glassを使用しないでください…コンテンツレイヤーに含めると、不必要な複雑さと混乱を招く視覚的階層が生じる可能性があります。」

もし一つだけ覚えておくべきこと: クロームにガラス、カードには決して使用しない。 「Apple風」の作品で最もよく見られる失敗は、すべてを曇らせてしまい、そのマテリアルが存在するために作られた階層を破壊することです。

出力

ユーザーが求めたものを提供します — 固定ページ、診断、コンポーネントなど — 要求された長さと形式で。要求されていないデザイン哲学の解説で修正を水増しせず、簡潔さを保つために実際の要件をスキップしないでください。コントラスト、タップターゲットサイズ、および以下のフォールバックを、特に要求されていない場合でも検証してください。見た目は正しくてもそれらを満たしていない結果は、まさにこのスキルが防止しようとしている「フェイクApple」の結果だからです。

2026年の改良も重要です。AppleのmacOS 27 Golden Gateページ（apple.com/os/macos、2026-09-27確認）: 「Liquid Glassのアップデートにより、より均一な屈折と改善されたコントラストで、例外的な読みやすさが確保されています。」 また、均一なツールバー、エッジツーエッジのサイドバー、更新されたウィンドウ形状もリストされています。つまり、より濃いティント、目に見える屈折リム、フローティングアイランドではなく1つの連続したバーです。最初のリリースの薄くかろうじて見えるガラスを構築する場合、それはAppleがすでに修正したバージョンを構築していることになります。

トークンから始める（ウェブ）

assets/tokens.css は機能するトークンレイヤーです — ライトとダークのパレット、屈折リム付きのガラスプリミティブ、スクロールエッジエフェクト、透明度低下、モーション低減、backdrop-filter 未サポートのためのフォールバック。値を手動で設定する代わりにこれから始めてください。ただし、実際のブリーフに対して検証し、読まずに貼り付けないでください。コンテキストで以下のコントラストとタップターゲットのルールを満たしているか確認し、値を適応させてください（特に色 — Appleはリリースごとに変更される可能性があると再述しています）。ファイルを絶対的な真実として引用しないでください。

その中で、使用するだけでなく理解する価値のある2つのこと:

ガラスプリミティブは、ティント付き半透明背景 + backdrop-filter: saturate(180%) blur(28px) + インセットトップハイライトです。ハイライトは曲がった光として読み取られます。これがないと、表面は単なる透明に見え、それは模倣によるグラスモーフィズムの特徴です。Apple自身のマテリアル図は、エッジをなぞる明確な明るいリムを示しています。

リム (.glass::before) は1pxのグラデーションリングで、左上が最も明るく、側面に沿って薄く、右下で再び明るくなります。均一な白い境界線はステッカーとして読まれますが、不均一なリムは光をキャッチする厚いベベルとして読まれます。

周囲の地面。 ガラスは背後に何かがないと屈折するものがなく、フラットなグレーとしてレンダリングされます。ページ背景の微妙なマルチストップグラデーションは、マテリアルに何かを与えます。Appleは壁紙や写真からこれを無料で得ていますが、ウェブ上では自分で提供する必要があります。

屈折: ブラーでは偽造できない部分

Apple: 「この半透明マテリアルは、その周囲を反射し屈折させます。」 Apple自身の画像を拡大すると、ガラスコントロールの端に達するテキストや形状は、その輪郭に沿って曲がり伸び、中央は透明なままです。これがLiquid Glassを2020年代のグラスモーフィズムから分離するものであり、ユーザーが欠けているときに最初に見逃すものです。デフォルトでガラスコントロールに組み込んでください。要求されるのを待たないでください。

メカニズム（全プラットフォーム）: リムバンド内で、コンテンツをより内側から表示し、輪郭で最も強く、実際の形状（カプセル端、角丸）に従います。
ウェブ: ガラス要素に data-refract を追加し、assets/refraction.js をロードします。Chromiumエンジン（Chrome、Edge、Android WebView、Electron、Windows上のTauri）では、ライブ背景を曲げます。SafariとFirefoxは backdrop-filter 内で url() フィルターを実行できないため、既知の領域上のガラスの場合は data-refract-source="#id" を追加します。スクリプトはその領域のコピーをすべてのブラウザで曲げます。どちらもないガラスはプレーンブラーを保持します。ヒーローやデモのガラスには常にソースを指定してください。そうしないと、ほとんどの訪問者（Safari、Firefox）はベンドを見ることができません。
クリアガラスは、テキストが目に見えて曲がる場所です（ブラーが少ない）。通常のガラスでは、ベンドはぼやけた画像の形状と色のエッジに現れます。
曲げるガラスはより明るいティント（--glass-refract）を取得し、ベンドが表示されるようにします。言葉を伝えるガラス（メニュー、ポップオーバー、シート、サイドバー）は .glass-text を追加して完全なティントを保持します。そうしないと、明るいコンテンツ上でラベルのコントラストが低下する可能性があります。
透明度低下設定時はオフ、モーション低減設定時はアニメーションしない。
確認方法: コントロールをテキスト行の上に置き、スクリーンショットを撮ります。リムの文字が曲がり伸び、中央は読みやすいままです。

値、チューニングテーブル、テスト方法: references/materials.md（「屈折とリム」）。Android、Flutter、ネイティブルート: references/platforms.md。

絶対条件

これらは、破られたときに結果がAppleらしくなくなるルールです。

ガラスは機能レイヤーのみ。 コンテンツカードは不透明な表面とシャドウを取得します。
色は節約する。 Apple: 「Liquid Glassマテリアルには色を控えめに適用してください…ステータスインジケーターやプライマリアクションなど、実際に強調から利益を得る要素のために予約してください。」彼らの図は、3つのティント付きボタンが「不正確」とマークされたツールバーと、プライマリアクションのみがティントされた同じツールバーが「正確」とマークされたものを示しています。1つのバーにつき1つの色付きアイテム。
強調は背景に、グリフにはしない。 「プライマリアクションを強調するには、シンボルやテキストではなく背景に色を適用してください。」 例外は選択されたタブです。そこではAppleはアイコンとラベルに色を付け、バーはニュートラルのままにします。
ヘアライン、境界線ではない。 区切り線は0.5px、約12%の不透明度で、リストでは先行アイコンより内側にインデントされます。1pxのソリッドグレー境界線はウェブの慣用句であり、Appleのものではありません。
ライトフォントウェイトは禁止。 Apple: 「Regular、Medium、Semibold、またはBoldのフォントウェイトを推奨し、Ultralight、Thin、Lightは避けてください。」
文頭大文字、大文字＋トラッキングは禁止。 広い文字間隔の大文字マイクロラベルは、ダッシュボード/編集の慣用句です。Appleのセクションヘッダーは文頭大文字で、ウェイトと色に依存します。
階層はサイズ、ウェイト、色から — ルールとボックスからではない。 見出しに下線はなく、セクションは囲まれません。Apple自身のMailの図は、これら3つの変数だけで4つのレベルを構築しています。
アイコンはグループ内でオールオアナッシング。 Appleのメニュールール: 「グループ内のすべての項目にアイコンがあるか、まったくないかのどちらか。」 半分アイコンがあるリストは未完成に見えます。
すべてのカスタムコントロールにはプレス状態が必要。 Appleはこれを明示的に指摘しています。これがないと、コントロールは「応答がないように感じられる」可能性があります。
コンテンツはクロームの下に延長する。 コンテンツがバーの下を通過するときに溶解するようにスクロールエッジエフェクトを使用し、サイドバーの下に背景を延長します（以下参照）。サイドバーの端でコンテンツが突然停止するのは、Apple自身の正しい/正しくない図のペアが扱っていることです。
すべての backdrop-filter 使用には @supports not (...) 不透明フォールバックが必要で、透明度低下メディアクエリとは別に — 一方はブラウザサポートの欠如を処理し、もう一方はユーザー設定を処理します。これをスキップすることは、一般的で見逃しやすいバグです。バーがブラーなしで暗黙的に透明すぎてレンダリングされます。
ガラスは曲がり、リムを持つ。 均一な1px白い境界線と屈折のないガラスコントロールは、グラスモーフィズムであり、Liquid Glassではありません。プラットフォームが許可する場所ではリムグラデーションと屈折を使用し、許可しない場所ではクリーンブラーフォールバックを使用します。
ヒットターゲットはiOSで少なくとも44×44pt（macOSはより密度が高いですが、それでも快適なクリックターゲットが必要です）。破壊的なアクション（削除、アカウント削除）は破壊的/赤のロールを取得し、決してニュートラルなものではありません。

タイポグラフィ

Appleのスケールは装飾的ではありません — それは固定された梯子であり、それに従うことがタイポグラフィをネイティブに感じさせるほとんどの要素です。iOSデフォルト（Large）スタイル:

スタイル	ウェイト	サイズ	行送り
Large Title	Regular	34	41
Title 1	Regular	28	34
Title 2	Regular	22	28
Title 3	Regular	20	25
Headline	Semibold	17	22
Body	Regular	17	22
Callout	Regular	16	21
Subhead	Regular	15	20
Footnote	Regular	13	18
Caption 1	Regular	12	16
Caption 2	Regular	11	13

macOSはよりタイトな梯子（Body 13/16、Large Title 26/32）を実行し、そのHeadlineはSemiboldではなくBoldです。デスクトップファーストのウェブレイアウトは通常、この2つの中間を望みます。見出しと読書テキストにはiOSサイズ、サイドバーとメタデータにはmacOS密度です。

最小値は現実的です: iOS 11pt、macOS 10pt。これ以下ではAppleはテキストを判読不能と見なし、ウェブピクセルはポイントよりも小さいため、約11pxをフロアとして扱ってください。

フォントスタック: -apple-system, BlinkMacSystemFont, 'SF Pro Text', … はAppleハードウェアで実際のSFを提供します。他の場所ではフォールバックが必要です — Interは最も近い広く利用可能な代替品です。CDNからSFをリンクしないでください。ライセンスが許可していません。

Appleのトラッキングはサイズごとに光学的に補正されています。12pt未満でルーズ、正確に12ptでゼロ、19〜20pt付近で最もタイト（約−0.45pt）、その後約24ptから正（29〜34ptで+0.40pt）、ディスプレイサイズでゼロに減衰します。システムフォントはAppleハードウェア上でこれを自動的に適用します。トークンファイルのウェブ値（-0.022em 見出し、-0.012em 本文、0 キャプション）は、Interなどのフォールバックフォントがルーズに見えるのを防ぐウェブ慣例です — Appleのテーブルの変換ではないため、Appleのものとして引用しないでください。

完全なテーブル、トラッキング曲線、SF Symbolsのウェイト/スケールペアリング: references/typography.md。

色

Appleは正確な値を提供しますが、「システムカラーの値をハードコーディングしないでください…実際の色の値はリリースごとに変動する可能性があります。」 とも述べています。そのため、それらを絶対的なものではなく、アンカーとして使用してください。

パレットよりも意味論的なセットの方が便利です。テキスト用に label / secondaryLabel / tertiaryLabel / quaternaryLabel、ヘアライン用に separator、そして2つの背景ファミリー（システムとグループ化）があり、それぞれプライマリ/セカンダリ/ターシャリがあります。コンテンツがカードに配置されている場合に使用するのはグループ化です。ページはグループ化背景（薄いグレー）を取り、カードは白を取ります。ウェブデフォルト（グレーページ、白カード）の反転は、AppleのレイアウトがAppleらしく読まれる大きな理由の一部です。

ダークモードは反転ではありません。Appleはベースとエレベーテッド表面を使用します。最も後退する最背面レイヤーにはほぼ黒、隆起していると読まれるべきものには明確に明るいチャコール。すべてを純粋な黒で塗るのは間違いであり、Apple自身の図のペアがそれを示しています。

コントラストの最小値はAppleによって述べられています: 17ptまでは4.5:1、18pt以上では3:1、任意のサイズの太字で3:1。

すべてのシステムカラーの正確なRGB値（ライト、ダーク、両方のコントラスト増加バリアント）、およびiOSとmacOSの完全な意味論リスト: references/color.md。

マテリアル

2つのバリアントがあり、間違った方を選ぶと目に見えます:

レギュラー — 背後にあるものをブラーし、輝度を調整します。ほとんどすべてがこれを使用します。Appleの図では不透明に近く、背景は画像ではなく柔らかい色として読まれます。
クリア — 非常に半透明で、メディアが目立つ必要がある写真やビデオの上のコントロール用。背後が明るい場合、Appleはラベルが生き残るように35%不透明度の暗い減光レイヤーを下に指定します。

マテリアルは適応もします。明るいコンテンツではガラスとそのシンボルは暗くなり、暗いコンテンツでは明るくなります。ウェブ上では、ガラストークンはテーマごとに真に異なる値を必要とし、異なる不透明度の1つの値ではありません。

レシピ、4つの標準マテリアル、バイブランシーレベル: references/materials.md。

コンポーネント

コンポーネントの形状は多くのシグナルを伝えます。短いバージョン:

ツールバー — 1つの均一なバー、モノクロ、アクションは円形またはカプセルチップとして、関連するアクションは共有カプセルにグループ化。タイトル（およびオプションのサブタイトル）を含めることができます。
サイドバー — エッジツーエッジ、ガラス、アクセントカラーでティントされたSF Symbolアイコン、丸い選択範囲

…

[翻訳のために切り詰め]

liquid-glass：どのスタックでも Apple Liquid Glass