グラスモーフィズム

Glassmorphism

web development beginner

背景を透かしてぼかし、すりガラスのような質感を作るUIデザインの表現手法のこと。

概要（サマリー）

グラスモーフィズムとは、背景を透かしてぼかし、すりガラスのような質感を作るUIデザインの表現手法のことである。「グラス（glass、ガラス）」と「モーフィズム（-morphism、〜のような形）」を合わせた造語で、浴室のすりガラス越しに向こう側を見たときの、色は分かるが形はぼやけている状態を画面上で再現している。

カードやパネルの背後にある景色がうっすら透けることで、要素が空中に浮いているような奥行きが生まれる。スマートフォンのコントロールパネルや、写真の上に重ねるパネルなどでよく使われている表現である。

以下は、背景写真の上にすりガラス風のカードを重ねたデモである。

Glassmorphism

背後の色がぼやけて透けている。

詳細解説

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

グラスモーフィズムは、次の4つの要素を組み合わせて成立している。どれか1つでも欠けると、途端に「ただの半透明の四角」になってしまう。

半透明の背景: 背後の色をうっすら通す
背後のぼかし: 通した色をぼかし、形が見えないようにする
細く明るい境界線: ガラスの縁の光を表現し、輪郭を保つ
柔らかい影: 背景から浮いていることを示す

特に見落とされやすいのが3番目の境界線である。半透明のパネルは背景に溶けて輪郭が消えやすいので、白系の細い線で縁取ることで「1枚のガラス板」として認識できるようになる。

CSSでの基本的な書き方

要になるのが backdrop-filter である。これは「その要素の背後にあるものへ効果をかける」プロパティで、filter が自分自身をぼかすのとは対象が異なる。

.glass-card {
  /* 1. 半透明の背景。数値を上げるほど白く濁る */
  background: rgba(255, 255, 255, 0.18);

  /* 2. 背後をぼかす。Safari 向けに -webkit- も併記する */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* 3. ガラスの縁を表す細い線 */
  border: 1px solid rgba(255, 255, 255, 0.35);

  /* 4. 浮遊感を出す柔らかい影 */
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.28);

  border-radius: 16px;
}

背景色にRGBの不透明度付き表記（rgba）を使っている点が肝心である。background: white のように不透明な色にすると背後が透けず、ぼかしの効果もまったく見えなくなる。

背景がないと成立しない

グラスモーフィズムは「背後に透けるものがある」ことを前提とした表現である。真っ白な単色の背景に置くと、透けても白、ぼかしても白なので、見た目は何も変わらない。効果が出るのは次のような場面だ。

写真やイラストの上に重ねるパネル
色のグラデーションを敷いた背景の上
スクロールに応じて背後のコンテンツが流れていく固定ヘッダー
背後の画面が透けて見えるモーダルウィンドウ

「使ってみたが変化がない」という場合、たいていは背景が単色であることが原因である。表現の前に、まず背後に何を置くかを決める必要がある。

読みやすさとのトレードオフ

この表現の最大の弱点が、文字が読みにくくなりやすいことである。背後の写真の明暗によって、同じ白文字でも読めたり読めなかったりする。背景写真を差し替えたら急に文字が消えた、ということも起こる。

対策としては次のような方法がある。

半透明の背景を白または黒に寄せ、不透明度を上げてコントラストを確保する
ぼかしを強くして、背後の明暗差そのものを均す
文字に薄い影を付けて輪郭を立たせる
背景に使う画像を、あらかじめ暗く（または明るく）加工しておく

読み手が読めない画面は、どれだけ美しくても失敗である。アクセシビリティの指針では本文に一定以上のコントラスト比が求められており、装飾より優先すべき条件だと考えたい。

性能への影響

backdrop-filter は、背後の描画結果をもう一度処理する重い効果である。使いすぎると、スクロールが引っかかる、スマートフォンで発熱する、といった症状が出ることがある。

