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

Say hello to the new look of app icons

SwiftUIDesign
元の動画を見る

ハイライト

Apple は Liquid Glass マテリアルを用いて iOS、iPadOS、macOS、watchOS の全プラットフォームでアイコンシステムを再構築しました。Default、Dark、Clear（light/dark）、Tinted（light/dark）の6種類の外観モードが導入され、キャンバスサイズは 1024px（Watch は 1088px）に統一されています。

主要内容

ここ数年、App アイコンのデザインは開発者にとって頭の痛なる雑務でした。同じ App でも、iPhone 用では角丸長方形、macOS 用では影付きの不規則な形状、Apple Watch 用では円形版と、それぞれ別々に描く必要がありました。各プラットフォームでグリッド、余白、コントラストに対する異なる暗黙のルールがあり、ダークモードが追加されるたびに作り直すことになっていました。講演の冒頭で、デザイナーの Marie は今回のアップデートの目標について、「1つのデザインをそのままデバイス間で使えるようにし、マテリアル表現をシステムに任せられるようにすること」と語っています。

WWDC25 では、アイコンの背後にあるデザイン言語が Liquid Glass に完全に切り替わりました。このマテリアルは visionOS のレイヤー化されたアイコンとリアルなガラスの光学特性から抽出され、エッジのハイライト、すりガラス層、半透明層の重ね合わせによって、内部から発光するガラス板のようなアイコンを実現しています。iPhone のホーム画面では、ジャイロスコープ入力に応じてエッジの反射がデバイスの動きに合わせて動きます（01:23）。システムは light、dark に加えて4つの外観を追加しました：モノクロガラスの light/dark バージョン、および色を前景に染め込ませるかガラス本体に注入する tinted dark / tinted light です。すべての外観は iPhone、iPad、Mac で一貫しており、watchOS も light モードの新しい外観を同期して取得します（02:06）。

詳細

新しいデザイン言語はいくつかの具体的なルールを中心に展開されています。

統一されたグリッドとキャンバス。 以前はアイコンをデバイスごとに別々に描いていたため、同じ App でもプラットフォーム間で詳細が異なることがありました。現在、Apple は角丸長方形と円形の2つの形状を1つの統一グリッドに収め、角の半径を大きくしてアイコンの曲線がシステム UI とハードウェアフレームにより同心になるようにしました（02:44）。角丸長方形は引き続き 1024 ピクセルキャンバスを使用し、円形アイコンはグリッド内で専用の内枠を持ち、余白が多くなります。watchOS の円形グリッドキャンバスは 1088 ピクセルで、意図的に長方形キャンバスよりも若干大きく設定されており、プラットフォーム間の相互変換を容易にしています（04:31）。

macOS アイコンの自動マスク。 以前の macOS Contacts アイコンのようにメインの形状から突き出したタブがある場合、新しいルールではキャンバス形状がマスクとして機能し、これらの突起部分を切り取ります。システムは古いアイコンに対して自動的にマスクまたはストレッチを行い、新しいガラスマテリアルを直接適用するため、開発者はファイルを変更せずに新しい外観を取得できます。ただし、Apple はキャンバス全体をより有効に活用するためにアイコンを描き直すことを推奨しています（03:21）。

レイヤー化は新しいデザイン言語の中核です。 最も単純なアイコンは背景層と前景層の1層ずつで構成されます（例: Messages）（05:46）。前景は複数のレイヤーに分割して重ねることができ、Podcasts では同心円と肖像画を異なるレイヤーに分けて重ねることで、平面的な図に真の奥行きを与えています（06:17）。

イラスト風スタイルはマテリアルに譲ります。 写実的な 3D 遠近法はガラスマテリアル自体のハイライトと視覚的焦点を奪い合うため、以前の Chess アイコンは正面でフラットな視点に変更されました（06:46）。一方、Preview アイコンの虫眼鏡は意図的に遠近法を持つように設計されています。これはこの遠近法が機能上の目的を持っているためです―虫眼鏡の焦点領域を強調するためです。

半透明とぼかしはほぼ無料です。 半透明の重ね合わせ層を使用すると、light、dark、Clear モードのすべてできれいに見え、Clear モードでは背景が直接壁紙になります（07:32）。

少ないほど豊かです。 Photos アイコンは花弁の重なる領域を減らし、マテリアル自体の反射エッジが交差部分で機能するようにしました。Home アイコンは元々焼き込まれていた影と面取りを削除し、より丸い形状を使用してからガラスマテリアルレンダリングに任せています（07:58 → 09:03）。Apple は明確に警告しています：ソースファイルで影や斜角などの静的効果を自分で焼き込まないでください。マテリアル処方が自動的に行います。

詳細はあまり尖くせず、細くしすぎないこと。 設定アイコンの歯車は角丸に変更され、光がエッジに沿って滑らかに流れるようにしました。マテリアル処理の必要な要素は、小さいサイズで詳細を保持できるよう、より太い線幅を使用してください（09:42）。

背景は単色ではなくグラデーションを使用します。 Apple は System Light と System Dark グラデーションを提供しており、純白や純黒の代わりにそれを使用してコントラストを確保し、マテリアル効果に理想的なキャンバスを提供することを推奨しています。同時に、カラフルな背景を多用して、ライトモードとダークモードの切り替えに差を持たせることを推奨しています（10:14）。

テンプレートファイルは Apple Design Resources に公開されており、Figma、Sketch、Photoshop、Illustrator の4形式で提供されています（05:11）。

重要ポイント

  • すべきこと：App アイコンを描き直し、新しいグリッドですべてのプラットフォームを統一してください。

    • なぜ価値があるか：Apple が古いアイコンに対して行う自動マスクとストレッチは兜底であり、描き直さないとキャンバスの完全な利用率を得ることができません。
    • どう始めるか：developer.apple.com から Figma/Sketch テンプレートをダウンロードし、1024px の角丸長方形キャンバスでドラフトを作成します。Watch の円形キャンバスは 1088px を参照してください。

  • すべきこと：ソースファイルで焼き付けられた影、面取り、3D 遠近法を削除してください。

    • なぜ価値があるか：Liquid Glass はエッジのハイライト、影、鏡面反射を自動的に追加するため、ソース画像内の静的効果はマテリアルと競合し、ぐちゃぐちゃになります。
    • どう始めるか：既存の PSD/AI ファイルのレイヤー効果（drop shadow、bevel、inner glow）をすべてオフにしてから、Icon Composer で効果を確認してください。

  • すべきこと：6つの外観モード（Default、Dark、Clear light/dark、Tinted light/dark）を個別に確認してください。

    • なぜ価値があるか：自動変換は mono および tinted モードで前景と背景の階層を失わせやすく、重要な要素が消えることがあります。
    • どう始めるか：Icon Composer で外観モードを順に切り替え、コントラストと階層に問題があるレイヤーを手動で透明度を調整するかレイヤーを変更してください。

  • すべきこと：アイコンをより明確なマルチレイヤー構造（背景 + 複数の前景）に分解してください。

    • なぜ価値があるか：レイヤー化はマテリアル効果が機能する前提であり、フラットな単一レイヤー図では Liquid Glass の奥行きを表現しにくいです。
    • どう始めるか：まず背景レイヤーを決定し、次に図形の主体を2〜3つの意味的に明確な前景レイヤーに分割して重ねます。Podcasts のレイヤー化方法を参照してください。

関連セッション

コメント

GitHub Issues · utterances