glassmorphism

グラスモーフィズム

文字の読みやすさとコントロールの使いやすさを保ちながら、光が差し込むガラス板のように見えるマテリアルを作ります。上質なガラス表現には、光を映す背景、薄い明るい塗り、リム・ハイライト・シャドウで表現する一貫した光源の方向、そして情報量の多いコンテンツの下に敷く安定したプレートが必要です。ぼかしや不透明度を高めても、上質な表現にはなりません。

マテリアルの役割を決める

要件と既存のインターフェースを確認し、プラットフォーム、サーフェスの役割、情報の密度、背景の管理者、テーマ、対象デバイスを把握します。プロジェクトのコンポーネント、タイポグラフィ、トークン、インタラクションの規約を維持してください。一般的な判断は推定してかまいません。このスキルでは、承認手順や計画書を追加しません。

スタイルを設定する前に、3 つのレイヤーを分けます。インターフェースの背後にある環境、ユーザーが読んだり操作したりするコンテンツ、ナビゲーションや操作を担うクロームです。ガラスには、環境を見せる理由が必要です。単色の上では、ぼかしの対象となるものがなく、サーフェスが灰色のボックスになってしまいます。その場合は色付きの塗りつぶしを使うか、要件が許すなら輝度ランプを使った背景を合成してください。

サーフェス	初期判断	変更する条件
フローティングツールバー、ドック、タブバー、コンパクトなメディアコントロールや地図コントロール	ガラスのカプセルを使い、アイコンをマテリアル上に配置します。選択状態には、より濃いチップを使います	制御できない画像やデバイスの負荷によって、読みやすさを保てない場合
ひと目で把握できるウィジェット（天気、指標、再生中のメディア）	大きな明るい数字と短いラベルを備えたガラスカードを使い、背景の輝度に合わせて文字色を選びます	説明文が短い数行を超える場合。プレートを追加するか、塗りつぶしに切り替えます
ポップオーバー、シート、コマンドパレット、設定パネル	ガラスのシェルを使い、入力欄、行、コードの下に安定したプレートを敷きます	長時間の読書が必要な場合。塗りつぶしパネルを使います
テーブル、エディター、長文、グラフのラベル、フォーム	読み取り面は塗りつぶしにします。その周囲にはガラスを使ってもかまいません	テキストの背後にある合成結果を測定した場合に限ります
主要アクション、エラー、重要なステータス	前景色と背景色の組み合わせを安定させ、状態を見分けやすくします	ネイティブのプラットフォームコントロールで、検証済みのマテリアルがすでに提供されている場合
操作を妨げるモーダルの背景	減光スクリーンを使います	効果を追加するだけの価値が、測定によって確認できた場合

必要な分岐だけを読み込む

パスはこのスキルのディレクトリを起点に解決します。参照資料は自己完結しています。リサーチ用の保管庫は任意です。

必要なこと	読む資料
目標の見た目を言語化する、結果を評価する、トークンを選ぶ、平坦・濁った・プラスチックのようなガラス表現を修正する、Figma で作成する	アートディレクションとマテリアル。品質基準はリファレンスボードです
Web のガラス表現を実装する、Tailwind/React/shadcn と統合する、ぼかしが適用されない・クリッピングされる・重なり順がおかしい問題を診断する	Web エンジニアリング。glass.cssを適応してください
ガラス上にテキストやコントロールを配置する、任意の背景に対応する、コントラストを測定する、ユーザー設定を尊重する	アクセシビリティと検証
レンズ屈折、色ずれ、モーフィングを追加する、またはネイティブの Liquid Glass、visionOS、Fluent、Material、Expo を対象にする	高度なエフェクトとプラットフォームから該当するセクションだけを読みます
ルールの根拠をたどる、またはスキルを拡張する	根拠と出典。網羅性カタログは管理用であり、実行時に読む資料ではありません

material-lab.htmlとそのスタイルシートは、実行可能なリファレンスです。ストレステスト用ボードを含む 7 種類の背景、3 種類の厚みプリセット、光の角度、塗りとぼかしの倍率、屈折、粒子、塗りつぶしモード、リアルタイムのコントラスト推定、トークン表示を備えています。このページはマテリアルを例示するものです。ページをコピーするのではなく、対象の技術スタックに合わせて適応してください。

一貫性のあるマテリアルを実装する

