Macでレイヤー付きアプリアイコンを作る

編集できる4つの深度グループを作り、ガラス素材を調整し、有効な出力先を検証して、Assets for Xcodeでレイヤー付きプロジェクトを保存します。

10ステップ更新日：2026/11/12Assets for Xcodeを入手

完成イメージ: 保存したMyIconにはOrange Plate、Purple Plate、Blue Plate、Paper Planeという4つの編集可能なグループがあります。
必要なもの: MacにAssets for Xcodeをインストールしておきます。
4つの深度グループ用に、土台、色付きプレート2枚、前景のシンボルの画像を用意します。
編集可能なMyIconプロジェクトの保存先として、書き込み可能な場所を用意します。

アートワークを早く統合しすぎず、レイヤー付きアプリアイコンを作成します。このガイドではAssets for XcodeのApp Storeの最初の画像にある、4つの深度グループからなる紙飛行機のデザインを再現します。元画像を追加し、ガラス素材と出力先を設定し、アイコンを検証して編集可能な書類を保存します。

1.アイコンの元画像を読み込む
Assets for Xcodeを開き、最初の元画像を開始画面にドラッグします。Open ProjectとCreate New Projectもありますが、この例では土台の画像を開始エリアに置いて、編集可能な書類を作ります。
Open ProjectとCreate New ProjectのボタンがあるAssets for Xcodeの開始画面。
2.土台のプレートを読み込んで命名
最初の画像を読み込んだら、Layersで新しいグループを選び、Orange Plateと名付けます。プレビューには、オレンジからピンクへ変化する土台が独立した深度グループとして表示されます。
Orange Plateの深度グループと、オレンジからピンクの画像がある編集可能なアイコン。
3.紫のプレートを追加する
キャンバスのルートを選び、2枚目の元画像を別の深度グループとして読み込み、Purple Plateと名付けます。LayersにはPurple PlateとOrange Plateが別々に並びます。
Layersの一覧とアイコンのプレビューでOrange Plateの上に追加されたPurple Plate。
4.青のプレートを重ねる
再びキャンバスのルートを選び、3枚目の元画像を読み込んでBlue Plateと名付けます。プレビューで青い画像が紫とオレンジのプレートの上にあることを確認します。
紫とオレンジのプレートの上に3番目の編集可能な深度グループとして追加されたBlue Plate。
5.紙飛行機のアイコンを完成させる
紙飛行機の3つのSVG部品をまとめて1つの深度グループとして読み込み、Paper Planeと名付けます。書類名はMyIconにします。Layersには個別編集できる4つのグループが並びます。
3枚の色付きプレートの上にPaper Planeがあり、MyIconには名前付きの深度グループが4つある。
6.紙飛行機を不透明にする
Paper Planeを選び、素材のインスペクタを開いてMaterial (Glass)のGlassをオフにします。前景の紙飛行機が半透明のガラスではなく、はっきりした不透明な白になります。
選択したPaper PlaneグループでGlassをオフにした素材インスペクタ。
7.青い層にClear Glassを適用
Blue Plateを選んでElevationに切り替え、素材インスペクタのRecipeをClear Glassに設定します。Glassが有効であることと、グループの奥行きの重なり方を確認します。
4つのアイコン深度グループのElevationプレビューで、Blue PlateにClear Glassが有効。
8.必要な出力先を有効にする
既存のApple出力先に加えて、Apple Watchを有効にし、Android Adaptive Icon、Windows App Icon、Icon Composerを追加します。サイドバーとプレビューに検証したい出力先が並ぶことを確認します。
Apple Watch、Android Adaptive Icon、Windows App Icon、Icon Composerを含む出力先一覧。
9.有効な出力先を検証する
アイコン検証を実行し、画面下部の状態バーを確認します。この例ではApple ready、Android ready、Windows readyと表示され、必要なサイズがすべて生成されています。問題があれば保存前に修正します。
有効にした出力先の検証状態としてApple ready、Android ready、Windows readyが表示されている。
10.プロジェクトを保存して確認
Designに戻り、書類のルートを選んで選択枠を消し、MyIcon.braveiconとして保存します。タイトルMyIcon、4つのグループ名、Saved表示で保存を確認できます。各プラットフォーム用ファイルの書き出しは別の手順です。
4つの編集可能なグループとSavedの状態表示があるDesign画面の完成したMyIcon。