1. はじめに
最終更新日: 2022 年 8 月 4 日
Android 13 以降では、ユーザーがアダプティブ ランチャー アイコンのテーマを設定できます。対応している Android ランチャーで、アプリアイコンの色合いに、ユーザーが選択した壁紙やその他のテーマの色が反映されるようになります。
新しいアダプティブ カラーアイコンなど、Android アプリに必要なすべてのシステム アセットを簡単に作成できます。
学習内容
- さまざまな種類のアプリアイコンと、それらをデザインするためのヒントについて理解します。
- Android ランチャーの Figma テンプレートの使用方法。
- Android Studio のアセット ジェネレータの使用方法。
- Android Studio エミュレータでランチャー アイコンをプレビューする方法。
前提条件
- Figma の基本的な知識
- 省略可: アプリアイコンのアートワーク（フォアグラウンド、バックグラウンド、モノクロ）
必要なもの
- Figma アカウント
- Figma designlab ファイル
- 省略可: Android Studio がインストールされているパソコン
2. 始める
セットアップ
まず、Android アプリアイコンの Figma ファイルにアクセスする必要があります。
まず、Figma にログインするかアカウントを作成します。
Figma コミュニティからファイルを複製する
Android ランチャー テンプレート ファイルにアクセスするか、Figma コミュニティで「Migrating to Variable fonts」（可変フォントへの移行）を検索します。右上の [Get a Copy] をクリックして、ファイルのコピーを作成します。
テンプレートの使用
Android アイコン テンプレートは、次の 2 つのページで構成されています。
- 表紙には、関連するコンセプトとテンプレートの使用方法が簡単に説明されています。
- テンプレート ページには、必要なアセットの作成に必要なものがすべて含まれており、3 つのフレーム（色、形、Google Play ストア）に分かれています。
注: 左側の [レイヤー] パネルで、ほとんどのレイヤーとグループがロックされています。これらはロックされたままにしておく必要があります。（ロック解除されたアートワーク グループ内にアートワークを配置できるようになります）。
アセットの作成に入る前に、作成するアセットを確認しておきましょう。
3. Android システム アイコン
ランチャー アイコン
ランチャー アイコン（アプリアイコン）は、アプリの起動体験の重要な一部として機能します。ランチャー アイコンは、アプリへのエントリ ポイントとしてホーム画面に表示されます。
アダプティブ シェイプ
アダプティブ アイコン（AdaptiveIconDrawable）は、個別デバイスの性能やユーザーのテーマ設定に応じて表示が変わります。主にホーム画面のランチャーで使用しますが、ショートカット、設定アプリ、共有ダイアログ、概要画面でも使用できます。
アダプティブ アイコンは、デバイスモデルに応じてさまざまな形状でアイコンを表示できます。たとえば、ある OEM デバイスでは円形のアイコン、別のデバイスで角が丸い正方形のアイコンを表示できます。各デバイスの OEM は、すべてのアダプティブ アイコンを同じ図形でレンダリングするためにシステムが使用するマスクを提供する必要があります。
形状に適応できるため、ユーザー操作に応じてさまざまなアニメーション効果を適用することもできます。
アダプティブ カラー
アダプティブ アイコンでダイナミック カラーを使用できるようになり、テーマ別アプリアイコンをカスタマイズできるようになりました。
システム設定でテーマ別アプリアイコンを有効にすると（つまり、システム設定でテーマアイコンの切り替えをオンにすると）、ユーザーが選択している壁紙やテーマに合わせてアイコンの色合いが調整されます（ただし、ランチャーがこの機能をサポートしている必要があります）。
形状に適応するアイコンと同様に、アダプティブ カラーアイコンはフォアグラウンドとバックグラウンドで構成されます。単色のフォアグラウンド アイコン アセットのみを提供する必要があります。バックグラウンドと色は、抽出されたカラースキームでシステムが処理します。
通知アイコンに同じモノクロ アイコンを使用することもできます。
レガシー
以前の Android バージョンを搭載しているデバイスや、アダプティブ機能をサポートしていないデバイス（8.0 より前）をサポートするために、以前のアイコンを含める必要があります。
フォアグラウンド リソースとバックグラウンド リソースがなく、自由な形状にできます。提供されたテンプレートを使用している場合、最終的なアダプティブ シェイプ アートワークは、以前のアイコンに必要なサイズでエクスポートされます。
通知アイコン
通知は、アプリの UI 以外で Android が表示するメッセージであり、リマインダー、他の人からのメッセージ、アプリからのタイムリーな情報などをユーザーに提供します。通知は、ステータスバーのアイコン、通知ドロワー内の詳細なエントリ、アプリアイコンのバッジなど、さまざまな場所にさまざまな形式で表示されます。また、ペア設定されたウェアラブルには自動的に表示されます。
ストアのアートワーク
フィーチャー グラフィック、スクリーンショット、簡単な説明、動画は、Google Play だけでなく Google の他のサービスでも、アプリの紹介や宣伝に使用されます。
アプリアイコンはアプリのランチャー アイコンの代わりにはなりませんが、再現性を優先した、より解像度の高いものを使用してください。
ランチャー アイコンと同様に、アセット スペース全体を埋めるようにアートワークを配置することも、アートワークの要素（ロゴなど）をデザインしてキーライン グリッド上に配置することもできます。
ストアの掲載情報を公開するには、512x512 ピクセルの正方形のアプリアイコンを用意する必要があります。Android アプリアイコン テンプレートを使用している場合は、アダプティブ シェイプ アートワークを使用してエクスポートする際に提供されます。
4. 設計のベスト プラクティス
ランチャー アイコンは、ユーザー向けにアプリを起動します。アプリへのエントリとして、認識可能で読み取り可能である必要があります。ランチャー アイコンでこれらの品質を確保するためのベスト プラクティスを以下に示します。
アートワークはシンプルにする。複数のレイヤ、多くのエフェクト、テキストは避けてください。小さなサイズでは、これらの詳細が失われたり、見えにくくなったりします。
複雑な図形は避けてください。これにはロゴも含まれます。可能であれば、簡略化されたロゴを使用するか、ユーザーがアプリと関連付けられるシンボルを検討してください。読みやすく特徴的な形状にすることで、ユーザーがさまざまなコンテキスト（アダプティブ カラーや通知）でアプリを簡単に認識できるようになります。
グリッドを使用する。グリッドまたはキーラインを活用して、余白なしのイラスト アートワークなど、切り抜かれた場合でもフォアグラウンドのアートワークが機能するようにします。
コントラストを考慮する。アダプティブ シェイプ アイコンとレガシー アイコンでは、アイコンのフォアグラウンドとバックグラウンドのコントラストが見やすいことを確認してください。システム シャドウと混同される可能性があるため、濃いドロップ シャドウは使用しないでください。
アートワークはセーフゾーン内に配置します。フォアグラウンド アセットは 72×72 ピクセル以内に収めます（全面印刷の場合を除く）。背景は 108x108 ピクセルのままにします。注: アイコン テンプレートのアートワーク フレームは、アイコン アートワークを作成できるように 72x72 ピクセルより大きくなっています。アセットは仕様に合わせてサイズが変更されます。
ベクトル形式。ラスター形式（PNG、JPG、GIF ファイルなど）ではなく、ベクター形式（SVG、AI、PDF、EPS ファイルなど）のアートワークを使用してください。これにより、アートワークが新しい機能に対応し、編集しやすくなります。
5. アダプティブ カラーと通知アイコン
次は、独自の Android システム アイコンを作成してみましょう。
- Android アプリ アイコンの Figma ファイルを探します。
- ファイル内で、[Adaptive color] フレームを見つけます。左側のレイヤ パネルで、[Adaptive color] > [Components] > [art] > [Icon artwork area] > [Themed Icon art < add your icon] を探します。モノクロ アイコンが用意できている場合は、ここにコピーしてサンプル バグドロイド アイコンを置き換え、ステップ 6 に進みます。
- モノクロのアイコンがない場合は、アプリに関連するロゴまたはアイコンから始めます。デザインのヒントに沿ってアイコンを更新します。まず、複雑な形状を簡略化して回避します。たとえば、アプリ内で使用されるイラストは、複雑な葉の形を簡略化しています。影や線の詳細は空白でシミュレートされます。
- 次に、キーライン グリッドを使用してサイズを更新します。ここでは、サイズ変更を [Scale] に設定し、アートワークがフォアグラウンドの安全領域内にあることを確認しています。テンプレートは 4 倍のアートワークで設定されており、エクスポート用に自動的にサイズ変更されるため、アイコンを大きなスケールでデザインできます。
- このファイルは、Material Theme Builder と連携してダイナミック カラーをプレビューできるように設定されています。フォアグラウンド アイコンの色のスタイルを On-surface-variant に接続します。
- プラグイン パネルからマテリアル テーマ ビルダーを開き、ソースカラーをシャッフルするか、画像を挿入して抽出したソースカラーを使用してカラーを更新します。
- さまざまな解像度やホーム画面ではどのように表示されますか？テンプレートは、アートワーク フレーム内に配置されたアートワークがさまざまなプレビュー コンテキストに表示されるように設定されています。
- システムはモノクロ アイコンを通知として使用し、プレビューに表示します。
6. アダプティブ シェイプとレガシー アイコン
次に、アイコンの幅広いサポートを確保するために、アダプティブ シェイプとレガシー アイコンを作成します。
- ファイル内で、シェイプ フレームを見つけます。左側のレイヤ パネルで [Icon background < add your icon*] を探します。アイコンの準備ができている場合は、ここにコピーしてサンプル バグドロイド アイコンを置き換え、ステップ 5 に進みます。*アイコンがない場合は、アプリに関連するロゴまたはアイコンから始めるか、モノクロのアイコンを再利用します。
- アイコンのベスト プラクティスに留意して、フォアグラウンド アイコンを更新します。ここでは、元のイラストの色を復元しつつ、ディテールは最小限に抑えています。
- 次に、キーライン グリッドを使用してサイズを更新します。ここでは、サイズ変更を [Scale] に設定し、アートワークがフォアグラウンドのセーフゾーン内にあることを確認しています。
- アダプティブ シェイプのアプリアイコンには、独自の背景を設定することもできます。これにより、アイコンのレイヤを安全に切り抜き、インタラクション時に微妙な動きの効果を提供できます。Android Studio で単色の背景を使用および定義することもできます。
- プレビューが更新され、ホーム画面での前景と背景の組み合わせ、さまざまな切り抜き形状、レガシー アイコンの表示が確認できます。
切り抜きに使用する形状は、アイコンを選択して形状バリエーション オプションを変更することで、ホーム画面のプレビュー内で更新できます。
7. エクスポート
これで、アプリのアイコンでテンプレートが更新されました。実装用にエクスポートしましょう。
- キャンバスで何も選択されていないことを確認します。
- Figma メニュー > [ファイル] > [エクスポート]（Shift + Cmd + E）に移動します。
- エクスポート メニューで、エクスポートを確認します。これにより、テンプレートからアセットがダウンロードされます。
エクスポートされる内容
エクスポートされたアセットには、アプリアイコンを実装するために必要なすべてのファイルが含まれています。
- Figma は、アダプティブ カラーのモノクロームのフォアグラウンド アイコンを SVG ファイルとしてエクスポートします。また、アダプティブ シェイプ アイコンのフォアグラウンドとバックグラウンドの両方もエクスポートします。
- Figma は、解像度ごとに整理されたさまざまな mipmap ディレクトリにレガシー アイコンも提供しています。
これで、アイコンを開発に送る準備ができました。
または、Android Studio でアイコンをプレビューし、それらの SVG を最終的なアセット形式に変換する場合は、次のステップに進みます。
8. Image Asset Studio を使用する
Android Studio を使ってみる
- Android Studio をダウンロードしてインストールします。
- Android Studio を起動します。
Android Studio で、新しいプロジェクトを開始するか、既存のプロジェクトを選択するかのオプションが表示されます。
- ここでは、新しいプロジェクトを選択します。以降の画面では、新しいプロジェクトの設定手順について説明します。
- 起動アイコンのみを確認するため、スターター テンプレートから任意のテンプレートを選択します。
- 新しいプロジェクトに名前を付けて、[完了] を選択します。新しいプロジェクトの作成には数分かかります。
Image Asset Studio を使用する
便利なツールである Asset Studio を使用して、アイコンをプロジェクトに追加できるようになりました。
- このツールにアクセスするには、[File] メニュー > [New] > [Image Asset] を選択します。
- Image Asset Studio が開いたら、[パス] のフォルダ アイコンを選択して、前景レイヤを追加します。エクスポートした SVG ファイルを drawable-anydpi/ic_launcher.svg として選択します。
- [Background Layer] タブを選択し、同様にエクスポートした背景レイヤを選択します。または、[Asset Type] で [Color] を選択して、ランチャーの背景を単色にすることもできます。
- フォアグラウンド レイヤに戻り、画像がセーフゾーン内にあることを再確認します。アイコンのサイズを、視覚的に最適なサイズに変更します。
- 完了したら、[次へ] をクリックします。プロジェクト内のアイコンの配置場所を指定するよう求められます（デフォルトのままにするか、[Main] に切り替えます）。[完了] をクリックします。ランチャー アセットは res > drawable にあります。ダブルクリックすると、最終的なベクター型ドローアブルのプレビューが開きます。
- モノクローム レイヤ アセットを res/drawable または res/drawable-v24 に手動でコピー＆ペーストするか、res フォルダを右クリックして [New > Vector Asset] を選択して、モノクローム レイヤを手動でインポートします。
- res/mipmap-anydpi-v26/ic_launcher.xml と res/mipmap-anydpi-v26/ic_launcher_round.xml で、既存の android:monochrome="path/to/monochrome/asset を追加または変更して、正しいモノクロ アセットを指すようにします。
9. プレビューとリソース
エミュレータでプレビュー
これは、アプリ プロジェクトに追加して、実際のデバイスまたはエミュレータでプレビューできるようにするためです。アイコンが実際にどのように表示されるかを見てみましょう。
デフォルトでエミュレータが設定されているはずですが、設定されていない場合は、Android Virtual Device を作成してください。緑色の再生ボタンをクリックします。プロジェクトがビルドされ、エミュレータが開きます。
最終アセット
エミュレータを使用してデバイスでのランチャー アイコンの表示を確認し、アプリ プロジェクトに追加することができました。これで、最終的な製品版に変換されました。しかし、それらはどこにあるのでしょうか？
アセットは Android アプリのリソースとして存在し、[リソース パネル]（通常は左側）を開いて見つけることができます。アプリをドリルダウンして、[Res] フォルダを見つけます。右クリックしてメニューを開き、[Finder で開く]（Mac の場合）を選択します。Finder ウィンドウが開きます。必要に応じて、同様のプロセスを使用してアプリの残りのアセットを変換してテストすることで、開発と QA の時間を短縮できます。アプリの残りのアセットを変換した場合は、このフォルダを開発チームと共有できます。
10. 完了
お疲れさまでした。これで、Android アプリのビルドに必要な Android システム アイコンについて学び、独自のアイコンをデザインし、アイコン テンプレート リソースを調べ、さらに Android Studio を使ってアセットをプレビューして本番環境用に変換するところまで進みました。
不明な点がある場合は、Twitter の@MaterialDesign までいつでもお気軽にお問い合わせください。
その他のデザインに関するコンテンツやチュートリアルについては、youtube.com/MaterialDesign をご覧ください。