アプリアイコン用の画像 (Unity)

iOSとAndroid用のアプリアイコン用の画像、弊社での作成ルールを紹介します。(※デザインの方向性とかではないです)

アプリアイコン、重要ですよね。
ストアでも広告でも、アイコンが決め手となるシーン多いです。

アプリアイコンの中でも特にAndroidのアイコン仕様は、OSがいろいろカスタムして表示できるようにいろいろ細かい取り決めがあります。
https://developer.android.com/develop/ui/views/launch/icon_design_adaptive?hl=ja
実際に表示される領域よりだいぶ大きい素材が必要だったりレイヤーが分かれていたり、動きがレイヤーごとに違ったり、一部の色が変えられるようになっていたり…
弊社では上記の仕様を前提に、デザイナーさんの作業が簡単になるようにテンプレートを作ってそれに沿って作成をお願いしているので、その内容と設定方法を説明します。

素材の作り方

1.テンプレート

アイコンの全体画像はこのフレームにあわせて作画、レイアウトします。
基本的なアイコンデザインは中央のグレー四角(1024px四方)を対象に作成し、周囲は見切れ領域となります。
ロゴなどは、「絶対表示される領域」におさめます。

テンプレート
(前述のAndroidのアイコン仕様のdpから算出した数字です)

弊社のアプリ、AZNANAの場合

2.書き出しサイズ

テンプレにあわせて作成したベースの素材から、３種類の画像を作成します。

$$
\begin{array}{|c|c|c|c|} \hline
&(1) iOS＆ストア向け & (2) Android OS8以降 & (3) Android OS8未満\\ \hline
画像領域(↑で示した範囲)&1024×1024 & 1536×1536 & 1024×1024 \\ \hline
ファイルのサイズ&1024×1024 & 540×540 & 512×512(角丸) \\ \hline\end{array}
$$

AZNANAのアイコン素材

(1),(2)はOS側でクリップされる画像なので全領域で作成します。(2)は作成したものがそのまま表示されるため、角丸でアイコンらしくしています。

※(2)の540pxについて補足
現時点では最大サイズはxxxhdpi向け432pxなのですが、もうひと回り大きいサイズ出てきたときのため＆キリの良い数字として540で作っています。

Unityへの設定

1.iOS

画像(1)をDefault Iconに設定するだけです。

2.Android

２個所に設定します。

・画像(2) をAdaptive Iconの"Background"に設定＆透過画像(別途作成)をAdaptive Iconの"Foreground"に設定
背景とアイコンをちゃんと分けている場合はBackgroundとForegroundそれぞれ設定してももちろんOKですが、Backgroundと透過画像の組み合わせでも大丈夫です。

・画像(3) をLegacy Iconに設定
(Minimum API Levelが26以降の場合は不要)

それぞれ一番大きいサイズにだけ設定すれば細かいサイズ違いはUnityが作ってくれるのでおまかせします。

確認方法

以下のAdaptiveIconPlaygroundアプリ(Googleのデザイナーさん謹製)でAndroidでどのようにマスクされるか＆動きを確認できます。
https://github.com/nickbutcher/AdaptiveIconPlayground/releases

AdaptiveIconPlaygroundでの確認画面

細かい設定もあり、どのようにアプリアイコンが表示される可能性があるのかが細かくわかります。ここでレイヤーを分けた場合と分けなかった場合の動きの違いも見ることができます。

終わりに

最初の頃はAndroidだけ顔が大きくなったりレイヤーを活用してみたり試行錯誤していましたが、最近はこの作り方に落ち着いています。ゲームのアプリアイコンは弊社に限らず顔画像が多く背景などのレイヤーをわけたところでずれて表示されてもあまり嬉しくないのでこのように１枚で作ってしまって問題ないように思います。
「AndroidでマスクされたあとのイメージがiOSと全然違う！」ということもなく手戻りも少ないのでよかったらお試しください。