iOS 26「Liquid Glass」でUIKitはこう変わる——設計指針と実装レシピ完全版

2026.01.20

初めまして、CETでアプリのフロントエンド開発を担当している金です。以下Liquid Glassについてまとめさせていただきました。

iOS 26 の Liquid Glass は “浮かぶガラス面” をUIの標準表現に格上げしました。UIKitなら最小コードで導入でき、タブ・サイドバー・ツールバー・検索・シート/ポップオーバー・ボタン/スライダーまで一気にアップグレード可能です。

TL;DR（要点だけ知りたい方向け）

  • 見た目：半透明＋層構造でUIが「浮く」。自動グルーピングでボタンが一枚ガラスにまとまる。
  • 導入コスト：Xcode 26でビルドし直すだけで標準コンポーネントは概ね対応。カスタムUIは UIVisualEffectView + UIGlassEffect で拡張。
  • 設計ルール：UINavigationBar/UIBarAppearance の背景色上書きは封印。デフォルトに任せるとLiquid Glassが生きる。
  • 推し機能：
    • タブバーの浮遊＆自動縮小
    • 検索バーの柔軟配置（タブ/ツールバー/中央配置）
    • シート/ポップオーバーのモーフィング遷移
    • .glass() / .prominentGlass() の新ボタンスタイル
    • スライダーのニュートラル値/刻み/サム無し表示
  • ビジネス効果：視認性と上質感が上がり、CVボタンは .prominentGlass() で明確化。開発は差分導入で短期リリース可。

目次

  1. Liquid Glassとは（設計の要）
  2. 導入前チェックリスト（AEO向け即答）
  3. カスタムUIの基本実装
  4. タブバー/サイドバー（浮遊＆縮小）
  5. ナビ/ツールバー（ガラス面のグルーピング）
  6. シート/ポップオーバー（モーフィング遷移）
  7. 検索バーの配置パターン
  8. ボタン＆スライダーの新スタイル
  9. パフォーマンス＆アクセシビリティ
  10. 既存アプリからの移行戦略
  11. よくある質問（FAQ）
  12. まずはご相談ください

1) Liquid Glassとは（設計の要）

  • UI要素を半透明のガラス面に載せ、背後のコンテンツを柔らかくブレンド。
  • ボタン群やバーは自動的にクラスタ化され、ひとつのガラスパネルにまとまる。
  • 操作時は素材感のあるモーション（マテリアライズ/弾性）。
  • 最小の導入コスト：UIKit標準部品は再ビルドで更新、カスタムUIはエフェクトを足すだけ。

2) 導入前チェックリスト（AEO向け即答）

  • ナビ/ツールバーの backgroundColor を手動で指定している → 外す
  • UIBarAppearance で全面塗りしている → 既定に戻す
  • 画像全面レイアウトにバーを重ねたい → UIBackgroundExtensionView で拡張
  • 「CTAを目立たせたい」→ .prominentGlass() 一択
  • 「落ち着いたUIにしたい」→ .glass() で統一感

3) カスタムUIの基本実装（最短レシピ）

01d8069562047d2d219db7de39034c49.png

// 1) ベース: UIVisualEffectView let effectView = UIVisualEffectView()

// 2) ガラス効果を適用（iOS 26） let glassEffect = UIGlassEffect()

// 3) セット
effectView.effect = glassEffect

// 4) マテリアライズするならアニメーションで UIView.animate {
    effectView.effect = glassEffect
}

使い所：カード、ヘッダー、フローティングパネル。
角丸は effectView.layer.cornerCurve = .continuous + cornerRadius で滑らかに。

4) タブバー/サイドバー：浮遊＆縮小

（iPhone）タブバーをスクロール時にミニマイズ

tabBarController.tabBarMinimizeBehavior = .onScrollDown

タブバーにアクセサリ（例：Now Playing）

let nowPlayingView = NowPlayingView()

let accessory = UITabAccessory(contentView: nowPlayingView)
tabBarController.bottomAccessory = accessory

（iPad）フルブリード画像の上にサイドバーを浮かせる

let posterImageView = UIImageView(image: ...)

let extensionView = UIBackgroundExtensionView()

extensionView.contentView = posterImageView

view.addSubview(extensionView)

extensionView.automaticallyPlacesContentView = false 
// Auto Layout でposterImageViewをextensionViewいっぱいに貼る

ユーザーの視線はコンテンツにロック。バーは必要時だけ品よく現れる——この距離感がLiquid Glass流。

5) ナビ/ツールバー：ガラス面でまとまる

bcb4be4ed88137b9faaf4eaa7dacba6d.png

ボタンを視覚クラスタに

navigationItem.rightBarButtonItems = [
　 doneButton, flagButton, folderButton, infoButton, .fixedSpace(0), shareButton, selectButton
]

色・スタイル

let flagButton = UIBarButtonItem(image: UIImage(systemName: "flag.fill"))
flagButton.tintColor = .systemOrange
flagButton.style = .prominent

ツールバーを均等配置（1枚ガラスに集約）

