---

iOS 26のGlass UIを使ってみた（SwiftUI）

iOS 18（SDK iOS 26）から、Appleは**「Glass UI」**を正式にサポートしました。これにより、**半透明＋ぼかし処理が効いた「ガラス風の見た目」**を、glassEffect() というシンプルなAPIで容易に導入できるようになりました。

---

🍎 Glass UIとは？

Glass UIとは、AppleがiOS 26（SDK）で導入したビジュアルエフェクトの一種で、以下のような特徴があります：

• 背景が透けて見える半透明効果
• ぼかしを加えて視認性と奥行きを演出
• 従来の UIVisualEffectView のような手間が不要
• glassEffect() をViewに適用するだけでガラス風のUIが完成

iOSアプリに視覚的な高級感を加えるために有効なUI手法です。

---

💡 今回のサンプルで使ったGlass UIの構成

項目	説明
glassEffect()	Viewにガラス風のエフェクトを追加
GeometryReader	ラベルの中央配置に使用
TabView + UITabBarAppearance	タブバーを透過させ、Glass UIを演出
ZStack	背景画像とガラスUIを重ねて表示

---

📱 画面イメージ（スクリーンショット）

タブバーに glassEffect() を適用

中央のラベルがGlass Effect付き

---

✅ サンプルコードと解説（iOS 26用）

以下は、SwiftUIでGlass UIを活用した簡易サンプルです。

ContentView.swift

import SwiftUI

struct ContentView: View {
    init() {
        // タブバーの背景を透明に設定
        let appearance = UITabBarAppearance()
        appearance.configureWithTransparentBackground()
        UITabBar.appearance().standardAppearance = appearance
        if #available(iOS 15.0, *) {
            UITabBar.appearance().scrollEdgeAppearance = appearance
        }
    }

    var body: some View {
        ZStack {
            VStack {
                TabView {
                // 各種タブバー
                    HomeView()
                        .tabItem {
                            Label("Home", systemImage: "house")
                        }
                    UserView()
                        .tabItem {
                            Label("User", systemImage: "person")
                        }
                    SettingsView()
                        .tabItem {
                            Label("Settings", systemImage: "gear")
                        }
                }
                .glassEffect() // ← Glass UIの適用ポイント(iOS26以降)
            }
        }
    }
}

---

各タブバーの遷移先のView

struct HomeView: View {
    var body: some View {
        GlassView()
    }
}

struct UserView: View {
    var body: some View {
        BaseView()
    }
}

struct SettingsView: View {
    var body: some View {
        BaseView()
    }
}

ガラスを配置したView

struct GlassView: View {
    var body: some View {
        GeometryReader { geometry in
            Image("goku") // ← 背景画像
                .resizable()
                .scaledToFill()
                .ignoresSafeArea()
            
            Text("Dragon Ball") // ← 中央配置のラベル
                .font(.title)
                .bold()
                .foregroundColor(.white)
                .frame(width: 100, height: 100)
                .position(x: geometry.size.width / 2,
                          y: geometry.size.height / 2)
                .glassEffect() // ← ラベルにもGlass UI適用
        }
    }
}

ガラスを配置していないView

struct BaseView: View {
    var body: some View {
        GeometryReader { _ in
            Image("goku")
                .resizable()
                .scaledToFill()
                .ignoresSafeArea()
        }
    }
}

---

🎥 実行時の見た目（動画）

UITabBarが水面のようにゆらめく、印象的なGlass UIが確認できます。

---

📝 まとめ

• iOS 26では glassEffect() により、手軽に美しいGlass UIが実現可能。
• GeometryReader や ZStack との組み合わせで表現の幅が広がる。
• UITabBarAppearance を調整することで、タブバーも透明化可能。

---

🔗 補足

• Glass UIはiOS 26以降でしか使えません。iOS 25以下では適用されません。
• glassEffect() は複数のViewに適用可能ですが、多用すると処理が重くなる可能性もあるため注意が必要です。

---