maskable アイコンとセーフゾーン
Android はアプリアイコンを、launcher が使うどんな形状にもクロップします。maskable アイコンとは、そのクロップに耐えるように設計されたもので、背景は全面塗り、アートはセーフゾーン内に収められています。
なぜ普通のアイコンは切られるのか
Android の launcher は、それぞれ異なるアイコン形状を使います。それらを一貫させるため、Android はアイコンを受け取り、デバイスが使う形状にクロップします。ロゴが端に寄った標準アイコンは角を失い、背景が透明なアイコンには見苦しいクロップの線が入ります。
maskable アイコンは、そのクロップのために作られています。透明部分ができないようキャンバス全体を背景で埋め、重要なものはすべて、切られるおそれのある端から遠ざけます。
セーフゾーン
ルールはシンプルです。重要なアートは内側の円、おおよそキャンバス中央の 80 パーセント以内に収めます。512x512 のアイコンなら、直径およそ 410 ピクセルの中央の円です。その外側にあるものは、いつクロップされてもおかしくありません。
外側のリングは裁ち落とし部分です。背景のみで、ロゴも、テキストも、失って困る端もあってはいけません。あるデバイスがどの形状を使うかはわからないので、円でも squircle でも角丸四角でも正しく見えるよう設計しましょう。
manifest で宣言する
{
"icons": [
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}purpose フィールドは、どのアイコンをマスクするかを Android に伝えます。標準の any アイコンと並べて maskable を 1 つ配信すれば、両方のケースをカバーできます。クロップありとなしの両方でうまく機能するなら、1 つのアイコンに "purpose": "any maskable" を設定することもできます。
よくある質問
maskable アイコンとは何ですか？
Android が launcher の形状にクロップしても耐えるよう設計されたアプリアイコンです。全面塗りの背景を持ち、重要なアートを中央のセーフゾーン内に収めるので、どの形状もロゴを切りません。
maskable のセーフゾーンはどのくらいの大きさですか？
重要なコンテンツは、キャンバス内側の 80 パーセント、中央の円の中に収めます。512x512 のアイコンなら、その円は幅およそ 410 ピクセルです。その外側は、クロップされ得る裁ち落とし部分として扱いましょう。
アイコンを maskable としてマークするには？
manifest の icons 配列にあるアイコンのエントリに "purpose": "maskable" を追加します。標準の purpose any アイコンと並べて配信するか、クロップありとなしの両方で機能する 1 つのアイコンに "any maskable" を使います。
Android のホーム画面アイコンが切れて見えるのはなぜですか？
アイコンが maskable でないため、Android がそれ向けに作られていないデザインをクロップしたのです。全面塗りの背景と余白のあるアートを備えた maskable 版を追加し、purpose maskable で宣言してください。