新しいデザインシステムの理解

こんにちはApple Design Teamの デザイナーMariaです このセッションでは ビジュアルデザイン、 情報アーキテクチャ、コアシステムの コンポーネントなどに関する デザインシステムの新機能を すべてご紹介します まだご覧になっていない方は ChanとShubhamとBrunoによる 関連セッションの「Meet Liquid Glass」も ぜひご覧ください これは今回説明する内容の基礎となるもので Liquid Glassの 原則や動作 およびそれらを 効果的かつ包括的にアプリで 活用する方法を紹介しています Liquid Glassは これまでで最も大規模な ソフトウェアデザインの更新であり 新しい一連のヒューリスティックを通じて インターフェイスとコンテンツの 関係を再構築しました その結果 統一性があり 柔軟で 表現力豊かな デザイン言語になりました システムを総合的に捉えることで 大きな可能性が生まれます これらの原則をAppleのエコシステム内の あらゆる表示やインタラクションに 拡張できるようになります また SwiftUI／Mac Catalystなどの テクノロジーや iPadのウィンドウ、 サイズ変更などの新しい機能によって 共通のデザイン基盤に移行し デバイス 画面サイズ 入力モード全体で スムーズな操作性を維持しながら システムを進化させています 個々の機能を設計する場合でも システム全体を構築する場合でも Appleのフレームワークの柔軟性により あらゆるデバイスに対応した設計が シームレスでスケーラブルかつ 強力になります このリリースには探求すべきことが たくさんあるので 自分で発見する 楽しみは残しておきますね 最も影響の大きい変更点を強調するために 3つの重要な分野に焦点を当てます まず 新しいデザイン言語と それが大規模な一貫性の基盤を どのように構築しているか 次に ナビゲーションとコンテンツの エンゲージメントを導く構造です 最後に 継続性により インタラクションの 発生する場所に関係なく一貫性を もたらす仕組みについて説明します では始めましょう Liquid GlassはAppleの進化する デザイン言語の形成に大きな役割を果たし プラットフォーム全体で統一感を 持たせながら 各デバイスでの 体験を最適化しています このシステムを設計するにあたり 細部の影響に焦点を当てました 体系的なアプローチとは あらゆるレベルで 意図を持って設計することであり 最も小さなコントロールから最大の画面まで すべての要素を全体との関係の中で 考慮することを意味します Appleのシステムカラーは Light、Dark、 Increased Contrastの各表示モードで 微細ながら意味のある調整が施され Liquid Glassとの調和が実現しました これにより 色の識別性を向上させながら Appleならではの前向きなデザインの 精神が維持されています タイポグラフィの調整により明瞭さと構造が 強化され より太字の左揃えにすることで アラートやオンボーディングなどの 重要な場面での可読性を向上させています 最も重要な変化の1つは 形状の使い方です Appleのハードウェアは一貫した ベゼルのデザインが特徴で その精度がUIにも反映され 曲率 サイズ 比率が調和することで 手に持ったデバイスと 視覚体験の間に統一された リズムを生み出しています 形状が静かに調和する幾何学的な構造は 同心性によってもたらされます

半径と余白を共通の中心に揃えることで 形状を自然に入れ子構造に することができます また 視覚的なバランスを保つために 適切な場合は 数学的に中央配置され そうでない場合は微妙にずらして 調整されます 同心レイアウトの構築には 3種類の形状を使用します 固定形状は一定のコーナー半径を維持します カプセルの半径は コンテナの高さの 半分に設定されます 同心形状の半径は親要素の 半径からパディングを 差し引いて計算されます

カプセルの形状は 自然に同心性をサポートします そのため このデザインはシステム全体に 広がり スライダーやスイッチの 対称的な比率 バーやボタンに反映され グループ化されたテーブルビューの 丸みを帯びた角にも影響しています カプセルはタッチ操作に適した レイアウトでは視認性を高めますが 密度の高いデスクトップ環境では特定の アクションを際立たせるのに最適です macOSではミニ、スモール、ミディアムの コントロールは引き続き角丸長方形で インスペクタパネルなどの コンパクトで高密度なレイアウトに 最適となっています 大型のコントロールは カプセル形状を採用し 新しい特大サイズと共に Liquid Glassの特性を活かして より広い領域での視認性を向上させます これらを組み合わせることで デスクトップ レイアウトに階層と調和が生まれます 重要なのは自分のビジュアルデザイン言語と インターフェイス要素が Liquid Glassと 調和することです 同じキーで音楽を演奏するようなものです インターフェイス要素は システムの リズムやトーンと対立するのではなく 補完し合うべきです ここからが難しくなるところです 独自のデザインシステムを 管理している場合はなおさらです 先ほど説明した3種類の形状によって コンポーネントとシステムの 整合性が維持され AppleのAPIとの 連携も容易になります

