Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

アイコン デザイン ガイドライン

ユーザー インターフェース全体のデザインを統一すると、プロダクトに付加価値がもたらされます。また、無駄のないグラフィック スタイルにすると、UI がよりプロらしい外観になります。

このドキュメントでは、Android 2.x フレームワークで使用されている一般的なスタイルに合わせてアプリの UI のさまざまなパーツのアイコンを作成するうえで役立つ情報を紹介します。これらのガイドラインに準拠することで、洗練された統一感のあるユーザー エクスペリエンスを作り出すことができます。

次のドキュメントでは、Android のアプリで使用されている一般的なタイプのアイコンについてのガイドラインを詳しく説明します。

アダプティブ ランチャー アイコン
アダプティブ ランチャー アイコンは、Android 8.0(API レベル 26)以降を搭載したデバイスのホーム画面やランチャー ウィンドウでアプリを表すグラフィックです。
以前のランチャー アイコン
以前のランチャー アイコンは、Android 7.1(API レベル 25)以前を搭載したデバイスのホーム画面やランチャー ウィンドウでアプリを表すグラフィックです。
メニュー アイコン
メニュー アイコンは、ユーザーがメニューボタンをタップしたときに表示されるオプション メニューに配置されるグラフィック要素です。
アクションバー アイコン
アクションバー アイコンは、アクションバーでアクション項目を表すグラフィック要素です。
ステータスバー アイコン
ステータスバー アイコンは、ステータス バーでアプリからの通知を表す場合に使用されます。
タブアイコン
タブアイコンは、マルチタブ インターフェースで個々のタブを表す場合に使用されるグラフィック要素です。
ダイアログ アイコン
ダイアログ アイコンは、ユーザーに操作を求めるポップアップ ダイアログ ボックスに表示されます。
リスト表示アイコン
リスト表示アイコンは、ListView で使用される、リスト項目を表すグラフィック要素です。設定アプリなどで使用します。

アイコンの作成をすぐに始められるよう、Android アイコン テンプレート パックをダウンロードすることをおすすめします。

Android アイコン テンプレート パックを使用する

Android アイコン テンプレート パックは、テンプレート デザイン、テクスチャ、レイヤスタイルのコレクションです。これを使用すれば、このドキュメントに記載されているガイドラインに準拠したアイコンを簡単に作成できます。アイコンのデザインを始める前に、テンプレート パック アーカイブをダウンロードすることをおすすめします。

アイコン テンプレートは、Adobe Photoshop ファイル形式(.psd)で提供されます。ここには、Google で Android プラットフォームの標準的なアイコンを作成する際に使用したレイヤやデザイン効果が収められています。対応する画像編集プログラムであればテンプレート ファイルを読み込むことはできますが、レイヤや効果を直接操作する機能はお使いのプログラムによって異なる可能性があります。

最新のアイコン テンプレート パックは以下のリンクからダウンロードできます。

Android 向けアイコン テンプレート パック 4.0 をダウンロード »

過去のバージョンのアイコン テンプレート パックについては、このページの右上にあるボックスの [ダウンロード] 欄をご覧ください。

密度別のアイコンセットを提供する

Android は、画面サイズや解像度の異なるさまざまなデバイスで動作するよう作られています。アプリのアイコンをデザインする場合は、そうしたすべてのデバイスにアプリがインストールされる可能性があることを念頭に置くことが重要です。複数の画面のサポートについてのドキュメントに記載されているように、Android プラットフォームでは、アイコンを提供する方法をシンプルにし、デバイスの画面サイズや解像度を問わず、どのようなデバイスでもアイコンが正しく表示されるようにしています。

一般に、汎用の画面密度ごとに別々のアイコンセットを作成することをおすすめします。作成したアイコンセットは、アプリの密度別のリソース ディレクトリに保存します。アプリが実行されると、Android プラットフォームでデバイスの画面の特性が確認され、適切な画面密度のリソースからアイコンが読み込まれます。アプリに密度別のリソースを保存する方法について詳しくは、画面サイズと密度に適したリソース ディレクトリ修飾子についての説明をご覧ください。

複数の密度のアイコンセットを作成、管理する方法のヒントについては、デザイナー向けのヒントをご覧ください。

デザイナー向けのヒント

ここでは、アプリのアイコンやその他のドローアブル セットを作成する場合に役立つヒントをいくつか紹介します。Adobe Photoshop または同等のラスター / ベクター画像編集プログラムを使用していることを前提とします。

