フロストガラスカード
背景をぼかして透ける、ノイズ入りの曇りガラスカード。半透明＋微粒子＋やわらかい縁取りで、進化したグラスモーフィズム。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- 写真・色面の上に置く情報カード
- 背景を透かしつつ文字を読ませたい
- ダーク基調のヒーロー内カード
- 避ける場面
- 白・単色背景の上（透け感が出ない）
- backdrop-filter 非対応で代替が無い
- 薄い背景で白文字のコントラスト不足
- 構成要素
- カラフルな背景
- ガラス面
- ノイズ層
- 見出し
- 本文
- 持っている状態
- 通常
- キーボード
操作要素なし（表示専用のカード）。中に置くリンク・ボタンは通常どおり操作できる
- 支援技術
ぼかしとノイズは装飾で pointer-events none。文字は白なので実背景でコントラストを確認する。内容はテキストで読める
- 動き
なし
デザインの要点
- ガラス感は backdrop-filter: blur(12px) saturate(140%)。彩度を上げないと透けた背景がくすんで濁る
- 面は白 14%・縁は白 35% と、縁を面より明るくする。縁が同じ濃さだと板ではなく霧に見える
- 粒子ノイズは feTurbulence の data URI を opacity 0.12 で重ねる。強いと汚れ、無いと CG 臭い平面になる
- 白文字は透けた背景の最も明るい場所で確認する。ぼかしは背景色を平均化するだけで暗くはしない
実装メモ
ガラス感は backdrop-filter: blur。粒子ノイズは SVG feTurbulence を data URI で重ねています。背後にカラフルな要素があるほど“透けてる感”が出ます(白背景だと効果が薄れます)。
コード（コピーして使えます）
<div class="glass-stage">
<div class="glass-card">
<p class="glass-title">Frosted</p>
<p class="glass-text">背景がぼやけて透ける曇りガラス</p>
</div>
</div>