グラスモーフィズムとは？すりガラス風デザインが成立する条件と、避けるべき場所

グラスモーフィズムとは、要素を半透明にして背景をぼかし、すりガラスのような見え方をさせる表現です。背景が透けることで層の重なりが伝わり、奥行きのある画面になります。

ただしこの表現には、構造上の弱点があります。文字の読みやすさが、その下にある背景によって変わることです。背景が写真やスクロールで動く要素の場合、同じ設計でも場所によって読めたり読めなかったりします。

この記事では、成立する条件、使ってはいけない箇所、コントラストと描画負荷の実務的な扱い、そして企業サイトで採用すべきかの判断基準を整理します。

グラスモーフィズムとは何か

半透明の面に、背景のぼかしと細い輪郭線、わずかな影を組み合わせた表現です。この4つが揃って初めて「ガラス」に見えます。

呼び名としては2020年ごろに広まりましたが、表現そのものは以前からOSの画面で使われています。iOSの操作パネル、Windowsのメニュー、macOSのサイドバーなどが該当します。

重要なのは、これらのOSでは背景が制御下にあるという点です。Webサイトでそのまま真似ても、背景の条件が異なれば同じ結果にはなりません。

読みやすさを保証できないという弱点

これが採用可否を決める最大の論点です。半透明の面に置いた文字のコントラストは、下にある背景の明るさで変わります。

文字と背景のコントラスト比には基準があり、通常の文字で4.5:1、大きな文字で3:1が目安とされています。ところが半透明の面では、この数値が固定できません。写真の明るい部分では基準を満たし、暗い部分では下回るという状態が同じ画面内で起きます。

基準の具体的な数値と測り方は配色のコントラスト比の基準｜WCAGの数値と、実務での使い方で扱っています。

回避する方法は2つあります。背景を単色に固定するか、半透明の面の下に不透明な層をもう1枚敷くことです。後者は「ガラスに見えるが、実際には透けていない」状態を作る方法で、見た目を保ったまま数値を確定できます。

使ってよい場所と、避けるべき場所

全面に使う表現ではありません。読ませる箇所と、操作させる箇所には向きません。

特にCTAボタンへの適用は避けてください。半透明の面は背景に馴染むため、最も目立たせたい要素が沈みます。ガラス表現の目的は「奥行きを出すこと」であり、「目立たせること」とは逆方向の効果になります。

描画負荷とスクロール時の挙動

背景のぼかしは、背後にあるものを取り込んで再描画する処理です。単色の塗りに比べて負荷が高くなります。

• スクロール中は背景が変わり続けるため、そのたびに再計算される
• 半透明の面を重ねるほど、計算量が増える
• 画面に対して面積が大きいほど負荷が上がる
• 低価格帯のスマートフォンでは、スクロールが引っかかる形で現れる

確認は、開発者の端末ではなく実際の利用者に近い端末で行ってください。高性能な端末では問題が表面化しません。負荷が問題になる場合は、面積を小さくする、重ねる枚数を減らす、ぼかしの強度を下げるという順で調整します。

表示速度全体の改善順序はサイトの表示速度を改善する優先順位｜何から手をつけるかを参照してください。

なおぼかしが効かない環境では、半透明の面だけが残ります。背景がそのまま透けた状態になるため、この場合でも文字が読めるかを確認しておく必要があります。透明度を下げた代替の指定を用意しておくと安全です。

企業サイトで採用すべきか

見栄えのする表現ですが、採用の判断は「何を伝えたいか」から決めてください。

最後の行が実務では最も重要です。公開時点では成立していても、運用担当者が背景画像を明るいものに差し替えた瞬間に、文字が読めなくなります。差し替えが起きる箇所では、そもそも透けない設計にしておくべきです。

企業サイトで何を基準にデザインを決めるかはコーポレートサイトのデザインは何で決まるか｜トレンドを追う前に固めることで整理しています。

