前回に続き、新たなアイコンデザインを出力するための Icon Composer の使い方。視覚的効果や配色は Icon Composer で完結。デザイナーがこのツールにキャッチアップするのももちろん良いが、開発者も触ってみてどのような調整が可能かを理解するのも重要そう。
0:51 – Overview
- アイコン作成の歴史的変遷：従来は様々なサイズで作成が必要だったが、解像度向上によりひとつの解像度で完結するよう簡素化
- 2025年、ダークモード・ティントモードの拡張により、再度プロセス簡素化の転換点
- Icon Composer により、1つのファイルで全てのプラットフォーム・外観に対応可能
- 図解的、複雑なアイコンは従来通り個別画像でXcodeにアップロード可能：鏡面ハイライトが自動適用
- よりグラフィックなアイコンは Icon Composer で Liquid Glass の新機能を活用可能
- アートワークひとつから、各プラットフォームで一貫したデザインが提供可能
- 動的なグラスプロパティを活かした、リアルタイムな見た目の確認
- 6種のアピアランスのチェック（Default, Dark, Clear light/dark, Tinted light/dark）
3:55 – Design
- ベクターツール（SVG出力可能）の使用を推奨
- Apple Design Resources からアイコンテンプレート（Figma、Sketch、Photoshop、Illustrator対応）をダウンロード
- iPhone、iPad、Mac は 1024px、Watch は 1088px のキャンバスサイズ
- グリッドは共通、デザインの流用が容易
- レイヤー設計：Z深度で背景から前面へ積層、色分けも重要
- レイヤー分け、色分けをしておくと、Icon Composer でコントロール可能な幅が広がる
- 例：Translate アイコンでは吹き出しとテキストを別レイヤーに分離 → レイヤごとのぼかし・影を、鏡面、透過度／不透明度と同様に、動的プロパティで設定
- グラフィックエッセンスを重視（フラット、不透明、制御しやすい状態）
6:10 – Export Layers
- レイヤーをSVG形式でエクスポート（Z順で番号付けしネーミング）
- Illustrator 用のレイヤー → SVG自動変換スクリプトを提供。
- 背景色・グラデーションは Icon Composer で直接追加するためエクスポート不要
- テキストはアウトライン化してからエクスポート（SVGではフォント維持できない）
- カスタムグラデーション・ラスター画像はPNG形式でエクスポート（透明な背景も維持可能）
- 角丸矩形・円形マスクは含めない（後で自動トリミングされるため）
7:22 – Icon Composer
- 3つのパネル構成：左側（キャンバス・グループ・レイヤー）、中央（プレビュー）、右側（インスペクター）。
- 背景色設定：システムプリセット（最適化済み）またはカスタム色・グラデーション
- グループ：最大4つまで（視覚的複雑さの適切な範囲）
- 外観モード：Default、Dark、Mono
- Liquid Glass プロパティ：レイヤーレベルとグループレベルで制御可能
- プロパティ設定：外観別・全体共通の設定が可能
- Color
- Composition
- モードを跨いで一貫性を保つために予備設定してあるが、詳細コントロールも可能
- シャドウ：Neutral（汎用）とChromatic（色付き）から選択
- CHromaticで、素材の明るさや物理特性が際立つ
- Dark モード：フィル・不透明度・ブレンドモードの調整で最適化
- Mono モード：少なくとも一番目立つ／みやすい要素を白に設定
- プラットフォーム間調整：Watch 用の円形と他の角丸矩形の光学調整
- Composition で円形に合うよう見た目の調整
13:16 – Delivery
- .icon ファイルとして保存し、Xcode にドラッグ&ドロップ
- プロジェクトエディターでアイコンを選択
- ビルド・実行でプラットフォーム・外観への適応を確認
- Icon Composer はベータ版で提供、Feedback Assistant でフィードバック可能