CSSカスタムプロパティで実現するmacOS 26 Liquid Glassデザインシステム

はじめに

自社開発サービス myna.me の全73コンポーネントを「macOS 26 Liquid Glass」デザインシステムで統一しました。CSSカスタムプロパティと3層のガラス階層で、ダークモード/ライトモードの両対応を実現した方法を紹介します。

3層ガラス階層

ガラスモーフィズムで最も重要なのは、要素の階層に応じて透明度とブラーを変えることです。

/* Primary: カード、モーダル */
.glass-primary {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Secondary: セクション内の区切り */
.glass-secondary {
  background: rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Tertiary: インラインUI要素 */
.glass-tertiary {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

この3層を守ることで、UIの奥行き感が自然に生まれます。

CSSカスタムプロパティによるテーマ管理

テキストとサーフェスの色をCSS変数で管理します。

:root {
  /* テキスト階層 (--gp が最も濃い) */
  --gp:  rgba(15, 20, 25, 1);      /* 見出し */
  --g90: rgba(15, 20, 25, 0.9);    /* 本文 */
  --g60: rgba(55, 65, 80, 0.6);    /* 補助テキスト */
  --g30: rgba(55, 65, 80, 0.3);    /* プレースホルダー */

  /* サーフェス階層 */
  --gs10: rgba(255, 255, 255, 0.55); /* カード背景 */
  --gs6:  rgba(255, 255, 255, 0.30); /* セカンダリ背景 */
  --gs2:  rgba(255, 255, 255, 0.10); /* ボーダー */
}

@media (prefers-color-scheme: dark) {
  :root {
    --gp:  rgba(255, 255, 255, 1);
    --g90: rgba(255, 255, 255, 0.9);
    --g60: rgba(255, 255, 255, 0.6);
    --g30: rgba(255, 255, 255, 0.3);

    --gs10: rgba(255, 255, 255, 0.12);
    --gs6:  rgba(255, 255, 255, 0.06);
    --gs2:  rgba(255, 255, 255, 0.03);
  }
}

スペキュラーハイライト

ガラスの質感を高めるスペキュラー（鏡面反射）効果です。

.glass-specular::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
}

Firefoxフォールバック

backdrop-filter非対応のFirefoxでは、不透明な背景にフォールバックします。

@supports not (backdrop-filter: blur(1px)) {
  .glass-primary {
    background: rgba(245, 245, 250, 0.95);
  }
}

ライトモードのコントラスト問題

白背景に白いガラスカードを置くと視認性が落ちます。対策として、ライトモードではボーダーを黒ベース・テキストを濃い黒に設定しました。

/* ライトモード: 黒ベースのボーダー */
.glass-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* テキスト: font-weight 450で視認性向上 */
body {
  font-weight: 450;
  color: var(--gp);
}

フォント設定

macOSのシステムフォントを採用し、日本語はヒラギノ角ゴシックで統一します。

body {
  font-family: -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "SF Pro Text",
    "Hiragino Sans", sans-serif;
  letter-spacing: -0.01em;
}

まとめ

macOS 26 Liquid Glassデザインシステムのポイントは以下の通りです。

1. 3層ガラス階層: primary/secondary/tertiary で奥行きを表現
2. CSSカスタムプロパティ: テーマ切替をメディアクエリ1つで完結
3. スペキュラーハイライト: 擬似要素1つでガラスの質感を追加
4. Firefoxフォールバック: @supports not で非対応ブラウザに対応
5. ライトモード対策: 黒ベースボーダー + font-weight 450

このシステムで73コンポーネントを統一した結果、ダーク/ライト両モードで一貫したガラスの質感を実現できました。