アプリを更新するときは 角が過度に 挟まったり広がったりしていないか 注意してください それらは視覚的な緊張感を生み 調和を損ねる可能性があります この現象は カード内のアートワークなど 入れ子構造のコンテナでよく見られます 何か違和感を感じたら 答えは簡単です その形状は同心円状にする必要があり それによって システムは内側の 半径を自動計算できます このボタンのように デバイスの端付近で その影響が見られることもあります スマートフォンのレイアウトでは カプセル形状と余白によって画面の端に 適切なスペースを確保します iPadやMacでは ウィンドウの端に揃う同心形状を使用して より良いバランスを実現します コンテナ内でも単独でも機能する コンポーネントを管理するための 便利なテクニックがあります 同心形状を使用してフォールバック半径を 設定する方法です 同心円の値は入れ子構造の際に適応し コンポーネントが単独の場合は フォールバックが適用されます 基礎が整ったら 次のステップは Liquid Glassを最大限に活用できる アプリの構造を理解することです アプリのイマーシブ性が向上し コンテンツ重視になるにつれて UIは 必要に応じてインタラクションをサポートし 不要なときは目立たないようにするべきです Liquid Glassは UIに新しい 機能レイヤーを定義し コンテンツの上に 浮かぶことで 視線を奪うことなく 構造と明瞭さを提供します これを実現する方法の1つとして 表示要素間の関係を明確に 描写することが挙げられます それらがどう見え どのように 元の要素と接続されたままでいるかを 空間的な かつ安定した形で表現します 例えばアクションシートは 従来 アクションの発生場所に 関係なく 画面の下部に 表示されていました 現在は アクションそのものから発生し アクションシートの ソースとして機能します 明確に定義された役割により システムはその関係を理解し タップされた要素から直接拡張される インタラクションを固定できます カスタムコントロールを作成する際は 同じアプローチを使用して 必ずマテリアルを直接コントロールに 適用し 内部ビューには 適用しないでください

Liquid Glassは微妙なマテリアルの変化を 導入してナビゲーションの フォーカスを反映し ユーザーの操作の 意図を強調します 複雑に聞こえるかもしれませんが シートが表示される際にモダリティを 示すためのディミングレイヤーのような なじみのある手法を活用しています タスクがメインフローを中断する場合は Liquid Glassとディミングレイヤーを 組み合わせて注意を集中させ シートを 明確で意図的な空間として機能させます 一方 タスクが並行して実行される場合は Liquid Glassは自然な区切りを作り 流れを崩すことなく 視認性を保ちます シートを上にドラッグするようにフォーカスを 移動すると Liquid Glassはわずかに後退し より不透明になりながら ゆっくりとサイズを拡大して より深いレベルの エンゲージメントを示します フォーカスと奥行きの役割に加えて Liquid Glassは ナビゲーション コントロールの向上にも役立ちます 従来 インターフェイスが静止している時は コントロールが背景に溶け込んでいました Liquid Glassは コントロールを 持ち上げることでコンテンツからの分離を 強調し インタラクティブ性を高めます

まず最初に カスタマイズしたバーが ある場合は 整理してすっきりさせましょう ボタンに適切な重みを持たせるために背景や 境界線を追加するのはよくあることでした これは長い間一般的であり 完全に妥当なことでした しかし 新しいシステムの外観により 強調の方法を見直すことになり このようなカスタマイズは 不要になっています

