WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Get to know the new design system

Get to know the new design system

SwiftUIDesign
元の動画を見る

ハイライト

Maria は新デザインシステムを3つの要素に分解しました：視覚言語（色、フォント、形状）、構造（Liquid Glass はコンテンツの上に浮かぶ層）、連続性（iPhone / iPad / Mac で同じデザインがどう表現されるか）。

主要内容

多くの App が iOS 26 にアップグレードすると、「違和感」が生じることがあります。ボタンの角丸が尖りすぎている、カードに埋め込まれたサムネイルの角が丸すぎる、bar 上のボタンが押し合っている、scroll の端に硬い分割線が現れる──といった問題です。コードレベルのバグではなく、旧デザインシステムで手動で追加された背景、影、固定された角丸が原因です。それらが Liquid Glass という新しいマテリアルの前で、急に場違いに見えてしまうのです。Maria はこの感覚を「異なる調の楽器が一緒に演奏されている」と表現し、App が再びシステムと調和するには、最底辺の視覚言語から作り直す必要があると説いています。

Apple の解決策は、デザインシステム全体を3つの次元に再統合することです。1つ目は視覚言語：システムカラーは Light / Dark / Increased Contrast の3つのモードで微調整され、Liquid Glass 上でも色相が区別できるように。フォントは太くして左揃えにし、alert や onboarding など重要なシーンでの可読性を向上。最大の変化は形状で、すべての UI の角丸が「同心（concentricity）」という原則に基づいています。2つ目は構造：Liquid Glass はコンテンツの上に浮く機能層です。Action Sheet はトリガーしたボタンから「生える」ように出現し、sheet を上にスワイプするとより不透明に、より大きくなります。scroll edge effect が硬い分割線に代わり、sidebar は inset に変更され、コンテンツがその背後まで伸びることが可能になりました。3つ目は連続性：同じコンポーネントが iPhone（狭く、縦向き）、iPad（中間の橋渡し）、Mac（広いキャンバス）で anatomy を共有すべきです。差異は capsule vs rounded rect、compact vs regular といったプラットフォーム変体で表現し、ゼロから描き直すことはありません。

詳細

3つの形状タイプは、システム全体の幾何学的な基盤です（03:42）。 Maria は非常に明確な3択のルールを提示しています：

  • fixed：角丸が固定。macOS 上の Mini / Small / Medium コントロールなど、高密度のデスクトップレイアウトに適しています。
  • capsule：角丸がコンテナの高さの半分。同心のネストを自然にサポートするため、slider、switch、bar、button、grouped table view で使用されます。macOS 上の Large と新しい X-Large コントロールも capsule に変更されました。
  • concentric：角丸が「親コンテナの角丸 - padding」で自動計算され、ネストされたレイヤー間の曲率が視覚的に一致します。

カード内のサムネイルの角が「尖りすぎ」または「丸すぎ」問題がある場合、答えはほぼ一つ：親コンテナと concentric にすることです（05:19）。Maria は実用的なテクニックも紹介しています：コンポーネントがコンテナ内にネストされる必要があり、単独でも現れる場合は、concentric に fallback radius を追加できます──ネスト時は concentric 値を使用し、単独時は fallback を使用します。

bar の整理作業はアップグレードの第一歩です（08:33）。 旧システムでは、ボタンに背景や枠線、影を手動で追加していました。以前はこれらの装飾で「これが押せるものだ」と表現する必要があったからです。新システムでは、emphasis は Liquid Glass が自動的に担当するため、これらの装飾はすべて削除すべきです。その後、正しいグループ化 API を使って bar items を「機能 + 頻度」でグループ化すると、システムが自動的に同グループの button で背景を共有します。symbol とテキストを同じグループに混ぜないでください──Maria が挙げた悪例は、「Select」と共有アイコンを隣に配置することで、これらが同じボタンだと誤認されるケースです。Done などの主要操作は別のセクションに分け、tint を付けます。iOS / iPadOS では青色のチェックマーク、macOS では prominent なテキストボタンになります。

Action Sheet の位置が変わりました（06:54）。 以前は画面のどこをタップしても、Action Sheet は下から出現していましたが、現在はトリガーしたボタンから「生える」ようになります。カスタムコントロールを作成している場合、material をコントロール自体に直接適用し、内部の view には適用しないでください。そうしないと、システムが「ソース」と「ターゲット」の関係を識別できなくなります。Sheet の状態変化も同じ言語に統合されました：モーダルタスクは Liquid Glass + dimming layer でメインフローへの割り込みを表現し、並行タスクは Liquid Glass のみを使用し（dimming なし、元々焦点を奪うべきではないため）、ユーザーが sheet を上にスワイプすると、より不透明に、より大きくなり、「より深いインタラクション」を暗示します。

