Liquid Glassの紹介

Liquid GlassはAppleソフトウェアの 見た目と雰囲気の進化における 大きな前進です Appleの製品エコシステム全体にわたり アプリとシステムの体験に柔軟で 動的なレイヤーをもたらします macOS XのAquaユーザーインターフェイス iOS 7のリアルタイムのぼかしから iPhone Xの滑らかな反応 Dynamic Islandの柔軟性 visionOSのイマーシブなインターフェイス までに至る進化を基盤としています これらの経験を通じてAppleは 物理世界の物体を単に再現するだけの アプローチから一歩進んで 動的に光を屈折させ成形する デジタルメタ素材 Liquid Glassを生み出しました またLiquid Glassは オーガニックな動作と移動により 軽やかな液体のような印象を与え タッチ操作の柔軟性と モダンアプリの ダイナミズムの両方に反応します

AppleのHuman Interface Designチーム デザイナーのChanです 本セッションでは Liquid Glassの 動的な特性の主なものをご紹介します その後 同僚のShubhamが 様々なコンテキストや環境に 自動的に適応する Liquid Glassの機能について解説します 最後にLiquid Glassの利用に関する 主な原則について Brunoが説明します では始めましょう Liquid Glassは より丸みを帯び イマーシブ感を生み出すようになった Appleのプロダクトデザインの進化を 補完します このデザインは丸みがあり 浮かんでいるような印象を与え 最新のデバイスの滑らかなカーブに すんなり収まります 形状が明確に定義されているため タップしやすく 人間の指の自然な幾何学的特性を 反映したデザインであるため タッチ操作がしやすくなっています Liquid Glassの性質を表す 最も明確な特徴は レンズ効果です レンズ効果は 私たちが自然界において 日常的に体験する現象です 私たちはそうした体験を通じて 透明な物体の存在 動き 形状の 知覚に影響する光の歪みや屈折を 直感的に知っています

Liquid Glassは 私たちが生得的に 把握できる視覚情報に基づいて物体を分離し 新しい方法でレイヤーを表現しながら その下にあるコンテンツが 透けて見えるようにします 従来の素材は光を散乱させましたが この新しい素材のセットは リアルタイムで 光を動的に屈折 形成 収束します これにより 背景のコンテンツとの関係で 対象の性質が設定される一方 自然界での体験に根ざした 視覚的印象を与えることができます このような光の造形により コントロールに超軽量かつ 透明な雰囲気をもたらしつつ 視覚的に区別しやすくしています

Liquid Glassのオブジェクトは フェードする代わりに 光の屈折と レンズ効果を徐々に変えることで 具現化または消失します そのため 素材の光学的な整合性を 維持しつつ 滑らかに移行することができます

素材の感触や動作は 見た目と同じくらい重要です Liquid Glassはその根本において 外観と動きの両方を 1つのものと捉えて設計されています 私たちは液体の動きがどんな感じか 直感的に知っています スムーズで反応性に優れた 滑らかな移動と動作という特性は 物理世界に対する 私たちの生得的な知覚と一致する インターフェイスを設計する上で 参考になります

これを実現するため Liquid Glassは操作に対して 即座に変形し 光の活力を帯びることで反応します それが 反応性に優れ 満足感と溌剌とした 印象を与えるインターフェイスを実現します また Liquid Glassは本質的に ゲルのような柔軟性を備えており 滑らかで拡張しやすい性質を 表現しながら ユーザーの操作に合わせて スムーズに動きます この滑らかさは 今日のユーザーの 思考と身体の動きを特徴付ける ダイナミズムと絶え間ない変化に インターフェイスの使用感を一致させます

コンポーネントを操作した時などに UI要素を浮かび上がらせて Liquid Glassに変化させることもできます 操作しない時は平静で タッチすると 活力が生まれるような印象になります これは特にコントロールなどで有効で 透明な液体レンズを通して その下の値が はっきりと見える状態になります

この滑らかな使用感は 素材が入力にどう反応するかだけでなく モダンアプリにおける動的な環境の変化に どう反応するかにも活かされます アプリで各状態の間を移動すると Liquid Glassはコンテキストに応じて コントロール間で動的に変形します これにより 1枚の浮き上がった平面に コントロールが配置されているという コンセプトを常に表現できます アプリの様々なセクション間の移行も コントロールが絶えず変形するため 滑らかでシームレスな印象になります メニューを表示すると バブルが弾むように開いて 内容のコンテンツを確認できます この軽量なインラインの移行により タップした場所にすべてが表示されます これにより ボタンと その内容のコンテンツの関係が 非常に明確かつ直接的に伝わります 以上の特性を備えたLiquid Glassにより アプリの外観は新時代を迎えますが それはまた 使用感の変革でもあります 新しい方法により 光を屈折させ成形する機能と 動的に変形し 形状を生み出す機能を 融合することで Liquid Glassはアプリの使用体験を 根本的にオーガニック イマーシブ 滑らかなものへと 変革するようにデザインされています

