WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Create icons with Icon Composer

Create icons with Icon Composer

SwiftUIDesign
元の動画を見る

ハイライト

Icon Composer は 2025 年に Liquid Glass とともに登場したスタンドアロンのデザインツールです。レイヤー構造のソースファイルから .icon ファイルを出力し、iPhone/iPad/Mac/Watch の 4 プラットフォームと、Default、Dark、Clear light、Clear dark、Tinted light、Tinted dark の 6 種類の外観を統一的にカバーします。

主要内容

2025 年以前を振り返ると、Mac アプリのアイコンは複数のサイズを個別に描く必要があり、iOS が加わると 2x、3x のバリアントも、watchOS はまた別のセットが必要でした（01:01）。その後、システムが自動スケーリングをサポートするようになり、各プラットフォーム 1 枚の画像で済むようになりました。しかし今年は iOS で Dark と Tinted モードが拡張され、macOS でも全面的に採用され、Watch は新たな外観に――同じ App のアイコンで納品すべき組み合わせの数が再び膨れ上がりました（01:42）。

Apple の答えが Icon Composer です。これはスタンドアロンツールで、レイヤー構造のソースファイルを単一の .icon にまとめ、そこから 4 プラットフォーム×6 種類の外観を派生させます（02:00）。既存のデザインツールと連携します。Figma、Sketch、Illustrator、Photoshop でレイヤーごとに描き、SVG または PNG としてエクスポートして Icon Composer にドラッグ＆ドロップすると、各外観の効果をリアルタイムで確認でき、保存して Xcode に渡せます（03:32）。Apple 自身、今年の全アイコンセットはこの同じツールで作られており、移行コストはかなり低く抑えられています。

元の画像がすでに高度にイラストレーション調の場合、従来の Xcode の単一画像アップロード方式も使えます。システムがエッジに自動的に specular highlight を追加します（02:13）。しかし造形的にグラフィカルであれば、Icon Composer に取り込むだけで Liquid Glass の動的プロパティをすべて活用できます。

詳細

ワークフロー全体は 4 ステップです。デザインツールでレイヤー構造の原稿を描く、Z 順でレイヤーをエクスポートする、Icon Composer でガラスと外観を調整する、.icon を保存して Xcode に渡す（03:37）。

キャンバスサイズは統一されています。iPhone、iPad、Mac は 1024px の角丸矩形キャンバスを共有し、Watch は 1088px の円形キャンバスです。造形が 2 種類の形状間で通用するよう、Watch 用を意図的に少し大きくしています（04:20）。Apple Design Resources から対応するテンプレートをダウンロードできます。

レイヤー分けのルール：各レイヤーが 1 つの Z 深度を表します。Messages のようなシンプルなアイコンでは前景＋背景の 2 レイヤーで十分ですが、Home のような複雑な構図ではさらに細分化が必要です。見落としがちなテクニックとして色でレイヤーを分割するというアプローチがあります。Translate アイコンで 2 つの吹き出しとテキストを別々のレイヤーに分けておけば、Dark モードは fill を入れ替えるだけで済みます（05:29）。

ソースファイルはグラフィックの本質だけを残すべきです。フラットで不透明、エフェクトなし。ぼかし、ドロップシャドウ、specular、opacity、translucency はすべて Liquid Glass の動的プロパティなので、Icon Composer で調整します（06:00）。

エクスポート：ベクターレイヤーは SVG でエクスポートし、Z 順の数字で番号付けします。自動的に適切な位置に配置されます。テキストは SVG がフォントを保持しないため、先にアウトラインに変換する必要があります（06:42）。カスタムグラデーション、ビットマップなど SVG で表現できない内容は PNG としてエクスポートし、透明な背景を保持します。背景色とシンプルなグラデーションは Icon Composer 内で直接設定し、エクスポートしません。

重要な詳細：エクスポート時に角丸矩形や円形のマスクを含めないでください。Icon Composer がプラットフォームに応じたトリミングを自動的に適用します（07:06）。Illustrator ユーザーは Apple 提供の layer-to-SVG スクリプトをダウンロードし、ワンクリックで一括エクスポートできます。