採用するなら、撤去の手順まで決めておく

見た目の流行には寿命があります。入れるときに、外す方法を決めておいてください。

1. ぼかしと透明度の指定を、1か所にまとめて管理する
2. その指定を外したときに、単色の面として成立する配色にしておく
3. 文字色は、透けている前提ではなく、単色の面を前提に決める
4. 撤去の判断時期をあらかじめ決めておく（サイト改修のタイミングなど）

指定が各所に散っていると、外すだけで改修費が発生します。1か所にまとめておけば、透明度を0にするだけで通常のカードに戻せます。この前提で作っておくことが、トレンド表現を採用する際の実務上の保険になります。

デザイン要素をどの順で決めるかはWebデザインの構成要素はどの順で決めるか｜好みの議論にしないための順序を参照してください。

よくある失敗

写真の上に半透明の面を置いて文字を載せる

被写体によって読めたり読めなかったりします。文字を載せるなら、下に不透明な層を敷いてください。

CTAボタンに適用する

背景に馴染んで沈みます。最も目立たせたい要素には使わないでください。

高性能な端末だけで確認する

処理落ちが表面化しません。実際の利用者に近い端末でスクロールして確認してください。

運用で差し替わる背景の上で使う

担当者が明るい画像に差し替えた時点で読めなくなります。差し替えが起きる箇所では透けない設計にしてください。

ぼかしが効かない環境を想定していない

半透明の面だけが残り、背景がそのまま透けます。代替の指定を用意してください。

よくある質問

ニューモーフィズムとの違いは何ですか

ニューモーフィズムは、背景と同じ色の面に影と光を付けて、押し出したように見せる表現です。透けません。どちらもコントラストが不足しやすい点は共通しており、操作要素への適用は慎重に判断する必要があります。

ダークモードでも使えますか

使えますが、明るい配色とは別に設計し直す必要があります。暗い背景では、白い半透明の面が想定より明るく浮くことが多く、透明度をそのまま流用すると印象が変わります。両方の配色で文字が読めるか確認してください。

SEOに悪影響はありますか

表現そのものが評価を下げることはありません。ただし描画負荷でスクロールが引っかかる場合、操作への反応の遅さとして計測される可能性があります。負荷が高い実装は避けてください。

どの程度のぼかしが適切ですか

背景の要素が形として判別できなくなる程度が目安です。弱いと背景が透けて騒がしくなり、強いと単色の面と変わらなくなります。単色と変わらないのであれば、負荷の低い単色で実装したほうが合理的です。

全面に使うことはできますか

推奨しません。すべてが半透明だと層の関係が伝わらず、奥行きを出すという目的が失われます。画面の一部に限定してこそ効果が出る表現です。

まとめ

グラスモーフィズムは、ぼかし・半透明・輪郭線・影の4点が揃って成立する表現です。ただしOSの画面と違い、Webサイトでは背景を常に制御できるとは限りません。半透明の面に置いた文字のコントラストは下の背景で変わるため、写真や動画、スクロールで流れる要素の上では、読めるかどうかを保証できません。

回避策は、背景を単色に固定するか、半透明の面の下に不透明な層をもう1枚敷くことです。後者であれば見た目を保ったまま数値を確定できます。適用先としては、文字量の少ないカードやモーダルの背面処理が向き、本文・フォーム・CTAには向きません。特にCTAは、背景に馴染んで沈むため逆効果になります。

採用を検討する際は、運用で背景画像が差し替わらないかを必ず確認してください。公開時点で成立していても、担当者が明るい画像に替えた時点で読めなくなります。あわせて、透明度の指定を1か所にまとめ、外せば通常のカードに戻る設計にしておくことが、流行表現を扱ううえでの現実的な備えになります。

当社ではデザイン制作において、見た目と読みやすさの両立を前提に設計しています。企業サイト全体のご相談はホームページ制作をご覧ください。