Scroll edge effect が硬い分割線に代わります（11:18）。 soft と hard の2種類があります：iOS / iPadOS ではデフォルトで soft、柔らかく遷移します。macOS では pinned table header など硬い境界が必要な場所で hard を使用します。2種類を混用したり重ねたりしないでください。1つの view には1種類の scroll edge effect のみを使用します。インターフェースに浮動 UI 要素が含まれない場合は、scroll edge effect を追加しないでください──これは装飾ではありません。

Sidebar は現在 inset です（12:34）。 新しい sidebar は Liquid Glass で構築され、コンテンツがその背後へ「流れる」ことができます。backgroundExtensionEffect で hero 画像や tint された背景などの大色域を sidebar の背後まで伸ばせますが、視覚的な中心はメインコンテンツエリアに保たれます。テキストとコントロールはより上層に配置し、sidebar のブラーによる歪みを避ける必要があります。Scroll view もデフォルトで sidebar の下まで伸び、carousel が自然にスライドします。

連続性の本質は「anatomy を1回だけ設計する」です（13:34）。 クロスプラットフォームの同名コンポーネントは同じ構造（selection indicator、icon、label、accessory）を共有すべきです。iOS の context menu と macOS の popup menu は見た目が異なりますが、骨格は同じです。tab bar、segmented control、sidebar などのコンポーネントは、異なるプラットフォームで同じ selection / navigation / state フィードバックを提供する必要があります。search が必要な場合、iOS は現在、下部に独立した Search タブを直接持ち、toolbar に隠すべきではありません。tab bar には accessory view を取り付けられます。たとえば、ページをまたがって常駐する再生コントロールなどですが、checkout などのページ関連ボタンは入れないでください。それはコンテンツそのものに属します。

重要ポイント

  • 何をするか：3つの形状タイプでデザインシステムを統一する

    • なぜ価値があるか：Liquid Glass 上では、角丸の幾何学的な関係が「調和」の源です。任意の角丸値を混用すると、App が iOS 26 のシステムコンポーネントの隣で異質に見えます。
    • どう始めるか：既存 App のすべての角丸値を棚卸しし、各コンポーネントを fixed / capsule / concentric のいずれかに分類します。ネストされたコンテナはすべて concentric に変更します。ボタンとタッチターゲットは優先的に capsule にします。macOS 上の高密度な inspector は fixed にします。

  • 何をするか：すべてのカスタム bar スタイルを整理する

    • なぜ価値があるか：古い App は通常、bar ボタンに手動で背景、枠線、影を追加しており、これらの装飾は新システムでは冗長かつ競合し、toolbar が「汚く」見える原因になります。
    • どう始めるか：toolbar / navigation bar からすべての手書きの背景、border、shadow を削除します。公式グループ化 API を使って「機能 + 頻度」でグループ化します。主要操作（Done、Save）は別グループにして tint を付けます。余分なサブボタンは More メニューに移動します。

  • 何をするか：硬い分割線を scroll edge effect に置き換える

    • なぜ価値があるか：硬い分割線は旧時代の産物で、Liquid Glass 上では硬く見えます。scroll edge effect はシステムレベルの「コンテンツ境界のヒント」です。
    • どう始めるか：iOS / iPadOS では soft を使用し、macOS 上の pinned header / テキストコントロールでは hard を使用します。1つの view には1種類のみを使用します。浮動 UI 要素がない場合は追加しません。

  • 何をするか：sheet をトリガーしたソースから生えさせる

    • なぜ価値があるか：spatial な関係はユーザーの認知コストを削減できます──どこを押したか、フィードバックはそこから来る、という直感的な繋がりを作ります。
    • どう始めるか：すべての Action Sheet / popover のソースを確認し、それらが具体的な source view に anchor されていることを確認します。カスタムコントロールでは、material をコントロール自体に直接適用し、内部 view には適用しません。

  • 何をするか：クロスプラットフォームで anatomy を共有し、platform variation のみで差異を表現する

    • なぜ価値があるか：重複デザインのコストを削減し、ユーザーが iPhone / iPad / Mac 間で切り替える際に安定した筋肉記憶を構築できます。
    • どう始めるか：既存コンポーネントから共通の anatomy（selection indicator、icon、label、accessory）を抽出します。差異は capsule vs rounded rect、compact vs regular、context menu vs popup menu といったプラットフォームレベルの変体に任せます。

関連セッション

コメント

GitHub Issues · utterances