Liquid Glass の展開する検索タブを試してみた

iOS 26 では、コンテンツを分けるタブ群と検索タブとが分離される。これにより、コンテンツ操作時と検索時とで、タブバー領域の見た目が明確に区別される作りとなっている。

実装は簡単。

// 検索画面
struct SearchTabView: View {
    @State private var text: String = ""
    
    var body: some View {
        NavigationStack {
            VStack {
                Image(systemName: "magnifyingglass")
                    .imageScale(.large)
                    .foregroundStyle(.tint)
                Text("Search")
            }
            .padding()
        }
        .searchable(text: $text)
        .tabViewSearchActivation(.automatic)
    }
}

...

// タブ定義
struct ContentView: View {
    var body: some View {
        TabView {
            Tab("Entries", systemImage: "doc.text") {
                EntriesTabView()
            }
            Tab("Answers", systemImage: "sparkles") {
                AnswerTabView()
            }
            Tab(role: .search) {
                SearchTabView()
            }
        }
    }
}

検索タブを選択した際に、検索フィールドにフォーカスを当てるか否かは、tabViewSearchActivation modifier で指定する。パラメタの TabSearchActivation はふたつあり、それぞれ挙動が異なる。

tabViewSearchActivation(_:) | Apple Developer Documentation
TabSearchActivation | Apple Developer Documentation

.automatic

検索タブをタップした際に、フィールドは展開するがフォーカスが当たるかは自動的に決まる。挙動を見るに、初期状態ではフォーカスは当たらず、フォーカスを当てたまま別タブに移動し、再度検索タブに戻った際にはフォーカス状態が復元されるように見える。

Music アプリがこの挙動をしており、検索画面として検索操作の前にあらゆる動線(カテゴリ)を見せたい場合に有効そう。

.searchTabSelection

検索タブをタップすると即フィールドが展開し、フィールドを閉じる(フィールド右のバツをタップする)と直前のタブに戻る。

Photos アプリがこの挙動をしている。前出の Music アプリと比較すると、以下の違いが見出せ、使い分けの参考にできそう。

  • Music が世界中の膨大なコンテンツから、検索キーワードだけでなく、ジャンル、アーティストといった軸をもとに探し出す体験
  • Photos はキーワードをもとに写真を検索する体験

ちなみに、検索タブの選択状態とカーソルフォーカスとは必ずしも連動しないため、検索タブを表示したままキーボードを閉じることはできる。(Photos ではこの状態で検索履歴の選択が行えるようになっている)


この検索タブの作りは、ミニマリズムでクリーンな印象を受ける一方で、上述したUIの仕組みやナビゲーションの構造を理解できていないと、やや使いこなすのが難しい気がしている。なぜなら iOS 18 以前は、タブ群はグローバルナビゲーションとして基本的に常時表示され、常に選択可能な状態であった。一方、iOS 26 では検索タブに遷移すると、タブ群はひとつのアイコンに集約され、選択肢が視認できなくなるからだ。

ユーザーが検索タブから任意のタブに移動したい場合、「メインのタブ群を展開する」→「目的のタブを選択する」という、2段階の操作を意識しなくてはいけない。ぼーっと触っているとこれが安易に頭から抜け、一瞬迷子になってしまうと感じている。

Liquid Glass(物理)を購入した

先日の Recap イベントで、temoki さんによって紹介され界隈をどよめかせた、Liquid Glass もどきのガラスペーパーウェイトをようやく手にすることができた。

Amazon にて購入。実は、このペーパーウェイトが紹介されたLTの間に楽天で注文したのだが、欠品連絡があり、しばらく後に再注文したのだった。

誌面の上にペーパーウェイトを乗せてみた

この写真のとおり、垂直に見下ろすと確かにレンズ効果で湾曲して見えるけれど、それだけだとイマイチ Liquid Glass 感がない。一体何が足りないのかと、ズラしてみたり、敷くもの(コンテンツレイヤー)を文字から写真に替えてみたり、試行錯誤の末ふと仰角を浅く覗いてみたところ、黒い印字が虹のようにスペクトラムに分解されて映ることを発見。これこそが Liquid Glass らしさだと気がついた。

ガラスの境界線付近で、黒文字が虹色に分解されている

このドーム状のペーパーウェイトのように、ガラスが設置面(コンテンツレイヤー)に対し垂直に切立つのでは、こうした視覚効果は生まれない。撥水面に垂らした液体のように断面が湾曲することで、色の分解が生み出されるのではないか、、実物(?)を観察したからこそ得られた発見だった。実際、Liquid Glass のイントロダクションビデオでデザインチームが扱っているガラスオブジェクトも、よく見るとそうした形状をしている。


余談だが、ペーパーウェイトの下敷き(コンテンツレイヤー)になっている雑誌は、Wallpaper 誌が Apple Design team を特集した2022年1月号。WWDC25 の基調講演で Liquid Glass を世に紹介した Alan Dye 氏も、もちろん文章と写真の両方で登場する。

Inside Apple Park: the design team shaping future tech | Wallpaper