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 を維持することが可能
- Regular / Clear
- Legibility（読みやすさ）
- 小さな要素（nav bar, tab bar）
- 背景コンテンツに応じ見た目を適応（constantly adaptive appearance）
- 背景に基づきライト／ダークを切り替える
- 大きな要素（menu, sidebar）
- コンテキストに応じ適応するが、
- ライド/ダークを切り替えない：表面積広くユーザーの気が散るため
- ラベル上のシンボル・グリフも、ライト／ダークに応じ、ガラスと共にコントラスト比を維持する（自動的に）
- カスタムカラー
- ラベルの配色
- 注意を引くアクションにのみ色を使用する
- 背景色：背後のコンテンツの明るさに対応した色調が生成される (new tinting)
- 強調する目的でのみ使うべき（アプリの主なアクション）
- ラベルの配色
- 動きのない画面（初回起動など）ではコンテンツと Liquid Glass を重ねるべきではない（？？）
- 小さな要素（nav bar, tab bar）
- アクセシビリティ
- 透過度を下げる、コントラストを上げる、示唆効果を減らす に対応