Icon Composerでアイコンを作成

「Create Icons with Icon Composer」のセッションにようこそ Designチームのデザイナー Lyamです このセッションでは 新しいツール「Icon Composer」で iPhone、iPad、Mac、Watch向けの アイコンの作成方法を紹介します

その前にお伝えしますと もう1つのセッション 「Say hello to the new look of app icons」では Appleプラットフォーム全体に対応した 新しいアイコンデザイン言語を くまなく網羅しているほか 指先で簡単にカスタマイズできる iOSとmacOS対応の 新しいクールなモードを 紹介しています まずはそちらをご覧いただいてから このセッションに進んで 何ができるか確認するのが よいと思います さて 本題に入る前に アイコンがこれまでどのような変化を たどってきたかをお話ししましょう Macアプリのアイコンの世界では 表示先に合わせて最適化するため サイズ違いのアイコンを 一つ一つ作成するという時代が 長いこと続いていました Retinaスクリーンの登場までは コントラストと可視性を最大限に高めるため ピクセルグリッドに要素を 収めることが重要視されていたのです

やがてiOSとwatchOSが登場し 2xディスプレイではピクセル密度が2倍に さらに3xの登場によって 必要になるアイコンの数は格段に増えました そして数年前 画面解像度と自動スケーリング機能が 大きく進化したことを機に 作業をもっとシンプルにするため プラットフォーム1つに対して 作成する画像の数を1つに絞り 残りはシステムに任せる仕組みを作りました 2025年に話を戻します

iOSでは今年になって ダークモードと淡色モードがさらに浸透し

macOSでもこれらのモードが 採用されつつあります

Watchのルックも新しくなり 今また新たな転換点を 迎えていると感じています 私たちの使命は アプリアイコンの言語に 一貫性を持たせること だからこそ 現在の状況は いま一度プロセスを簡単にするための またとないチャンスでした

「Icon Composer」はファイル1つで 昨今の広範な需要にも対応できます

ですが かなり複雑だったり 図解的だったりするアイコンの場合は 「Xcode」へ画像を個別に アップロードする方がよいかもしれません ここまですれば こちらの作業は終了で 新しいエッジ処理機能を使って デバイスが美しく仕上げてくれます この処理を「鏡面ハイライト」と呼びます グラフィック要素の強い こちらのバージョンのように デザイン言語に翻訳しやすい アートワークである場合は 「Icon Composer」に取り込めば Liquid Glassの新しい機能で 生命を吹き込むことができるでしょう

お使いのデザインツールと 「Icon Composer」を組み合わせることで 素材を思いのままにコントロールできます 様々なプラットフォームや 様々な外観に対応した アプリアイコンを作成する作業の 効率化にもつながります 今年 全アイコンのアップデートに このツールを使ってみたのですが 実際かなり助けられました アートワーク1つ用意すれば 今日からすぐに アプリがiPhone、iPad、Mac、Watchの どこに表示されたとしても 一貫したアイデンティティを保てるような デザインを作ることができます 独自のダイナミックガラスプロパティを 存分に活かして どういう見た目になるかを リアルタイムでチェックしたり 新しくなった6種類のアピアランス を 試したりしてみましょう

満足のいくアートワークに仕上がったら 画像をエクスポートして マーケティングその他のニーズに 流用することもできます もちろん 様々なサイズのアイコンを 揃えなければという心配も する必要はありません 各種素材は アイコンに合わせて 調整できるようデザインされています

ここからは「Icon Composer」を使った 新しいワークフローをご紹介します お好きなデザインツールで作業して レイヤーをエクスポートし 「Icon Composer」で読み込んだら ガラスやアピアランスモード プラットフォームを調整します ファイルをセーブしたら 「Xcode」に渡します もう少し詳しく見ていきましょう まずはデザインプロセスです 平面のグラフィックスを 使っているのであれば ベクトルベースで描画できるツールを 利用するのがお勧めです SVGデータをエクスポートでき 後工程でのスケーラビリティが高まります 画像ファイルを開いたら キャンバスのサイズを設定します 一番手っ取り早いのは アプリアイコンテンプレートを使う方法です 「Figma」「Sketch」「Photoshop」 「Illustrator」に対応したテンプレートは Apple Design Resources ウェブサイトから ダウンロードできます iPhone、iPad、Mac向けデザインでは キャンバスサイズが1024pxに統一され より使いやすくなりました グリッドや角丸四角形も 新たに加わりました Watchのキャンバスは 角丸四角形より大きい1088pxになり グリッドは同じものを使用しているので プラットフォーム間のデザイン流用が より簡単になりました

