グラスモーフィズム

場所・作品・写真のように背景が有用な文脈を持つ場合に半透明パネルが向きます。背景の文脈、手前の作業、読める操作部という単純な階層を保ちます。密なフォームや背景を予測しにくいダッシュボードでは不透明な面から検討します。Liquid Glassは特定プラットフォームと関わる別の素材研究で、同じ仕様ではありません。

経路を選ぶと湖の景色を残したまま距離と時間が変わります。写真ビューアーの短い説明にも同じ関係を使えます。学ぶのは前景と背景の関係であり、角丸の半径、光の方向、作業の件数ではありません。半透明の層を重ねすぎると、操作できるものを見分けにくくなります。

半透明の背景と backdrop-filter: blur(10px) saturate(1.35) を併用します。背後の内容に作用し、要素自体をぼかす filter: blur(...) とは異なります。読める不透明色を基本にし、対応環境で効果を加えます。作例は不透明切り替え、未対応時の代替、透明度低減への対応を備えます。合成結果のコントラスト、キーボードのフォーカス、動きの低減を確認します。ブラウザー対応だけではアクセシビリティを証明できません。

ここでは広いすりガラスの情報パネルと、操作に合わせて広がる小さなレンズの違いを強調します。グラスモーフィズムは一般的な視覚表現で、アニメーションも可能です。単なる静止と動きの差ではありません。Webのレンズは選択画像の複製を変位させ、縁に反射光を加えます。Appleのネイティブ素材・自動色調適応・物理光学シミュレーションは再現しません。