Liquid Glass（リキッドグラス）は、Appleが2025年6月のWWDC25で発表したUIの素材（デザイン言語）です。背景をぼかすだけでなく屈折させ、光沢を返すガラスの質感をボタンやタブバーに与えます。2026年9月14日（米国時間）に配信されたiOS 27で見た目が調整され、同時に旧デザインへ退避する手段が、iOS 27以降のSDKを使ったビルドでは使えなくなりました。この記事では、Liquid Glassの仕組みとiOS 27での変更点、SwiftUI・UIKitでの書き方、既存アプリの移行で見直す箇所、CSS＋SVGで屈折を再現したときに実際に効くブラウザ、Electron・Windowsでの扱いまでを開発者向けに整理します。
まとめ：Liquid Glassの要点（2026年10月時点）
- 正体：Appleの各OS（26世代以降）に共通するガラス状の素材。HIGはコントロールとナビゲーション専用の「機能レイヤー」と位置づけ、本文や写真などのコンテンツには使わないよう求めています。
- iOS 27での変更：背後の情報をより強く拡散し、縁を暗く・ハイライトを明るくして可読性を上げました。設定には「ウルトラクリア」から「完全な色付き」まで選べるスライダが入り、採用済みのアプリには再コンパイルなしで反映されます。
- 旧デザインへの退避：Info.plistの
UIDesignRequiresCompatibilityは、iOS 27以降向けにビルドするとシステムに無視されます。Xcode 27で再ビルドした時点で新デザインになる前提で計画してください。 - Webでの再現：屈折には
backdrop-filterへSVGのfeDisplacementMapを渡す方法があり、今回の検証ではChromiumでのみ屈折が描画されました。FirefoxとWebKitは値を受け付けても画面はぼかしのみで、@supportsでは判別できません。 - 採用判断：ネイティブアプリではシステム標準の部品に任せ、独自要素への適用は最小限にします。Webでは文字を載せない小さなコントロールに限り、ぼかしだけでも成立する見た目を基準にします。
Liquid Glassとは：Appleが2025年に導入したUIの素材
屈折とスペキュラハイライトを持つ「素材」としての設計
Liquid Glassは2025年6月9日のWWDC25で発表されました。Appleは開発者向けの解説ページLiquid Glass（Apple Developer）で、ガラスの光学特性と流動性を組み合わせた動的な素材と説明しています。奥行きの表現はApple Vision ProのvisionOSから来ています。
単なる半透明の板と違うのは、背後のコンテンツを歪ませる（屈折させる）点と、周囲の光を映すスペキュラハイライト（鏡面の光沢）を持つ点です。隣り合うボタンが液体のようにくっつく動きも素材の一部で、SwiftUI・UIKit・AppKitの標準部品は最新のSDKでビルドするだけでこの見た目になります。
対応OSと対応機種
Liquid Glassは各OSの26世代で導入され、2026年9月の27世代に引き継がれています。
| プラットフォーム | 導入版 | 2026年10月時点の最新 |
|---|---|---|
| iPhone | iOS 26 | iOS 27.0.1（9月28日） |
| iPad | iPadOS 26 | iPadOS 27.0.1（9月28日） |
| Mac | macOS Tahoe 26 | macOS Golden Gate 27.0.1 |
| Apple Watch | watchOS 26 | watchOS 27.0.1 |
| Apple TV | tvOS 26 | tvOS 27（9月14日） |
iOS 27の対象機種はiOS 26と同じiPhone 11以降・iPhone SE（第2世代）以降です。Appleのセキュリティアップデート一覧では、iOS 26.7.1も27.0.1と同じ2026年9月28日（米国時間）に出ています。10月23日のiOS 27.1はiPhone Duo向けだけです。詳細はiOS 27はいつ配信？日本時間2026年9月15日のリリースと27.0.1の修正・対応機種・SDK破壊的変更で扱っています。
iOS 27での変更点：縁の暗さと外観スライダ
iOS 26は「透けすぎて読みにくい」という指摘を受け、26.1で「クリア／色合い調整」の2択を追加しました。iOS 27では素材そのものが変わっています。WWDC26のPlatforms State of the Unionでの説明は次のとおりです。
- 背後の複雑なコンテンツをより強く拡散し、縁に暗いエッジ、ハイライトにより明るいスペキュラを加えて奥行きと分離を強めた
- 設定に「ウルトラクリア」から「完全な色付き」まで連続で選べるスライダを追加（2択のトグルから置き換え）
- 浮いているバーの下へコンテンツが潜り込むと、上部に均一なツールバーが現れて文字を読める状態に保つ（標準のツールバーは自動、調整は既存のスクロールエッジ効果のAPI）
- MacとiPadのサイドバーが画面端まで広がり、サイドバー内のアイコンにアプリのアクセントカラーが戻った
- アプリアイコンの描画をシャープにし、Icon Composerで複数のガラス層と屈折を指定できるようにした
Appleは「Liquid Glassを採用済みのアプリは、再コンパイルしなくても今年のOS上でこれらの改善を受ける」と明言しています。iOS 27で見た目が変わったのはOS側の描画が変わったためで、独自に作ったガラス要素はiOS 26と27の両方の実機で確認し直す必要があります。
Glassmorphismとの違いとHIGが定める使いどころ
すりガラス（Glassmorphism）と屈折（Liquid Glass）
「ガラスUI」「グラスUI」（英語ではGlass UI）と呼ばれる表現の多くは、正確にはGlassmorphismです。CSSのbackdrop-filter: blur()で背景をぼかし、半透明の白を重ねてすりガラス風に見せる汎用の技法で、特定のOSに結びついた名前ではありません。
Liquid Glassは背景を歪ませ、縁に近いほど背後のものが引き伸ばされて見えます。「Liquid Glass＝Appleの各OSの素材」「Glassmorphism＝汎用の半透明UI技法」と区別するのが正しく、CSSのぼかしだけを指してLiquid Glassと呼ぶのは誤りです。
機能レイヤー限定とregular・clearの使い分け
AppleのHuman Interface Guidelines（Materials）は、Liquid Glassをタブバーやサイドバーなど「コントロールとナビゲーションのための機能レイヤー」と定め、コンテンツレイヤーには使わないよう求めています。例外は、スライダーやトグルのように操作している間だけガラスになる要素です。
同じ章で、2つのバリアントの使い分けも数字つきで示されています。
- regular：背景をぼかして明るさを調整し、文字の可読性を保つ。アラート、サイドバー、ポップオーバーなど文字の多い部品と、ほとんどのシステム部品はこちら
- clear：透明度が高く、写真や動画の上に浮かぶ部品向け。背景が明るい場合は不透明度35%の暗い減光レイヤーを下に敷くことを検討する（AVKitの標準再生コントロールのように自前の減光を持つ場合は不要）
SwiftUI・UIKitによるLiquid Glassの実装
glassEffectとGlassEffectContainerの書き方
SwiftUIではglassEffect(_:in:)モディファイアでビューにガラス素材を当てます。glassEffect(_:in:)の公式リファレンスによると、対応はiOS・iPadOS・Mac Catalyst・macOS・tvOS・watchOSの各26.0以降で、既定はregularバリアントとCapsule形状です。Glass構造体はregular・clear・identity（効果なしと同じ）の3種と、色を付けるtint(_:)、タッチに反応させるinteractive(_:)を持ちます。
複数のガラス要素はGlassEffectContainerで囲みます。これを省くと要素同士がくっついたり分かれたりする動きが出ません。状態の切り替えで同じ要素として変形させるにはglassEffectID(_:in:)を付け、離れた要素を1つの形にまとめたいときはglassEffectUnion(id:namespace:)を使います。目立たせたい単発のボタンはbuttonStyle(.glassProminent)で足ります。
import SwiftUI
struct ToolbarSample: View {
@Namespace private var glassNamespace
@State private var isExpanded = false
var body: some View {
GlassEffectContainer(spacing: 16) {
HStack(spacing: 16) {
Button {
withAnimation { isExpanded.toggle() }
} label: {
Image(systemName: "square.and.arrow.up")
.padding(12)
}
.glassEffect(.regular.tint(.blue).interactive())
.glassEffectID("share", in: glassNamespace)
if isExpanded {
Image(systemName: "trash")
.padding(12)
.glassEffect(.regular.interactive())
.glassEffectID("delete", in: glassNamespace)
}
}
}
}
}このコードはSwift 6.3.3・SDK 26.5でMac Catalyst（iOS 26.0相当）向けにswiftc -typecheckを通しています。この例は共有ボタンでゴミ箱アイコンの表示を切り替える構成です。結合・分離アニメーションの描画は、対象OSの実機で確認してください。コンテナのspacingを要素の間隔以上にすると、静止状態でも隣とつながって見えます。アイコンはSF Symbolsを使う前提の設計です（SF Symbolsとは｜最新版27の入手方法と一覧の探し方・SwiftUIでの使い方と商用利用の範囲）。
UIKit・AppKitで使うクラス
UIKitではUIGlassEffectをUIVisualEffectViewに渡し、複数の要素をまとめて変形させるときはUIGlassContainerEffectを使います（いずれもiOS・iPadOS・Mac Catalyst・tvOSの26.0以降）。ボタンはUIButton.Configurationのglass()とprominentGlass()で切り替えます。macOSのAppKitではNSGlassEffectViewとNSGlassEffectContainerView（macOS 26.0以降）が同じ役割です。
import UIKit
func makeGlassView() -> UIVisualEffectView {
let effect = UIGlassEffect(style: .regular)
effect.isInteractive = true
effect.tintColor = .systemBlue
return UIVisualEffectView(effect: effect)
}UIKitとSwiftUIの併用はUIKitとは？SwiftUIとの違いをコードで比較、iOS 27の変更点と併用の書き方にまとめています。
iOS 27 SDKで追加されたツールバー関連のAPI
AppleのSwiftUIの更新一覧では、素材のAPI（glassEffectやGlass）は2025年6月の欄にあり、2026年6月（iOS 27 SDK）の欄で増えたのはガラスのバーの振る舞いを決めるツールバー周りです。
toolbarMinimizationBehavior(_:for:)：スクロールに応じてツールバーをどう縮めるか（iOS 27.0以降）ToolbarOverflowMenu：アーカイブや削除などの二次操作を最初からオーバーフローメニューへ送るvisibilityPriority(_:)：幅が狭くなったときに残すツールバー項目の優先度topBarPinnedTrailing：上部バーの右端に固定する配置
ガラスのバーにボタンが詰まる問題を自前のレイアウトで回避していたなら、iOS 27以降をターゲットにする時点でこれらへ置き換えられます。Xcode 27の動作要件はXcode 27はいつリリースされた？正式版27A266aの動作要件とXcode 26からの移行点を参照してください。
既存アプリの移行：旧デザイン退避の期限と見直す箇所
UIDesignRequiresCompatibilityが効かなくなる条件
Xcode 26でビルドし直すと、既存アプリにもLiquid Glassが適用されます。改修が間に合わない場合は、Info.plistに次のキーを入れると旧デザインのまま動かせました（Xcodeのエディタ上では値がYESと表示されます）。
<key>UIDesignRequiresCompatibility</key>
<true/>ただしUIDesignRequiresCompatibilityの公式リファレンスは、このキーを「最新SDKのデザインに合わせてUIを見直す間、一時的に使う」ものと位置づけ、iOS 27以降・iPadOS 27以降・Mac Catalyst 27以降・macOS 27以降・tvOS 27以降向けにビルドするとシステムはこのキーを無視すると書いています。WWDC26のState of the Unionでも、旧デザインを選ぶ手段のサポートを外し、Xcode 27で再コンパイルしたアプリは自動で新デザインになると説明されました。
猶予はApp Storeの提出要件で決まります。Appleの提出要件ページでは2026年4月28日以降のアップロードにXcode 26以降・iOS 26 SDKが必須で、2026年10月26日時点でXcode 27を必須にする日付は告知されていません。Xcode 26で提出している間はキーが効き、Xcode 27へ上げた時点で退避は終わります。キーで先送りしているアプリは、Xcode 27移行の見積もりに新デザイン対応を含めるべきです。
移行で見直す5つの箇所
AppleのAdopting Liquid Glassが挙げる点検項目を、バーの背景と本文の重なりから先に、寸法・色・アイコンの順で確認することを勧めます。
- バーとコントロールの独自背景を外す：タブバー・ツールバー・スプリットビューの自前の背景は、ガラスやスクロールエッジ効果と重なって濁ります。
- 独自のバーにはスクロールエッジ効果を付ける：システムのツールバーは自動ですが、自作のバーは
safeAreaBar(edge:alignment:spacing:content:)などでセーフエリアとスクロールエッジ効果に組み込み、効果のスタイルを変える場合にscrollEdgeEffectStyle(_:for:)を使います。 - 部品の寸法を固定値で書かない：標準コントロールは角が丸く大きくなり、高さや余白の固定値は新しい形に追従しません。
- 色はシステムカラーか、ライト・ダーク各々に高コントラスト版を持つ独自色にする
- アプリアイコンをレイヤーに分ける：前景・中景・背景を別レイヤーにしてIcon Composerで組みます。iOS 26以降はライト・ダーク・クリア・色付きの4種の外観で表示されます。
実機で確認する設定の組み合わせ
見え方は背景に強く依存し、iOS 27では利用者がスライダで透明度を変えられます。確認は実機で、明るい壁紙と暗い壁紙それぞれに、スライダの両端（ウルトラクリアと完全な色付き）、「透明度を下げる」「コントラストを上げる」の計4通り以上を当ててください。標準部品は自動で追従しますが、glassEffectを当てた独自要素の文字や色は自分で確かめるしかありません。
WebでLiquid Glassを再現する：CSS＋SVGフィルタ
backdrop-filterのぼかしと屈折表現の違い
Webで「Liquid Glass風」を作るとき最初に使うbackdrop-filter: blur()で得られるのは、ぼかし、つまりGlassmorphismまでです。MDNのbackdrop-filterが挙げる関数（blur・brightness・contrastなど）には背景を変位させるものがなく、どれだけ重ねても縁の引き伸ばしは出ません。プロパティ自体は接頭辞なしでChrome 76・Firefox 103・Safari 18から使えます。
feDisplacementMapによる屈折の実装
屈折を作るには、SVGフィルタのfeDisplacementMapをbackdrop-filterにurl()で渡します。feDisplacementMapは変位マップの色を移動量として読み、xChannelSelector="R"とyChannelSelector="G"を指定すると赤をX方向、緑をY方向の移動量として扱います（未指定の既定はアルファチャンネル）。縁で大きく、中央で小さく動くマップを与えるほど本物のガラスに近づきます。次のコードはSVGとCSSの断片です。SVGはHTML内に、.glass以降はスタイルシートに配置し、効果を付ける要素にclass="glass"を指定してください。
<!-- ノイズで代用した簡易版。縁の屈折を正確に出すには、
要素の形に沿った放射状の変位マップ画像を feImage で読み込む -->
<svg width="0" height="0" style="position:absolute">
<filter id="refraction">
<feTurbulence type="fractalNoise" baseFrequency="0.008" numOctaves="2" result="noise" />
<feDisplacementMap in="SourceGraphic" in2="noise" scale="60"
xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
.glass {
width: 240px;
height: 64px;
backdrop-filter: blur(2px) url(#refraction);
-webkit-backdrop-filter: blur(2px); /* Safari向け：ぼかしのみに落とす */
background: rgba(255, 255, 255, 0.12);
border-radius: 24px;
contain: paint;
}contain: paintは、子孫要素の描画が指定範囲からはみ出さないようにする指定です。背後の画素を処理するフィルタの負荷まで隔離できるという意味ではありません。contain: strictはサイズの封じ込めを含むので、高さを明示していない要素に当てると中身を無視して潰れます。
Chromium・Firefox・WebKitで描画を比べた結果
上のCSSとSVGを縦縞の背景に重ね、2026年10月26日にmacOS 26.6.2（Intel Mac）上でPlaywright 1.64.1に同梱されたChromium 156・Firefox 157・WebKit 27.2で描画しました。PlaywrightのWebKitはSafari製品版そのものではありません。縞模様の位相をそろえた240×64ピクセルの領域で、各画素の赤チャンネル値（0〜255）の絶対差を平均しました。値は描画差を示し、屈折の品質や処理速度の評価値ではありません。
| エンジン | ぼかしのみとの差 | computed値に url() が残るか | CSS.supports の結果 |
|---|---|---|---|
| Chromium 156 | 68.40（屈折あり） | 残る | true |
| Firefox 157 | 0.00（ぼかしのみ） | 残る | true |
| WebKit 27.2 | 0.17（ぼかしのみ） | 後置の -webkit- 値で上書き | true |
屈折が描画されたのはChromiumだけでした。Firefoxはurl()を含む値を受け付けて計算値にも残しますが、画面はぼかしのみと同一です。WebKitは-webkit-backdrop-filterを同じプロパティの別名として扱うため、後に書いたぼかしだけの値が勝ちます。厄介なのは、CSS.supports('backdrop-filter', 'url(#x)')が3エンジンともtrueを返すことです。@supportsやCSS.supportsでは「屈折が効くか」を判定できません。
SVGのforeignObjectでページを描き直す回避策もありますが、WebKitではWebKit Bug 313914（2026年5月2日報告）が「SafariだけSVGフィルタが効かない」として2026年10月時点でNEWのままです。したがって設計は「ぼかしだけでも成立する見た目」を基準にし、Chromiumでだけ屈折が上乗せされる、と割り切るのが現実的です。
JavaScriptが必要な場面とINPへの影響
要素の形やスクロール位置に追従する屈折には、feDisplacementMapのscaleを書き換える、変位マップをCanvasで作り直すといったJavaScriptの処理が要ります。より精密に描くならWebGLのシェーダですが、実装と保守のコストは大きく上がります。
ぼかしと画素単位の変位は描画負荷を増やす可能性があります。負荷は適用面積や背景の更新頻度、ブラウザの実装によって異なります。Core Web VitalsのINPを守るには、フィルタを当てる要素を必要な範囲に限定し、操作時の入力遅延・処理時間・次の描画までの遅延を計測してください。contain: paintは描画の封じ込めを指定するもので、INP改善の必須条件ではありません。Webデザイン全体の流行と取り入れ方はWebデザイントレンド2026｜注目の10様式とCSS対応状況・取り入れる判断基準で整理しています。
Electron・Flutter・WindowsのLiquid Glass対応
Electron：macOSのNSGlassEffectViewとの連携
Electronではelectron-liquid-glass（Meridius-Labs）が、macOSのNSGlassEffectViewをウィンドウに差し込みます。OSの実装を使うので質感はネイティブと同じです。最新版は1.1.1で、READMEの動作要件はmacOS 26以降・Electron 30以降・Node.js 22以降です。macOS以外では何もしない実装になっているので、WindowsやLinux向けのビルドでは見た目が変わりません。ガラスの種類を切り替えるunstable_接頭辞のメソッドは、READMEが「実験的で非公開のAPI」と明記しているため、製品版では使わないでください。
Flutter：公式実装は作業中、パッケージは開発版
Flutterの描画パッケージliquid_glass_rendererは、1.0.0-dev.0でレンダラーと公開APIを刷新し、2026年10月20日公開の1.0.0-dev.1では公開APIを変えずに描画を調整しました。Flutter 3.47以上が必要で、本来のガラス描画にはImpellerと、まだプレビュー段階のFlutter GPUを使います。Skiaやブラウザ上ではbackdrop filterで描く代替（FakeGlass）に自動で切り替わります。開発版なので、低スペック端末を含む実機で計測してから配布してください。公式ウィジェットの進み具合とパッケージの選び方はFlutterのLiquid Glass対応状況｜公式実装は作業中、今使えるパッケージと選び方で追っています。
Windows 11：Windhawkのテーマによる外観の再現
WindowsにはLiquid Glassの公式な仕組みはありません。見た目を寄せたい場合は、カスタマイズ基盤Windhawkのmodを使います。windhawk-modsリポジトリの「Windows 11 Taskbar Styler」（1.10）にはLiquidGlassとOS26 Liquid Glass系、「Windows 11 Start Menu Styler」（1.7）にはLiquidGlassのテーマが組み込まれており、modの設定画面のthemeから選ぶだけで適用できます。これはOSの素材ではなく有志による外観の模倣なので、Windowsの更新で崩れる前提で使ってください。
Liquid Glass風UIを採用すべきでない場面
自社Webサイトの本文・フォーム・長文領域にガラス表現を持ち込むのは、ほぼ常に間違いです。
屈折とぼかしを使うと、文字と合成後の背景とのコントラストが背景しだいで変わり、背景が動く領域では1枚の静止画で十分なコントラストを保証できません。描画処理が操作後の表示を遅らせればINPも悪化します。さらに前章のCSS＋SVG実装では、屈折が出たのは検証した3エンジンのうちChromiumだけでした。AppleがOSで成立させられるのは、GPUの最適化と、透明度を下げる設定や外観スライダという退避の手段をOS側で持っているからで、Webサイトには同じ担保がありません。
本記事では、可読性と保守性を優先し、次の2つの場面に絞って採用することを勧めます。iOS・macOSのネイティブアプリで、HIGどおり機能レイヤー（ツールバー・タブバー・浮いているコントロール）にだけ当てるとき。Webでも、面積が小さく文字を載せないナビゲーション要素で、ぼかしだけの見た目でも成立するとき。社内の業務アプリでデザイン刷新を検討している場合、ネイティブ化の判断から相談できるiOSアプリ開発の支援も用意しています。
iPhone・Macで見づらいときの設定
利用者として「透けて読みにくい」を解消したい場合は、端末の設定で調整します。iOS 27ではiPhoneユーザガイドのとおり「設定」→「外観」→「Liquid Glass」のスライダを右へ動かすと色合いが増し、左へ動かすと透明度が上がります。iOS 26.1以降の26系では「設定」→「画面表示と明るさ」→「Liquid Glass」の「クリア」と「色合い調整」の2択です。
透明感そのものを抑えたいなら、「設定」→「アクセシビリティ」→「画面表示とテキストサイズ」で「透明度を下げる」または「コントラストを上げる」を有効にします。どちらか一方がオンだと外観のスライダは使えません。Macは「システム設定」→「アクセシビリティ」→「ディスプレイ」です。デザインを完全に消すことはできません。アイコンのガラス表現の変え方を含む詳しい手順はiPhoneのリキッドグラスをオフにする方法｜完全には消せない理由とiOS 27・26別の設定手順にまとめています。
よくある質問
Liquid Glassとは何ですか？
Appleが2025年6月9日のWWDC25で発表したUIの素材で、各OSの26世代で導入され27世代にも引き継がれています。背景を屈折させ光沢を返す点が、単なる半透明UIとの違いです。
iOS 27でLiquid Glassは何が変わりましたか？
縁を暗く・ハイライトを明るくして読みやすくし、設定にウルトラクリアから完全な色付きまで選べるスライダが入りました。採用済みのアプリには再コンパイルなしで反映されます。
Liquid GlassとGlassmorphismは同じものですか？
違います。GlassmorphismはCSSのbackdrop-filterで背景をぼかす汎用の技法で、Liquid GlassはAppleが自社OS向けに設計した、屈折と光沢を持つ固有の素材です。
WebサイトでLiquid Glassを再現できますか？
SVGのfeDisplacementMapをbackdrop-filterに渡せば屈折まで出せますが、今回の検証環境で屈折が描画されたのはChromiumだけです。検証したFirefoxとPlaywright版WebKitはぼかしのみで@supportsでも判別できないため、ぼかしだけで成立する見た目を基準にしてください。
自社アプリをLiquid Glass対応させないことはできますか？
Xcode 26でビルドしている間は、Info.plistのUIDesignRequiresCompatibilityで旧デザインのまま動きます。iOS 27以降向けのビルドではこのキーが無視されるため、移行までの猶予として扱ってください。
