iOS風「Liquid Glass」をWebで再現する方法

CSSで作るガラスモーフィズムUI

iOS風の「Liquid Glass」は、ガラスモーフィズムとも呼ばれるデザインです。CSSのblurや透明感で背景を透かし、独特の“とろみ”を生み出します。Webデザイン初心者でも取り入れやすく、人気が高まっています。

Liquid Glassの作り方は大きく3通り。目的に合った方法を選べます。

この記事では、3通りのうち最も手軽なPure CSSの方法を解説します。学習中でもすぐ試せるよう、コピーしてそのまま動くコードを用意しました。UI/UXを改善したい方、iOS風デザインを手早く取り入れたい方は、まずは基本的な再現方法から見ていきましょう。

Liquid GlassをWebで再現する完成コード

以下のコードをそのままコピーすれば、ガラスモーフィズム UIがブラウザ上で動作します。
背景はスクロールして流れ、中央のガラスは固定されるため、CSS ガラス効果の透明感と屈折感が直感的に体験できます。

上のデモを再現するHTMLとCSSは以下のとおりです。そのままコピーして使えます。

<div class="bg">
  <div class="liquid-glass">
    <h2>Liquid Glass</h2>
    <p>Pure CSSだけで実現するiOS風ガラスモーフィズム。backdrop-filterとbox-shadowの組み合わせで透明感を表現します。</p>
    <a href="#" class="liquid-glass-btn">詳しく見る</a>
  </div>
</div>

.bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=1200") center / cover fixed;
}

.liquid-glass {
  width: 380px;
  padding: 40px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
  text-align: center;
}

.liquid-glass h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.liquid-glass p {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.85;
}

.liquid-glass-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 32px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s ease;
}

.liquid-glass-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

実装のポイント

• backdrop-filter: blur() saturate()
  背景をぼかしつつ彩度を上げ、ガラスの透明感を生み出す中心プロパティです。数値を大きくするほど”とろみ”が強まります。
• background: rgba(…)
  白の透明度で膜の濃さを調整します。明るい背景は薄め、暗い背景は濃いめにすると見やすくなります。
• border-radius / box-shadow
  角丸でiOS風の柔らかさを出し、内側のハイライト（inset）でガラスのフチの光沢を表現します。
• 背景選び
  単色よりも写真や模様のある背景の方が、ぼかしによるガラス効果が分かりやすくなります。

この実装は、ボタンデザインで特に効果的です。

Tailwind CSSでLiquid Glassを実装する

Tailwind CSSを使っているプロジェクトなら、ユーティリティクラスだけでLiquid Glass風のUIが作れます。

Tailwind版のポイント

• backdrop-blur-xl = backdrop-filter: blur(24px)
• backdrop-saturate-[180%] = 任意値指定（JIT mode）
• bg-white/10 = rgba(255,255,255,0.1) の省略記法
• shadow-[…] = カスタムbox-shadowを任意値で指定

Tailwindを使い慣れている方なら、このパターンを覚えておけば数分でLiquid Glass UIを追加できます。

Pure CSS版のポイント

• backdrop-filter: blur(20px) saturate(180%) が核。blurで背景をぼかし、saturateで色の鮮やかさを保つ
• inset box-shadow で上部にハイライトを入れると、ガラスの「厚み」が出る
• border: 1px solid rgba(255,255,255,0.3) で輪郭を出し、背景から浮かせる
• -webkit-backdrop-filter はSafari対応に必須。2025年時点でもprefixが必要

ブラウザ対応状況（2025年）

主要ブラウザすべて対応済みです。

ガラスモーフィズムをWebに導入するメリット

• UI/UX改善
• シンプルなデザインに透明感を加えるだけで、洗練された印象に。
• フロントエンド実装の学習に最適
• HTMLとCSSの基本が分かれば簡単に導入できるので、Webデザイン初心者の練習にも向いています。
• トレンド対応
• iOS風UIはガラスモーフィズムの代表例。サイトに取り入れるだけで“今っぽさ”を出せます。

Apple iOS 26「Liquid Glass」とWeb実装の違い

2025年6月のWWDC25で発表されたiOS 26（旧iOS 19）では、UIデザイン言語として「Liquid Glass」が正式採用されました。 WebでのLiquid Glass実装を理解するために、Apple公式のデザインとの違いを押さえておきましょう。

iOS 26のLiquid Glassの特徴

• 動的な屈折効果： 背景の色や明度に応じて、ガラスの見え方がリアルタイムに変化する
• 深度の表現： 要素が重なったとき、手前と奥でblurの強さが自動的に変わる
• 光の反射： 端末の傾きに連動したハイライト表現（ジャイロスコープ連動）

Web実装との差分

注意点（UI的な観点）

実際のサイトで多用すると、背景の揺れやblur効果で酔いやすくなることがあります。特にCodePenなどのデモで複数配置すると視覚的に負担が大きいので、ワンポイントで使うのが最適です。