次は Liquid Glassがどのように 様々なコンテキストやプラットフォームに 自動的に適応するかについて Shubhamに説明してもらいます ありがとう Chan Liquid Glassは そのサイズと環境に適応するよう ゼロから設計されています 主な目標は 下にあるコンテンツと 区別できる 視覚的な明瞭さを保つことです しかし 読みやすさと コンテンツレイヤーからの明確な区別を 維持するために 常に微妙な変化が 行われるようにすることも必要です Liquid Glassは 互いに連係して ユニークな外観を生み出す 複数の層で構成されています 固定的なライト／ダークの外観があった 従来の素材とは異なり 各レイヤーがその背後の状況に基づいて 常時適応します

背後のテキストがスクロールされると 影がより強調され 区別がさらに明確になります

色合いとダイナミックレンジの程度は ボタンの読みやすさを維持するとともに 背後のコンテンツが できるだけ見やすく透過するように 常に変化します 必要に応じ ライト／ダークモードを 独立さえて切り替えることで あらゆるコンテキストにおいて 完璧な快適さをもたらし アプリのコンテンツの魅力を高められます ガラスがより大きなサイズに変形する時 例えばツールバーのボタンから メニューを表示する時など より厚みと実質感のある 素材に近くなるように 素材の特性が変化します より濃く深みのある影が表示され レンズと屈折の効果がより顕著になって 光の散乱が柔らかくなります こうした微妙な変化によって 奥行き感が強まるほか ガラス要素自体に表示されるコンテンツが より読みやすくなります Liquid Glassは Appleの 各プラットフォームの全体で統一された デザイン言語を構築するための基盤です iPadとMacでは これらの原則を まったく同じ形で適用しました iPhone同様 Liquid Glassのレイヤーは コントロールとナビゲーションのための 機能上の独立したレイヤーとして その他の要素の上に浮かんでいて コンテンツのためのより大きくて広い キャンバスを提供します

Liquid Glassのコントロールは 角が丸みを帯びたウインドウに すんなりと収まり すべてのUIで同心性を維持します サイドバーなどの大きな要素では Liquid Glassの外観は アプリ内の周囲の環境を反映します

近くにあるカラフルなコンテンツからの光が Liquid Glassの表面にかすかに現れ 要素のコンテキストと インターフェイスの 中で浮き上がった感じを強めます Liquid Glassの効果の対象は 表面だけではありません 光が反射および散乱し 影の中にも流れ込みます 物理世界での特性とほぼ同じです iPadとMacのフローティングサイドバーは 新次元のイマーシブ感をもたらします

サイドバーとタブバーが組み合わさり アプリの主要ナビゲーションのための 各プラットフォーム全体にわたる 統一感と一貫性のある言語を形成します それは アプリのキャンバスとともに 柔軟に拡張／収縮する 単一のナビゲーション要素と 捉えることができます 次に紹介するのは スクロールエッジエフェクトです

スクロールエッジエフェクトは Liquid Glassと連係して機能し UIとコンテンツのレイヤーを分離して 読みやすさを維持する 重要な役割を果たします 特に 動的にスクロールする コンテンツで有効です スクロールエッジエフェクトはLiquid Glassと 同じく 本質的に適応性に優れています コンテンツがガラス要素の背景で スクロールし始めると スクロールエッジエフェクトにより コンテンツは背景に緩やかに溶け込み 動いているコンテンツの上に ガラスが浮いているように見せて タイトルなどのフローティング要素を 常に明瞭な状態に維持します

暗めのコンテンツが背景をスクロールすると ガラス自体がダークスタイルに 移行するようにトリガーされ インテリジェントな切り替えにより 微弱な調光を適用することで コントラストと読みやすさを確保します ツールバーの下に 列見出しなどの アクセサリビューが 固定されている場合などは 「ハードスタイル」エフェクトを適用します