装飾に頼るのではなく レイアウトとグループ化によって 階層構造を表現する必要があります 強固な構造を作成するには バーの項目を整理して 可読性と 空間の明瞭さを向上させることが重要です 新しい外観に更新すると 適切なAPIを 使用してグループ化された項目は 自動的に更新されて背景を共有し 空間的な関係が維持されます 項目が期待どおりに グループ化されない場合は いくつかの方法を試してみてください バーが混み合っていると感じたら それをヒントに不要な要素を削除し 補助的なアクションを 詳細メニューに移動して 整理された使いやすい状態を保ちましょう バーの項目は 機能と 使用頻度でグループ化します 関連するアクションを実行するボタンは通常 まとめて配置する必要があります ただ例えば「Select」と共有アイコンなど 記号とテキストはまとめないでください 1つのボタンとして誤認される 可能性があります テキストボタンが必要な場合は それぞれ独立したコンテナに配置しましょう

「完了」のようなプライマリアクションは 個別に配置し 色付きで表示します iOSとiPadOSでは青い チェックマークになることが多く macOSでは目立つテキストボタンとして 表示され 視認性が高く 操作しやすい 明確な焦点が作成されます タブバーはアプリの中で最も 永続的に表示される要素の1つです 適切に整理することで ユーザーは レイアウトを明確に把握でき セクション間をスムーズに移動できます コンテンツがすぐに表示されない場合は 検索が不可欠になります そのため iOSでは現在 画面下部に 専用の検索タブが追加されており より迅速なアクセスと 操作が可能になっています タブバーでは アクセサリビューを使用して メディア再生コントロールのような 永続的な機能を アプリ全体に 表示し続けることもできます 画面固有のアクションはここに配置しない ようにします 例えばチェックアウトの ボタンはそれがサポートする コンテンツと共に配置します UIの異なる部分の要素を混在させると 階層が曖昧になり 持続的な要素と コンテキスト依存の要素の区別が 難しくなります 次に視覚効果によってコンテンツの優先度を 明確にしてインタラクションを 明瞭にする方法を探りましょう Liquid Glassを使用する要素は コンテンツから明確に分離して 読みやすさを維持しましょう 現在のSafariと同様に コントロールは システムマテリアルの上に配置され コンテンツ上に直接は配置されません そうでないと コントラストが 損なわれる可能性があります スクロールエッジ効果は境界を強化し 硬い区切り線を繊細なぼかしに 置き換えることで 煩雑さを軽減し UIの可読性を保ちます また スクロールエッジ効果は 装飾ではないため オーバーレイのように 画面を覆ったり 暗くなったりすることはありません この効果はUIとコンテンツの境界を 明確にするだけなので フローティングの UI要素がない場合は 使用しないでください

スクロールビューは固定のコントロールが 重なると 自動的にエッジ効果を表示します システム全体にソフトとハードの 2つのスタイルがありますが それらを混在させたり 重ねて配置したりすることは避けてください ソフトがデフォルトであり 特にiOSやiPadOSでは ほとんどこちらを使用します これはLiquid Glassを活用して スムーズな遷移を実現するもので ボタンや入力などの インタラクティブ要素に適しています ハードは主にmacOSで使用されます より強力で不透明な境界が作成されるため インタラクティブなテキストや 背景のない コントロール、視認性を高める必要がある 固定のテーブルヘッダーなどに最適です スクロールエッジ効果はビューごとに 1つだけ適用します iPadやmacOSのSplit Viewレイアウトでは 各ペインにそれぞれ適用できます ただし 高さを統一して 整列を維持してください コンテンツのフォーカスは サイドバーにも引き継がれ 現在はエッジまで 拡張できるようになりました これをサポートするために サイドバーがはめ込まれ Liquid Glassによってコンテンツを背後に 流してイマーシブ感を高められます 背景拡張効果により サイドバーの背後に コンテンツを展開し 視覚要素をレイアウトの中央に 配置したまま 画面の全幅を活用できます これはヒーロー画像や色付きの背景など 広がりを感じさせたい表面に 活用することができます テキストやコントロールは 必ず手前のレイヤーに配置して 不要な視覚的歪みを防ぐようにしましょう それだけではありません スクロールビューがデフォルトで サイドバーの下に拡張されるため カルーセルの動きが自然になり 中断のない発見がサポートされます