画面内に何枚も重ねない。主役の1枚に絞る
スクロールに追従して常時再計算される場所（固定ヘッダーなど）では、ぼかしの半径を控えめにする
低スペック端末でも触ってみて、動きが重くないか確認する

対応状況については、いまの主要ブラウザではおおむね使えるが、Safari では -webkit-backdrop-filter の併記が必要になる場面がある。効かなかったときに文字が読めなくなるのを防ぐため、ぼかしが無効でも成立する不透明度を選んでおくと安全である。

NOVEBLOには、グラスモーフィズムのCSSをその場で作れるツールと、実装手順をまとめたページがある。

AIコーディングとの関係

グラスモーフィズムはCSSの定型パターンなので、AIに頼めば数行で出てくる。ただし「ガラス風のカードを作って」だけだと、背景が単色のまま効果が見えないコードが返ってくることが多い。

背後に何があるか（写真か、グラデーションか、スクロールするコンテンツか）
文字色と、確保したいコントラスト
Safari 向けの -webkit- 併記が必要なこと
ぼかしが効かない環境でも読めるようにしてほしいこと

たとえば「カラフルなグラデーション背景の上に、すりガラス風のカードを1枚重ねて。白文字が読めるよう背景の不透明度は高めにし、-webkit-backdrop-filter も併記して。backdrop-filter が使えない環境でも文字が読める不透明度にして」と伝えると、実用に耐えるものになる。

生成後に確認したいのは別の背景に置き換えたときの読みやすさである。AIはサンプル背景に合わせて色を決めるため、本番の写真に差し替えると文字が沈むことがある。明るい背景と暗い背景の両方で見比べてほしい。

よくある勘違い

filter と backdrop-filter は同じ？

対象がまったく違う。filter: blur() は自分自身をぼかすので、カードの中の文字までぼやけて読めなくなる。背後だけをぼかしたいときは backdrop-filter を使う。この取り違えは初心者が最もつまずく点である。

半透明にすればグラスモーフィズム？

半透明だけでは、背後の形がそのまま透けて見えるため、ただ薄いパネルが乗っているだけになる。すりガラスの質感は「透けている」と「形が判別できない」が同時に成り立つことで生まれる。ぼかしと組み合わせて初めて成立する。

どんな画面にも使える万能な装飾？

背後に透けるものがなければ効果は出ない。また、文字を読ませることが主目的の画面（記事本文、フォーム、表など）では、読みにくさのほうが目立つ。写真の上に重ねるパネルや、装飾性の高い一画面など、使いどころを絞る表現である。

対応していないブラウザでも見た目は同じ？

backdrop-filter が効かない環境では、ぼかしなしの半透明パネルとして表示される。不透明度を低く設定していると、背後の模様がそのまま透けて文字が読めなくなる。効かない場合を想定した不透明度にしておくべきである。

まとめ

グラスモーフィズムは、半透明・背後のぼかし・明るい境界線・柔らかい影の4点ですりガラスの質感を作る手法である
中心となるのは backdrop-filter。自分自身をぼかす filter とは対象が異なる
背後に写真やグラデーションがないと効果が出ない。単色背景では見た目が変わらない
文字の読みやすさを損ねやすいため、コントラストの確保を装飾より優先する
描画が重い効果なので、枚数を絞り、実機で動作を確認する

情報ソース

より詳しくAIに聞いてみよう

グラスモーフィズムとは何かを、成立に必要な要素とあわせて初心者向けに説明してください。
filter と backdrop-filter の違いを、それぞれの使いどころつきで整理してください。
グラスモーフィズムで文字が読みにくくなる原因と、読みやすさを保つ具体的な方法を教えてください。
backdrop-filter が性能に与える影響と、重くならない使い方を教えてください。
AIにグラスモーフィズムのCSSを生成してもらうとき、背景を差し替えても読める配色にするにはどう指示すればよいですか。