段階的なフェードを行う代わりに ツールバーおよび固定された アクセサリビューの高さに合わせて エフェクトが適用されます このスタイルのエフェクトは アクセサリビューのフローティング要素と 背後でスクロールしているコンテンツを 極めて明確に 視覚的に分離したい場合 特に有効です 以上で紹介したのは 様々なサイズ 環境 プラットフォームに適応する Liquid Glassの機能と これを スクロールエッジエフェクトと併用して 明瞭性と読みやすさを維持しつつ アプリのコンテンツを メインとして際立たせる方法でした 次はBrunoが Liquid Glassの バリエーションと それらをアプリで 最適な方法で活用するための ガイドラインについて詳しく説明します ありがとう Shubham Liquid Glassを最大限に活用するには より詳細なレベルでの理解が重要です Liquid Glassがどのように構築され どのように動作するかを確認することで Liquid Glassによるデザインを 始めるにあたっての展望が得られます

Liquid Glassが真に驚異的なのは その総合的なデザインです 光の扱い 奥行き効果 適応性といった Liquid Glassの特長は それぞれが 独立しているわけではありません これらは洗練されたシステムを形成する 各レイヤーであり それらが連係することで 各々の効果の単純な総和よりも 優れた素材を実現しています 各レイヤーを詳しく見てみましょう まずはハイライトレイヤーです

Liquid Glassの環境の動作は 私たちの周りの物理世界と同様です この環境内の光源から 素材に光が照射されると 想定される通りに 幾何特性に応じたハイライトが生じます スマートフォンの ロック／ロック解除などの操作を行うと 光は空間内で移動し 素材の様々な箇所に映り 影を形成します 場合によっては 光はデバイスの動きに反応して Liquid Glassが実世界での 自らの位置を反映している印象を与えます

影も重要であり 要素が平面上の特定の位置にあるという 印象を生むのに役立ちます 次のスライドの影に注目してください

この要素は背後のコンテンツを認識して テキストに重なっている場合 影の不透過度を高めます 逆に 明るい無地の背景に重なる場合 影の不透明度を低めます これにより 要素がコンテンツから分離され 常に見つけやすい状態に維持されます

Liquid Glass要素を操作すると フィードバックの1つとして 素材が内部から照らされます

光はタップした箇所から現れ 要素全体へと広がって 近くのLiquid Glass要素にも及びます 各要素は 素材の柔軟な特性に基づき 自然かつ滑らかな形で相互作用します

これらの動作が インターフェイスに生命感をもたらし 物理世界およびデバイス入力に 直接反応している印象を与えます UIの階層における 明確さとフォーカスを維持するために 複数のレイヤーが連動して 適応することもあります

例えば MacやiPadのウインドウが フォーカスから外れた時 Liquid Glassは外観を変え 背景に移動したように見せて注意を引きます

こうした洗練された機能は組み込みで Liquid Glassをデザインに取り入れると これらすべての繊細かつ動的な動作を 自動的に利用できるようになります ここまで Liquid Glassの 構造と動作について説明しました 次は これを使用する 方法およびタイミングと 選択できる様々なバリエーションについて お話しします 皆さんはLiquid Glassを あらゆる場所で 使いたいと思うかもしれませんが アプリのコンテンツの上に浮かぶ ナビゲーションレイヤーでの使用に とどめておくのが最善です 例えばこのテーブルビューを Liquid Glassにすると 他の要素と競合し 階層を混乱させます 明瞭性を保つため コンテンツレイヤーに 配置しておくべきでしょう 同様に Liquid Glassを重ねるのは 問題です 複数のLiquid Glass要素が 互いに重なるようにすると 途端にインターフェイスが 散らかって混乱した感じになります Liquid Glassの上に 要素を配置する場合は 両方のレイヤーに ガラス素材を適用するのは避けましょう 代わりに 上に来る要素に塗りつぶし 透明性 バイブランスを適用して 素材の一部である 薄いオーバーレイのような感じにします 次に Liquid Glassの バリエーションをご紹介します Liquid Glassには レギュラーとクリアの2種類があります 2つを組み合わせて使わないでください 各々に固有の特性と ユースケースがあるためです レギュラーは汎用性に優れ 使用頻度の高いものです 先に紹介したビジュアル効果と 適応機能のすべてを提供し コンテキストを問わず 読みやすさを維持します あらゆるサイズにでき 背景や前面の コンテンツの種類も問いません 一方 クリアでは 動作の適応機能がありません 常に透明度が高いため 背後のコンテンツが 十分に素材を透過して ガラスと美しく相互作用します シンボルやラベルの読みやすさを 確保するためには レイヤーの光を微弱にして 背景のコンテンツを暗くする必要があります そうしないと 読みやすさが著しく損なわれます アプリのLiquid Glass要素の サイズが小さい場合は 局所的な光の抑制により コンテンツの 元のバイブランスを 維持できるようにします