アイコン アセットには共通の命名規約を使用する

ファイルに名前を付ける場合は、アルファベット順に並べ替えたときにディレクトリ内で関連アセットがまとまって表示されるようにしてください。特に、アイコンタイプごとに共通の接頭辞を使用することをおすすめします。以下に例を示します。

アセットタイプ 接頭辞
アイコン ic_ ic_star.png
ランチャー アイコン ic_launcher ic_launcher_calendar.png
メニュー アイコン、アクションバー アイコン ic_menu ic_menu_archive.png
ステータスバー アイコン ic_stat_notify ic_stat_notify_msg.png
タブアイコン ic_tab ic_tab_recent.png
ダイアログ アイコン ic_dialog ic_dialog_info.png

なお、これらの接頭辞はいずれも作業上の利便性のみを目的としており、使用しなくてもかまいません。

複数の密度に対応できるようファイルを整理する作業スペースを設定する

複数の画面密度に対応するには、同じアイコンの複数のバージョンを作成する必要があります。複数のファイルを見つけやすい場所に安全に保存できるよう、作業スペースにディレクトリ構造を作成し、解像度ごとにアセット ファイルを整理することをおすすめします。以下に例を示します。

art/...
        ldpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        mdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        hdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png
        xhdpi/...
            _pre_production/...
                working_file.psd
            finished_asset.png

この構造は、アプリのリソースに完成版のアセットを最終的に保存するときの密度別の構造に似ています。作業スペース内の構造がアプリの構造と似ているため、各アプリのリソースディレクトリにどのアセットをコピーする必要があるかをすぐに判断できます。アセットを密度別にしておけば、密度間のファイル名の違いも判別しやすくなります。密度別の対応するアセットは同じファイル名を共有する必要があるため、これは重要です。

比較のために、以下に典型的なアプリのリソース ディレクトリ構造を示します。

res/...
        drawable-ldpi/...
            finished_asset.png
        drawable-mdpi/...
            finished_asset.png
        drawable-hdpi/...
            finished_asset.png
        drawable-xhdpi/...
            finished_asset.png

可能な限りベクター形式を使用する

Adobe Photoshop などの多くの画像編集プログラムでは、ベクター形式やラスター レイヤ、ラスター効果を組み合わせて使用できますが、可能な限り、ベクター形式を使用してください。必要に応じて、ディテールやエッジの鮮明さを損なうことなくアセットを拡大できます。

また、ベクターを使用すれば、小さい画面でもエッジやコーナーをピクセル境界に簡単に合わせることができます。

大きいアートボードから始める

画面密度別にアセットを作成する必要があるため、アイコンのデザインは、ターゲット アイコンの数倍のサイズを持つ大きいアートボードから始めることをおすすめします。たとえば、ランチャー アイコンの幅が、画面密度に応じて、96 ピクセル、72 ピクセル、48 ピクセル、または 36 ピクセルであるとします。最初に 864x864 のアートボードでランチャー アイコンを作成すれば、最終的なアセットの作成でターゲット サイズにアートボードを縮小する際にアイコンを無駄なく簡単に調整できます。

スケーリングの際は、必要に応じてビットマップ レイヤを作成し直す

ベクター レイヤからではなく、ビットマップ レイヤから画像を拡大した場合は、より大きい画面で鮮明に表示されるようこれらのレイヤを手動で作成し直すことが必要になります。たとえば、mdpi で 60x60 の円をビットマップとして作成した場合は、hdpi では 90x90 の円として作成し直す必要があります。

画像アセットを保存する際、不要なメタデータを削除する

アプリリソースをアプリバイナリにパッケージする際、Android SDK ツールによって PNG は自動的に圧縮されますが、PNG アセットから不要なヘッダーやメタデータを削除することをおすすめします。OptiPNGPngcrush などのツールを使用すると、このメタデータが削除され、画像アセットのファイルサイズを最適化できます。

密度別の対応するアセットには同じファイル名を使用するようにする

密度別の対応するアイコン アセット ファイルには同じファイル名を使用する必要がありますが、保存する場合は密度別のリソース ディレクトリを使用してください。システムにより、デバイスの画面特性に応じて正しいリソースが検出され、読み込まれるようになります。このため、各ディレクトリ内の一連のアセットの整合性を保つとともに、ファイル名に密度固有の接尾辞を使用しないようにしてください。

密度別のリソースと、各種デバイスのニーズに合わせてリソースが使用される仕組みについては、複数の画面のサポートについての説明をご覧ください。