glassmorphism

グラスモーフィズム（フロストガラスとリキッドガラス）

半透明でフロスト加工された UI です。パネル越しに背景が見え、ぼかしによって背景が柔らかな色として映り、明るい光の縁取りと重なり合う影によって浮かび上がります。2026 年の「リキッドガラス」への進化では、屈折が加わり、背景がパネル越しに目に見えて歪むほか、鏡面ハイライトが動きます。目指すのは、単なる不透明度ではなく、奥行きと素材感です。

使用する場面

• 情報量の多い背景や写真の上に配置する、フロスト加工されたカード、ナビゲーションバー、サイドバー、モーダル／ダイアログ、ツールバー
• ページ上に重なっている印象を持たせたいログインパネル、ヒーローパネル、オーバーレイ
• Apple 風の「リキッドガラス」ヒーロー：屈折し、ゆっくりとうねる表面と、走る鏡面ハイライト
• ガラス上でのホバー／スクロール／表示時の動き：フロスト感が深まり、ハイライトが明るくなり、パネルが浮き上がる
• ガラスが浮かんでいるように見せつつ、コンテンツの読みやすさを保ちたい場所

本物らしいガラスを作る4つの要素

ガラスの見た目は、単一のプロパティで決まるものではありません。4つすべてが揃わないと、ただの半透明な箱に見えてしまいます。

1. フロスト — backdrop-filter: blur() と saturate() を使い、ぼかした背景の色彩を鮮やかに保ちます。
2. 半透明性 — アルファ値を約 0.08～0.18 にした background を使います。完全に不透明にも、完全に透明にもしてはいけません。
3. ガラスの縁 — 塗りつぶしよりも 明るい 細い境界線を付けます。理想的には左上から右下へ暗くなるハイライトにし、縁が光を捉えるようにします。
4. 奥行き — レイヤー化した box-shadow を使います。浮かせるアンビエントドロップシャドウに加え、表面に丸みを持たせる inset の上部ハイライトと下部の影を重ねます。

.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%); /* Safari needs the prefix */
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),     /* float */
    inset 0 1px 0 rgba(255, 255, 255, 0.35), /* top highlight */
    inset 0 -1px 0 rgba(0, 0, 0, 0.12);      /* bottom shade */
}

フロストの段階：軽い UI クロームには blur(8–12px) ／アルファ値 0.08–0.14、強めのモーダル／ログイン画面には blur(24–40px) ／アルファ値 0.10–0.18 を使います。ダークガラスには rgba(0,0,0,0.3) の塗りつぶしと、控えめな上部ハイライトを使います。

backdrop-filter でぼかされるのは、要素の背後にあるコンテンツだけです。 単色の背景では目に見える効果はありません。フロスト加工を施すには、画像、グラデーション、動画など、情報量のある背景が必要です。

鏡面の縁のハイライトとバンディング防止の粒状感

単調な境界線では生気がありません。::before でマスクを使った 1px のリングを描き、角に光を当てます。また、強いぼかしの下に現れる段階的な輪郭線、つまりバンディングを軽減するため、::after で opacity ≤ 0.06 の微かな feTurbulence ノイズオーバーレイを重ねます。マスクを使った境界線とインラインノイズのレシピは references/glass-recipes.md にあります。

動き：形状ではなくガラスを動かす

フロスト感が深まり、ハイライトが明るくなり、パネルが浮き上がるといった、ガラスの 質感 をアニメーションさせます。こうすることで、表面が「光の方へ傾く」ように見えます。

.glass {
  transition: backdrop-filter .4s ease, background .4s ease,
              box-shadow .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.glass:hover {
  backdrop-filter: blur(24px) saturate(180%);
  background: rgba(255,255,255,.18);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.5);
}

• 表示時（透明な状態からフロストが現れる）：[data-enter] のトランジションと @starting-style { backdrop-filter: blur(0); opacity: 0; transform: translateY(16px) } を組み合わせます。
• 鏡面ハイライトの走査：ホバー時、またはゆっくりとした環境アニメーションとして、傾斜した白いグラデーションを表面上に動かします。
• 注意点：ぼかしの 半径 のアニメーションは、ここで最も負荷が高くなります。毎フレーム、背後のコンテンツを再度ぼかすためです。ホバー時に動きがぎこちなくなる場合は、transform／box-shadow／background（低負荷）をアニメーションさせ、ぼかしの変化量を小さくするか、段階的に切り替えます。

リキッドガラス — SVG による屈折（2026 年のスタイル）

