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

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

Webデザイン初心者でも取り入れやすい人気のスタイルに、iOS風のLiquid Glassデザインがあります。
ガラスモーフィズムとも呼ばれるこの表現は、CSSのガラス効果（blurや透明感）を活用して、背景を屈折させることで独特の“とろみ”を生み出します。

この記事では、フロントエンド実装の学習中でもすぐに試せるように、Svelte製のWeb Components「<sv-liquid-glass>」を使って簡単に再現する方法を解説します。

UI/UXを改善したい方や、iOS風デザインをWebサイトに取り入れたい方におすすめです。

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

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

See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.

実装のポイント

• contrast=”light”
  背景を透けさせて透明感を最大化。Webデザイン初心者でも理解しやすいシンプルなパラメータです。
• styles.roundness
  角丸の調整。大きくするとiOS風デザインらしい柔らかさが出ます。
• 背景選び
  単色よりも写真や模様のある背景の方が、CSS ガラス効果による屈折が分かりやすいです。

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

Tailwind CSS / Pure CSSだけでLiquid Glassを再現する

See the Pen Untitled by masakazuimai (@masakazuimai) on CodePen.

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ボタンなど、目立たせたいポイントに絞って使いましょう。

まとめ

• Pure CSS（backdrop-filter） だけで基本的なLiquid Glassは実装できる
• Tailwind CSS なら数行のユーティリティクラスで即導入可能
• Web Components（sv-liquid-glass） を使えば、より本格的な屈折表現が得られる
• iOS 26のLiquid Glass とWeb実装には差があるが、マウス追従ハイライトなどで近づけられる
• パフォーマンスを考慮し、ページ内1〜2箇所のアクセント使いがおすすめ

参考： Liqiud Glassifier

関連記事

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

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

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