カテゴリー: WWDC25

Liquid Glass に関するセッション。概要とベストプラクティスを具体的なAPIをもとに紹介。

---

0:00 – Introduction

• iOS 26とmacOS Tahoeで導入された新しいデザイン「Liquid Glass」を中心に、アプリの見た目や操作感が大きく刷新
• Liquid Glassはガラスの光学特性と液体の流動性から着想を得た新しいマテリアルで、コントロールやナビゲーション要素に適用
• すべてのAppleプラットフォームで一貫した新しい体験を提供

3:07 – App structure

• NavigationSplitView TabView NavigationStackSheet などの構造的なAPIが新デザインに最適化
• NavigationSplitView
  • Liquid Glassサイドバーや背景拡張効果（backgroundExtensionEffect）で、コンテンツの美しさと可視性を両立
• TabView
  • タブバーはフローティング化し、スクロールで最小化可能
  • tabBarMinimizeBehavior .onScrollDown 
  • @Environment(\.tabViewBottomAccessoryPlacement var placementをもとにアクセサリの表示位置を条件分岐でカスタマイズ
• SheetはデフォルトでLiquid Glass背景となり、ユーザー操作による展開高さに応じてエッジや透明度が変化
• プレゼンテーション（シート、メニュー、アラート、ポップオーバー）はトリガーになったボタンからスムーズに展開

7:49 – Toolbars

• ツールバーはLiquid Glass上に配置され、下のコンテンツに応じて自動適応
• ToolbarSpacer でグループ分けやスペース調整が容易
• badge 修飾子で通知バッジを簡単に追加可能
• アイコンはモノクロレンダリングが基本となり、必要に応じて.tint()で強調
  • モノクロにより視覚的ノイズが減り、コンテンツを強調できる
• スクロールエッジ効果（scrollEdgeEffectStyle）でコントロールの可読性を維持
  • 不動要素が多く高密度 e.g. カレンダー：.hard

11:10 – Search

• 検索フィールドはツールバー下部やタブ専用ページなど、柔軟な配置が可能
• searchable修飾子やsearchToolbarBehaviorで検索体験をカスタマイズ
• Liquid Glass上に検索フィールドが表示され、デバイスやツールバー嬢のボタン数などの状況に応じて自動的に最適化

14:03 – Controls

• ボタンやスライダー、メニューなど標準コントロールが新デザインに対応
• ボタンはカプセル型がデフォルト、ガラススタイルも選択可能
• 特に注意を引くアクションのために extra large サイズをサポート
• .buttonStyle(.glass) .buttonStyle(.glassProminent)
• スライダーは目盛りの表示や中立値（neutralValue）に対応
• コントロールの高さや角の一貫性（コーナーコンセントリシティ）も強化
• concentric rectangle shapeや controlSize 修飾子で柔軟に調整可能

17:57 – Liquid Glass effects

• .glassEffect 修飾子でカスタムビューにもLiquid Glassを適用可能
  • .glassEffect(in: .rect(cornerRadius: 16))
• tintやinteractive修飾子で意味やインタラクションに応じた表現が可能
  • .glassEffect(.regluar.tint(.green))
  • インタラクティブ要素を持つコンテナに対して:.glassEffect(.regluar.interactive())
    • ユーザー操作に追従し拡縮、バウンド、光る
• GlassEffectContainerで複数のガラス要素を一体的に管理し、自然な反射・屈折・モーフィングを実現
  • glassEffectID と namespace でアニメーションや遷移も滑らかに制御

21:31 – Next steps

• Xcode 26で新デザインを導入し、標準コントロールの自動適用を活用
• アプリ全体のフローや背景色を見直し、不要な装飾を削除
• Liquid Glassを活かした独自コンポーネントでアプリの個性を表現

昨日に続けてデザインシステムのセッションの備忘録。コンテンツ重視の姿勢は iOS 7 から一貫しており、そのための Liquid Glass だし、それゆえに　Liquid Glass は装飾ではなく導入においてまずアプリの構造を見直すべきである、という趣旨と受け取った。

既存のアプリに Liquid Glass を導入は、ただ 最新の Xcode でビルドすれば対応が完了するというレベルでないことを示しており、デザイナーはもちろんだが、開発者もこの思想を深く理解した上で取り組む必要のある大仕事だと心構えるべきだと感じた。

---

• Design language
  • デザインシステムの設計において：
    • 細かなディテイルの及ぼす影響に焦点を当て
    • すべてのレベルに意図を込め、小さなコントロールから大きなサーフェスまで、すべての要素と全体との関係性を考慮した
  • システムカラーファミリー：ライト／ダーク／コントラスト比を上げた状態（Increased Contrast appearances）すべてにわたって機微に調整され、Liquid Glass と調和を持っている
  • タイポグラフィの再定義：明確さと構造を強めるため、bolder かつ left-aligned として視認性を高めている
  • もっとも意義深い変更：シェイプの扱い方
    • ハードウェアの一貫したベゼルと同じ精度でUIを揃える（曲率／サイズ／比率）
    • 3つのシェイプタイプ
      • Fixed：一定の角丸
      • Capsule：高さ / 2 の角丸
        • 自然と同心性が与えらえれる：システム全体で用いられている（スライダー、スイッチ、バー、ボタンなど）
        • タッチフレンドリーなレイアウトに focus と clarity をもたらすが
        • 高密度なレイアウトを持つデスクトップ環境では：
          1. mini, small, medium controls: rounded rectangle
          2. large controls: capsule
      • Concentric：親要素とのパディングから計算した同心な角丸
      • プロダクトのUI要素が Liquid Glass と調和することが重要（システムのリズム＆トーンを破壊せず、引き立てるべき）
      • 3つのシェイプを使い分けることで、システムと親和性を持ち、Apple API の扱いも容易になる
    • 自身のアプリをアップデートする際、角丸が詰まりすぎたり flared でないことに注意
      • e.g. nester container → concentric or capsule
      • tips: use concentricShape
• Structure
  • Liquid Glass を最大限活用するために：
  • アプリが immersive かつ content-focused になるにつれ、必要に応じたインタラクションのサポートが必要：落ち着き (unobtrusive) を維持しながら
  • Liquid Glass：コンテンツに浮かぶ新しい funcitonal layer
  • Depict relationships
    • サーフェスとの関連性を明確に表現すること
    • どのように出現し、その source と関連し続けるか、空間的でもあり grounded でもありながら
    • 旧来の action sheet：画面下から出現 → どのアクションと紐づくか不明瞭
    • Liquid Glass ではアクションボタン (source) から action sheet を出現させる
    • 関連付けを明確にするため、それがタップ要素から直接拡張したようにインタラクションを ancohring する
  • Reflect navigation focus
    • マテリアルの細かなバリエーションにより、ナビゲーションが深まったりシフトする際に、その意図を引き立たせる
    • cue: モダリティを示唆する dimming layer e.g. sheet
      • タスクがメイン導線を interrupt していることを、Liquid Glass と dimming layer とをあわせて表現する
      • sheet が引き上げられるごとに、さらに不透明度を高め、より深いエンゲージメントを与える
  • Elevate controls
    • 旧来はコントロールはその背景に溶け込んでいた
    • Liquid Glass はそれらを持ち上げ、背景のコンテンツとより分離をもたらし、インタラクティブ可能であることを強く示唆する
    • Clean up your bars
      • 装飾にこだわるよりも、階層がレイヤやグルーピングによって表現されるべき
  • Organize for legibility
    • 正しくAPIを用いることで自動的にバーアイテムはグルーピングされ、背景を共有することで、見やすさと空間的な明確さをもたらす
    • もし期待通りにならなければ
      • bar がごちゃついていたら: 不要なアクションを secondary action に移動する
    • シンボルとテキストをグルーピングしないように
    • プライマリアクションは分離させ、色をつけること
    • tab bar:
      • 検索が基本
      • accessory view：画面固有のアクションを置かないように (e.g. checkout button)
  • Prioritize content
    • Liquid Glass はその見やすさを維持するために、コンテンツとの分離が必要
    • Scroll Edge effect
      • decorative ではない：オーバーレイのようにblock したり暗くしたりしない
      • スクロールビューは自動的にそれを覆うコントロールがあれば edge effect を表示する (soft / hard)
  • Extend to the edge (e.g. sidebar)
    • Background extension effects
• Continuity
  • 他のデバイスを行き来して作業してもユーザー作業は継続している
  • デバイス・キャンバスサイズごとに最適化されたレイアウト
  • User shared content
    • 意図的にグルーピングはレイアウトに寄らず維持されるべき
    • 同じ意味に同じシンボルを使うべき
      • しかしラベルを用いた方が伝わりやすい場合もある
    • Liquid Glass において bar はテキストよりもシンボルに依存しており、この変化はプラットフォームによらない
      • メニューではラベルに加えてシンボルを伴った方が認識を助ける
      • ただし共通のアクションに対するシンボルの反復や異なるアイコンを割り当てることは避け、省略する
  • Structure components to scale
    • Define a shared anatomy：コンポーネントのある部分はプラットフォームをまたいで共有されるべき
    • Support core interactions：核となるインタラクションを共有することで、プラットフォーム間における構造の変化を、その振る舞いが埋める

WWDC25セッションビデオのはじめに、「Meet Liquid Glass」を観たのでメモ。1日3本くらい観られるかと思ったが、このビデオの内容が思いのほか深く何度も見返したので時間がかかった。日本語字幕を読んでも腑に落ちない部分があり、特に抽象的な説明は英語字幕も併用し、英単語を調べなおしながら何度も見返した。

fluid という単語が何度も登場し、Designing Fluid Interfaces で語られていたことをLiquid Glass というマテリアルとして体現したものと理解した（発表者も同じ方）。ユーザー操作に対する即応性に加えて、コンテンツとコントロールとを区別させる表現手法として、光の屈折現象を活かしているという理解。

Liquid Glass への塗り色指定（従来のベタ塗りに対して new tinting と強調されていた）は背景のコンテンツに応じて微調整されるらしい。これは実際の色付きガラスを参考に実現したようだ。実際にどんな挙動をするのか確かめてみたい。

一部、自動的に処理されるのか、開発者が意識して実装する必要があるのかが分からなかったので、他のセッションを見ることで理解が補完されるかもしれない。

---

• 動的に光を屈折させる「デジタルメタ素材」
• Dynamics（動的特性）
  • 形状
    • 丸みがデバイスのカーブに馴染む
    • 形状の定義が明確でタッチしやすい
    • 指の自然な幾何特性を反映しタッチ操作時に親しみを感じる
  • レンズ効果
    • 従来のブラー効果が光を散乱するのに対し、自然界に存在し日常的、直感的、生得的に知っている光学特性を反映（instinctive visual cues）
    • コントロールは超軽量に感じられ、視覚的な区別を維持しながら透明
    • Liquid Glass において、visual と motion は一体として設計されている
      • 生得的に知っている液体の動き：滑らか、responsive、ごく自然 (effortless) な動きやふるまい
      • 操作に対し即座に反応し、光により活力を帯びる (energize)ことで、responseive で、満足感と溌剌を感じられる
      • ジェルのような flexibility, fluidity が、思考や動作のダイナミズムと一致する
    • UI 要素を一時的に Liquid Glass として浮かび上がらせることも可能
      • コントロールに有効：操作時と非操作時の区別
      • 透過してコントロールの値を見ることができる
  • Fluidity
    • この fluidity は操作への反応性に加え、アプリ動的な環境変化への反応性も拡張する
    • コンテキストに応じて動的に変形するコントロール：1枚の浮き上がった平面にこのコントロールが配置されている、というコンセプト
    • アプリ内異なるセクション間の移行において、コントロールが絶えず変形することで、fluid でシームレスに感じさせる
      • e.g. メニュー
      • タップしたその場所にメニューが展開される（in-line transition）ことで、ボタンと展開したコンテンツとの関係性を明確に伝える
  • Liquid Glass によってアプリ体験を根本的に、有機的・イマーシブ・fluid に変革する
• Adaptivity（コンテクストへの自動適応）
  • 明瞭さ
    • コンテンツレイヤーと区別できる視覚的な明瞭さを持つ
    • そのために、常に微妙な変化を持たせている
      • スクロールやコンテンツのライト／ダークに応じ
    • 大きなサイズに変化する（toolbar button → menu）時、厚みと素材感を高める（影や屈折が顕著、光を柔らかに散乱）よう変化し、奥行きを生み、ガラス上のコンテンツを読みやすくする
  • プラットフォーム間の統一
    • 隣接するコンテンツからの光、色を反映し、浮き上がりを強める
    • iPad/Mac の floating sidebar：アプリの画面サイズに応じて柔軟に拡縮し、統一感と一貫性を生み、単一のナビゲーションであることを示す
  • Scroll Edge Effects
    • Liquid Glass と連携、特にスクロールするコンテンツの読みやすさを高める
    • ナビゲーションバーなどタイトルを浮立たせるぼかし効果のこと
    • hard style effect： 固定されたアクセサリビューなど、視覚的に分離したいときに有効　e.g. Finder
• Liquid Glass の構造と挙動（自動で処理される）
  • 複数の層から成り立つ
  • Highlights layer ハイライトレイヤー
    • 周囲の物理世界と同じく、光源からの光を受け、エッジにハイライトを生む
    • ロック／解除のような状態変化に伴って、空間内を光源が移動する
      • ガラス周囲を光源が移動することで、シルエットが浮き立つ
      • デバイスの動きにも追従し、実世界に位置するような感覚を生む
  • Shadow 影
    • Liquid Glass が平面上にある (grounded and defined) 認識を手助けする
    • 背景のコンテンツレイヤーに応じて、コンテンツの上では不透明度を高め、逆に明るい無地上では不透明度を低めることで、見つけやすくなる
  • Illumination
    • 操作されると素材の中から光が生じることでフィードバックを与える
• どのように／いつ 使うべきか
  • ナビゲーションレイヤーに留めるべき
  • glass-on-glass を避けるべき
    • 上の要素に 塗りつぶし、透明性、vibrancy を適用し、オーバーレイとして表現する
• Variants（バリエーション）
  • Regular / Clear
    • Regular は汎用的、サイズに多様性あり、全面背面のコンテンツを問わない
    • Clear は3つの条件を満たす場合
      • media-rich なコンテンツの前
      • dimming layer によってコンテンツが悪影響を受けないこと
      • 要素の前面に、bold (明るくはっきり) content を置くこと
    • Clear の読みやすさを確保するために（自動で処理される？？）
      • ラベルの読みやすさを確保するには「レイヤーの光を微弱にし」背景を暗くするべき
      • Liquid Glass が小さい場合は localize dimming (光の抑制) により、元の vibrancy を維持することが可能
• Legibility（読みやすさ）
  • 小さな要素（nav bar, tab bar）
    • 背景コンテンツに応じ見た目を適応（constantly adaptive appearance）
    • 背景に基づきライト／ダークを切り替える
  • 大きな要素（menu, sidebar）
    • コンテキストに応じ適応するが、
    • ライド/ダークを切り替えない：表面積広くユーザーの気が散るため
  • ラベル上のシンボル・グリフも、ライト／ダークに応じ、ガラスと共にコントラスト比を維持する（自動的に）
  • カスタムカラー
    • ラベルの配色
      • 注意を引くアクションにのみ色を使用する
    • 背景色：背後のコンテンツの明るさに対応した色調が生成される (new tinting)
      • 強調する目的でのみ使うべき（アプリの主なアクション）
  • 動きのない画面（初回起動など）ではコンテンツと Liquid Glass を重ねるべきではない（？？）
• アクセシビリティ
  • 透過度を下げる、コントラストを上げる、示唆効果を減らす　に対応

今年もWWDCの季節がやってきた。例年と変わらず、2時前に起きて基調講演をリアルタイム（録画だが）で視聴し、5時からの Platforms State of the Union もチェックした。

筆者のWWDC初日の楽しみ方は、前夜から始まっている。コンビニでお菓子など買っておき、早めに就寝。といってもすんなり寝付けた試しはなく、だいたい眠れたかどうか分からないまま、午前 1:45 のアラームで起床。前夜に揃えた食べ物飲み物を準備して、ストリーミングを画面を前に待機、、例年、基調講演は iPad やデスクのモニターに映すのだが、今年は Vision Pro 上で観てみた。WWDC24 期間後に販売開始されたので、初の試みである。

基調講演中は自分用に気になった点をメモしている。外部公開用ではないので、本当に個人的な感想や妄想を書き記している。今年は Vision Pro を被りながらなので、視界の下隅で MacBook の画面を見ながら映像とメモとを行き来してた。基調講演後は、気になったスライドやシーンを写真やスクショにおさめて、それらを日記にまとめるまでが、初日のルーチンになっている。

今年も例に違わず、仕事以外の時間はそんなことをして過ごした初日だった。特に今年は、かねてより噂されていたデザイン刷新をはじめ内容が盛りだくさんだった。

---

とはいえその大半が、Marc Gurman 氏によって事前にリークされた情報通りであった。日が近づくにつれてリークの頻度とディティールが増していったため、当日はただの答え合わせだけになってツマらないかも、と懸念していたが、蓋を開けるとそれはまったくの杞憂だった。今回の基調講演の内容には、そんな暴かれた筋書きを凌駕するサプライズが詰まっていた。

まず、新デザイン言語の Liquid Glass について。グラス調UIへの転換は今日を迎えるまで数々のリークやモックがインターネット上で量産され続けてきたが、蓋を開けてみればそのすべてが、実際のほんの表面しかなぞらえていなかったことが明らかになった。誰の想像をも圧倒する美しさ、完成度を Liquid Glass は携えていた。

「グラス」モーフィズムとは、iOSのデザイン刷新が噂にのぼるたび、それがいつからか思い出せないほどに長い間ささやかれ続けてきた言葉だが、liquid の名が示すように、このデザイン言語が示したのは只の見た目やあしらいではなかった。実際に beta 版を触ってみて感じたのは、どんなユーザー操作も逃さずにフィードバックしてくれるUIの即応性、それは指によるタッチやドラッグ操作に限らず、アイコンなどのエッジに輝くハイライトがデバイス本体の傾きに追従することも含む。従来スクリーンがアプリ世界だけを映し出していたのに対して、Liquid Glass の表現する世界観は、アプリという物体を如何に実世界に溶け込ませるか、であると感じる。それはまるで visionOS が仮想コンテンツをリアル空間に持ち出したように。そしてこうした視覚的な変化に加えて Liquid Glass の実現した高い精度の光学的表現が、ソフトウェアへ実存感を与えるにとどまらず、むしろ現実を超えてシュールささえもたらすことで、親しみや楽しみを醸成していると感じた。

そういえば、最近気に入ったアプリ、(Not Boring) Camera も、物理を模したUIの影が、デバイス傾きに追従している。

https://twitter.com/p0dee/status/1930867577104044193

いっぽうで今、Xをはじめとして Liquid Glass は手離しで評価されているわけではない。特にグラスマテリアルはその背景に対しコントラスト比が低く視認性が悪い。betaを触っていて、筆者はあまり気にならないが、アクセシビリティの観点では確かに片手落ちに感じた。が、iOS 7の時もそうであったように、Apple は初版ではコンセプチュアルな方向に振り切りつつもマイナーチェンジを重ねながら実用性に擦り合わせていく傾向があると思っているので（Apple Watch や Vision Pro もそう）、9月のリリースには致命的な点は解消されていると思う。

---

その他、iPadOS の macOS 回帰が印象的で、macOS ではおなじみの Exposé 搭載が今このタイミングで発表されたことは、同機能がリリースされた Mac OS X 1.03 からたどった進化の系譜を20年越しに引き継いだという歴史の重みを感じて心が熱くなったし、ここ近年 iPadOS や macOS にばらばらと搭載され無秩序に感じていた、ウインドウマネジメントシステムの数々が、ようやく秩序だって集結したことにも、これまでの「仕込み」の点同士が一気に像を描くようで強く納得感を覚えた。さすがアップルだな、、と。

iOS 18 における Control Center のリデザイン、Apple Intelligence のチグハグ感否めない独特なデザインや使い勝手、唐突なホーム画面のカスタマイズ機能、少し遡るとこれもまた独特な使い勝手の Widget 選択画面に至るまで、、あちこちに散りばめられていたパズルのピースが、すべてこの日のために用意されていたと思うのは、考え過ぎだろうか。

まだ他にもある。macOS の Spotlight 機能が高機能化したのは、⌘+space が手癖となっている Spotlight ヘビーユーザーの筆者としては嬉しいポイント。作業コンテクストに応じてショートカットコマンドを組み込む Quick keys は、Spotlight という羊の皮を被った Shortcuts ないし Apple Intelligence ではなかろうかと思っている笑 完全に、Alfred に代表される 3rd-party ロンチャーアプリキラーだった。

あと、Xcode へのコーディングエージェントの搭載は、筆者が感知した範囲ではリークになかったので、個人的には実質の One more thing… であった。

---

手元メモにはもっと雑多にいろんな感想を記しているが、キリがないのでここまでとする。最後に基調講演の締めに流れた「Real App Store review」について。レビューを歌に乗せて紹介するというユニークな演出だが、可笑しさとともに Apple の一貫したある姿勢を垣間見て素晴らしいなと思った。 AI が発展し続けるこの先も、作り手である人間が価値創出の中心である、、そんなクリエイターに対する賛美だと感じた。

と、、Apple 信者感全開な投稿になったが、本当は1日1セッション紹介しようと思いつつもまだ何も観れておらず、ありものの情報で書いただけである。明日からはしばらくセッションの内容メモを綴っていきたいと考えている。