WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Say hello to the new look of app icons

Say hello to the new look of app icons

visionOSRealityKitSwiftUI
元の動画を見る

ハイライト

Apple は visionOS のレイヤー型アイコン言語と実物のガラスの特性を組み合わせて Liquid Glass マテリアルを生み出し、iOS / iPadOS / macOS / watchOS のアイコンデザイングリッドを統一しました。さらに、Light Glass / Dark Glass / Light Tint / Dark Tint という 4 種類の半透明アピアランスを新たに追加しています。

主要内容

ここ数年、開発者にとって app アイコンのメンテナンスは面倒な作業でした。iOS、macOS、watchOS にはそれぞれ独自のキャンバスサイズや角丸の規定があり、1 つのアイコンをプラットフォームごとに描き分ける必要があったからです。macOS では一部のアイコンで、Contacts のインデックスタブのようなサブ要素が本体形状からはみ出すことがあり、統一感もエレガントさも欠けていました。さらに Dark Mode、Tint Mode が順次加わり、アセットの数は増える一方でした。

WWDC 2025 では、このデザイン言語を一新しています。Apple は visionOS のレイヤー型アイコンからインスピレーションを得て、本物のガラスの反射、屈折、フロスト感といった特性を研究し、Liquid Glass と名付けたマテリアルを作り上げました（00:54）。このマテリアルではエッジのハイライト、フロスト、半透明レイヤーを重ね合わせており、アイコンが内側から発光しているように見えます。iOS のホーム画面では、ジャイロセンサーの入力に応じて光がエッジを流れ、まるで周囲の世界を映し込んでいるかのように振る舞います（01:23）。

デザインシステムの面でも、すべてのプラットフォームで共通のグリッドを採用しました。角丸長方形のキャンバスは 1024 ピクセル、watchOS の円形キャンバスは 1088 ピクセルとし、あえて長方形より一回り大きくすることでクロスプラットフォームでの視覚的な一貫性を確保しています（04:38）。アピアランスモードは 2 種類から 6 種類へと拡張されました。Light、Dark、モノクロ Glass（Light / Dark の 2 バージョン）、Dark Tint（前景に色を載せる方式）、Light Tint（Glass 自体に色を注入する方式）で、これらが iPhone、iPad、Mac、Apple Watch すべてで同時に有効になります（02:06）。

詳細

新しいマテリアルの中核はレイヤリング（layering）です。最もシンプルなアイコンは背景と前景レイヤー 1 枚のみで、たとえば Messages の吹き出しがそれにあたります（05:47）。前景は何層にも重ねることが可能で、旧版の Podcasts はマスク表現でレイヤーを示唆していましたが、新版では同心円と人物のシルエットを実際に積み重なるレイヤーとして扱い、立体感を生み出しています（06:17）。

イラストはフラットに寄せる。 旧版の Chess ではパースの効いた 3D の駒を使っていましたが、立体感が強すぎて Glass マテリアルとぶつかっていました。新版では正面からのフラットな視点に変更し、立体感はマテリアル自体のレンダリングに任せています（06:46）。Preview のアイコンは虫眼鏡のパースを残していますが、これは「フォーカス領域を強調する必要がある」場合に限定したもので、立体的な形状はあくまで機能のために使うべきだという考え方です（07:13）。

半透明は控えめに。 Photos の旧アイコンは花びらが重なり合う透過表現を採用していました。新版ではむしろ重なりの数を減らし、マテリアルのエッジ反射を見せるためのスペースを確保しています（08:05）。Home アイコンの処理はさらに大胆で、ドロップシャドウやベベルを取り除き、レイヤー数を減らして形状を丸くし、システムの Glass マテリアルに統一的なレンダリングを任せています（08:52）。原則として、ソースファイルにシャドウやベベルといった静的なエフェクトをベイクするのはやめてください。これらはシステムマテリアルが動的に生成します。

ディテールは鋭角と細線を避ける。 角を丸めることで、光がエッジに沿ってなめらかに流れるようになります。Settings アイコンのギアは、より丸みを帯びた歯形を採用しました（09:42）。残したいディテールには太めの線幅を使ってください。そうしないと小さなサイズに縮小したときに失われてしまいます。

背景は柔らかいグラデーションが好ましい。 純白や純黒は推奨されず、Apple は System Light と System Dark という 2 種類の公式グラデーションを提供しています。これらはコントラストとマテリアル効果を考慮して調整されたものです（10:24）。Dark Mode はすでに広く普及しているため、背景はむしろ彩度のある色を使うことが推奨されています。そうすれば Light / Dark を切り替えたときの差異がより明確になります（10:42）。

macOS の互換性戦略は巧妙です。角丸長方形に近い形状の旧アイコンは、自動でマスクされたり新テンプレートに引き伸ばされたりして、自動的に新マテリアルが適用されます（03:46）。形状が特殊な旧アイコンについては、システムがドロップシャドウを取り除き、自動で角丸長方形のキャンバスに収めます（04:00）。ただし Apple は手作業での描き直しを明確に推奨しており、Photo Booth はその例として描き直されています。