さて 複数のレイヤーを使って アイコンをデザインする準備ができました tvOSやvisionOS用のアプリアイコンを 作り慣れているなら レイヤリングについても よくご存じでしょう 基本的に 個々のレイヤーは 深度を示すZ値に対応しています 一番下が背景レイヤーで その上に他のレイヤーが重なります

ほとんどの場合は 前景1つに背景1つとシンプルです メッセージアプリがそうですね 別の例でいくと ホームアプリなどのアートワークは これよりレイヤー数が多めです

Z値によるレイヤリングの他にも レイヤーごとに色を分けておくと 後ほど「Icon Composer」で コントロールできる幅が広がります こちらは翻訳アプリの例です フキダシには 2つのレイヤーが使われています 入門編として レイヤー2つでいきましょう 文字とフキダシを 分けておけば コントロールの自由度は アップします 「Icon Composer」なら ダークモードバリアントの作成も 設定を1つ変えるだけで この通り 完了です

デザインの際にもう1つ 意識しておきたいのが 「Icon Composer」での作業中に 何ができるかです 翻訳アプリに戻りましょう 上に重ねたレイヤーに 少しぼかしを入れて 薄く影を付けるだけで 見栄えが良くなりそうです

Liquid Glassで レイヤーを作成する場合 これらはすべて動的プロパティで 鏡面や不透明度や 透明度と同様に 「Icon Composer」で 直接追加できます

ですので これらの設定を ファイルに書き込むのはやめて グラッフィクのエッセンスとして ソースアートを平面的かつ不透明で コントロールしやすいレイヤーに しておくことをお勧めします

アートワークができたらレイヤーを SVGファイルとしてエクスポートします このときの操作は ツールによって若干異なります 「Illustrator」の場合 SVGスクリプトでレイヤーを作成すると ダウンロード可能なファイルを 自動で作成してくれます キャンバスサイズをエクスポートすれば 「Icon Composer」で必要なものを 必要な場所に落とし込めます Z値の順に番号を振っておくと 指定した順番通りに 自動的に並べてくれます 順番は後から いつでも変更できます

シンプルな背景色や グラデーションは 「Icon Composer」に直接追加され エクスポートは必要ありません

テキストも使用する場合 SVG形式ではフォントが保存できないので エクスポートする前に アウトラインに変換する必要があります SVG形式では表現できない カスタムグラデーションや ラスタ画像やエレメントや ソフトウェアを使用する場合は レイヤーをPNG形式でエクスポートします この形式なら 透明な背景も 損失することなく保存できます 覚えておくべき最後のヒントは 角丸四角形マスクや円形マスクを エクスポートから外すこと Siriの例では このように マスクをエクスポートしません 後から自動で適用して 完璧にトリミングしてくれます このほうが良いですね

レイヤーをエクスポートできたら 「Icon Composer」の準備は完了です 既存のプロジェクトから紹介します

左のサイドバーにはキャンバスと グループとレイヤーがあります 中央のプレビューパネルには 様々なアートワークや プレビューコントロールがあります 右側のインスペクタには 外観のプロパティや ドキュメントオプションがあります

「Icon Composer」を初めて起動すると このような見た目になります キャンバスだけが表示されています

画面にある青いシェードを 使いたくない場合は 背景色を変えます 操作は簡単です サイドバーで キャンバスを選択した後 インスペクタで色やグラデーションを 選択するだけです システムのプリセット色から1つ選択します 明るい背景色と暗い背景色が あらかじめ用意されていて 新しい素材に合わせて 最適化してあります

更新結果は こういう感じに プレビューパネルで確認できます

各セクションがどう連動するか 確認しましょう サイドバーから順に 詳しく見ていきます レイヤーをドラッグ＆ドロップすると アルファベット順に整理され グループとして表示されます

「Icon Composer」のグループは ガラスプロパティの追加や 重なり具合をコントロールします デフォルトでは1つですが 最大4つまでグループを設定できます この数字はアイコンの見た目を どれくらい複雑にするかを 反映しています ホームアイコンでは4つフルに使って レイヤーごとに ガラスを設定できるようにしました

ウィンドウ下部ではプラットフォームと 外観モードを切り替えます 外観調整用の3つのツールは デザイン段階でもおなじみの です

今年これらの名称が に変わり アートワークの見た目も やと更可能になりました

いずれもサムネイルをクリックして プレビューできます

インスペクタには 外観のプロパティと ドキュメント設定のための コントロールが揃っています どのプラットフォーム向けのデザインか 手軽に選択できます

外観コントロールに戻りましょう

「Icon Composer」に レイヤーをドラッグすると

Liquid Glass機能が 自動でオンになります

