Liquid Glass Web は何をしますか？
Liquid Glassのマテリアルモデルをブラウザ向けに適応したWebデザインシステムです。コンテンツは不透明なレイヤーに配置され、その上にナビゲーションやコントロールからなる薄く半透明な機能レイヤーが浮かびます。Appleの「Adopting Liquid Glass」に記載されている公開ガイダンスを独立して適応したものです。Appleのフォント、シンボル、アセットは含まれていません。
このスキルに含まれるもの
| パス | 用途 |
|---|---|
assets/tokens.json | 信頼できる唯一の情報源：色（テーマ light、dark、contrast）、タイポグラフィ、スペーシング、半径、サイズ、マテリアル、シャドウ。 |
assets/tokens.css | コンパイル済みCSSカスタムプロパティとタイプクラス。トークンを変更した後は scripts/build_tokens_css.py で再生成。 |
assets/liquid-glass.css | コンポーネントスタイル（lg-* クラス）。フレームワーク非依存。 |
assets/liquid-glass.react.js | オプションのReact 18バンドル。window.LG を公開（クラシックスクリプト；window.React と window.ReactDOM が必要）。 |
assets/liquid-glass.d.ts | コンポーネントのプロパティ、ドキュメントとして。 |
assets/example.html | プレーンHTMLの完全な画面。その構造をコピーしてください。 |
references/brand-book.md | 原則、トーン、色、マテリアル、タイポグラフィ、レイアウト、モーション、アイコノグラフィ、アクセシビリティ。デザイン前に必ず読んでください。 |
references/html-api.md | Reactを使わない場合のすべてのコンポーネントのマークアップ。 |
references/components/<Name>.md | コンポーネントごとのガイドライン：利用者が提供するもの、してはいけないこと。 |
scripts/contrast_check.py | すべてのテーマにおけるすべてのトークンペアのWCAGチェック（最悪ケースのガラスを含む）。失敗時にexit 1。 |
scripts/build_tokens_css.py | tokens.json を tokens.css にコンパイル。 |
ワークフロー
A. UIの構築または再デザイン
references/brand-book.mdを読み、次にreferences/components/から必要なコンポーネントファイルを読んでください。assets/tokens.cssとassets/liquid-glass.cssをプロジェクトにコピーし、その順序で読み込んでください。Reactプロジェクトでは、バンドルまたはreferences/html-api.mdのマークアップの移植のどちらでも動作します。他のフレームワークでは、マークアップを移植してください。- 2つのレイヤーを配置します：
- コンテンツ:
canvasとsurface上に不透明に配置。読み取り対象のすべてのものがここに配置されます。 - ガラス: ナビゲーションとコントロールのみ。スクロールするコンテンツの上に浮かびます（ツールバー、タブバー、グループ、メニュー、ミディアムシート）。
- コンテンツ:
- トークンを名前で使用します（
var(--accent)）。トークンでカバーされている色、半径、スペーシングの値をハードコードしないでください。 - 完了前に以下のチェックリストを実行してください。
B. ブランド変更（新しいアクセントカラーまたはニュートラルカラー）
assets/tokens.jsonの値のみを変更してください。トークン名は変更しないでください。CSSがそれらに依存しているためです。- 変更された各アクセントカラーには、すべてのテーマでその仲間が必要です：
accent、on-accent、accent-text、accent-glass、focus-ring。ダークテーマのアクセントカラーが明るい場合、on-accentは暗くなければなりません。 python3 scripts/contrast_check.py assets/tokens.jsonを実行してください。RESULT: PASSと出力されるまで値を調整してください。しきい値を弱めないでください。python3 scripts/build_tokens_css.py assets/tokens.json > assets/tokens.cssを実行してください。- 特に指示がない限り、ガラストークン（
glass-fill、glass-edge、glass-lift、glass-blur）は保持してください。ガラスレイヤーは無色のままです。
非妥協ルール
- ガラスは機能レイヤーのみに使用します。リスト行、コンテンツカード、ページセクションには絶対に使用せず、ガラスの上にガラスを重ねることも禁止です。
- 通常のガラス上のテキストには、
ink、ink-glass-muted、accent-glass、critical-glassのみを使用します。ガラス上でink-secondary、accent-text、criticalは絶対に使用しないでください。これらは暗いまたは明るいコンテンツの上で失敗します。 - クリアガラス（
lg-glass--clear）は写真、ビデオ、またはマップの上でのみ使用し、その下にlg-dimを配置します。その上にはシンボルと19px以上の太字ラベルのみを配置できます。 - ビューごとに1つの
prominentボタンです。すべてのコントロールはカプセル形状（radius-full）です。入れ子になった半径は同心円状になります：内側 = 外側 − インセット。 - ヒットエリアは最低でも
target-min（44px）です。すべてのアイコンのみのコントロールにはaria-labelが必要です。 - ステータスは常にグリフと単語をペアにします。色だけでは決して意味を伝えません。
prefers-reduced-transparency、prefers-contrast、prefers-reduced-motionを尊重してください。CSSがそれらを処理します。上書きしないでください。- AppleのSF Symbols、Appleフォント、またはロゴは使用しないでください。タイプスタックはデバイスのシステムフォントを使用します。Reactバンドルのアイコンセットはオリジナルのプレースホルダーです。
納品前のチェックリスト
- バーの背後にカスタム背景がないこと。コンテンツはバーの下をスクロールし、
lg-edgeスクロールエッジ効果がバーがコンテンツと重なる部分で機能すること。 - ガラスの数が少ないこと（バー、グループ、メニュー、シート）。それ以外はガラスではないこと。
- 画面を
data-theme="light"、"dark"、"contrast"で確認したこと。 - トークンを変更した場合：
contrast_check.pyがPASSと表示し、tokens.cssが再生成されていること。 - キーボード：すべてのコントロールにフォーカスが当たり、
focus-ringのアウトラインが表示されること。 - コピー：アクションは文の先頭だけ大文字、リストセクションヘッダーのみ単語の先頭を大文字（Title Case）、動詞を先頭に、絵文字は使用しないこと。