厚いレンズ越しのように、パネル越しに背景を歪ませます。アニメーションする feTurbulence で feDisplacementMap を動かし、filter で適用します（filter は要素自体のピクセルを歪ませます）。さらに backdrop-filter のフロスト加工を重ねます。

<svg width="0" height="0" style="position:absolute"><filter id="liquid-glass">
  <feTurbulence type="fractalNoise" baseFrequency="0.008 0.012" numOctaves="2" seed="3" result="n">
    <animate attributeName="baseFrequency" dur="18s"
             values="0.008 0.012;0.012 0.008;0.008 0.012" repeatCount="indefinite"/>
  </feTurbulence>
  <feDisplacementMap in="SourceGraphic" in2="n" scale="22" xChannelSelector="R" yChannelSelector="G"/>
</filter></svg>

scale は屈折の強さです（8～14 は控えめ、20～30 ははっきり、40 超は溶けたような印象）。baseFrequency を低くすると、より大きくゆっくりとした波になり、液体らしさが増します。ゆったりと呼吸するように見せるため、animate の dur は長め（12～20s）にします。これらのフィルターは負荷が高いため、グリッド全体ではなく、1つのヒーロー要素に使います。

パフォーマンス — backdrop-filter は負荷が高い

• ガラス要素はそれぞれ、背後にあるすべてのものを再サンプリングしてぼかします。使用数を制限してください。画面上に十数個あると、スクロール時の FPS が大きく低下します。
• 負荷の高いガラス要素は独自のレイヤーに昇格させます（transform: translateZ(0) または will-change: transform）。アニメーションの後は will-change を削除します。
• backdrop-filter を適用した要素同士を重ねないでください。入れ子にしたぼかしは、ぼかしをさらにぼかすため、負荷が二次的に増大します。
• 大きな半径（>40px）を広い領域に適用するのが最も負荷の高いケースです。半径とパネルのサイズに上限を設けてください。

アクセシビリティ — 妥協できない要件

ガラス表現は装飾です。コンテンツの読みやすさを保ち、効果を無効化できるようにしてください。

@media (prefers-reduced-transparency: reduce) {
  .glass { background: #1a1a2e; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .glass::after { display: none; }            /* drop grain */
}
@media (prefers-reduced-motion: reduce) {
  .glass { transition: none; }
  .liquid { filter: none; }                   /* stop the refraction churn */
}
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(30,30,50,.85); }  /* opaque-enough fallback */
}

複雑な背景でのコントラスト：写真の上に置いた半透明パネルでは、テキストのコントラストが WCAG の基準を下回ることがあります。テキストの下に半不透明のスクリーンまたは暗くするグラデーションを追加し、必要に応じて text-shadow: 0 1px 2px rgba(0,0,0,.4) を指定してください。背景の最も明るい領域に対して、本文は 4.5:1 以上、大きなテキストは 3:1 以上であることを確認してください。

納品と検証（スタンドアロン HTML）

同梱のヘルパー（scripts/）：scripts/seek-shot.sh anim.html 0 1.5 3 は ?t=N ハーネスを使ってフレームを固定し、各時点のスクリーンショットを撮影します。scripts/contact-sheet.sh sheet.png frame-*.png は画像をタイル状に並べ、ひと目で確認できるようにします。scripts/README.md を参照してください。

自己完結型のガラス表現デモ（カード、ナビ、モーダル、リキッドガラスのヒーロー）では、納品物はブラウザーで直接開ける単一の HTML ファイルです。マークアップ、CSS、および（リキッド表現の場合は）インライン SVG フィルターを含め、ビルド手順は不要です。ガラス面には単一ファイルが適しています。バンドラーを使う必要はありません。パネルは実際の背景に重ねてください（写真またはグラデーションを配置します）。すりガラスにする対象がなければ、デモは実態を正しく示せません。

出力要件：

• .html ファイルを 1 つ用意します。複雑な背景、ガラスのマークアップ、CSS（すりガラス効果＋エッジのハイライト＋粒子感＋シャドウ）、および必要なインライン SVG feDisplacementMap フィルターを含めてください。
• 確定した状態と、ループの任意の時点を固定したフレームの両方を表示できるようにします。ガラスは状態（通常／ホバー／表示）と時間（スイープ／屈折）の両方で検証します。
• 任意の時点を固定して確認できるよう、以下のフリーズ用ハーネスを含めてください。

シーク用ハーネス — 状態とフレームを固定します。 ?state=hover はホバー時の表示を強制します。?t=N は CSS アニメーションと SVG の屈折を N 秒時点で固定するため、スクリーンショットに静止した確定フレームが記録されます。

