プレミアム・リキッドグラス（高級ガラス風UI）

プレミアム・リキッドグラス

目標：落ち着いていて、空間的で、高級感のあるインターフェース。ガラスはコンテンツの上に浮かぶコントロールのための素材です。どこにでも使うスタイルではありません。成功の指標：ユーザーが「これは清潔で階層的だと感じる」と言い、「誰かがすべてにブラーを追加した」とは決して言わないこと。

このスキルは、Android (Compose)、iOS (SwiftUI)、Flutter、Web (CSS / Tailwind) 全体で、素材、階層、奥行き、モーション、アクセシビリティを制御します。プロジェクト独自のブランドが、アイデンティティ、パレット、コピーを決定します。デフォルトのブランドトークンは assets/tokens.json にあります。

0. 安全性とスコープ

• ユーザーが選択したプロジェクト内でのみ作業してください。シークレット、キー、環境変数を読み取らないでください。ネットワークリクエストを行ったり、パッケージをインストールしたりしないでください。ライブラリが必要な場合は、名前を挙げてユーザーに判断を委ねてください。
• 既存のアプリケーションコードを変更する前に、変更案を提案してください。
• 架空のサンプルコンテンツのみを使用してください。
• Apple以外のプラットフォームでは、Appleのフォント（San Francisco）やSF Symbolsを使用しないでください。Inter、Roboto、またはプラットフォームに適したフォントと、Material Symbols/Lucideスタイルのアイコンを使用してください。iOS (SwiftUI) では、ネイティブのSF Symbolsとシステムフォントが標準です。
• (VERIFY) とマークされた事実は、APIバージョンによって古くなる可能性があります。常にプロジェクトの依存関係と照らし合わせて確認してください。

1. 五つの厳格なルール

1. コンテンツは決してガラスにしない。カード、リスト行、フォーム、ページ背景、メディアは、不透明またはソフトサーフェスのままにします。
2. ガラスはフローティングレイヤーのみ：ボトムナビゲーションピル、スクロールコンテンツ上のトップバー、フローティングアクションボタン、ボトムシートとメニュー、検索フィールド、トースト/スナックバー、小さなフローティングチップ。
3. ガラスの上にガラスを重ねない。ガラスサーフェス内では、アイテムをソリッドフィル、微妙な区切り線、または不透明度の違いで区切ってください。
4. 可読性が外観よりも優先される。ボディテキストは、最悪の背景に対して4.5:1のコントラスト比（大きなテキストとアイコンは3:1）が必要です。scripts/contrast_check.py を実行してください。
5. すべてのガラスサーフェスにはソリッドフォールバックがある（古いOSバージョン、透明度低減アクセシビリティ設定、バッテリーセーバー、低GPU能力、または backdrop-filter を欠くブラウザ）。

任意の要素にガラスを適用する前に、ゲート質問をしてください：「この素材はどのような機能的な役割を伝えるのか？」 有効な回答：スクロールコンテンツの上に浮かぶ；一時的または文脈的である；コンテンツがその下を移動している間も到達可能でなければならない。回答なし = ガラス禁止。

2. 普遍的なワークフロー

1. 調査：ターゲットプラットフォーム（Android Compose、iOS SwiftUI、Flutter、Web）、OSバージョン制限、既存のテーマトークン、ナビゲーション構造、アクセシビリティ要件、パフォーマンス目標。
2. レイヤーマップ（コードの前）：要素のテーブル -> レイヤー（コンテンツ/構造/フローティング） -> ガラスの有無 -> 階層 -> 理由。計画とともに提示してください。
3. トークン：assets/tokens.json から開始；ブランドカラーを調整；両方のモードのすべての階層で python scripts/contrast_check.py --tokens assets/tokens.json を再実行。
4. プラットフォームテンプレートで構築：
   • Android：assets/GlassTheme.kt & references/compose-implementation.md
   • iOS (SwiftUI)：assets/GlassView.swift & references/swiftui-implementation.md
   • Flutter：assets/glass_theme.dart & references/flutter-implementation.md
   • Web (CSS/Tailwind)：assets/glass.css、assets/tailwind-glass.config.js & references/web-implementation.md
5. 検証：references/review-checklist.md と scripts/audit_compose.py（Android）で確認。証拠（コントラスト比、画面あたりのガラスレイヤー数、フォールバックレンダリング）を報告。

3. マテリアル階層（初期値）

階層	用途	ブラー	塗りつぶし（ダーク）	塗りつぶし（ライト）
none	コンテンツ、カード、リスト、背景	-	不透明サーフェス	不透明サーフェス
thin	アイコンのみ、または大きなラベルのコントロール、チップ	16 dp/px	インク @ 0.55	白 @ 0.55
regular	ナビピル、トップバー、検索フィールド、FAB、トースト	24 dp/px	インク @ 0.66	白 @ 0.70
thick	シート、メニュー、ダイアログ、テキストを多用したオーバーレイ	32 dp/px	インク @ 0.78	白 @ 0.82
scrim	モーダルシートの背後を暗くする	0-8 dp/px	黒 @ 0.20-0.45	黒 @ 0.20-0.45

詳細と検証済みのコントラスト数値：references/tokens.md。塗りつぶしは純白ではなく、表面インク色で着色されているため、ダークモードのテキストは明るい背景でも耐えられます。

4. プラットフォームの現実確認

Android (Jetpack Compose)

• Modifier.blur() / RenderEffect は、背後にあるものではなく、要素自身のコンテンツをブラーします。本当の背景ブラーにはライブラリ（Haze はApache-2.0でComposeをサポート）またはダイアログ用のウィンドウブラー（API 31+）が必要です。
• ブラー効果には Android 12 (API 31) 以降が必要です（VERIFY）。API 31未満では、常にソリッドフォールバックサーフェスをレンダリングしてください。
• 予算：画面あたり最大2～3の同時ブラーレイヤー。リストアイテムには絶対にブラーを使用しないでください。
• 完全な詳細：references/compose-implementation.md。

