【WWDC25】 セッションメモ 「Get to know the new design system」 で新しいデザインシステムの理解を深める
2025.07.01はじめに
iOSアプリエンジニアのリルオッサです。
WWDC25では新しい情報がAppleから発信されているので、セッションを色々とみながらメモしていき、皆さまに共有していきたいと思います。
詳細について気になる方はぜひ公式の動画をみてください。
今回は前回見たセッションの1歩踏み込んだ内容そうなので、まだ見ていない方は下記もチェックしてみてください。
Get to know the new design system
概要
新しいデザインシステムに焦点を当て、ビジュアルデザイン、情報アーキテクチャ、コアシステムコンポーネントの重要な変更点について詳しく説明します。この新しいシステムでは、インターフェイスとコンテンツ間の関係を再構築し、デバイス、画面サイズ、入力モードを問わず、調和性かつ一貫性に優れたダイナミックなデザインを作成できます。このセッションで詳細をご確認ください。
動画
簡単まとめ
- Appleは全プラットフォームを通じて共通のデザイン基盤の構築を進めている
- デザイン要素間の調和がアプリ全体の一貫性を生み出す
- 新システムに適応するためには、カスタム実装よりも標準のButtonShapeを活用するのが良さそう
- アクセサリViewは画面固有のアクションには使用しない
- 新デザインシステムの導入は、既存アプリのデザインを再評価する良い機会
- これまでカスタマイズしていたバーは、このタイミングでシステム標準に戻すことを検討する
- iOSからmacOS、visionOSまで、全Appleプラットフォームでの一貫した体験設計を目指す
- UI要素では、テキストよりもシンボルの活用が増えているが、意味が明確に伝わらない場合はテキストラベルを使用する
メモ
システムカラーは、ライト、ダークなどの外観で些細ではあるが意味のある調整が行われており、Liquid Glassとの調和を保ちながらも色相の差別化が向上している。
タイポグラフィにも変更が加わり、
| Before | After |
|---|---|
 |
 |
改良後はより太文字で左揃えになり、見やすさが向上している。
| 例1 | 例2 |
|---|---|
 |
 |
また、形状もAppleハードウェアの一貫したデザインに馴染むよう統一されており、手に取った際の調和を生み出している。
共通の中心を基準に半径と余白を揃えることで、自然な調和が生まれる。
同心円状のレイアウトを構築するためには3種類の図形を使用する。
- Fixed
- 角の半径が一定
- Capsule
- コンテナの高さの半分が半径
- Concentric
- 意味: 同心円状の
- 親の半径からパディングを差し引いて半径を計算
このカプセル形状は自然に同心円性をサポートするため、システム全体で採用されている。
しかし、デスクトップ環境では、目立つアクションに使用すること
macOSでは以下のコントロールは、引き続き角丸四角を使用する。
MiniSmallMedium
しかし、LargeとExtra largeはLiquid Glassを採用し、カプセル状になっている。
これはカード型のコンテナによく見られる現象で、
| 悪い例 | 良い例 |
|---|---|
 |
 |
何かおかしいなと感じたらコンテナ形状を同心円状にすることでシステムが内側の半径を自動計算してくれる。
| 悪い例 | 良い例 |
|---|---|
 |
 |
iPhone画面の端に置くようなボタンでは、カプセル形状を採用すること。
iPadとMacは、ウインドウの端に合わせて同心円状を使用すること。
アプリの表面上でのレイヤーの関係を明確にすることで、構造が明確になる。
上記のツールバーの例では、空間に固定されているように表示されており、表示されているコンテンツとの関係性が分かる。
| 古いアクションシート | 新しいアクションシート |
|---|---|
 |
 |
以前のアクションシートは、発生元に関係なく画面下部に表示されていたが、新しいデザインでは、ソースとなるアクション自体から生成されるようになり、関係性を理解しやすくなっている。
カスタムコントロールを作成する時も同様に、コントロールに直接マテリアルを適用すること。
アプリ上のタスクがメインフローを中断する場合は、Liquid Glassと暗くなるレイヤーを組み合わせて、注意を集中させることでシートが目的の空間であることを伝えることができる。
タスクが並行している時は、Liquid Glassが自然な分離を作り出し、現在の状態を分かりやすく表現できる。
| モーダル中 | モーダル大 |
|---|---|
 |
 |