<script>
  const p = new URLSearchParams(location.search);
  const state = p.get("state");
  if (state) document.documentElement.dataset.state = state;   // CSS keys off :root[data-state="hover"]
  const t = p.get("t");
  if (t !== null) {
    document.getAnimations().forEach(a => { a.currentTime = parseFloat(t)*1000; a.pause(); }); // freeze CSS sweep
    const svg = document.querySelector("svg");
    svg?.pauseAnimations?.(); svg?.setCurrentTime?.(parseFloat(t));                            // freeze refraction
  }
  window.__ready = true;
</script>

検証ループ — レンダリング → 状態設定／固定 → スクリーンショット → 確認： 意味のある各状態（?state=rest、?state=hover）と固定したループのフレーム（?t=2）を開いてスクリーンショットを撮り、ガラスらしく見えることを確認してください。ぼかしとエッジのハイライトが目に見えること、色のバンディングがないこと、背景上でテキストのコントラストが保たれていることを確認します。さらに、表示上の問題（背景が単色のため平坦なボックスに見える、Safari で -webkit- プレフィックスがない、屈折が強すぎて溶けたように見える、ぼかしのアニメーションによるカクつき）も確認してください。その後、prefers-reduced-transparency を設定し、不透明な代替表示が読みやすく描画されることを確認します。ヘッドレスツールはどれでも使えます。

npx playwright screenshot --wait-for-timeout=500 "file://$PWD/glass.html?state=hover" hover.png
npx playwright screenshot --wait-for-timeout=500 "file://$PWD/glass.html?t=2"          loop.png

ヘッドレス環境で代替表示を確認するには、メディア機能をエミュレートします（Playwright の --color-scheme 形式のフラグ、またはメディアクエリーを反映するクラスを切り替える ?reduced=1 クエリーなど）。パネルが不透明で読みやすいことをスクリーンショットで確認してください。

完了前に確認すること：

1. スタンドアロンで開けること — コンソールエラーがなく、ガラスが単色ではなく実際の複雑な背景に重なっていること。
2. ガラスらしく見えること — ぼかしと明るいエッジのハイライトがどちらも見え、重ねたシャドウで浮いて見え、バンディングがないこと（粒子感があること）。
3. 背景の最も明るい部分でもテキストのコントラストが保たれていること（本文は 4.5:1 以上）。
4. ?state= / ?t=N の固定で、状態が確定したフレームが表示されること。
5. prefers-reduced-transparency → 不透明なパネルに切り替わること。prefers-reduced-motion → 屈折／スイープが停止すること。@supports → backdrop-filter 非対応時のフォールバックがあること。
6. パフォーマンスに問題がないこと — ガラス表現の数を抑え、カクつきやすい方法でぼかしをアニメーションせず、リキッド屈折は 1 つの要素だけに適用すること。

クイックリファレンス

必要なもの	アプローチ
基本のフロスト効果	backdrop-filter: blur(16px) saturate(160%) + アルファ背景
ガラスの縁	より明るい border + マスク付きの ::before で光る角のリングを作成
浮遊感／奥行き	box-shadow でドロップシャドウを付け、inset で上部をハイライトし、下部に陰影を付ける
バンディングの除去	feTurbulence のノイズを ::after に適用し、opacity ≤ .06 にする
ホバー時の動き	transform／box-shadow／background をトランジションさせ、ぼかしの変化を小さくする
表示時の動き	@starting-style { backdrop-filter: blur(0); opacity:0 }
液体のような屈折	filter を介して、アニメーションする feTurbulence から feDisplacementMap に適用
鏡面反射のスイープ	白いグラデーションを傾けて、表面上をアニメーションさせる
Safari	常に -webkit-backdrop-filter も指定する
透明度を抑える設定	不透明な単色パネルを使い、粒子効果を除く
backdrop-filter 非対応時	@supports not (...) で十分に不透明なフォールバックを用意する

リファレンスファイル

• references/glass-recipes.md — そのままコピーして使えるレシピ一式です。段階別の基本的なガラスカード、マスク付きの鏡面反射エッジリング、バンディングを防ぐ粒子効果、ホバー／表示／スクロール時の動き、鏡面反射のスイープ、調整用パラメーター付きの SVG feDisplacementMap／feTurbulence 液体ガラスフィルター、パフォーマンスに関するルール、透明度低減／動きの低減／@supports のフォールバック、コントラスト対策、単独で使えるフリーズハーネスが含まれます。