1. 背景と文字色を組み合わせます。 輝度のグラデーションがある写真、壁紙、グラデーションを使うと、ガラスらしい表現になります。各サーフェスの周囲には、背景環境が見える余白を残します。サーフェスの背後にある輝度に応じて文字色を選び、数値で測定してください。薄いライトティントに白い文字を載せるのは、暗いシーン（相対輝度が約 .1 未満）の場合に限ります。中間色やパステル調のシーンでは、スモークニュートラルティント（--glass-tint: 56 50 58、不透明度約 .66）に白い文字を載せます。明るいシーンやほぼ白のシーン（.6 超）では、ホワイトフロスト（不透明度約 .62）に暗い文字を載せます。パステル調の写真にライトティントと白い文字を組み合わせると、コントラスト比は 2:1 を下回ります。ラボでは背景に応じてモードが切り替わり、推定値が表示されます。Apple のマテリアルではこの切り替えが自動で行われますが、Web ではシーンごとに判断する必要があります。
2. 光の向きを一つに定め、5 つの表現に反映します。 --glass-light は、1px の縁取りグラデーション（光が当たる縁を明るく、反対側を暗くする）、1px の内側ハイライトと、それに対応する影、光沢の減衰、浮き上がりを表す影を制御します。すべての縁をハイライトしたり、広範囲を白く塗りつぶしたりすると、プラスチックのように見えます。
3. まず薄く調整し、文字の読みやすさが必要な場所だけ厚くします。 プリセット（クリア .07/6px、レギュラー .16/14px、フロスト .34/26px、saturate(1.4–1.7) brightness(1.05)）を基準にし、サーフェス全体のアルファ値を上げるのではなく、文字が密集する部分の下に .glass-plate を追加します。コントロールにはカプセル型を使い、カードの角丸は 24～30px にして、内側の角丸は同心に揃えます。
4. コンテンツと操作性を保護します。 フィルターはサーフェスに適用し、ラベルのサブツリーには適用しません。縁取りや光沢の疑似要素は操作対象にならないようにし、要素の不透明度ではなく塗りのアルファ値を変更します。状態は構造的に表現します。ホバー時は塗りと縁取りを強め、押下時は影を縮小し、無効時は縁取りと光沢をなくし、フォーカス時は重なり順の最前面に明瞭なリングを表示します。ネイティブのセマンティクス、タップ領域、閉じる操作を維持します。
5. まず不透明な代替表示を用意します。 不透明な塗りと文字色の組み合わせを定義してから、@supports の中で拡張表現を追加します。アプリケーションレベルで不透明表示モードを用意し、透明度の低減、強制カラー、モーションの低減、印刷には明示的に対応します。
6. 屈折は、歪みが厚みとして伝わる場所にだけ追加します。 小さなコントロール（ボタン、ノブ、ピル型要素）には、形状から導出した変位マップを backdrop-filter: url() で適用できます。この表現は Chromium でのみ描画されるため、フロスト表示にフォールバックさせる必要があります。カードはフロストのままにします。

有効な背景フィルターの数、領域、重なりを少なく保ってください。1 つのビューにガラスサーフェスは 1～3 個までとし、ナビゲーションレイヤーも 1 つとして数え、その上に重ねる一時的なシートは最大 1 つにします。ガラスはコンテンツレイヤーではなく、クロームレイヤーです。ガラスをガラスに重ねないでください（シェルの内側にはティントプレートを使います）。ぼかしはアニメーションさせず、既定でビューポート全体にフィルターを適用しないでください。Apple のレギュラーとクリアの段階を同じ画面で混在させないでください。大きなサーフェスは小さなコントロールよりも厚く見えるようにします。

要求された結果を検証する

プロジェクトのチェックを実行して実際のインターフェースを動かし、ブラウザーまたはネイティブシミュレーターで代表的な状態を確認します。変更箇所に範囲を絞ります。CSSのみの見た目の変更なら、スタイルを固定する新しいテストスイートではなく、UIチェックを行います。

• 視覚面： マテリアルが意図したサイズで認識できること、リム、ハイライト、シャドウの光源方向が一致していることを確認します。明るい背景と暗い背景、情報量の少ない背景と多い背景の両方で階層が保たれることも確認します。これには、ホットスポットとテキストの背後にある高コントラストの図形も含めます。モバイルで画面全体がぼかしに埋もれないことも確認します。
• 機能面： すべてのコントロールでキーボードフォーカスとポインター操作が機能することを確認します。メニュー、読み込み中、エラー、無効の各状態が理解しやすい状態に保たれ、装飾が入力を妨げたりフォーカスを切り取ったりしないことも確認します。
• アクセシビリティ： 文字の背後に合成された表示結果に対してインクのコントラストを測定します（テキストを非表示にし、領域をサンプリングして、最悪パーセンタイルを算出します）。許容される中で最も厳しい背景を使います。テスト環境では、調整モードのタイトルの中央値は5.7:1～15:1、補助テキストは4.8:1～9.9:1でした。同じパステル調の写真に重ねた明るい色合いでは、白いインクが1.7:1となったため、モードを切り替えます。ソリッド表示、強制カラーモード、動きの低減、幅320pxでのリフロー状態を確認します。
• レンダリング： 対象エンジンで実際にスクロール、サイズ変更、オーバーレイ、アニメーションを試します。コストが不確かな場合は、フィルターを無効にした状態とも比較します。機能検出で確認できるのは構文であり、忠実な描画ではありません。

問題は、それを引き起こしているレイヤーで修正します。コントラストにはプレートを追加するかインクを変更し、コストが問題ならフィルター領域を削減し、ぼかしが欠落しているなら祖先要素の合成を修正します。修正としてぼかし、z-index、translateZ(0)を追加しないでください。

成果物を納品し、実施したチェックを明記し、未テストのエンジン、デバイス、実験的な効果を開示します。この調査は設計とエンジニアリングの指針を裏付けるものであり、ユーザビリティの向上を測定したものではありません。