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

初めまして、CETでアプリのフロントエンド開発を担当している金です。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とは（設計の要）

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

2) 導入前チェックリスト

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

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

// 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) ナビ/ツールバー：ガラス面でまとまる

ボタンを視覚クラスタに

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）

Q. どこから手を付けるのが効果的？

A. CVボタンとバーです。.prominentGlass() とデフォルトバーに戻すだけで“Liquid Glassらしさ”が体感できます。

Q. 独自デザインのカードにも適用できる？

A. UIVisualEffectView + UIGlassEffect を重ねればOK。角丸と影は最小限に。

Q. パフォーマンスは大丈夫？

A. レイヤーの重ねを抑えれば問題なし。長大リスト＋複数ブラーは測定必須。

Q. SwiftUIでも同じ？

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

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

Liquid Glassは見た目のアップデートに見えて、体験設計まで伸びる投資です。既存アプリの最短アップデートからフルリニューアルまで、要件に合わせて段階導入をご提案します。相談は無料です。プロトタイプ1画面から一緒に磨き上げましょう。

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

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