togo

= ひとりごと to go

zumuya の人による机の上系情報サイト

Liquid Glass と Mac の相性

  • Apple
  • ソフトウェア

WWDC25 で発表された、Apple 製品全体を通して採用される UI の新スタイル“Liquid Glass”。この手のものに名前がつけられるのは Aqua 以来なのでわくわくする気持ちが蘇りますね。

発表や各 Session のビデオに映る様子とかを見た個人的な感想を言うと iPhone で好印象なものの、Mac ではどうにも見づらさの方が上回ってるような感じが拭えなかった。しばらく理由を考えたところ、Mac ってほかのデバイスよりも透明な物体の輪郭を認識させるのに必要な要素が少ないのではないかという結論に達したので以下に理由を書いておく。

1. 両目の視差

  • Apple Vision:両目の視差がありグラスのレイヤーが手前に浮き上がって見える
  • Mac:二次元のディスプレイのため画像的な表現しかできない

2. グラスの背後に透けるもの

  • iPhone:基本的に画面よりもコンテンツが大きいため、グラスの背後にはコンテンツがある
    • コンテンツが屈折して見えることで輪郭が浮き上がる
  • Mac:余白が大きく、グラス背後にはウインドウの白地しかないことが多い1
    • 広いホワイトの下地がいくら屈折しても結果はホワイトの塊なのでグラスの境界内と境界外の差が小さい

3. 時間的な見た目の変化

  • iPhone:画面全体を覆う巨大なビュー(グラスの背後)が頻繁にスクロールされており、デバイスの傾きによる光源変化表現もある
    • グラスの見た目が絶えず変化して形状を把握できる
  • Mac:サイドバーやインスペクタなど複数のビューが同時に存在し、多くは同じ内容が表示されたまま残り、必要になって初めて視界に入る
    • 透明な物体の瞬間的な見た目だけでは形状&境界を把握しにくい

解決案

  • ほかのカラーを混ぜる
    • Big Sur 以降のウインドウ背景には壁紙のカラーが影響していた。同じように何らかのカラーを混ぜれば差が生まれる?
  • 画像的な境界線のデフォルメ
    • 初期の Aqua でも水という透明な物体の表現であったが、その輪郭は違和感を与えない程度の輪郭線や影で強調されていた。
  • 操作中の見た目の変化
    • iOS デバイスの傾きによる光源変化みたいにウインドウやマウスポインタの位置に応じて光源関係を変化させるなど、何らかの変化があるといいかも?

もちろんどれもやりすぎると作業の邪魔のため目立たないバランスが必要なのだけど、iPhone とまったく同じパラメータを持ってくるだけでは成り立たないような気がしました2。正式リリースまでにいい感じに調整されていくのを期待。


  1. 発表時のビデオや紹介 Web サイトには派手なコンテンツのウインドウばかり映っているけど実際にはカラム表示の Finder とか項目の少ないサイドバーとか、余白だらけの状態で目にするウインドウはそこそこある。 ↩︎

  2. Apple も Mac 固有の対策していないわけではなくて、たとえばツールバー項目のドロップシャドウが大きくかかっていたりするのだけど、こういうのって何も透けるものがないときは逆に目障りだったりするし難しい。 ↩︎

Share

リンクも共有もお気軽に。記事を書くモチベーションの向上に役立てます。