まとめると レギュラーは場所 用法 コンテキストを問わず利用できますが クリアは 次の3つの条件が 満たされる場合のみ使用できます 第1に 素材を適用する要素を メディアリッチなコンテンツの前に置くこと 第2に 光を抑制したレイヤーの 導入により コンテンツレイヤーが 悪影響を受けないこと 第3に 要素の前面には 明るくはっきりしたコンテンツを置くこと 次は 読みやすさについてお話しします これはLiquid Glassのデザインにおける 重要な考慮事項です

ナビゲーションバーやタブバーのような 小さい要素は 背景のコンテンツに応じて 常に見た目を適応させます また 背景に基づいて ライト／ダークを切り替えて 可能な限り 素材の見た目を向上させ 見分けがつきやすいようにします

メニューやサイドバーなど大き目の要素も コンテキストに応じて適応しますが ライト／ダークは切り替えません 表面積が大きすぎて そうした切り替えは ユーザーの気を散らせます Liquid Glass上の シンボルやグリフも 読みやすさのために 小さい要素と 同じように ライト／ダークを切り替えて コントラストを最大化するために ガラスと同様に動作します レギュラーに配置されたコンテンツはすべて 自動的にこの処理を実行します カスタムの色も使えますが 使いどころは選びましょう 当該のアイテムや要素に 明確な機能上の目的がある場合 注意を引くために色を使用できます どのような効果があるか確認しましょう

Liquid Glassでは 素材の原則に従い 読みやすさを最大限に高める 新しい方法で要素に色を付けられます

この手法は すべてのLiquid Glass要素に 一貫して適用できます ラベル テキスト 全体に色を付けた ボタンやロック画面の時間表示などで 素材に生命感と活力を与え 周囲のコンテンツとの 結びつきをより強めます

色を選ぶと その色を付ける要素の 背後のコンテンツの明るさに対応した 様々な色調が生成されます これは実世界の 色付きガラスを参考にして 想定した色から離れすぎることなく 背景の物体に応じて 色合い 明るさ 彩度を 変更するようにしています

この機能の効果は 素材を より実際の物質らしくするだけでなく 読みやすさとコントラストも向上します

色付けの強みは ガラスのすべての動作に ネイティブに互換であるため あらゆる要素を簡単に色付けできる点です

このボタンでは 内蔵の色の代わりに 単色塗りつぶしを使用しています ご覧の通り 完全に不透明で Liquid Glassの視覚的効果が失われます しかし 新しい色付け方法を利用すると 途端に より透明で 環境にマッチした印象になります

色付けは UIの主な要素やアクションを 強調する目的でのみ使用すべきです まず 避けるべき 色付けの例を見てみましょう すべての要素に色を付けるのはNGです すべての要素に色を付けると 何も目立たず UIが混乱します アプリのカラーを設定したい場合 コンテンツレイヤーの色付けは不適切です 対照的に このボタンは 色付けの優れた使用例です このフードデリバリーアプリの 主なアクションを 赤が際立たせています コンテンツレイヤーは 不要な視覚的ノイズをなくす上でも重要です アプリの初回起動時などの 動きのない画面では コンテンツとLiquid Glass要素を 重ねるのは避けましょう コンテンツを再配置または拡大縮小して 両者が分離されるようにします

読みやすさに関する これらの考慮事項とは別に Liquid Glassは すべての人の 特性やニーズに対応できるよう いくつかのアクセシビリティ機能を 搭載しています

これらの機能は Liquid Glassの驚異的な 機能を損なわずに 特定のレイヤーを変更し 素材のアクセシビリティを高めます

例えば「透明度を下げる」では Liquid Glassのフロスティ感を上げて 背後のコンテンツをより強くぼかします 「コントラストを上げる」では 要素を主に白と黒で表示し コントラストを高める枠線で強調します 「視差効果を減らす」では 一部のエフェクトの強さを減らし 素材の柔軟な動きに関する特性を 無効化します これらは 新しい素材を使用する場合は いつでも自動的に適用可能になるため これらの設定がシステムレベルで オンになっている場合 アプリ全体の Liquid Glass要素に適用されます 本セッションでは Liquid Glassの 主な原則と価値について説明しました Liquid Glassの機能と動作を確認し この素材を効果的かつ インクルーシブに使用するための 実用的なガイドラインを紹介しました

Liquid Glassは Appleプラットフォーム 全体で 統一されたデザイン言語を提供し ハードとソフトをシームレスに融合させます 従来以上に滑らかで動的な インタラクション体験を提供し インターフェイスのあらゆる部分に 魅力的な新しい外観をもたらします この Appleのビジュアルデザインと インタラクションデザインの新章の幕開けに 皆さんもぜひ 積極的にご参加ください