シートが大きくなることでより不透明になり、背面レイヤーとの分離状態が視覚的に分かりやすくなる。これにより、フォーカスしやすくなる。
これまで独自のカスタマイズは一般的でしたが、これからは新しいシステムの外観に合わせていく必要があり、このような独自のカスタマイズは新しいデザインと調和をとっていくためにも廃止していく必要がありそうです。
階層は装飾に頼らず、レイアウトとグループ化で表現していく必要がある。
新しい外観を適用すると、適切なAPIを使用してグループ化されたアイテムは自動的に更新され、空間的な関係が表現してくれる。
バーが混雑している場合は、
- 不要なものは削除する
- セカンダリアクションをメニュー(上記の
・・・ボタン)に集約する
バーの項目は、機能と使用頻度などで関連するアクションをグループ化をすることを推奨するが、
| 悪い例 | 良い例 |
|---|---|
 |
 |
シンボルとテキストは単一のボタンとして認識される可能性があるため、グループ化しないこと。
完了などの主要なアクションは個別かつ色付きで表示されるため、焦点が当たるやすく操作しやすくなっている。
iOSでは、タブバー部分に検索タブが追加され、簡単に検索できるようになり素早くコンテンツにアクセスしやすくなっている。
アクセサリViewを使用することで、アプリ全体で常に表示されるメディア再生コントロールのような永続的な機能もサポートできる。
ただし、画面固有のアクションをタブバーに配置することは避けること
タブバーアイテムのような永続的なものと現在のコンテンツに関するものが区別しにくくなるため、画面固有のアクションは上記スクリーンショットのように表示コンテンツの一部として配置すること。
Scroll edge effectsは装飾的なものではなく、コンテンツが交わる場所を明確にするだけのため、フローティングUI要素がない場所では使用しないこと。
また、Scroll edge effectsのはSoftとHardの２つのスタイルがあるが、
| ソフト | ハード |
|---|---|
 |
 |
混在させないこと。
サイドバーはLiquid Glassで表現されるようになり、Background extension effectsを使うとサイドバーの背景にもコンテンツが広がるような表現ができる。
この効果を使うことで、スクロール中のコンテンツも自然に移動しているようにみえる。
Background extension effectsは上記のようにViewごとに適用できる。
デザインは、全てのプラットフォームで一貫性を持つべきで、プラットフォームごとに設計するのではなく、1回設計したものを適用するだけで良いはず。
実際にデザインシステムを更新した際に、別のプラットフォームでの体験がどのくらい期待しているものになっているのか見てみるのが良さそうです。
バーは、テキストよりもシンボルを活用することの方が多くなっているが、明確な省略形(シンボル)が存在しない場合は、テキストラベルを使用する。
メニューでは、認識しやすいようにシンボルを使用する。
| 悪い例 | 良い例 |
|---|---|
 |
 |
ただし、操作が関連するものは、アイコンを重複させず、グループごとに一度だけシンボルを使用すること。
プラットフォームの違いを共通のフレームワークの表現として扱い、例外としないこと。
プラットフォーム間で見た目が異なるコンポーネントの場合でも、基本的な構造は同じにしてユーザーに馴染みのあるものにすること
また、コンポーネントは全てのプラットフォームで一貫したインタラクションを持たせる必要があり、それにより、ユーザーが直感的に操作できるようになる。
おわりに
新しいデザインシステムについての理解がより深まりました。iOS 26 Betaを実際に使用していますが、確かに全体的により丸みを帯びたデザインになっていると感じています。
個人的な疑問として、SlackやXのiOSアプリで採用されているような「タブバーとその左上にフローティングボタンを配置する」デザインパターンについて、新システムではどのように対応するのがベストプラクティスなのか気になりました。
当初はMusicアプリのようなアクセサリViewの活用が良いのではないかと考えていましたが、セッションでは「画面固有のアクションをタブバーに配置することは避けること」と明確に示されていました。
今後、この新しいデザインシステムを実際に活用しながら、実践的な知見を深めていきたいと思います。
関連HIG
