Android アプリ アイコンの実践ガイド: アダプティブ アイコンの説明 (およびアイコンを正しく生成する方法)
初めて Android 開発を行う人にとっては、よくある驚きです。アプリのアイコン用に 1 つの正方形の PNG を磨き、整然とした 512x512 でエクスポートすると、画像エディターで完璧に表示されます。次に、Samsung 携帯電話にデバッグ ビルドをインストールすると、ロゴの一部が切り取られたかのように、アイコンが突然切り取られ、中心からわずかにずれて表示されます。ファイル自体には何も問題はありません。問題は、単一の正方形の画像が Android ランチャーの現実世界と接触した後は決して生き残れないことです。Android ランチャーはそれぞれアイコンを異なる方法でトリミング、マスク、再形成します。まだこの問題に遭遇していない場合は、実際に遭遇するのは時間の問題です。内部で何が起こっているのか、そして最初から適切に対処する方法を見てみましょう。
単一の正方形 PNG ではもう十分ではない理由
Android の初期の頃、アプリのアイコンはまさにその見た目のもので、すべてのランチャーがそのまま表示する単一の正方形 (または場合によっては自由な形状の) PNG でした。メーカーが携帯電話を視覚的に差別化するようになるまでは、これでうまくいきました。それが最も簡単にできる場所の 1 つはホーム画面でした。サムスンは丸い正方形を望み、一部の中国の OEM スキンは異なる角の処理を望み、そして標準の Android は最終的に円に落ち着きました。突然、まったく同じアイコン ファイルが、誰の携帯電話にインストールされたかによって、著しく異なって見え、場合によっては明らかに悪化することがありました。
Android 8.0 Oreo で導入された Google の答えは、アダプティブ アイコン システムでした。開発者は、1 つの固定形状を提供する代わりに、オペレーティング システム自体が特定のランチャーが好む形状にマスクするレイヤー化されたアートワークを提供します。視覚的なアイデンティティは一貫しています。外側のシルエットのみが変わります。
アダプティブ アイコンとは何ですか?
アダプティブ アイコンは、それぞれ 108 dp × 108 dp のキャンバスを占める 2 つの個別のレイヤー (背景レイヤーと前景レイヤー) から構築されます。 Android は 2 つを合成し、現在のランチャーが使用するマスクの形状 (円、丸い四角、涙滴、またはまったく別のもの) を適用します。 2 層構造により、アイコンをタップまたはドラッグするとレイヤーが独立して移動できるため、Android では微妙な視差効果やモーション効果を追加することができます。
アプリのリソースでは、これは通常、mipmap-anydpi-v26/ic_launcher.xml のような XML ファイルを通じて定義されます。このファイルは、ピクセル データ自体を含むのではなく、単純に背景と前景のドローアブルを指します。従来のフラットな ic_launcher.png は、アダプティブ アイコン システムよりも以前から存在する Android 7.1 以前を実行するデバイスのフォールバックとして今でも残されています。
安全地帯が重要な理由
ここが人々を最もつまずかせる部分です。各レイヤーのキャンバスは 108 dp × 108 dp ですが、どのマスク形状が適用されるかに関係なく、そのキャンバスの中心にある内側の 66 dp × 66 dp の円のみが表示されることが保証されます。この内側の領域は一般に安全ゾーンと呼ばれます。その外側にあるものはすべて、円形のマスクに表示され、その後、より攻撃的なスクワクル マスクやティアドロップ マスクに突然切り取られる場合や、その逆の場合もあります。
これは、視覚的なサイズを最大化するためにロゴをキャンバスの端に近づけて描画した場合に発生する問題とまったく同じです。円形のマスクでは完璧に見えますが、Samsung のスクワクル マスクでは不均等に切り取られてしまうことがあります。この修正は再設計ではなく、最終的にどの形状が適用されるかに関係なく、意味のあるコンテンツが安全ゾーン内に収まるようにアートワークをわずかに縮小するだけです。
あなたが遭遇するランチャーの形状
| 形 | どこで見られますか |
|---|---|
| 丸 | ストック Android、Pixel ランチャー (長年のデフォルト) |
| スクイクル（角丸四角） | Samsung One UI、およびその他のいくつかの Android スキン |
| 角丸正方形（超楕円） | iOS、開発者の制御なしでシステムによって自動的に適用される |
| ティアドロップ | 一部の Samsung ソフトウェア バージョンでは選択可能なオプションとして提供されます |
| ソフトコーナーのある正方形 | 他メーカーの各種ランチャースキン |
実際のところ、アイコンがこれらの形状のどれを身につけることになるかは選択できないということです。標準の Android ランチャーを使用しているユーザーは、多くの場合、設定メニューから好みの形状を選択することもできます。唯一の本当の手段は、アートワーク自体がそれらのすべてに適切に生き残ることを確認することです。安全ゾーンが保証するのはまさにそれです。
アセットの構築: 必要なサイズと密度
| 密度バケット | ランチャーアイコンのサイズ |
|---|---|
| mdpi | 48×48ピクセル |
| hdpi | 72×72ピクセル |
| xhdpi | 96×96ピクセル |
| xxhdpi | 144×144ピクセル |
| xxxhdpi | 192×192ピクセル |
| Play ストアの掲載情報アイコン | 512×512ピクセル |
iOS にもアプリを配布する場合は、別のセットを完全に追加します。これは、Apple の App Store アイコン要件の上限が 1024x1024 であり、透明性がまったくない、まったく異なる非レイヤー形式が使用されるためです。
手動による方法とジェネレーターの使用
これらのサイズはすべて、イメージ エディターを使用して手動で作成することも、Android Studio の組み込み Image Asset Studio を使用して作成することもできます。このスタジオは、単一プロジェクトの密度スケーリングとマスク プレビューを適切に処理します。これが面倒になるのは、複数のアプリにわたってデザイン システムを保守している場合、同じマスター アートワークから一致する iOS エクスポートが必要な場合、または単にデザインにコミットする前に、すべてのシェイプでデザインがどのように動作するかを簡単に再確認する方法が必要な場合です。
1枚のマスターイメージからあらゆるサイズを生成
私たちの アプリアイコンジェネレーター は、単一の高解像度ソース画像を取得し、Android 密度バケットの完全なセット、アダプティブ アイコンの前景/背景構造、Play ストアのリスト サイズをすべて 1 回のアップロードで生成するため、多数のファイルを手作業でエクスポートしたり名前を変更したりする必要はありません。
既存のAPKからアイコンを抽出する
時には、ニーズが逆の方向に向かうこともあります。オリジナルのデザイン ファイルを持たずにプロジェクトを継承した場合や、独自のアイコンをデザインする前に競合他社のアイコンがどのように構成されているかを正確に確認したい場合、または構築された APK からアイコンを取り出して関連ツールやマーケティング アセットで再利用する必要がある場合などがあります。 APK は事実上、アプリのすべてのリソースを含む構造化されたアーカイブであるため、ランチャー アイコン ファイルはその中に物理的に存在し、最初から再構築するのではなく、直接抽出できます。
当社の アイコン抽出ツール は、アップロードした APK からこれらのファイルを正確に抽出し、元の開発者が出荷した解像度で生のアイコン アセットを提供します。これは、多くの場合、失われたソース ファイルを回復したり、別のアプリが同じ設計上の問題にどのようにアプローチしたかを調査したりするための最速の方法です。
レビューで報告される一般的なアイコンの間違い
- 追加のパディングまたは UI クロムでベイクします。 画像内に手動で追加されたドロップ シャドウ、境界線、または角丸効果は、システム独自のマスキングと競合し、二重に見えたり、位置がずれて見えることがよくあります。
- はっきりとしたエッジのない真っ白な背景を使用します。 ライトをテーマにしたランチャーでは、ホーム画面の背景に対してアイコンがほとんど見えなくなることがあります。
- 細かすぎるディテール。 512 ピクセルでは鮮明に見えるテキストや複雑な線画が、48 ピクセルに縮小すると読めない汚れになってしまうことがよくあります。これが、ほとんどのユーザーが日常的に目にする方法です。
- Play ストアの掲載アイコンとインストールするアイコンが一致しません。 レビュー担当者もユーザーも、これら 2 つが一致しない場合、それがずさん、またはさらに悪いことに疑わしいものとして読み取られると気づきます。
- 従来のフォールバックを完全に忘れます。 アプリがまだ 8.0 より前の Android バージョンをサポートしている場合、フラット PNG フォールバックをスキップすると、ユーザーに壊れたアイコンや一般的なアイコンが表示される可能性があります。
出荷前にさまざまな形状でアイコンをテストする
アイコンを完成させる前に、アイコンがきれいに変換されると仮定するのではなく、少なくとも円形マスクとスクワクル マスクの下で並べてプレビューする価値があります。 Android Studio の Image Asset Studio には、まさにこの理由から、いくつかのランチャー形状にわたるライブ プレビューが含まれており、「間違った」ランチャー形状を使用しているユーザーが何かがおかしいと報告した場合、公開後にのみ表面化する問題を見つけるのにわずか 1 分しかかかりません。
重要なポイント
- アダプティブ アイコンは、108 dp キャンバス上で背景と前景の 2 つのレイヤーを使用し、システムがランチャーごとに異なる形状にマスクします。
- すべてのマスク形状にわたって、内側の 66dp セーフ ゾーンのみが確実に表示されることが保証されています。意味のあるアートワークをその中に入れてください。
- Android 7.1 以前のデバイスでは、フラットなレガシー アイコンが引き続き必要です。
- ジェネレーターは、1 つのマスター イメージから必要なすべての密度と Play ストアの掲載サイズを生成できるため、手動でのエクスポート作業を大幅に節約できます。
- ソース ファイルが失われた場合や、別のアプリのアセットを調査する必要がある場合は、既存の APK からアイコンを直接抽出できます。
よくある質問 (FAQ)
Play ストアの掲載アイコンに必要な実際のピクセル サイズはどれくらいですか?
512x512 ピクセル、アルファ チャネル付きの 32 ビット PNG。これは、APK 自体にバンドルされているランチャー アイコンのサイズとは別のものです。
アダプティブ アイコンの背景レイヤーは単色である必要がありますか?
必ずしも単色である必要はありませんが、完全に制御できない方法で移動、拡大縮小、またはマスクされる可能性があるため、通常は不透明でシンプルである必要があります。背景が混み合ったり、透明になったりすると、ランチャー間で一貫性がなくなる傾向があります。
Android アダプティブ アイコンのデザインを iOS で直接再利用できますか?
直接ではありません。 iOS では、個別のレイヤーではなく、システムによって角の丸みが適用された単一の平坦な正方形の画像が使用されるため、通常は、同じアートワークの単純化された平坦化バージョンを iOS 用にエクスポートします。
携帯電話ではアイコンが正常に見えるのに、Play ストアのリストではアイコンがぼやけて見えるのはなぜですか?
これは通常、リスト アイコンが小さなソース イメージから拡大されたときに発生します。常に少なくとも 1024x1024 ピクセルのマスター ファイルから開始して、そこから必要なサイズをそれぞれエクスポートします。
古い Android バージョンのレガシー アイコン フォールバックをスキップするとどうなりますか?
アダプティブ アイコンをサポートしていない Android 7.1 以前のデバイスでは、汎用のシステム アイコンにフォールバックするか、アイコンが正しく表示されない可能性があります。アプリのサポートされている最小 Android バージョンが 8.0 以降の場合にのみスキップしても安全です。
これにはデザイン理論の背景は必要ありません。アイコンが手から離れた瞬間に、自分が制御できない方法でアイコンの形状が変更されるということを認識するだけで済みます。セーフ ゾーン向けに設計し、レガシー フォールバックを維持し、1 つのクリーンなマスター ファイルから必要なサイズをすべて生成すれば、アイコンがどのランチャーに配置されても保持されます。