Liquid Glassとは？仕組みと対応OS、SwiftUI・CSSでの実装方法【iOS 27の変更点まで】

Liquid Glass（リキッドグラス）は、Appleが2025年6月のWWDC25で発表したデザイン言語です。ガラスのように背景を反射・屈折させる質感が特徴で、iOS 26以降のApple各OSに採用されました。この記事では、Liquid Glassの定義と対応OS、混同されやすいGlassmorphismとの違いに加えて、SwiftUIのglassEffect、WebのCSS＋SVGフィルタ、Electron・Flutterでの実装方法と、iOS 27（WWDC26で発表）での刷新点までを開発者視点で整理します。

まとめ：Liquid Glassの要点

先に結論です。Liquid GlassはApple固有のデザイン言語であり、CSSのすりガラス表現（Glassmorphism）とは実装も原理も別物です。

• 正体：WWDC25（2025年6月9日）発表、iOS 26世代の各OSに搭載。単なる半透明ではなく屈折とスペキュラハイライトを伴う「素材」として設計されています。
• iOSアプリの実装：SwiftUIのglassEffectとGlassEffectContainerで適用します。Xcode 26でビルドすると既定で適用され、UIDesignRequiresCompatibilityで旧デザインへ退避できますが、iOS 27以降をターゲットにビルドするとこのキーは無視されます。
• Webでの再現：backdrop-filterのぼかしだけでは屈折は作れません。SVGのfeDisplacementMapを併用すれば近づきますが、backdrop-filterにSVGフィルタを通せるのはChromium系のみで、SafariとFirefoxではぼかし止まりになります。
• 採用判断：ネイティブのApple製アプリではHIGどおり機能レイヤーに当てる。Webでは面積の小さいコントロールに限る（本文・長文領域には使わない）。

Liquid Glassとは：WWDC25で発表されたAppleのデザイン言語

発表の経緯と「素材」としての設計

Liquid Glassは、2025年6月9日のWWDC25でAppleが発表したデザイン言語です。ボタン、タブバー、サイドバー、アプリアイコン、ウィジェットといったUI要素に、ガラスに似た「素材（マテリアル）」を共通して適用します。Apple自身は「これまでで最も広範なソフトウェアデザインのアップデート」と表現しており、フラットデザインを打ち出した2013年のiOS 7以来の方向転換だと評されています。奥行きと立体感の着想元は、Apple Vision Proの空間OSであるvisionOSの表現です。

重要なのは、これが「半透明の色」ではなく光学的な振る舞いの再現だという点です。背面のコンテンツを透過させるだけでなく、周囲の光を映し込むスペキュラハイライトと、背景を歪ませる屈折を伴います。この屈折の有無が、後述するWebのGlassmorphismとの決定的な差になります。

対応OSと対応機種

Liquid Glassは、Apple主要OSの「26」世代に横断的に採用されました。

iPhone XS／XR以前は対象外です。visionOSは前述のとおりデザインの着想元であり、Appleが採用OSとして挙げるのは上表の5つです。iOS 26系の最新は現地時間2026年5月11日（日本時間12日）に配信されたiOS 26.5とiPadOS 26.5で、Liquid Glassの調整もこの系列で継続的に入っています。

iOS 27での刷新（WWDC26で発表）

提供開始直後のLiquid Glassには「透明すぎて文字が読みにくい」という指摘が集中しました。Appleはこれを受けてiOS 26.1で「クリア／色合い調整」の2モードを追加し、26.2ではロック画面の時計をガラススタイルにしたときのLiquid Glass強度スライダーを追加しています。

2026年6月のWWDC26で発表されたiOS 27では、この可読性問題に正面から手が入りました。設定の透明度調整が「ウルトラクリアから完全な色付きまで」を連続的に選べるスライダーへ拡張され、2択のトグルより細かく制御できます。素材そのものも、複雑な背景をより強く拡散させるようチューニングされ、要素の輪郭には暗いエッジが、ハイライトにはより明るいスペキュラが加わりました。スクロールで浮遊バーの下にコンテンツが潜り込む場面では、上部に不透明なツールバーが現れて可読性を確保します。

開発者にとっての要点は、これらの改善が既存アプリを再コンパイルしなくても適用されることです。ただしiOS 27は執筆時点（2026年7月）で開発者ベータ段階であり、正式提供は2026年秋が見込まれます。ベータ期間中に挙動が変わる可能性があるため、最終仕様はAppleの公式ドキュメントで確認してください。

Glassmorphismとの違いと、ガラスUIの使いどころ

