Liquid Glass デザイン完全ガイド - CSS実装からFigma制作まで

Liquid Glass デザイン完全ガイド - CSS実装からFigma制作まで

作成日:
更新日:
デザインCSSFigmaUILiquid GlassGlassmorphism

現在制作中の printemps.tokyo のホームページでは、話題の Liquid Glass デザインを採用することにしました。

調べてみると、これがなかなか奥深い。 今回は、Liquid Glass の考え方から、CSSでの実装、Figmaでの制作方法までをまとめます。

Liquid Glass とは

Liquid Glass は、ガラスの透明感に「液体っぽい歪み・光の流れ・反射」を足した、Apple発の新しいUIスタイルです。

2025年6月にAppleが発表した新しいソフトウェアデザインで、iOS/macOSの次期バージョンで全面的に採用されています。

Glassmorphism との違い

Glassmorphism（ガラスモーフィズム）は2020年頃から流行したスタイルで、「すりガラスの板」のようなUIを表現します。

一方、Liquid Glass は「とろっとしたガラスのしずく・レンズ」をイメージすると分かりやすいです。

特徴GlassmorphismLiquid Glass
イメージすりガラスの板液体のしずく・レンズ
動き静的動きや光沢が強い
光の表現控えめ積極的にハイライト
歪みなしわずかな歪みを加える

デザインの考え方

Liquid Glass を構成する基本要素は以下の5つです：

  1. 半透明 — 背景が透けて見える
  2. 背景のぼかし — フロストガラスのような効果
  3. 光のハイライト — 光が当たっている部分の表現
  4. わずかな歪み — 液体っぽさを出す
  5. 柔らかい影 — 浮遊感と立体感

効果的な使いどころ

Liquid Glass は、以下のような「浮いたパネル」に使うと効果的です：

  • カード
  • ツールバー
  • ボタン
  • モーダル
  • ナビゲーションバー

また、背景は情報量があるものと相性が良いです。写真やグラデーション、カラフルなイラストの上に配置することで、ガラス越しに背景が透ける美しさが活きます。

CSSでの実装

基本的なLiquid Glass カード

iOS 26 スタイルの Liquid Glass カードを作ってみましょう。ポイントは、強めのblurと複数レイヤーのグラデーションです。

CSS
.liquid-glass-card {
  /* 多層グラデーション背景 */
  background: 
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.15) 100%
    );
  
  /* 強めのblur + 彩度アップ */
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  
  /* 繊細なボーダー */
  border: 0.5px solid rgba(255, 255, 255, 0.35);
  
  /* 大きめの角丸 */
  border-radius: 28px;
  
  /* 複数の影を重ねる */
  box-shadow: 
    0 0 0 0.5px rgba(255, 255, 255, 0.4),  /* 外側の光の縁 */
    0 2px 8px rgba(0, 0, 0, 0.08),          /* ソフトな影 */
    0 8px 24px rgba(0, 0, 0, 0.12),         /* 深い影 */
    inset 0 1px 1px rgba(255, 255, 255, 0.5); /* 内側ハイライト */
}

Liquid Glass

iOS 26で採用された新しいデザインシステム。背景が美しく透けて見えます。

各プロパティの解説

多層グラデーション背景

CSS
/* 単色よりもグラデーションで立体感を */
background: 
  linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.15) 100%
  );

iOS 26 では単色の半透明ではなく、グラデーションを使って光の反射を表現しています。

背景ぼかし + 彩度

CSS
backdrop-filter: blur(40px) saturate(180%);
-webkit-backdrop-filter: blur(40px) saturate(180%);

iOS 26 では 40px程度の強めのblur と、saturate() を組み合わせて背景の色を鮮やかに保ちます。

繊細なボーダーと影

CSS
/* 0.5pxの繊細なボーダー */
border: 0.5px solid rgba(255, 255, 255, 0.35);
 
/* 多層シャドウで深みを出す */
box-shadow: 
  0 0 0 0.5px rgba(255, 255, 255, 0.4),   /* 光の縁 */
  0 2px 8px rgba(0, 0, 0, 0.08),           /* ソフトシャドウ */
  0 8px 24px rgba(0, 0, 0, 0.12),          /* 深いシャドウ */
  inset 0 1px 1px rgba(255, 255, 255, 0.5); /* 内側ハイライト */

細いボーダーと複数の影を重ねることで、浮遊感のある立体的なガラスを表現します。

液体感を出すテクニック

オーロラ背景アニメーション

Liquid Glass の真価は、動く背景との組み合わせで発揮されます。背景にオーロラのようなグラデーションを動かすことで、ガラスの美しさが際立ちます。

