もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

2022年を象徴するデザインスタイルであり、今なおモダンなUIのアクセントとして生き残っている「グラスモーフィズム（Glassmorphism）」。
一言で言えば、「すりガラス（加工されたガラス）」のような質感をデジタル画面上で再現する手法です。なぜこれほどまでに流行し、どのような仕組みで成り立っているのか、解説しつつ、ジェネレータの紹介もします。

グラスモーフィズムを構成する「4つの要素」

単に背景を半透明にするだけではグラスモーフィズムにはなりません。以下の4つの視覚的要素が組み合わさることで、あの独特な「高級感」と「奥行き」が生まれます。

1. 透明度と背景のぼかし（Background Blur）:
   パネルの背後にある要素が、すりガラスを通したようにぼやけて見える状態。
2. 階層構造（Multi-layered Approach）:
   オブジェクトが宙に浮いているような、はっきりとしたレイヤー感。
3. 鮮やかな背景色（Vivid Colors）:
   ぼかし効果を際立たせるために、背後には彩度の高いグラデーションや複雑な形状を配置します。
4. 繊細な縁取り（Subtle Border）:
   ガラスの厚みを表現するために、パネルの縁に極細の白いライン（半透明）を引き、光の反射を再現します。

なぜ2022年に爆発的に流行したのか？

OSレベルでの採用

Appleが macOS Big Sur でシステム全体に採用し、Microsoftも Windows 11 のデザインシステム「Fluent Design」の主要要素（Mica素材など）として取り入れたことが最大の要因です。ユーザーが日常的に目にするOSがこのスタイルになったことで、ウェブデザインへの波及が加速しました。

ネオモーフィズム（Neumorphism）の弱点を克服

2020年頃に流行った「ネオモーフィズム（背景と一体化した凹凸デザイン）」は、見た目は美しいものの、ボタンの判別がしにくくアクセシビリティ（使いやすさ）に欠けるという致命的な弱点がありました。
グラスモーフィズムは、背景とのコントラストを保ちつつ立体感を出せるため、「美しさと使いやすさの両立」として選ばれたのです。

CSSで実装して再現

2022年当時、フロントエンドエンジニアの間で多用されたのがbackdrop-filterというプロパティです。

.glass-panel {
    background: rgba(255, 255, 255, 0.2); /* 半透明の白 */
    backdrop-filter: blur(10px);          /* 背後のぼかし */
    -webkit-backdrop-filter: blur(10px);  /* Safari対応 */
    border: 1px solid rgba(255, 255, 255, 0.3); /* ガラスの縁 */
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

グラスモーフィズムを実装できるジェネレータ

カードやパネルにぴったりな透明度のある背景のぼかしを使ったグラスモーフィズムを実装するコードを生成できるジェネレーターを紹介します。
このGlass Morphism Generatorでは、磨りガラスの透明度やぼかし具合を確認しながら、コードを生成できます。
使い方は簡単、下部のスライダーで値を調整するだけです。カード上の画像やテキストは表示・非表示にできます。また、背景画像を自分で用意して変更もできます。

https://glassgenerator.netlify.app