iOS (SwiftUI)

• ネイティブのSwiftUIマテリアルを使用：.ultraThinMaterial（薄い階層）、.thinMaterial / .regularMaterial（標準階層）、.thickMaterial（厚い階層）。
• iOSの連続コーナーを RoundedRectangle(cornerRadius: ..., style: .continuous) でサポート。
• ボトムシートには .presentationBackground(.thinMaterial) を使用（iOS 16.4+）。
• 完全な詳細：references/swiftui-implementation.md。

Flutter

• BackdropFilter を ImageFilter.blur(sigmaX: tier.blur, sigmaY: tier.blur) と共に ClipRRect でラップして使用。
• 常に RepaintBoundary でラップして、フレームごとに背景ブラーを再描画しないようにします。
• ListView.builder や GridView.builder のアイテム内では BackdropFilter を使用しないでください。
• 完全な詳細：references/flutter-implementation.md。

Web (CSS / Tailwind CSS)

• クロスブラウザサポートのために、常に -webkit-backdrop-filter: blur(...) と backdrop-filter: blur(...) の両方を含めてください（Safariでは -webkit- が必要）。
• 古いブラウザ用に、常に @supports not (backdrop-filter: blur(1px)) フォールバックを指定してください。
• 常に @media (prefers-reduced-transparency: reduce) フォールバックを実装して、ソリッド背景に切り替えてください。
• 完全な詳細：references/web-implementation.md。

5. アクセシビリティモード（すべて実装）

• 透明度低減：システムのアクセシビリティフラグ（Webでは prefers-reduced-transparency、SwiftUIでは accessibilityReduceTransparency、Flutterでは accessibleNavigation、Androidではアプリ内トグル）を確認。ガラスを、可視の1 dp/pxの境界線を持つソリッドサーフェストークンに置き換えます。
• 大きなフォント（200%）とスクリーンリーダー：色のみで伝えられる情報がないこと；アイコンのみのコントロールにラベルを付けること；論理的なフォーカス順序。
• モーション低減：スプリングの動きを速いフェード（150 ms）に置き換え；状態フィードバックを保持。
• タッチターゲット：最小 48x48 dp / 44x44 pt。ジェスチャー（スワイプ）には、常にボタンまたはアクセス可能なメニュー代替手段を提供します。

6. コンポーネントとジオメトリ

ナビゲーションピル、トップバー、FAB、シート、検索フィールド、チップ、カード、トリアージスタックの仕様：references/components.md。 一貫したコーナー半径を使用：

• 小さなチップ：999（完全なピル）
• 小さなコントロール/ボタン：16 dp/pt
• コンテンツカード（不透明）：24 dp/pt
• フローティングナビゲーションピル：28 dp/pt
• モーダルシート：32 dp/pt
• ネストされた要素の半径 = 外側の半径 - パディング。

7. モーションとハプティクス

スプリングアニメーション（250-350 ms）、短いフェード（150 ms）、最小限またはゼロのバウンスオーバーシュート。しきい値トリガー（スワイプコミット、ピル選択）で微妙なハプティックタック。押下状態：スケール0.97とソフトハイライト。システムのモーション低減設定を尊重。

8. 画像プロンプトモード（参考画面）

UIモックアップのプロンプトを生成する場合は、references/image-prompts.md に従ってください：プロンプトごとに1画面、自己完結型のスタイルブロック、画面上の正確なテキスト、ガラスはフローティングレイヤーのみ、「カードは不透明」、プラットフォームに正確なステータスバー。出力をレイアウトとムードの参考として使用し、その後デザイントークンを使ってコードで実装します。

9. レビューモード

デザインやコードベースのレビューを求められた場合：

1. 各UI要素をレイヤー（コンテンツ vs. フローティング）に分類します。
2. 画面ごとのガラスレイヤー数を数えます（最大2～3の予算を強制）。
3. アンチパターン（カード上のガラス、ガラスにネストされたガラス、フォールバックの欠如）をスキャンします。
4. コントラスト検証を実行します（python scripts/contrast_check.py --tokens assets/tokens.json）。
5. Androidプロジェクトの場合は、python scripts/audit_compose.py <src> を実行します。
6. references/review-checklist.md からの是正ガイダンスとともに、所見を深刻度別にリストします。

10. リファレンスとファイル

• references/principles.md - コアな空間原則とAppleデザインのインスピレーション
• references/tokens.md - トークンテーブル、カラー値、検証済みコントラスト数値
• references/compose-implementation.md - Android Composeアーキテクチャとコードスニペット
• references/swiftui-implementation.md - iOS SwiftUIアーキテクチャとコードスニペット
• references/flutter-implementation.md - Flutterアーキテクチャとコードスニペット
• references/web-implementation.md - Web CSS & Tailwind CSSアーキテクチャとコードスニペット
• references/components.md - コンポーネントのジオメトリ、レイアウト、状態
• references/image-prompts.md - AIモックアップ生成のためのプロンプトテンプレート
• references/review-checklist.md - 品質ゲートとアンチパターン
• scripts/contrast_check.py - WCAGコントラスト検証スクリプト
• scripts/audit_compose.py - Compose静的スキャナスクリプト
• assets/tokens.json - 完全なデザイントークンスキーマ
• assets/GlassTheme.kt - Jetpack Composeテンプレート
• assets/GlassView.swift - SwiftUIテンプレート
• assets/glass_theme.dart - Flutterテンプレート
• assets/glass.css & assets/tailwind-glass.config.js - Web CSS & Tailwindテンプレート