関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1.2M
各ページのテキスト
 Scroll Edge Effectを 深読みする Ockey extension DC 2026 Day1 @_ockey_ 1
Liquid Glass (iOS 26.0) 一般リリースから1年 2
Glass Effectが目立ちますが、 Scroll Edge Effectも おもしろいです 3
ここのぼかし ここのぼかし 4
iOS 27から Scroll Edge Effectが 変わりました デフォルトがsoftからhardに、という話ではありません 5
iOS 26.6 iOS 27.0 6
iOS 26.6 iOS 27.0 7
iOS 26.6 iOS 27.0 8
Effectの範囲が変わって 役割がハッキリした(と思う) 9
10 https://developer.apple.com/jp/videos/play/wwdc2026/251/
iOS 26では、ToolbarやTab barの まわりにEffectがかかっていた 11 iOS 26.6
しかし、ToolbarのボタンやTab bar にはGlass Effectがかかっている 単体でコンテンツから分離できて いるはず 12 iOS 26.6
ステータスバーの時刻や電波状況は Glass Effectがない (ボタンだと誤解させてしまう) iOS 26.6 コンテンツとの干渉を防ぐには Effectが必要 13
iOS 27では、ToolbarやTab bar のまわりにはEffectがかからなく なった iOS 27.0 ステータスバーにはEffectが かかるようになった 14
ステータスバーにEffectが かかるようになった ↑当たり前では？ 15
ステータスバーにEffectが かかるようになった ↑当たり前では？ 実はiOS 26では違った 16
import SwiftUI
struct TabContentView: View {
var body: some View {
List(0..<30, id: \.self) { index in
Text(String(repeating: "\(index)", count: 10))
.listRowBackground(Color.pink.opacity(0.15))
}
.listStyle(.plain)
}
}
struct ContentView: View {
var body: some View {
TabView {
Tab("First", systemImage: "list.bullet") {
TabContentView()
}
Tab("Second", systemImage: "star.fill") { ... }
Tab("Third", systemImage: "heart.fill") { ... }
}
}
}
17
iOS 26.5
iOS 26.5 iOS 27.0 18
struct TabContentView: View {
var body: some View {
List(0..<30, id: \.self) { index in
Text(String(repeating: "\(index)", count: 10))
.listRowBackground(Color.pink.opacity(0.15))
}
.listStyle(.plain)
.safeAreaBar(edge: .top, spacing: 0) {
Color.white
.frame(width: 1, height: 1)
}
.scrollEdgeEffectStyle(.automatic, for: .top)
}
}
Effectをかけられはするが
カスタムしすぎるのは
良くなさそう
struct ContentView: View {
var body: some View {
TabView {
Tab("First", systemImage: "list.bullet") {
TabContentView()
}
Tab("Second", systemImage: "star.fill") { ... }
}
}
}
Tab("Third", systemImage: "heart.fill") { ... }
19
iOS 26.5
Toolbarの有無というより、Glass Effectがかかっていない要素の 有無で変わりそう iOS 27では、Glass Effectがかかっていない要素があると hardなEffectがかかっている タイトルなし タイトルあり 20
HIGにはそこまで書かれていないので、あくまで個人的な解釈 https://developer.apple.com/jp/design/human-interface-guidelines/scroll-views#Scroll-edge-effects 21
まとめ Glass Effect 操作できるものをコンテンツから分離する Scroll Edge Effect ステータスバーやナビゲーションタイトルなど、 Glass Effectをかけられないものをコンテンツから 分離する(...のかも？) 22
Ockey @_ockey_ ピクシブの新卒2年目 PalcyにTCAを入れたり、 Liquid Glass対応をしたり 23