Liquid Glass デザイン完全ガイド - CSS実装からFigma制作まで | プランタン東京

現在制作中の 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 は「とろっとしたガラスのしずく・レンズ」をイメージすると分かりやすいです。

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

デザインの考え方

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

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

効果的な使いどころ

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

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

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

CSSでの実装

基本的なLiquid Glass カード

最低限のパラメータで Liquid Glass 風のカードを作ってみましょう。

.liquid-glass-card {
  /* 半透明背景 */
  background: rgba(255, 255, 255, 0.15);
  
  /* 背景ぼかし（Safari対応も含む） */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  
  /* 枠線（光の縁） */
  border: 1px solid rgba(255, 255, 255, 0.3);
  
  /* 角丸 */
  border-radius: 24px;
  
  /* 影（浮遊感 + 立体感） */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),           /* 外側の影 */
    inset 0 1px 0 rgba(255, 255, 255, 0.4),  /* 上部ハイライト */
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);       /* 下部の影 */
}

各プロパティの解説

半透明背景

background: rgba(255, 255, 255, 0.15);
/* または色付きガラス */
background: rgba(100, 150, 255, 0.2);

透明度は 0.15〜0.3 くらいが一般的。低すぎると存在感がなくなり、高すぎるとガラス感が失われます。

背景ぼかし

backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px); /* Safari対応 */

ぼかし量は 10px〜20px が目安。大きくするほどフロストガラス感が増しますが、パフォーマンスに影響するので注意。

ハイライトと影の重ね技

box-shadow: 
  /* 外側の影（浮遊感） */
  0 8px 32px rgba(0, 0, 0, 0.2),
  /* 内側上部のハイライト（光が当たった縁） */
  inset 0 1px 0 rgba(255, 255, 255, 0.4),
  /* 内側下部の影（厚み） */
  inset 0 -1px 0 rgba(0, 0, 0, 0.1);

inset シャドウを複数重ねることで、光と影の両方を表現します。

液体感を出すテクニック

グラデーションアニメーション

.liquid-glass-card {
  background: 
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.2) 100%
    ),
    rgba(255, 255, 255, 0.15);
  background-size: 200% 200%;
  animation: liquid-flow 8s ease infinite;
}

@keyframes liquid-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

グラデーションをゆっくりアニメーションさせることで、光が流れているような効果が出ます。

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

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

<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>

.liquid-glass-card {
  filter: url(#liquid-distortion);
}

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

完成版サンプル

<div class="liquid-glass-container">
  <div class="liquid-glass-card">
    <h2>Liquid Glass Card</h2>
    <p>背景が透けて見える美しいカード</p>
    <button class="liquid-glass-button">詳しく見る</button>
  </div>
</div>

.liquid-glass-container {
  /* 背景は情報量があるものを */
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.liquid-glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  color: white;
  max-width: 400px;
}

.liquid-glass-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 12px 24px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.liquid-glass-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

Figmaでの作り方

レイヤー構成

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

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

角丸を大きめ（24px〜32px）にしたフレームを作成
「クリップ内容（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. ハイライト形状の追加

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

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

Figmaプラグイン・素材

Liquid Glass プラグイン

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

主な機能：

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

UIキット

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

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

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

実装時の注意点

パフォーマンス

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

多用しすぎない（同時に表示するガラス要素は3〜5個程度に）
モバイルでは blur の値を控えめに
アニメーションと組み合わせる場合は will-change を検討

.liquid-glass-card {
  will-change: transform, backdrop-filter;
}

ブラウザ対応

backdrop-filter の対応状況：

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

IE11 は非対応なので、フォールバックを用意しておくと安心：

.liquid-glass-card {
  /* フォールバック */
  background: rgba(255, 255, 255, 0.8);
}

@supports (backdrop-filter: blur(16px)) {
  .liquid-glass-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
  }
}

アクセシビリティ

テキストのコントラスト比に注意（背景が透けるため読みにくくなりがち）
重要なコンテンツには十分な不透明度を確保
動きに敏感なユーザーへの配慮（prefers-reduced-motion）

@media (prefers-reduced-motion: reduce) {
  .liquid-glass-card {
    animation: none;
  }
}

まとめ

Liquid Glass デザインのポイント：

考え方: 「とろっとしたガラスのしずく」をイメージ
CSS実装: 半透明 + backdrop-filter + 複数の box-shadow
液体感: グラデーションアニメーション、SVGフィルタで歪み
Figma: レイヤー + ぼかし + インナーシャドウの組み合わせ
注意点: パフォーマンス、ブラウザ対応、アクセシビリティ

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