背景拡張効果はビューごとに適用できるため 柔軟に活用して より豊かなレイアウトを構築できます ここでは 上部と下部のビューで 背景拡張効果を利用しつつ 中央のスクロールビューは 独立しています デザイン言語がまとまりを生み 構造がアクションを形成することで 継続性が全体を結び付け 流れるような体験が生み出されます 考え方はシンプルです デバイスの 切り替えやウィンドウのサイズ変更の際 最初からやり直すのではなく 同じ作業を継続できるようにするのです アプリはユーザーの作業を 中断することなく引き継いで その瞬間を維持する必要があります レイアウト 階層 インタラクションの いずれにおいても 1つの決定は デザインが適用されるすべての デバイスに反映させてください それにより デザインプロセスが 実際に簡素化されます プラットフォームごとに ゼロから設計するのではなく アプリの基本構造を 一度設計するだけで済みます これは新しい概念ではありませんが Appleはこれを推し進めています それでは デバイスのコンテキストの 考え方について簡単に復習しましょう アプリを更新して新しいデザインシステムに 移行する時こそ プラットフォーム間での体験の 一貫性を再評価するチャンスです iPhoneでは 狭い縦長の レイアウトにズームインします Macでは 広くて広大な キャンバスにすべてが展開されます iPadはシステムスタックの中間層であり iPhoneの機能的なユーティリティと Macの奥行きのある広大な空間の 橋渡し的な存在で デザインのスケーリング方法を 学ぶ場所になります この基礎を踏まえて 共有コンテンツが どのように継続性を実現するかについて 考えてみましょう 先ほどの空間構成の例を 覚えているでしょうか そこがポイントになります コンテンツが意図的にグループ化されている 場合 レイアウトが変化しても 一体感を維持することが重要です デバイス間で同じシンボルを 使用することで一貫した意味を保ち 繰り返しを通じて親しみやすさを構築します しかし すべてのアクションが 明示的なわけではありません 鉛筆のアイコンは注釈を意味する場合があり チェックマークは「確認」に見えるため 「選択」や「編集」などのアクションは 誤解されやすくなります 明確な短縮形がない場合は テキストラベルが常に適切な選択肢です

先ほどお気づきかもしれませんが バーは テキストよりも記号に依存する傾向があり この変化は メニューを含め プラットフォーム全体で発生しています 認識の向上に役立つ場合は メニューに シンボルを配置することを推奨します アクションが密接に関連している場合 例えば複数のコピー方法があるような場合は 同じアイコンや似たアイコンを 使うことは避け シンボルを一度使用してグループを紹介し あとはテキストで詳細を示します ヒューマンインターフェイスガイドラインの アイコンのページも更新され 一般的なアクションの優先グリフの リストも追加されています SF Symbolsを直接使用する場合でも 独自のシステムに対応させる場合でも これは有益な指針になります デバイス間で継続性を維持するには コンポーネントを拡張可能な構造にし プラットフォームごとの違いを 共有フレームワークの一表現として扱い 例外にしないようにします

各コンポーネントを様々な環境で 機能させるために重要なことは その構築方法と どう動作させるかの2点です まず 共有構造を定義することから始めます コンポーネントのレイアウト要素は シンボルと同様にそのまま保持し 使い慣れた配置で再利用する必要があります この実際の例を サイドバーのアクションや テーブルの項目で見てきましたが メニューについても 同様のアプローチで迫りました macOSのポップアップメニューとiOSの コンテキストメニューは 見た目は違っても どちらにも選択インジケーター、アイコン、 ラベル、アクセサリがあります さらに 構造が変化しても 動作がギャップを埋めます コンポーネントでは常に同じコア インタラクションをサポートしてください 例えばタブバー、セグメントコントロール、 サイドバーなどのコンポーネントはいずれも 選択、ナビゲーション、状態を 一貫した方法で示し 形状に関係なく 同じ機能とフィードバックを提供します これは単にプラットフォームを つなぐだけでなく 各プラットフォームで 関連するコンポーネントを 密接に結び付ける意味もあります これらのコンポーネントが連携することで 全体としての一体感が高まります

これが新しいデザインシステムの全容です ビジュアルデザイン、アーキテクチャ、 コンポーネントのすべての更新が Liquid Glassによって結び付けられています 次は皆さんの番です Appleデザインの新たな章を皆さんと 共有できることを嬉しく思います ヒューマンインターフェイス ガイドラインを参照し Appleデザインリソースの 新しいUIキットを確認して ご自身のアプリでこうしたアイデアを 実際に活用してみてください ありがとうございました またお会いしましょう