オン／オフは レイヤーレベルで切り替えできます デザインツールにも 役に立つコントロールが 豊富に揃っています

ダーク／モノモードのバリアント作成には コントロールが便利です プラットフォーム変更時の再加工には コントロールが便利です

グループの場合は コントロールの表示が 若干異なります のオプションは ここに表示されます 自動設定される項目もありますが 好みの外観に仕上げるなら こちらも手動で調整することを お勧めします

こうしたプロパティを調整する場合 注意しておきたいのは モードが変わっても 一貫性を維持する必要があるため 不透明度やブレンドモードや 塗りつぶしなどの外観に合わせて 予備設定がかかっている点です きっちりコントロールしたい場合は プラス記号をクリックしてメニューで選択し プロパティ単位で バリアントを作成します

参考までに これらプロパティを調整する際 私が普段気にしているポイントを紹介します

カレンダーアプリのアイコンには 日付が表示されますが 小さい文字だと 複雑で詰まりすぎに見えたりします この問題を解決するには グループの鏡面をオフにするか レイヤーのLiquid Glassを 完全にオフにします

の設定を見てみましょう プリセットではに 設定されています 繊細かつ汎用性があり どんな背景にも調和します ちなみに色付きの影の効果が 最も分かりやすいのは 白い背景との組み合わせです アートワークの色が背景に映って 素材の明るさや物理特性が より際立ち 素晴らしい見た目になります

バリアントを作るので ダークとモノの影に変更はありません

ダークでの見た目については 他にもいくつかポイントがあります

たとえば ツールは アートワークの最適化で 活躍してくれます 次は辞書アプリです ダーク向けの処置をしなければ こういう見た目になります この例ではまさに 2つのポイントが際立っています 第一に マルーン色のしおりが 黒い背景に埋もれてしまいます 第二に アクセントのコーラルレッドが ほとんど目立ちません

塗りつぶしの変更が必要でしょう 不透明性やブレンドモードなど 色に関する他のプロパティでも 理屈はこれと同じです

PNGをインポートしても 塗りつぶしが使えなかったり デザインソフトウェアで 別の画像を作成して バリアントとしてインポートする場合も 例外ではありません

モノモードにおいては 見やすさも重要です アイコンの構成要素をどれか1つ 白に変更するなら 大抵は一番目立つ部分か 見やすい部分になるでしょうが ちゃんと効果が出せるかが肝心です 他の色はグレーのトーンで マッピングできます 「Icon Composer」は自動で 変換を実行しますが コントラストを最適化するには 調整が肝心です 多くの場合 角丸四角形と円のプラットフォーム 両方に対応することになりますが Watch用の新しいキャンバスは 見た目にも大きくなり グリッドも共通しているので システムに任せて大丈夫です 1つ注意しておきたいのが の設定です 円形に合うよう 見た目の調整が必要になります 要素をキャンバスいっぱいに見せる場合は Watchの端にかかるように 要素を拡大します もしも裁ち切りのデザインに慣れているなら ソースアートも その考え方で 作成してよいでしょう 以上を踏まえて プレビューパネルをご覧ください

右上のコントロールを使うと 表示中のアイコンの背景を変更できます 別のコンテキストでの見た目を 確認できて便利です 壁紙や新しいモードに切り替えて 見やすさをテストするにも お勧めです

アイコングリッドを重ねて 光の動きを確認したり

拡大や縮小をして確認するにも便利です

「Icon Composer」での作業が ひと通り終わったら 後はアイコンファイルを保存して 「Xcode」にドラッグして 「Project Editor」で アイコンを選択するだけです アプリをビルドして実行して プラットフォームや外観に対する なじみ具合を確認します

最後になりますが デザインプロセスは最初から最後まで 伝統的なデザインツールで行うのが 普通でした 「Icon Composer」は 新しいダイナミックな方法で デザインに命を吹き込み アセットの生成時間を短縮し Photoshopで長い時間をかけて 多くのガラスエフェクトを 再作成するという作業を 過去のものにする 新たなタッチポイントを提供します 「Icon Design」は シンプルな静止画の世界を ユーザーの入力に応じて 見た目を調整できる 表現力に豊んだ マルチレイヤーの アートワークへと進化させて デバイス上で より豊かで より統合された体験を提供します

こうしたメリットをいち早く体験できる 「Icon Composer」のベータ版を 公開しています 皆さんのフィードバックをもとに 今後も新しい機能を追加していきます 是非ダウンロードして Feedback Assistantから 機能強化のリクエストをお寄せください 新しいツール用のリソースも 是非お試しください ご視聴ありがとうございました