パフォーマンスの注意点

backdrop-filterはGPUアクセラレーションが効きますが、乱用するとモバイル端末でカクつく原因になります。

実測の目安

• ガラス要素1〜3個：ほぼ影響なし
• ガラス要素5個以上を同時表示：古いiPhoneやAndroid端末でFPS低下
• スクロール中のblur再計算：will-changeプロパティで軽減可能

最適化のコツ

.liquid-glass {
  will-change: backdrop-filter;  /* GPUレイヤーを事前に確保 */
  contain: layout style paint;    /* レイアウト再計算の範囲を限定 */
}

実案件では、Liquid Glass表現はページ内1〜2箇所のアクセント使いが現実的です。ヒーローセクションのカードやCTAボタンなど、目立たせたいポイントに絞って使いましょう。

ガラスモーフィズムとニューモーフィズムの違い

ガラスモーフィズム（Glassmorphism）とニューモーフィズム（Neumorphism）は、どちらも2020年代のWebデザイントレンドですが、表現方法とユースケースが異なります。

ガラスモーフィズムは「透明感と奥行き」、ニューモーフィズムは「物理的な質感」を表現するデザインパターンです。iOS 26のLiquid Glassはガラスモーフィズムの延長線上にあり、現在のUIトレンドではガラスモーフィズムがより広く採用されています。

backdrop-filterが効かないときの対処法

backdrop-filterを使ったガラスモーフィズムが期待通りに表示されない場合、以下のポイントを確認しましょう。

背景が透過しない場合

• 背景色がrgba()でない： background: #fffなど不透明色を指定するとblurが見えなくなる。background: rgba(255,255,255,0.1)のように透明度を設定する
• 親要素にoverflow: hiddenがない： ガラス要素が親からはみ出す場合、blurの描画範囲がずれることがある
• z-indexの競合： backdrop-filterは要素のスタッキングコンテキストに依存するため、z-indexの指定を確認する

Safariで表示されない場合

Safariでは-webkit-プレフィックスが必須です。以下のようにベンダープレフィックス付きのプロパティを併記してください。

.glass-card {
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.1);
}

フォールバック対応

backdrop-filterに非対応の環境では、@supportsクエリで代替スタイルを用意できます。

.glass-card {
  background: rgba(255, 255, 255, 0.8);
}

@supports (backdrop-filter: blur(20px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
  }
}

よくある質問（FAQ）

Q. ガラスモーフィズム（Glassmorphism）とは何ですか？

ガラスモーフィズムとは、CSSのbackdrop-filterプロパティを使って背景をぼかし、半透明のガラスのような質感を表現するUIデザイン手法です。Appleが2020年のmacOS Big Surで本格的に採用し、2025年のiOS 26では「Liquid Glass」として全面的にUI言語化されました。

Q. backdrop-filterとfilterの違いは何ですか？

filterは要素自体（テキストや画像を含む内容全体）にエフェクトを適用します。一方backdrop-filterは要素の背面にあるコンテンツだけにエフェクトを適用します。ガラスモーフィズムでは、要素内のテキストはクリアに保ちつつ背景だけをぼかしたいため、backdrop-filterを使います。

Q. ガラスモーフィズムはアクセシビリティに問題がありますか？

背景が動的に変わる場合、テキストのコントラスト比がWCAG基準（4.5:1以上）を下回るリスクがあります。対策としては、ガラス要素の背景色に十分な不透明度（rgba(0,0,0,0.4)以上など）を設定するか、テキストにtext-shadowを追加してコントラストを確保する方法が有効です。

Q. ガラスモーフィズムをダークモードに対応させるにはどうすればよいですか？

ダークモードでは背景色をrgba(0,0,0,0.2)程度に変更し、ボーダー色もrgba(255,255,255,0.1)に調整します。prefers-color-schemeメディアクエリを使えば、ライトモードとダークモードで自動的にガラスの色味を切り替えられます。

Q. ガラスモーフィズムはSEOやページ速度に影響しますか？

backdrop-filterはGPU処理のためCPUへの負荷は小さく、Lighthouseスコアへの直接的な影響はほぼありません。ただし、ガラス要素を大量に配置するとComposite Layers（合成レイヤー）が増え、モバイル端末でフレームレートが低下する可能性があります。ページ内1〜3箇所に抑えるのが実用的な目安です。

まとめ

• Pure CSSだけで基本は実装できる
• Tailwindなら数行で即導入
• 本格的な屈折はWebGLが向く
• iOS 26との差は工夫で近づけられる
• アクセントは1〜2箇所に絞る

どの方法が合うかは、目的から選べます。

関連記事

CSSキーフレームアニメーション入門

clip-pathアニメーションの作り方

スクロールアニメーション比較（AOS・GSAP・IO）