すりガラス（Glassmorphism）と屈折（Liquid Glass）

「ガラスUI」「グラスUI」（英語ではGlass UI、あるいはGlassmorphism）と呼ばれる表現の多くは、正確にはGlassmorphismです。これはCSSのbackdrop-filter: blur()で背景をぼかし、半透明の白を重ねて“すりガラス風”に見せる汎用のデザイン技法で、特定OSに紐づく名前ではありません。

Liquid Glassが違うのは、背景をぼかすのではなく歪ませる点です。実際のガラスは光を屈折させるため、縁に近いほど背後のものが引き伸ばされて見えます。Appleはこの光学特性と、操作に応じた動的な反応までを素材として作り込みました。したがって「Liquid Glass＝AppleのOSデザイン言語」「Glassmorphism＝汎用の半透明UI技法」と区別するのが正しく、CSSのぼかしだけを指してLiquid Glassと呼ぶのは誤りです。

Human Interface Guidelinesが定める適用範囲

AppleのHuman Interface Guidelinesは、Liquid Glassを機能レイヤー（コントロール、ナビゲーション、一時的に現れるUI）に限定し、コンテンツレイヤーには使わないと定めています。ツールバーやタブバー、フローティングボタンには適用してよいが、記事本文や写真そのものをガラス素材で覆ってはいけない、という線引きです。

この原則はWebで模倣する場合にもそのまま有効です。ガラス表現は「操作対象を背景から浮かせて視線を集める」ために存在するので、全面に敷いた瞬間に効果を失い、可読性だけが犠牲になります。

SwiftUIでのLiquid Glass実装

glassEffectとGlassEffectContainer

iOS 26 SDK以降のSwiftUIでは、glassEffect(_:in:)モディファイアでビューにガラス素材を適用します。既定は.regularバリアントとCapsule形状で、Glass構造体が持つ.regular／.clear／.identityを切り替え、tint(_:)で色を、interactive()でタッチへの反応を付与します。

複数のガラス要素を隣接させるときはGlassEffectContainerで囲みます。コンテナは各要素のブレンドと遷移を統括するもので、これを省くと要素同士が液体のように融合する挙動が働かず、単なる半透明の板が並ぶだけになります。コンテナのspacingを内側の間隔と同じかそれ以上にすると、静止状態でも隣接するガラスが結合して見える点は覚えておいてください。状態をまたいで同一要素として遷移させたい場合はglassEffectID(_:in:)で紐づけます。

import SwiftUI

struct ToolbarSample: View {
    @Namespace private var glassNamespace

    var body: some View {
        GlassEffectContainer(spacing: 16) {
            HStack(spacing: 16) {
                Image(systemName: "square.and.arrow.up")
                    .padding(12)
                    .glassEffect(.regular.tint(.blue).interactive())
                    .glassEffectID("share", in: glassNamespace)

                Image(systemName: "trash")
                    .padding(12)
                    .glassEffect(.regular.interactive())
                    .glassEffectID("delete", in: glassNamespace)
            }
        }
    }
}

この2つはどちらもglassEffectを持つため、コンテナの管理下で近づけば融合し、離れれば分離します。単発の目立たせたいボタンにはbuttonStyle(.glassProminent)を使います。アイコンにはSF Symbolsを使うのが前提設計です（SF Symbolsの一覧とSwiftUIでの使い方）。Xcode 26側の変更点はXcode 26の変更点まとめに整理しています。

オプトアウトの方法と、その期限

Xcode 26でビルドし直すと、既存アプリにもLiquid Glassが自動適用されます。デザイン改修が間に合わない場合は、Info.plistに次のキーを追加すると旧デザインのまま動かせます（Xcodeのエディタ上では値がYESと表示されます）。

<key>UIDesignRequiresCompatibility</key>
<true/>

ただしAppleは、iOS 27／iPadOS 27／macOS 27／tvOS 27以降をターゲットにビルドした場合、システムはこのキーを無視すると明記しています。つまり2026年秋以降のSDKへ上げた時点で退避は効かなくなります。オプトアウトは「対応しない」選択ではなく「対応を先送りする」選択にすぎず、移行計画は今期中に立てておくべきです。適用条件は公式のリリースノートで随時確認してください。

実機での見え方確認とアクセシビリティ検証

Liquid Glassの見え方は背景に強く依存し、シミュレータと実機で印象が変わる場合があります。スペキュラハイライトや縁の屈折は壁紙・コンテンツの明度に左右されるため、最終確認は実機で、明るい背景と暗い背景の両方に対して行ってください。

