グラスモーフィズム
Glassmorphism
すりガラスのように背景をぼかして、重なりを表現するデザイン手法。
簡単に説明すると
グラスモーフィズムは、背景が透けて見えるすりガラスのようなパネルを画面に置く手法なんだ。 スマートフォンの通知画面や、パソコンの設定画面などでよく見かけるよ。 パネルの下にある背景がうっすらとぼけて見えるから、画面に奥行きが生まれるんだ。 複数のパネルが重なっていても、それぞれの前後関係を認識しやすくなるんだよ。
名前のヒミツ
Glassmorphism（グラスモーフィズム）という名前は、「Glass（ガラス）」と「Skeuomorphism（スキューモーフィズム）」を組み合わせた言葉なんだ。 OSなどで使われてきた「背景をぼかす透明効果」がUIのトレンドとして再注目された際に名付けられたよ。 画面の中に本物のガラスのような質感や奥行きを取り入れたスタイルであることを表しているんだ。
くわしく見てみよう！
グラスモーフィズムとは、すりガラスのような半透明の質感を画面上のパーツに持たせるデザイン手法のこと。
かんたんに言うと、背景をぼかす「背景ぼかし」と、パーツの縁を白く光らせる「輪郭線」を組み合わせるのが特徴なんだ。
この手法を使うと、画面に透明感と立体感が出るんだよ。
明るい色や鮮やかなグラデーションの上に、ぼけたパネルを重ねることで、見た目が華やかで奥行きのある表現になるんだ。
1つ1つのボタンや枠が独立しているのではなく、空間の中に浮かんでいるような感覚をユーザーに与えることができるんだよ。
使い勝手の面でも特徴があるんだ。
背景を完全に隠さないから、ユーザーは今どこを操作しているのかという感覚を保ちやすくなるよ。
ただし、背景が複雑すぎたり、パネルの透明度が高すぎたりすると、文字が読みにくくなることもあるんだ。
そのため、読みやすさと見た目の美しさのバランスを考慮して設計されることが多いんだよ。