SwiftUIのglassEffectで写真の背景とガラスの画面を作る（iOS 26）

SwiftUI で写真の背景にガラスのような画面を作る時は、写真、黒のグラデーション、iOS 26 の glassEffect（ガラスのような半透明の効果）のカード、の3つの層を重ねました。すべての画面に広げる時は、背景とカードの部品を1か所にまとめると、どの画面でも同じ見た目を保てます。

接客の録音アプリ（TalkLens）は、2026年9月の終わりに見た目を大きく作り直しました。音楽アプリのように、画面の全体に写真を敷き、その上にガラスのような半透明のカードを重ねるデザインです。今は、これがアプリの標準の見た目です。

最初はホームと録音中の2つの画面だけを作り直し、それをすべての画面に広げました。広げる時に、どの画面でも同じ見た目になるよう、部品を1か所にまとめています。この記事は、その作り方と、途中で決めたことの記録です。

録音中の画面。夜空と月の写真を背景に、大きな経過時間、音声の波形、金色がかったガラスの「録音を終了」のボタンが重なっている — 録音中の画面（App Store 用のデモの画面）

写真の上に、黒のグラデーションと glassEffect のガラスを重ねる

画面は、下から順に3つの層を重ねています。

夕日に染まる山と、湖に映る景色の写真 — 背景の写真は、6枚を用意した（イメージ写真）

一番下に、写真の背景
その上に、上が薄く下が濃い黒のグラデーション（文字を読みやすくするため）
一番上に、半透明のガラスのカードと、白い大きな文字

ガラスのカードには、iOS 26 の SwiftUI にある glassEffect を使いました。アプリが対応する iOS を 26 以上にしていたので、古い iOS のための代わりの作りは用意していません。

3つの層の図。下から、写真の背景、上が薄く下が濃い黒のグラデーション、半透明のガラスのカードを重ねる — 画面を作る3つの層

背景は6枚と、写真アプリから

背景の写真は、昼、夕方、夜の雰囲気のものを6枚用意しました。設定の「背景」の画面で、次の3つから選べます。

時間帯に合わせて、6枚から自動で選ぶ
6枚の中から、好きな1枚を選ぶ
写真アプリから、自分の写真を選ぶ

明るい写真は、文字が読みにくくなります。昼と夕方の写真だけは、下の黒のグラデーションを少し濃くしました。

背景の設定の画面の再現。時間帯に合わせて自動、6枚から選ぶ、写真アプリから選ぶの3つがあり、選んだ写真は端末の中だけに保存する — 背景の選び方（デモ）

全部の画面に広げる時、部品を1か所にまとめた

最初に作り直したのは、ホームと録音中の2つの画面だけでした。その見た目がオーナーに承認され、ほかの画面にも同じデザインを広げることになりました。

雨のつぶがついた窓ガラスの向こうに、街の光がにじんで見える写真 — ガラス越しに、背景がやわらかく透ける（イメージ写真）

Swift部品の使い方（仕組みが分かる短い見本）

struct HistoryView: View {
    var body: some View {
        ScrollView {
            ForEach(items) { item in
                HistoryRow(item: item)
                    .appCard()          // ガラスのカード
            }
        }
        .appScreen(readability: .standard)  // 写真の背景・グラデーション・暗い表示
    }
}