あわせて、アクセシビリティ設定（「透明度を下げる」「コントラストを上げる」）を有効にした状態でも表示が破綻しないかを検証します。Appleが可読性を継続的に調整している領域なので、OSのマイナーバージョン間で見え方が変わる前提でテスト計画を組むのが安全です。

WebでLiquid Glassを再現する：CSS＋SVGフィルタ

ぼかしと屈折の違い：backdrop-filterの限界

Webで「Liquid Glass風」を作ろうとして最初に手が伸びるのがbackdrop-filter: blur()ですが、これで得られるのはぼかし、つまりGlassmorphismまでです。CSSには背景を歪ませる（屈折させる）標準プロパティが存在しないため、blurと半透明背景をどれだけ重ねても、Liquid Glassの核である縁の引き伸ばしは再現できません。

feDisplacementMapによる屈折の作り方

屈折を作るには、SVGフィルタのfeDisplacementMapをbackdrop-filterに食わせます。feDisplacementMapは変位マップの色を移動量として読みますが、既定で参照するのはアルファチャンネルです。xChannelSelector="R"とyChannelSelector="G"を明示して初めて、赤＝X方向、緑＝Y方向の移動量として解釈されます。縁で大きく・中央で小さく動くマップを与えれば、ガラスの縁で背景が伸びる見え方に近づきます。

<!-- ノイズで代用した簡易版。縁の屈折を正確に出すには、
     要素の形状に沿った放射状の変位マップ画像を用意して 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はサイズ限定（size containment）を含むため、高さを明示していない要素に当てると中身を無視して潰れます。手癖でstrictと書かないでください。

JavaScriptが必要になる場面

CSSとSVGの静的な組み合わせだけでは、要素の形やスクロール位置に追従する屈折は作れません。変位マップを動的に差し替えるにはJavaScriptが必要です。具体的には、リサイズやスクロールに応じてfeDisplacementMapのscale属性を書き換える、要素の寸法に合わせて変位マップ画像をCanvasで生成し直す、といった処理を入れます。より精密な光学表現を求める場合は、SVGフィルタを諦めてWebGLのシェーダで描く選択肢もありますが、実装コストは跳ね上がります。

Chromium限定であることと、INPへの影響

この手法には二つの重い制約があります。第一に、backdrop-filterにSVGフィルタを渡せるのはChromium系ブラウザだけです。SafariとFirefoxではフィルタが無視され、ぼかしだけの表示になります。Appleのデザインを、Appleのブラウザで再現できないというねじれがある点は押さえておいてください。

第二に性能です。背景のぼかしとピクセル単位の変位を同時にリアルタイム実行するため、GPUラスタライズの負荷が跳ね上がります。Core Web VitalsのINPを守るには、フィルタを当てるノードをcontain: paintで隔離し、物理的な描画面積を小さく保つことが最低条件です。「liquid glass 重い」という検索が出てくる背景には、この負荷の高さがあります。

Electron・Flutter・WindowsでのLiquid Glass

ネイティブとWeb以外にも、既存のクロスプラットフォーム環境からLiquid Glassに触れる手段があります。ただしどれも本番投入には注意が要ります。

Electronでは、electron-liquid-glass（Meridius-Labs）がmacOSのNSGlassEffectViewへのバインディングを提供します。CSSの小細工ではなくOS側の実装をそのまま使うため質感は本物です。動作要件はmacOS 26以降・Electron 30以降・Node.js 22以降。ガラスのバリアントやスクリムを切り替えるunstable_接頭辞のメソッドはmacOSの非公開APIに依存しており、READMEが本番利用を避けるよう警告しています。macOS以外のプラットフォームでは安全に無効化されるだけで、Windows／Linuxには何も起きません。

Flutterでは、liquid_glass_rendererがウィジェットをガラス面として描画し、複数のガラス形状が液体のように融合する表現までカバーします。ただしレンダリングエンジンはImpellerが必須（Skiaは非対応）で、パッケージ自体が実験段階と明言しています。GPU負荷が高く、低スペック端末で描画が破綻し得るため、全デバイスへ無条件に配るべきではありません。

Windowsには公式の対応手段がありません。カスタマイズ基盤Windhawkのmod（Windows 11 Start Menu Stylerなど）に有志製のLiquid Glass風テーマを当てて見た目を寄せる方法が知られていますが、これはOSの素材ではなく外観の模倣です。非公式である以上、Windowsのアップデートで壊れることを前提に扱ってください。