CSS
/* 背景コンテナ */
.aurora-background {
  background: 
    radial-gradient(ellipse 80% 60% at 50% 0%, 
      rgba(120, 180, 255, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 80% 100%, 
      rgba(255, 120, 180, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 20% 80%, 
      rgba(180, 255, 200, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
}

JavaScript で radial-gradient の位置をアニメーションさせると、オーロラが揺らめくような効果が生まれます。

✨

Aurora Animation

背景がゆっくりと動き、オーロラのような効果を生み出します

SVGフィルタで歪みを加える

より本格的な液体感を出すには、SVGフィルタを使います：

HTML
<svg style="display: none;">
  <defs>
    <filter id="liquid-distortion">
      <feTurbulence 
        type="fractalNoise" 
        baseFrequency="0.01" 
        numOctaves="3" 
        result="noise" 
      />
      <feDisplacementMap 
        in="SourceGraphic" 
        in2="noise" 
        scale="5" 
        xChannelSelector="R" 
        yChannelSelector="G" 
      />
    </filter>
  </defs>
</svg>
CSS
.liquid-glass-card {
  filter: url(#liquid-distortion);
}

feTurbulence でノイズを生成し、feDisplacementMap で軽い歪みを加えています。

iOS 26 コントロールセンター風デモ

iOS 26 の Control Center を再現してみましょう。グリッドレイアウトとスライダーを組み合わせた実用的な例です。

CSS
/* グリッドコンテナ */
.control-center {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 340px;
}
 
/* 各コントロールカード */
.control-card {
  background: 
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.25) 0%, 
      rgba(255, 255, 255, 0.08) 100%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 0.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  padding: 20px;
}
 
/* アクティブ状態（Wi-Fiオンなど） */
.control-card.active {
  background: 
    linear-gradient(135deg, 
      rgba(0, 122, 255, 0.6) 0%, 
      rgba(0, 122, 255, 0.3) 100%),
    rgba(255, 255, 255, 0.1);
}
 
/* スライダー */
.glass-slider {
  height: 32px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}
 
.glass-slider-fill {
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0.4), 
    rgba(255, 255, 255, 0.6));
  border-radius: 10px;
}

ミュージックプレイヤー風デモ

ダークテーマでの Liquid Glass の美しさを、ミュージックプレイヤーUIで表現します。

CSS
/* ダークテーマ背景 */
.dark-aurora {
  background: 
    radial-gradient(ellipse 100% 80% at 50% 120%, 
      rgba(120, 80, 200, 0.4) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 20%, 
      rgba(255, 100, 150, 0.25) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a12 0%, #12121f 100%);
}
 
/* 円形ボタン */
.play-button {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

Liquid Dreams

Glass Orchestra

1:243:45

Figmaでの作り方

レイヤー構成

Figma で Liquid Glass を再現するには、レイヤーとエフェクトを重ねていきます。

1. ベースフレームの作成

  1. 角丸を大きめ（24px〜32px）にしたフレームを作成
  2. 「クリップ内容（Clip content）」をオンにする

2. 塗りの設定

複数の塗りを重ねます：

Layer 1: 白 (#FFFFFF), 不透明度 20%
Layer 2: アクセントカラー, 不透明度 10%

3. ぼかし効果

  • Background blur: 16〜24px

これで背景がぼやける効果が出ます。

4. 内側の光と影（Inner Shadow）

複数のインナーシャドウを設定：

ハイライト（光が当たっている縁）

色: 白 (#FFFFFF)
X: 0, Y: 1
Blur: 2
Spread: 0
不透明度: 40%

陰影（厚みと立体感）

色: 黒 (#000000)
X: 0, Y: -2
Blur: 8
Spread: 0
不透明度: 15%

5. ハイライト形状の追加

「とろっとした光」を表現するには：

  1. 楕円または波打った形のシェイプを作成
  2. 白のグラデーション（上から下へフェードアウト）を適用
  3. Layer blur を 8〜16px に設定
  4. 不透明度を 20〜40% に下げる
  5. カードの上部に配置

Figmaプラグイン・素材

Liquid Glass プラグイン

Figma コミュニティで「Liquid Glass」プラグインが公開されています。

主な機能：

  • 任意のコンポーネントに多層のガラス効果を自動適用
  • Light / Dark のプリセット
  • タブバー・カード・ボタンなどのコンポーネント付き

UIキット

Apple風の Liquid Glass UI キットもコミュニティで配布されています：

  • タブバー
  • カード
  • ボタン
  • ウィジェット
  • モーダル

これらをコピーして自分のデザインに組み込み、色やぼかし値を調整していくのが効率的です。

実装時の注意点

パフォーマンス

backdrop-filter は GPU を使用するため、以下の点に注意：

  • 多用しすぎない（同時に表示するガラス要素は3〜5個程度に）
  • モバイルでは blur の値を控えめに（20〜30px程度）
  • saturate() との組み合わせは負荷が高め
  • アニメーションと組み合わせる場合は will-change を検討
CSS
.liquid-glass-card {
  will-change: transform;
  /* transform でアニメーションさせる場合に有効 */
}

ブラウザ対応

backdrop-filter の対応状況：

  • Chrome: 76+
  • Safari: 9+（-webkit- prefix必要）
  • Firefox: 103+
  • Edge: 79+

IE11 は非対応ですが、2026年現在はほぼ気にする必要はありません。念のためフォールバックを用意する場合：

CSS
.liquid-glass-card {
  /* フォールバック：半透明背景のみ */
  background: rgba(30, 30, 50, 0.85);
}
 
@supports (backdrop-filter: blur(40px)) {
  .liquid-glass-card {
    background: 
      linear-gradient(135deg, 
        rgba(255, 255, 255, 0.25) 0%, 
        rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(40px) saturate(180%);
  }
}

アクセシビリティ

  • テキストのコントラスト比に注意（背景が透けるため読みにくくなりがち）
  • 重要なコンテンツには十分な不透明度を確保
  • 動きに敏感なユーザーへの配慮（prefers-reduced-motion）
CSS
@media (prefers-reduced-motion: reduce) {
  .liquid-glass-card {
    animation: none;
  }
}

まとめ

iOS 26 スタイルの Liquid Glass デザインのポイント：

  1. 考え方: 「とろっとしたガラスのしずく」をイメージ
  2. CSS実装: 多層グラデーション + 強めの blur(40px) + saturate(180%)
  3. 背景: オーロラ風のグラデーションアニメーションで背景を動かす
  4. ボーダー: 0.5px の繊細なボーダーで光の縁を表現
  5. 影: 複数の box-shadow を重ねて深みと浮遊感を出す
  6. Figma: プラグインを活用して効率的に制作

Apple が全面採用したことで、今後のトレンドになることは間違いありません。 printemps.tokyo でも、このスタイルを取り入れて、モダンで美しいサイトを目指します。

参考リンク