公式テンプレートは Figma、Sketch、Photoshop、Illustrator の 4 つのツールに対応しており、developer.apple.com の Apple Design Resources ページからダウンロードできます（05:11）。

セッションの内容を実行可能なフローにまとめると、以下の手順をたどるだけで新マテリアルを使ってアイコンを描き直すことができます。

1. テンプレートをダウンロード: developer.apple.com → Apple Design Resources →
   Figma / Sketch / Photoshop / Illustrator 向けの新版 icon template を選択
2. キャンバスを選ぶ: 角丸長方形 1024 × 1024 px、円形（watchOS）1088 × 1088 px
3. レイヤーを分割: 背景 1 層 + 前景を複数層（Messages は前景 1 層のみ。Podcasts は同心円と人物を別レイヤーに分ける）
4. 静的エフェクトを削除: ソースファイル内の drop shadow / bevel / inner glow を削除（システムマテリアルが動的に生成する）
5. イラストを簡素化: 3D パースを正面視点に変更し、重なる半透明形状を減らす（Chess、Photos の改版を参照）
6. ディテールを調整: 鋭角を角丸に、細線を太く、ギアの歯数を減らして丸みを付ける（Settings アイコン）
7. 背景を設定: 純白・純黒の代わりに System Light / System Dark グラデーションを使い、メインカラーは彩度のある色に寄せる
8. Icon Composer に書き出し、6 種類のアピアランスモードを順に切り替えてプレビュー:
   Light → Dark → Mono Light Glass → Mono Dark Glass → Dark Tint → Light Tint
9. iPhone / iPad / Mac / Apple Watch / App Store プロダクトページの 5 か所で検証

重要なポイント:

  • レイヤリングが新マテリアルの土台: 背景 1 層 + 前景複数層。Glass マテリアルはレイヤー間の奥行きから立体感を生成するため、単層のフラットアイコンでは視覚情報の大半が失われます。
  • ベイクされたエフェクトは削除する: ソースファイル内のドロップシャドウ、ベベル、インナーグローはシステムの動的ハイライトとぶつかるため、元から削除しておく必要があります。
  • 6 種類のアピアランスをすべて確認する: Light、Dark、Mono Light / Dark Glass、Dark Tint（前景に色を載せる）、Light Tint（Glass に色を注入する）。どれか 1 つでも見栄えが悪ければセット全体が台無しになります。
  • キャンバスサイズはハードな制約: 1024 px の角丸長方形と 1088 px の円形は、watchOS であえて「overshoot」させた結果であり、クロスプラットフォームの一貫性はこの 2 つの数字によって支えられています。
  • 背景はカラーグラデーションに切り替える: System Light / Dark は Apple がコントラストを調整した公式グラデーションです。純白や純黒では Glass がフラットに見えてしまいます。

重要ポイント

  • やること: フィルターを被せるのではなく、まず公式テンプレートを使ってアイコンを描き直す。

    • なぜ価値があるか: システムマテリアルがハイライト、シャドウ、反射を動的に生成します。ソースファイルにベイクされたシャドウやベベルはマテリアルとぶつかり、かえってアイコンを汚してしまいます。
    • 始め方: Apple Design Resources から新版の Figma / Sketch テンプレートをダウンロードし、新グリッドに合わせてレイヤー構造を描き直したうえで、ドロップシャドウ、ベベル、インナーグローといった静的エフェクトをすべて削除します。

  • やること: 単層アイコンを複数レイヤーに分解し、Glass マテリアルがレイヤー間で奥行きを作れるようにする。

    • なぜ価値があるか: Podcasts や Home の事例が示すように、複数レイヤー構造であれば同じアイコンでもアピアランスモードをまたいで立体感を保てます。単層のフラットアイコンでは視覚情報の大半が失われます。
    • 始め方: 前景を意味単位でレイヤー分けし（主体、装飾、アクセントを別々に保存）、書き出し時にそれぞれを Icon Composer に渡します。

  • やること: 6 種類のアピアランスモードすべてで識別できる形状にアイコンを設計する。

    • なぜ価値があるか: 新たに追加された Dark Tint、Light Tint、モノクロ Glass モードによって、ユーザーがホーム画面をカスタマイズできる余地が大きく広がりました。アイコンがデフォルトモードでしか映えない場合、ユーザーのカスタマイズされたホーム画面では見劣りしてしまいます。
    • 始め方: Icon Composer 上で 6 つのモードを 1 つずつ切り替えてプレビューし、Light Tint（Glass に色を注入する）とモノクロ Glass での識別性を重点的にチェックします。

  • やること: 背景を柔らかいグラデーション + カラーベースに置き換える。

    • なぜ価値があるか: System Light / System Dark のグラデーションは Apple が専用にコントラスト調整したものです。純白や純黒ではかえって Glass マテリアルがフラットに見えてしまいます。カラー背景なら Light / Dark を切り替えたときの差異感がより強くなります。
    • 始め方: 公式の System Light、System Dark グラデーションで既存の単色背景を置き換え、メインカラーは暖色系か寒色系の彩度のある色を選び、広い面積のニュートラルグレーは避けます。

関連 Session

コメント

GitHub Issues · utterances