グラスモーフィズム

定義

グラスモーフィズムは、画面上のある表面をすりガラスのように見せる表現テクニックです。 仕組みは二つの処理が重なって働きます。まず、その表面の奥にある背景をぼかして (blur)、何があるのかがぼんやりとだけ透けるようにします。そのうえに、ごく淡い白を 半透明で重ねて、表面そのものにうっすらと白っぽい色をのせます。すると奥の背景が 完全に隠れるわけでも、そのまま見えるわけでもない中間の状態になり、まるで すりガラス越しに向こうを見ているような質感が生まれます。カードや上部ナビゲーションのように、 背景の上に浮いている面によく使われる表現です。

なぜ重要か

グラスモーフィズムが注目されるのは、華やかな背景を活かしつつ、その上に重ねた要素に 奥行きと洗練された印象を加えてくれるからです。背景の写真やグラデーションをそのまま残し、 カードだけを半透明のガラスとして処理すると、要素が背景より手前に浮いているという 階層が自然に感じられ、画面に立体感が生まれます。完全に不透明なカードで背景を 覆い隠してしまう場合と違い、ガラス効果は背景と前景をなめらかにつなぎ、 窮屈さを感じさせずに情報をのせられます。ただし、この効果は見た目の魅力が大きいぶん、 落とし穴もはっきりしています。ガラスの上にのった文字は奥の背景と混ざってコントラストが 落ちやすく、背景をリアルタイムでぼかす処理は端末に性能の負担をかけるため、 きれいに見えるからとどこにでも使うと、かえって逆効果になります。

よくある間違い

• ガラスの上のテキストのコントラストを確保しない場合です。半透明の表面の奥で明るい部分と 暗い部分が入り混じって透けると、文字が場所によっては読めて場所によっては埋もれてしまい、 読みやすさが背景しだいでバラバラになって、同じ文章を位置ごとに違う見え方で 読むことになります。
• 画面のあちこちでガラス効果を使いすぎる場合です。すべての面が半透明になると、 かえって階層の区別が消えて、どれが手前でどれが奥なのか分からなくなり、 画面全体がぼんやりとかすんで、性能の負担だけが大きくなります。
• 背景のぼかしに対応していない環境を考えない場合です。効果が抜け落ちたときの 代わりの手段がないと、ある端末では表面がそのまま透明になって文字が背景に埋もれ、 同じ画面が端末ごとにまったく違って見えてしまいます。

実務のヒント

• ガラスの上の文字の読みやすさは必ず確保しましょう。半透明度を少し上げて表面をより 不透明にするか、テキストの下に淡い影や暗いレイヤーを敷いておくと、背景がどうであっても コントラストが安定して保たれます。
• 性能に負担のかかる背景ぼかしは、本当に必要な一つ二つの場所だけに使いましょう。 上部バーや主要なカードのように効果が値打ちを持つ場所に取っておけば、印象は活かしつつ 負担は抑えられます。
• ぼかしの強さと白の濃さは、背景に合わせて細かく調整しましょう。背景が複雑なほど より強くぼかしてより白っぽく、シンプルなほど淡めにしておくと、ガラスの質感は活きたまま、 奥の内容がごちゃごちゃと透けて邪魔をすることが減ります。

関連概念