このスキルは、ユーザーが明示的に選択した場合、または確定したプロジェクト設定で指定された場合にのみ使用してください。説明のない新しい UI リクエストの場合は、ユーザーの好みをここで決定する代わりに、スタイルセレクタなどを使用してください。既存のブランド、アクセシビリティ、およびユーザーのオーバーライドは、以下のすべての例よりも優先されます。以下のスタイルガイドは、スタイル選択前に UI コーディングを開始する許可ではありません。
スタイルパック: ガラスモーフィズム
ID: glassmorphism
シグネチャ: 視覚的に曇った半透明のサーフェスが、差別化された明るい/カラーのレイヤーの上に浮かび、明確なコンテンツと機能的奥行きを備えています。
これはオプトインスタイルであり、エンジンのデフォルトではありません。ユーザーが選択した場合、または確立されたプロジェクトデザインシステムに基づいてのみ有効にしてください。プロダクトの構造、ブランドの方向性、アクセシビリティ、既存のインタラクションを尊重してください。青いボタンが付いた一般的なダークページは、ガラスモーフィズムとは見なされません。
適している用途 / トレードオフ
- 適している用途: 表現力豊かなポートフォリオ、プロダクトランディングページ、ナビゲーションオーバーレイ、メディアインターフェース、クリエイティブダッシュボード、限定的な UI デモ。
- 注意して使用する用途: 高密度のデータテーブル、長文の読み物、アクセシビリティが重要なフォーム、テキストの背後にある予測不能な写真。高密度のコンテンツは、適切に不透明または強く着色されたサーフェスに配置してください。
- 参考方向: 柔らかな青い大気光と穏やかな丸みを帯びたジオメトリを持つ明るく乳白色の曇りガラスパネル、または半透明のスレートパネル、落ち着いたバイオレット/シアンの照明、読みやすいコントロールを備えたダークなスモークガラスシステム。どちらも有効です。どちらも固定されたブランドパレットを強制するものではありません。
ガラス素材忠実度ゲート — 必須
ガラスモーフィズムのページが完成したと呼ぶ前に、最初のビューポートがガラス構成として視覚的に読み取れる必要があります。 ユーザーがこのスタイルを選択した場合、CSS 変数が glass という名前であっても、大きなプレーンな背景にタイポグラフィと従来のボタンだけで構成されるのは 不合格 です。
成功した顕著なガラスコンポーネントは、以下のすべてを示す必要があります:
- 背景の奥行き: サーフェスの背後に意味のある差別化された背景（柔らかな光のフィールド、制御されたグラデーション、シェイプ、プロジェクト用に提供された写真、または既存のアプリコンテンツ）。ガラスは視覚的にフィルターする何かを必要とします。目的のあるグラデーションとアンビエントカラーシェイプは、ガラスモーフィズム用のテイストエンジンのアンチスロップにより明示的に許可されています。これらはガラスパネルを通過する可視光を確立する場合に限ります。それ自体がスロップではありません。
- 半透明性: パネルは、背景の彩度/輝度の一部がその外観に影響を与えることを許可します。ガラスとして販売されている完全に不透明なダークカードは避けてください。
- 曇り効果:
backdrop-filter: blur(...)（および必要に応じて-webkit-backdrop-filter）が、パネル内の背景の詳細を視覚的にぼかし、近くの露出した背景ははっきりと見えるままにします。ぼかした背景画像だけでは、曇りガラスにはなりません。 - 読み取り可能なエッジと奥行き: 柔らかな明るいヘアライン/ハイライト、わずかな内部の光沢、適切な場所での丸みを帯びたシルエット、控えめな影または分離。ガラスには、平らなグレーのスラブではなく、知覚可能な境界が必要です。
- コンテンツの明瞭さ: テキスト、フォーカスインジケーター、コントロールの状態、アクションは、実際の合成背景全体で、またフォールバック効果が無効になっている場合でも読み取り可能である必要があります。
最初のビューポートテスト: デスクトップのスクリーンショットで、ページタイトルを読むことなく、顕著なパネル、その背後にある明確な背景、その境界内側のぼかし/着色された外観、およびエッジのハイライトを特定します。不可能な場合は、さらにコンテンツを追加する前に素材を修正してください。
カード数のルールではありません: 顕著なヒーローパネルまたはいくつかのコンポーネントデモサーフェスで十分です。すべてのセクションを同一の透明カードで埋め尽くさないでください。コンポーネントショーケースでは、スイッチ、入力、ダイアログ、トースト（ラベル付きデモとして）、ナビゲーションなど、正直で機能的な例を使用して素材とその状態を示します。実際の製品ステータスやソーシャルプルーフをでっち上げないでください。
明示的な背景グラデーションの例外 — ガラスは発光が許可されます
ガラスモーフィズム固有のオーバーライド: 一般的な装飾グラデーションに対する普遍的なアンチスロップ警告は、グラデーション、メッシュ状のカラーフィールド、ぼかしたカラーシェイプ、大気照明、または一貫性のある背景画像の禁止として解釈してはなりません。これらは、半透明性、曇り効果、エッジ、奥行きを知覚可能にする有効な素材を有効にする背景レイヤーであり、装飾的な場合でも同様です。この例外は、捏造されたコンテンツやアクセス不能/低速なエフェクトの許可ではありません。
- 許可される背景処理: 1〜3つの一貫性のある
radial-gradient()のライトフィールド、控えめなマルチストップリニアまたはメッシュグラデーション、疑似要素を使用したぼかしたカラーアンビエントシェイプ、ブランドに合わせたイラスト/写真、またはパネルの背後にある既存のコンテンツ。多くの場合、静的な CSS で十分であり、追加の画像やアニメーションライブラリは必要ありません。 - ライト / ミルキーの例: 白色/氷のベースに、涼しい青色/ラベンダーの柔らかな光のフィールドを半透明の白いカードの背後に配置。パネルは色の境界を視覚的に柔らかくします。
- ダーク / スモークの例: ダークインクベースに、制御された紫/シアン/ティールの光の領域を半透明のスレートパネルの背後に配置。明るいグラデーションフィールドは白い本文テキストを不明瞭にしてはいけません。
- 構成要件: メインのガラスパネルの背後かつ部分的にその範囲外に、少なくとも1つの光/色の遷移または認識可能な背景要素を配置して、フィルターされた領域とされていない領域の違いが表示されるようにします。均一な全画面グラデーションで局所的な変化がない場合は、依然として不合格となる可能性があります。
- 奥行きの制御: 背景はコンテンツよりも優先度を低くする必要があります。すべてのページにデフォルトの紫/青のブロブを使用するのではなく、自然な減衰と意図的な位置を持つ少数の光源を使用してください。ユーザーのブランドパレットと提供された参考資料を使用してください。
- パフォーマンスとアクセシビリティ: 静的な CSS グラデーションと控えめなサーフェスを優先します。全画面の動くグラデーションアニメーション、過度の全ページの背景ぼかし、小さくてコントラストの低いテキスト、隠れたフォーカスリングを避けてください。透明度の設定を尊重し、読み取り可能な不透明なフォールバックをテストしてください。
- アンチスロップの解釈: グラデーションは、その単なる存在ではなく、素材の目的、控えめさ、読みやすさによって評価してください。汎用的なグラデーションヒューリスティックを満たすために有用なガラス背景を削除することは、デザインの退行です。
強力なスクリーンショットは、すべての見出しとラベルが非表示になっていても、曇りガラスの素材が明らかでなければなりません。スターター実装については examples/glassmorphism/frosted-surfaces.css を、視覚的な合格基準については tests/glassmorphism-visual.md を参照してください。
タイポグラフィと書体
ブランドに適したクリーンなサンセリフ（システムサンセリフ、DM Sans、Inter など）を使用してください。標準的な読みやすいサイズは 15〜17 px で、ディスプレイタイプはより大きくても構いません。強いタイプヒエラルキーを維持し、可変のガラス背景に超細いテキストを使用しないでください。明るい曇りガラスパネルは、多くの場合、濃い前景テキストの恩恵を受けます。ダークなスモークパネルは、ハイコントラストのオフホワイトから恩恵を受けます。タイポグラフィのヒエラルキーの代わりに色付きのグローを使用しないでください。
配色の方向性
コンテキストから1つの一貫性のある方向性を選択するか、ユーザーの参考資料を使用してください:
- 曇りライト / ミルキーガラス: 薄いアイスホワイトまたはライトグレーのフィールド（
#F0F4F8）、涼しい青色またはその他のブランド色の拡散光を半透明の白いパネル（rgba(255, 255, 255, 0.45)）の背後に配置。タイポグラフィは濃いスレート（#0F172A）で、落ち着いたスレート（#475569）を使用。上端に沿って柔らかなガラスのハイライトが見える（rgba(255, 255, 255, 0.75)）。 - スモークダーク / ナイトガラス: 濃いネイビー/インクのベース（
#090D16）に、バイオレット/ブルー/ティールのアンビエントライトフィールドを青灰色の半透明パネル（rgba(22, 28, 45, 0.55)）の背後に配置。前景テキストは鮮明な磁器（#F8FAFC）で、落ち着いたスレート（#94A3B8）を使用。ダークパネルはほぼ不透明な長方形ではありません。 - テーマ結合と衝突防止ルール: ライトガラスモードとダークガラスモードを切り替える場合、前景テキスト、境界線、アンビエント光源は連動して切り替える必要があります。前景テキストは、曇りガラス表面とその背後にある照らされた背景の両方に対して、少なくとも 4.5:1 のコントラストを維持する必要があります。ダークテキストをスモークダークガラスの上に、または白いテキストを曇りライトガラスの上に残さないでください。
色だけではガラスモーフィズムではありません。すべてのブランドに対してデフォルトでネオンパープル/シアンを使用しないでください。ブランドとハイコントラストの要件を維持してください。実際に合成された前景のコントラストを確認してください（WCAG AA 4.5:1 通常テキスト、3:1 大きいテキスト、関連する非テキストコントロールは少なくとも 3:1）。
レイアウトとジオメトリ
- 目的のある前景/背景構成を使用してください: アンビエント背景 → ガラス表面 → 鮮明なコンテンツとインタラクティブなコントロール。ネストされたカードの乱雑さなしに、2〜3の奥行き平面を区別してください。
- 一貫性のあるコーナー（大きなパネルでは一般的に 16〜28 px）とスペーシングを使用してください。100svh に達するためだけに、完全に空の特大の最初のビューポートを避けてください。
- レスポンシブ画面では、パネルはきれいに積み重なり、読み取り可能なパディングを維持し、クリップされたぼかしやオーバーフローを避ける必要があります。ヘッダー、ヒーローコンテンツ、コントロールは自然に収まるか、拡張する必要があります。
サーフェス、奥行き、テクスチャ
- ガラスのレシピ: 半透明の色合い（
rgba(...)またはcolor-mix）、backdrop-filter: blur(16px) saturate(140%)、半透明の 1px 境界線、控えめなインセットトップハイライト、柔らかなレイヤーシャドウ。約 12〜24 px のぼかしから始め、実際の背景に合わせて調整してください。 - ライトガラス: 背景が許す場合、約 0.24〜0.55 のアルファ値で白色に着色された表面を使用します。不透明度が高すぎると曇り効果が失われます。強いテキストコントラストは依然として必須です。
- ダークガラス: 約 0.25〜0.56 のアルファ値でスレート/インディゴの色合いを使用し、目に見える明るいエッジとその背後に対照的なアンビエントライトを使用します。漆黒のスラブと目に痛いネオンハローを両方とも避けてください。
- 奥行きの手がかり: パネルの背後にある柔らかくぼかした背景、控えめな内部の輝き、微妙なエッジグロー/反射。ストックの汎用的なバブル壁紙は必要ありません。
- 背景フィルタリングがない場合、
@supportsフォールバックを読み取り可能な不透明な表面と共に使用してください。透明度低下/ハイコントラストの代替手段を提供してください。コンテンツの理解やインタラクションにぼかし自体が必須であってはなりません。
独立したライトおよびダークの開始トークンについては、完全なテイストエンジンルーター内の examples/glassmorphism/frosted-surfaces.css（上記のトークンレシピはスタンドアロンインストールでも機能します）を参照してください。トークンをプロジェクトに適応させてください。すべての例をコピーしたり、固定パレットを強制したりしないでください。
コンポーネントの構造とインタラクション
- ヒーロー: 選択された美学を即座に明らかにします。実際のテイストエンジン/プロジェクトの見出しと CTA を、可視のガラス平面の内部または重なるように配置するか、同様に説得力のあるガラスウィンドウ構成を提示してください。パネルの背後に意味のある照明のある背景を提供してください。
- ヘッダー/ナビ: 微妙な曇りバーを背景に重ねることができますが、コントラストとフォーカスは表示されたままにしてください。ガラス UI を示す際に、ページから視覚的に切り離された平らな不透明なトップバーを避けてください。
- 機能的な例: 実際のオン/オフ状態のスイッチ、選択可能なオプション、タブ、モーダル、フォーム、および実際にトリガーされた場合またはスタティックデモとして明確にマークされている場合にのみトースト。該当する場合は、フォーカス、ホバー、アクティブ、無効、エラーの状態を示してください。前景のコントロールサーフェスは、ユーザビリティのために親ガラスよりも不透明にすることができます。
- ボタン: アフォーダンスのためにソリッドなアクセントサーフェスにすることができます。すべてのコントロールを透明にする必要はありません。従来のボタンは、他の場所でガラスが不足していることを補いません。
- コンテンツ: 長い段落、テーブル、フォームには、しっかりと着色された、または不透明な読み取り可能なコンテナーを確保してください。ノイズの多い半透明の画像に段落を配置しないでください。
モーション
アンビエントな動きではなく、インタラクションフィードバックを使用してください。ホバー、選択、パネル表示、またはモーダル上で、ユーザーアクションが必要な場合にのみ、140〜220 ms のフェード/トランスレートを使用してください。ガラスレイヤーの連続性を維持してください。終わりのない漂流オーブ、動く光線、必須の 3D スピンは避けてください。
オプションの Anime.js v4 レシピ
- モーションの決定: ほとんどのインタラクションには CSS/ネイティブトランジションを使用。Anime.js v4 は、調整された状態遷移のためにオプションであり、必須の視覚的依存関係ではありません。
- 開始時間: 180 ms、跳ね返りのないイージング。ぼかしやボックスシャドウを継続的にアニメーション化するのではなく、コンポジターに適した
opacity/transformをアニメーション化してください。 - モーションの削減:
prefers-reduced-motionを尊重し、中断/短絡された遷移を許可してください。 - 依存関係: 利用可能な場合はテイストエンジン
references/motion-engine.mdに従い、スタンドアロンスキルは同じガイダンスを適用します。
UI ライティングとマイクロコピー
直接的で、プロダクト固有、簡潔に。ガラスは素材であり、「未来は透明です」のような曖昧なコピーの言い訳ではありません。偽のバッジ、検証ステータス、ユーザー、生産性スコア、またはお客様の声を避けてください。デモデータは明示的にラベル付けする必要があります。
スタータートークン（提案、完全なテーマではありません）
| トークン | ライトガラスのデフォルト | ダークガラスのデフォルト |
|---|---|---|
--taste-radius-sm | 14px | 14px |
--taste-radius-lg | 24px | 24px |
--taste-glass-blur | 18px | 18px |
--taste-glass-bg | #f0f4f8 | #090d16 |
--taste-glass-surface | rgba(255, 255, 255, 0.45) | rgba(22, 28, 45, 0.55) |
--taste-glass-text | #0f172a | #f8fafc |
--taste-glass-text-muted | #475569 | #94a3b8 |
--taste-glass-light | rgba(255, 255, 255, 0.38) | rgba(255, 255, 255, 0.38) |
--taste-glass-dark | rgba(36, 45, 72, 0.38) | rgba(36, 45, 72, 0.38) |
--taste-glass-edge-light | rgba(255, 255, 255, 0.65) | rgba(255, 255, 255, 0.18) |
--taste-motion-duration | 180ms | 180ms |
これらは開始値にすぎません。実際のコンテンツと背景に対して結果を確認する必要があります。フォント、イラスト、モーションライブラリを密かにロードしないでください。
ヒーロー構成（最初の全ビューポート）
公開ポートフォリオ/ランディング/ホームページでヒーローがある場合、クリップされた固定高さのヒーローではなく、ヘッダー + ヒーローファーストビューポート構成（100vh フォールバック付き min-height: 100svh）を使用してください。必要に応じて、オーバーレイの2回分ではなく、実際のインラインフローヘッダーを差し引いてください。短いモバイル画面やズーム時に自然に拡大してください。素材要件: 最初のビューポートは、視覚的に注意深く構成された背景をフィルタリングする明白な曇りガラスパネルを示している必要があります。通常のテキストの上の80％の空のダークスペースではありません。意味のあるレイヤー構造とブランドに合わせたアンビエントライトから視覚的な興味を構築してください。写真、偽の…
[翻訳用に切り詰められました]