let flexibleSpace = UIBarButtonItem.flexibleSpace()

flexibleSpace.hidesSharedBackground = false

toolbarItems = [
　　　　.init(image: UIImage(systemName: "location")), flexibleSpace,
　　　　.init(image: UIImage(systemName: "number")),  flexibleSpace,
　　　　.init(image: UIImage(systemName: "camera")),  flexibleSpace,
　　　　.init(image: UIImage(systemName: "trash"))
]

ナビタイトルにサブタイトル/カスタムビュー

navigationItem.title = "Inbox"

navigationItem.subtitle = "49 Unread"

// 大きいサブタイトル領域をカスタム
navigationItem.largeSubtitleView = filterButton

やってはいけない

// NG: 背景色上書きはLiquid Glassを壊す 
// navigationBar.scrollEdgeAppearance?.backgroundColor = .systemBackground

6) シート/ポップオーバー：モーフィング遷移

ポップオーバーをボタンから“生やす”

viewController.popoverPresentationController?.sourceItem = barButtonItem

シートをボタン起点でズーム表示

viewController.preferredTransition = .zoom { _ in folderBarButtonItem }

アクションシートをボタンにアンカー

alertController.popoverPresentationController?.sourceItem = barButtonItem

スクロール下でもガラスを可読に（エッジ効果）

let interaction = UIScrollEdgeElementContainerInteraction()

interaction.scrollView = contentScrollView
interaction.edge = .bottom

buttonsContainerView.addInteraction(interaction)

強めのブラーに調整

scrollView.topEdgeEffect.style = .hard

iPhoneのインライン・アクションシートは外側タップで自動Dismiss。キャンセルボタンは省略可。

7) 検索バーの配置パターン（iPhone/iPad）

ツールバー内に検索を置く

toolbarItems = [
　　　navigationItem.searchBarPlacementBarButtonItem,
　　　.flexibleSpace(),
　　　addButton
]

iPadでナビ右寄せ or 中央配置

// 外部統合を許可（右寄せに）
navigationItem.searchBarPlacementAllowsExternalIntegration = true

// 中央配置に
navigationItem.preferredSearchBarPlacement = .integratedCentered

検索を“タブ”にする

searchTab.automaticallyActivatesSearch = true   // タップで即検索フィールド展開

使い分けの目安：
・ヘビー検索＝タブ or 中央配置　・補助検索＝ツールバー右

8) ボタン＆スライダーの新スタイル

ガラスボタン

button.configuration = .glass()            // さりげない行動
ctaButton.configuration = .prominentGlass()// ここがCV

スライダー強化（慣性・刻み・ニュートラル）

// 5刻み + ニュートラル（20%）
slider.trackConfiguration = .init(
　　　　allowsTickValuesOnly: true,
　　　　neutralValue: 0.2,
　　　　numberOfTicks: 5
)

// 非インタラクティブ表示（メディアの進捗など）
slider.sliderStyle = .thumbless

9) パフォーマンス＆アクセシビリティ

  • ブラー重ねすぎ注意：スクロール下でブラー×ブラーはGPU負荷に。層は最小限。
  • コントラスト：ライト/ダーク両モードでAA以上を確認。
  • モーション軽減：Reduce Motion 時はマテリアライズ/ズームを時間短縮。
  • VoiceOver：グループ化されたガラス面はUI要素としての順序とラベルを見直し。

10) 既存アプリからの移行戦略（最短2ステップ）

  1. バーのカスタム外し：背景色・全面塗りを撤廃 → デフォルトへ
  2. CVボタンの置換：主要CTAを .prominentGlass() に変更

余力があれば：検索の中央配置、タブバーアクセサリ、スライダー刷新を段階投入。

11) よくある質問（FAQ｜AEO/LLMO対応）

Q. どこから手を付けるのが効果的？
A. CVボタンとバーです。.prominentGlass() とデフォルトバーに戻すだけで“Liquid Glassらしさ”が体感できます。

Q. 独自デザインのカードにも適用できる？
A. UIVisualEffectView + UIGlassEffect を重ねればOK。角丸と影は最小限に。

Q. パフォーマンスは大丈夫？
A. レイヤーの重ねを抑えれば問題なし。長大リスト＋複数ブラーは測定必須。

Q. SwiftUIでも同じ？
A. コンセプトは同じですがAPIは異なります。UIKitとのハイブリッドでも自然に共存します。

12) まずはご相談ください

Liquid Glass は見た目のアップデートに見えて、体験設計まで伸びる投資です。
既存アプリの最短アップデートからフルリニューアルまで、要件に合わせて段階導入をご提案します。

相談は無料です。プロトタイプ1画面から一緒に磨き上げましょう。

さいごに

Liquid Glass は「高級感のある見た目」を超えて、情報の階層・重み付け・注目点を的確に伝えるための設計道具です。
短期導入 → 効果検証 → 全面展開の順で、堅実にアップグレードしていきましょう。必要なら、当社が設計からプロトタイプ、検証、実装まで伴走します。気軽にご連絡ください。