---
title: ScrollEdgeEffectを深読みする
tags: 
author: [Ockey](https://www.docswell.com/user/Ockey)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/V7PKL51VJ8.jpg?width=480
description: ScrollEdgeEffectを深読みする by Ockey
published: September 18, 26
canonical: https://www.docswell.com/s/Ockey/5R8JM4-ExploringScrollEdgeEffect
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/V7PKL51VJ8.jpg)


Scroll Edge Effectを
深読みする
Ockey
extension DC 2026 Day1
@_ockey_
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/2JVVQPYRJQ.jpg)

Liquid Glass (iOS 26.0)
一般リリースから1年
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/5EGLWP96JL.jpg)

Glass Effectが目立ちますが、
Scroll Edge Effectも
おもしろいです
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4JQY32W27P.jpg)

ここのぼかし
ここのぼかし
4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/K74W1LKPE1.jpg)

iOS 27から
Scroll Edge Effectが
変わりました
デフォルトがsoftからhardに、という話ではありません
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/LJ1YGLXXEG.jpg)

iOS 26.6
iOS 27.0
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/GJWGKVNK72.jpg)

iOS 26.6
iOS 27.0
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4EZLZ43N73.jpg)

iOS 26.6
iOS 27.0
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/Y76WZ3X97V.jpg)

Effectの範囲が変わって
役割がハッキリした(と思う)
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/G75MWLXD74.jpg)

10
https://developer.apple.com/jp/videos/play/wwdc2026/251/


# Page. 11

![Page Image](https://bcdn.docswell.com/page/9J29QLQMER.jpg)

iOS 26では、ToolbarやTab barの
まわりにEffectがかかっていた
11
iOS 26.6


# Page. 12

![Page Image](https://bcdn.docswell.com/page/DEY4WQWPJM.jpg)

しかし、ToolbarのボタンやTab bar
にはGlass Effectがかかっている
単体でコンテンツから分離できて
いるはず
12
iOS 26.6


# Page. 13

![Page Image](https://bcdn.docswell.com/page/VJNY9K9M78.jpg)

ステータスバーの時刻や電波状況は
Glass Effectがない
(ボタンだと誤解させてしまう)
iOS 26.6
コンテンツとの干渉を防ぐには
Effectが必要
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/YE9P2V2WJ3.jpg)

iOS 27では、ToolbarやTab bar
のまわりにはEffectがかからなく
なった
iOS 27.0
ステータスバーにはEffectが
かかるようになった
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/GE8D5P5RED.jpg)

ステータスバーにEffectが
かかるようになった
↑当たり前では？
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/LELMY1Y27R.jpg)

ステータスバーにEffectが
かかるようになった
↑当たり前では？
実はiOS 26では違った
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/4JMYNWN9JW.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/PJR9DYD979.jpg)

iOS 26.5
iOS 27.0
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/PEXQ1G13JX.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/3EK9242NED.jpg)

Toolbarの有無というより、Glass Effectがかかっていない要素の
有無で変わりそう
iOS 27では、Glass Effectがかかっていない要素があると
hardなEffectがかかっている
タイトルなし
タイトルあり
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/L73W4L4Z75.jpg)

HIGにはそこまで書かれていないので、あくまで個人的な解釈
https://developer.apple.com/jp/design/human-interface-guidelines/scroll-views#Scroll-edge-effects
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/87DKQNQ4JG.jpg)

まとめ
Glass Effect
操作できるものをコンテンツから分離する
Scroll Edge Effect
ステータスバーやナビゲーションタイトルなど、
Glass Effectをかけられないものをコンテンツから
分離する(...のかも？)
22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/VJPKL5LVE8.jpg)

Ockey
@_ockey_
ピクシブの新卒2年目
PalcyにTCAを入れたり、
Liquid Glass対応をしたり
23