移行中の知識
グラスモーフィズム
Glassmorphism
定義
グラスモーフィズム（glassmorphism）とは、半透明、背景のblur、薄いborderやhighlightなどを使い、すりガラスのようなsurfaceと重なりによる奥行きを表現するdigital visual-design style / trendの名称です。単にopacityを下げるだけでなく、背後のcontentが透けながらblurして見えるlayer関係が典型的な特徴です。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
desktop interface
半透明のfloating panel
見るポイント
wallpaperやcontentがpanel越しにblurして見え、panel自体は半透明のsurfaceとして前景に置かれている時、その表現をglassmorphismとして分類する。
marketing page
hero上のglass card
見るポイント
photo backgroundの上へ半透明cardを置き、background blurとborder highlightでlayerを分離している場合、単にopacityを下げただけの表現との違いを見る。
注意
誤解しやすい点
- 透明度があるsurfaceをすべてglassmorphismと呼ぶ。
- blurだけを入れればfrosted-glass treatmentが成立すると考える。
- backgroundとのcontrastやtext readabilityをstyleとは別問題として無視する。
関連
関連する概念
出典