Icon Composer に入ると、インターフェースは 3 つのパートに分かれます。左のサイドバーに canvas、groups、layers のリスト、中央がプレビューパネル（07:29）、右の inspector に外観プロパティとドキュメント設定があります。レイヤーをドラッグすると自動的にアルファベット順に 1 つの group にまとまり、最大 4 つの group に分割できます。group はガラス効果の適用単位です。Home は 4 つの group を使って各レイヤーを独立したガラス板にしています（08:42）。

外観システム：今年は従来の light/dark/tinted という呼称を default、dark、mono に変更しました。clear と tinted の最終効果は mono から派生します（09:01）。レイヤーレベルでは Liquid Glass のオンオフ、色、構図を調整できますが、完全なガラスプロパティは group レベルで設定できます。opacity、blend mode、fill はデフォルトで外観ごとに設定され、その他は外観間で共有されます。必要に応じて hover 状態のプラスボタンをクリックして独立したバリアントを作成します（10:15）。

ガラス調整でよく踏む罠：Calendar アイコンの日付の数字は細いストローク部分で「枕化」しすぎることがあります。group で specular をオフにするか、レイヤーで直接 Liquid Glass をオフにできます（10:30）。Watch の円形キャンバスは別途確認が必要です。要素がエッジに接触する場合、拡大して再度トリミングするか、ソースファイルで bleed を確保してください。

重要ポイント

  • 動的プロパティは Icon Composer に任せる：ぼかし、シャドウ、specular、translucency など、以前はデザインデータで手作業でシミュレートしていた効果は、すべて Liquid Glass でリアルタイム計算するツールに統一されました。

    • なぜ価値があるか：6 種類の外観×4 プラットフォーム＝24 通りの組み合わせを手動でビットマップに焼き込むと整合性が取れませんが、ツールによる派生なら一貫性を保てます。
    • 始め方：既存のアイコンソースファイルからすべてのシャドウ、ぼかし、ハイライトレイヤーを削除し、フラットな fill だけを残す。次に SVG をエクスポートして Icon Composer にドラッグし、group ごとに Liquid Glass プロパティを調整します。

  • 視覚要素ではなく色でレイヤーを分割する：ソースファイルの段階で Dark/Mono モード用のスイッチを用意し、後で複数のアイコンセットを保守する事態を回避します。

    • なぜ価値があるか：fill を入れ替えるだけで Dark アダプトが完了するので、複数のエクスポート画像を保守するのに比べて工数が半分になります。
    • 始め方：Translate のような色の差異が明確なアイコンから試してください。各色を独立したレイヤーにし、エクスポート後に Icon Composer のレイヤーレベル color コントロールで直接 Dark バリアントを作成します。

  • .icon のバージョン管理フローを確立する：.icon ファイルをリポジトリに含め、コードと一緒にレビューします。

    • なぜ価値があるか：.icon は単一のアセットなので、PR で直接 diff を取れ、デザイナーが独立して更新でき、開発者が複数のビットマップを再エクスポートする必要がありません。
    • 始め方：既存の Assets.xcassets/AppIcon.appiconset を .icon に置き換え、Xcode Project Editor で新しいファイルを指します。CI で Icon Composer のコマンドラインを使った整合性チェックを追加できます。

  • 1024px キャンバスを統一する：iPhone/iPad/Mac で同じソースファイルを共有し、Watch は 1088px の円形版を同期して派生させます。

    • なぜ価値があるか：チームで複数のテンプレートを保守するコストを削減し、新メンバーは 1 種類のグリッドだけを学べば済みます。
    • 始め方：Apple Design Resources から新しいテンプレートをダウンロードし、既存アイコンの移行時にすべてのプラットフォームのバージョンを 1024px グリッドに合わせ、Watch の円形キャンバスに bleed が必要か別途確認します。

関連セッション

コメント

GitHub Issues · utterances