Android Adaptive Iconの作り方

現在の基本構造

Adaptive Iconは「1枚の512px画像」ではない

Google Playの掲載用アイコンが512×512pxなので、Androidアプリアイコンも512pxの1枚画像だと思いやすいのですが、launcher側のAdaptive Iconは別の資産です。

Android Developersの現行ガイドでは、カラー版のAdaptive Iconにforegroundとbackgroundの2レイヤーを用意します。端末やlauncherはそれらへマスクを適用し、円形や角丸など異なる形で表示できます。

Google Play掲載用512×512とは別です。Playの商品ページにアップロードする画像はT04で扱います。Adaptive Iconはアプリ側のlauncher resourceです。

foregroundは、ユーザーに見せたいロゴ、記号、キャラクターなどの中心要素を置くレイヤーです。現在のAndroidガイドでは、ベクターまたはビットマップを利用でき、ベクターが推奨されています。

重要なのは、画面いっぱいに主役を広げるのではなく、端末側のマスクで切られても中心要素が残るように配置することです。

backgroundはforegroundの後ろに置く背景レイヤーです。単色やシンプルな背景を使えば、launcher側のマスクや視覚効果へ対応しやすくなります。

foregroundとbackgroundを分けることで、端末側はパララックスなどの効果を表現できます。

Androidでユーザーのテーマに合わせたアイコン表示をサポートしたい場合、monochromeレイヤーを用意します。これはカラー画像をただグレースケール化したものと考えるのではなく、テーマ適用時に使う単色の形状として設計します。

Android Developersの現在ガイドでは、各レイヤーを108×108dpで用意します。その中央の66×66dpが、OEMのマスクで切り取られないsafe zoneとして示されています。

外側18dpずつは、マスクやパララックスなどのシステム視覚効果のために使われます。

dpとpxは違います。108×108dpを「108×108pxの画像」と読み替えません。Androidは画面密度に応じたresourceを扱うため、Android Studioやvector drawable等の実装方法に合わせます。

端末によってマスク形状が変わるため、外周に文字やロゴの重要部分を置くと切れる可能性があります。中心のsafe zoneへ主要シルエットを収め、外側は背景や余裕として使う方が安定します。

Androidの現行ガイドでは、レイヤー自体へ外周マスクやアイコン輪郭の背景シャドウを持たせないよう案内しています。マスク処理はシステム側に任せます。

元デザインを決める
主役シンボルと背景を明確に分けられる状態にします。

foreground / backgroundを用意
ベクターまたはビットマップresourceとして準備します。

必要ならmonochromeを用意
Themed Iconに使う単色形状を準備します。

Android StudioでAdaptive Icon resourceを設定
実機・複数マスクで中心要素が切れないか確認します。

AppIcon AIなどで作った1枚の画像を元にする場合、そのままAdaptive Icon一式になるわけではありません。主役と背景を分離・再制作し、必要ならmonochrome形状も作ります。

主役モチーフ、配色、全体の雰囲気を検討するデザイン候補生成です。

launcher iconの実装ができても、Google Playの商品ページへ掲載する512×512px画像の要件は別にあります。逆に、512×512のPlay画像を作ってもAdaptive Icon実装が完成したことにはなりません。

いいえ。カラー版Adaptive Iconはforegroundとbackgroundという複数レイヤーで構成します。またdpとpxは同じ単位ではありません。

Androidの現行ガイドでは、ユーザーのテーマに合わせたアプリアイコンをサポートする場合にmonochromeレイヤーを用意します。

同じ元デザインを参考にすることはできますが、Play掲載画像とAdaptive Icon resourceは役割・構造が異なります。そのまま同一資産として扱わないでください。