グラスモーフィズムとは？特徴・配色・CSSスニペット・Webデザインへの活用を解説

グラスモーフィズムは、すりガラス（フロスト・ガラス）を模した半透明のパネルを多層に重ねることで、奥行き（Z軸方向の階層構造）を表現するUIデザインスタイルです。2020年、UXデザイナーのMichal Malewicz氏がUXデザインメディア「UX Design Medium（UXDesign.cc）」で発表した記事の中で命名・体系化し、同時期のApple macOS Big SurのUI刷新をきっかけに世界的な注目を浴びました。

その後、Microsoft Windows 11の「Fluent Design System」（Mica・Acrylicマテリアル）への採用によってさらに普及が加速。鮮やかなグラデーション背景に半透明ホワイトのカードを重ねる構成は、フラットデザインが失った「奥行き・立体感」を重厚なシャドウに頼らず光学的な透過で表現するという点で革新的でした。

2022年〜2023年頃には、過度な多用によるコントラスト不足・アクセシビリティ（WCAG基準）の問題が顕在化し、全面適用型の使い方は減少。現在はダッシュボードのカードUIやOSのドック・通知センターなど、UIコンポーネント単位での「アクセント効果」として再評価されています。フラットデザインとニューモーフィズムの欠点を補う「Z軸表現の手法」として、デジタルデザインのスタンダードに定着しています。

• 色鮮やかなカラフルグラデーションの背景と、不透明度10〜40%の半透明ホワイト（またはダーク）の前面パネルの組み合わせ
• 形角丸（Rounded Corners）が多用される。ガラスの境界を強調する1px程度の極細いシームレスなボーダー（枠線）で囲まれる
• 構図マルチレイヤー（多層構造）。オブジェクトが宙に浮いているような奥行き（Z軸）を感じさせるレイアウト
• 書体視認性の高いクリーンでモダンなサンセリフ体（SF Pro、Inter、Robotoなど）。半透明の背景上でも埋もれない太めのウェイト
• テクスチャ背景のぼかし（Background Blur / フリーズドガラス効果）。表面にはかすかな光沢感や、場合によってはノイズ（粒子感）が加えられる
• 光すりガラス越しに透過・拡散する背後オブジェクトの輪郭ぼかしと、前面パネルの微細な光の反射

Glassmorphism: Simple Card UI

Glassmorphism login Form Tutorial in html css

• Web/OSApple macOS Big Surで導入されたコントロールセンター・Dock・通知センター。Appleが全OS横断でガラス質感UIを標準採用したことで、スタイルが一気に世界標準として認知された
• Web/OSMicrosoft Windows 11「Fluent Design System」のMica・Acrylicマテリアル。OS全体のウィンドウ・サイドバー・スタートメニューに採用
• WebStripe公式サイトの一部プロダクト紹介セクション。グラデーション背景にガラス質感のカードを重ねた洗練されたビジュアル表現
• ゲームHoYoverse「ゼンレスゾーンゼロ（Zenless Zone Zero）」のゲーム内メニューUI。近未来・サイバーパンク調のHUDデザインにグラスモーフィズムを効果的に取り入れている

このスタイルのビジュアルをAIで生成するためのプロンプトです。英語版はMidjourney・Stable Diffusion向け、日本語版はGemini・Adobe Fireflyで使いやすい形式になっています。そのままコピーしてお使いください。

英語プロンプト

日本語プロンプト

グラスモーフィズムはSaaS・ITプロダクトのダッシュボード、クリエイティブ系ポートフォリオ、近未来テック系コーポレートサイトと相性の良いスタイルです。画面全体に適用すると背景とテキストのコントラスト比が低下し、アクセシビリティ（WCAG基準）を満たしにくくなるため、モーダルウィンドウ・カードUI・ナビゲーションバーなどコンポーネント単位に絞った使用が鉄則です。組み合わせるならフラットデザインやサイバーパンクとの親和性が高いです。