グラスモーフィズム デザインインスピレーション
ガラスの透明感と奥行き -- iOS / macOS のUIデザイン言語を Web に持ち込んだのがグラスモーフィズムだ。背景のグラデーションメッシュが「世界」を形成し、UIコンポーネントは半透明のガラスパネルとして浮遊する。backdrop-filter: blur() というたった1つのCSS プロパティが、フラットデザインに「物理的な深度」を復活させた。このページでは、グラスモーフィズムの実践的なデザインシステムを、パフォーマンス注意事項とともに解説する。
このページの使い方
各セクションにインラインHTMLのビジュアル例を配置しています。グラデーション背景上でのガラス効果を視覚的に体感してください。なお、HTMLプレビューでは backdrop-filter が効かないため、半透明背景色で代替表現しています。
デザイン哲学 -- ガラス越しの世界
すべてのUIは、美しい世界の上に浮かぶガラスだ。
従来のUIデザインでは、背景は「何もない空間」だった。グラスモーフィズムはこの前提を覆す。背景こそが世界であり、UIはその世界を「覗く窓」である。ガラスパネルの向こうに色が透けて見えることで、ユーザーは物理的な「層」を感じ取る。
iOS / macOS から学ぶガラスの美学
Apple のデザインチームが UIBlurEffect で確立したガラスの原則:
- 背景が主役: ガラスは背景を「隠す」のではなく「ぼかして見せる」
- 白のボーダー: ガラスの縁は薄い白の半透明ラインで表現する
- 飽和度の上昇:
saturate(180%)で背景色を鮮やかにし、ガラスの「レンズ効果」を再現 - 内側のグロウ: ガラスパネルの内側に微妙な光を置き、光の屈折を暗示する
以下が、この哲学を体現したグラスモーフィズムUIのプレビューである:
カラーパレット -- グラデーションメッシュとガラス層
背景グラデーション
背景はフラットな単色ではなく、グラデーションメッシュでなければならない。これがガラスの「透け」を生む前提条件だ。
Gradient Mesh Background
ガラス層の透明度階層
Glass Opacity Hierarchy
Far
Secondary
Primary
Elevated
Active
| Token | 値 | 役割 |
|---|---|---|
| gradient-start | #667eea | グラデーション始点 |
| gradient-mid | #764ba2 | 中間点 |
| gradient-end | #f093fb | 終点 |
| glass-primary | rgba(255,255,255,0.15) | メインパネル |
| glass-secondary | rgba(255,255,255,0.10) | サイドバー |
| glass-elevated | rgba(255,255,255,0.20) | モーダル |
| border-glass | 1px solid rgba(255,255,255,0.18) | ガラスの縁 |
| glow-inner | inset 0 0 30px rgba(255,255,255,0.05) | 内側グロウ |
コンポーネント -- 浮遊するガラスの部品
ボタン
バッジ
入力欄
パフォーマンス -- ガラスの代償
パフォーマンス警告
backdrop-filter: blur() はGPU負荷が高いプロパティです。以下のルールを必ず守ってください。
- 1画面に最大10個: backdrop-filter を持つ要素の上限
- blur値は20px以下: 40px以上はモバイルで顕著な fps 低下
- ネストしたblurは禁止: ガラスの中にガラスを置くと効果が打ち消し合い、パフォーマンスだけ消費する
- Safari対応:
-webkit-backdrop-filterを必ず併記 - フォールバック:
@supports not (backdrop-filter: blur(1px))で半透明背景色にフォールバック
使い方ガイド
Stitch への投入方法
/Users/takehiro/Documents/WorkSpace/otani/Skills/create-design/templates/GLASSMORPHISM.mdをプロジェクトのDESIGN.mdにコピー- グラデーションカラーをブランドに合わせて変更
- Stitch に「この DESIGN.md に従ってダッシュボードを作成してください」と指示
適したプロジェクト
- SaaS ダッシュボード（視覚的なインパクト重視）
- LP（ヒーローセクション）
- モバイルアプリ風の Web アプリ
- 音楽・動画プレーヤーUI
- 天気アプリのようなビジュアル系ツール
不向きなプロジェクト
- テキスト主体のドキュメントサイト
- 情報密度の高い管理画面（要素数が多すぎる）
- 低スペック端末をターゲットとするサービス
- アクセシビリティが最優先のサービス（コントラスト比の確保が難しい）
可読性の確保
ガラス背景上のテキストは、背景グラデーションの色によってコントラスト比が変動します。テキストは必ずガラスパネル上に配置し、rgba(255,255,255,0.80) 以上の白テキストを使用してください。