Liquid Glass風UIを採用すべきでない場面

ここは立場をはっきりさせます。自社Webサイトの本文・フォーム・長文領域にガラス表現を持ち込むのは、ほぼ常に間違いです。

理由は三つあります。屈折とぼかしはコントラスト比を背景依存にするため、WCAGの達成基準を満たしているかを静的に検証できなくなります。次に、描画コストがINPに直撃し、Core Web Vitalsを落とします。そしてSafari・Firefoxでは屈折が効かないため、ブラウザによって「意図した見た目」と「ただの半透明」が混在します。Appleが自社OSでこれを成立させられるのは、GPUの最適化とアクセシビリティ設定による退避ルートをOS側で握っているからであって、Webサイトには同じ担保がありません。

採用してよいのは、次の条件を満たす場合に限られます。iOS/macOSネイティブアプリで、HIGどおり機能レイヤー（ツールバー・タブバー・フローティングコントロール）にだけ当てるとき。あるいはWebでも、面積が小さく文字を載せないナビゲーション要素で、Chromium以外では通常のぼかしにフォールバックする設計になっているとき。この二つ以外では、装飾のために可読性と速度を差し出すことになります。

iPhone・Macで見づらいときの設定

開発者ではなく利用者として「透けて読みにくい」を解消したい場合は、端末の設定で調整できます。ルートは2つあり、目的で使い分けます。

デザインの雰囲気を残したまま読みやすくするなら、「設定」→「画面表示と明るさ」→「Liquid Glass」で不透明寄りの「色合い調整」を選びます。透明感そのものを強く抑えたいなら、「設定」→「アクセシビリティ」→「画面表示とテキストサイズ」で「透明度を下げる」「コントラストを上げる」を有効にします。なお「透明度を下げる」を有効にすると、前者のLiquid Glassの切り替えは操作できなくなります。Macでも「システム設定」→「アクセシビリティ」→「ディスプレイ」に同等の項目があります。

デザイン自体を完全に無効化することはできませんが、これらで透明感は大幅に弱まります。iPhoneでの詳しい手順とiOS 26での変更点はiOS26 Liquid Glassとは何か（全体像と仕組みの詳細解説）にまとめています。

よくある質問（FAQ）

Liquid Glassとは何ですか？

Appleが2025年6月9日のWWDC25で発表したデザイン言語で、iOS 26／iPadOS 26／macOS Tahoe 26／watchOS 26／tvOS 26に採用されています。背景を透過・反射させるだけでなく屈折させる「素材」として設計されている点が、単なる半透明UIとの違いです。

Liquid GlassとGlassmorphismは同じものですか？

違います。GlassmorphismはCSSのbackdrop-filterで背景をぼかす汎用のデザイン技法の総称で、Liquid GlassはAppleが自社OS向けに設計・命名した固有のデザイン言語です。屈折とスペキュラハイライト、操作への動的反応まで含む点でLiquid Glassのほうが広い概念です。

WebサイトでLiquid Glassを再現できますか？

屈折まで含めるなら、SVGのfeDisplacementMapをbackdrop-filterに渡すことで近い表現ができます。ただしこれが動くのはChromium系ブラウザのみで、SafariとFirefoxではぼかし止まりになります。GPU負荷も高いため、小面積のコントロールに限定して使ってください。

Liquid Glassは動作が重くなりますか？

ぼかしと変位を毎フレーム計算するため、描画負荷は通常のフラットUIより高くなります。Apple製OSではGPU最適化とアクセシビリティ設定による退避があるため実用上は問題になりにくい一方、Web再現やFlutterのliquid_glass_rendererでは低スペック端末で明確に影響が出ます。

自社アプリをLiquid Glass対応させないことはできますか？

Xcode 26では、Info.plistにUIDesignRequiresCompatibilityを追加すれば旧デザインのまま動作します。ただしiOS 27以降をターゲットにビルドするとこのキーは無視されるとAppleが明記しているため、恒久的な回避策にはなりません。移行の猶予期間として扱うのが妥当です。

関連記事

• iOS26 Liquid Glassとは何か？その全体像と革新性、そして仕組みを最新UIの詳細まで徹底解説
• Xcode 26の変更点まとめ｜Liquid Glass・生成AI統合・新SDK対応の新機能を総整理
• SF Symbolsとは｜ダウンロード・一覧・SwiftUIでの使い方【2026年版】
• iOS 26.5とiPadOS 26.5の正式リリース概要と配信日
• Apple Developer Programとは？年会費・登録方法・ログイン手順まで徹底解説