ホームページ移転のお知らせ 1月1日にリニューアルを実施いたしました。 これに伴い、ページのURLが以下のアドレスに変更となりました。 http://android-design.teamegg.co.jp/ お手数をおかけしますが、リンク集やお気に入り登録情報などの修正をお願いします。 アイコンデザイン![]()
アイコンはスクリーン上の領域を一部使って、アプリのアクションやステータスを直感的に確認できるグラフィック項目です。
アプリアイコンをデザインするときには、アプリがピクセル密度や大きさの異なる様々なデバイスにインストールされる可能性があることに気をつけなければいけません。(Devices and Displaysで説明しています)しかし、数種類の大きさのアイコンを用意することで、すべてのデバイスでアイコンをきれいに表示することができます。アプリを実行した際に、Androidはデバイスの画面についての情報を確認し、アプリに最適な画面密度のアイコンを読み込みます。
異なる画面解像度のデバイスに最適化されたアイコンを提供するため、MDPI画面を元にしたサイズ(dp単位で表示)のアイコンを基本としたデザインのガイドラインを以下に示します。
![]()
様々な解像度のデバイスに対応したアイコンを作成する際には、アイコンのサイズの比が2:3:4:6:8になるようにしてください。(medium,high,x-high,xx-high,xxx-highに対応します。)例えば、ランチャーアイコンのサイズが48x48dpと指定されている場合、画面解像度がMDPIの場合にはアイコンのサイズを48x48dpに、HDPIの場合には1.5倍の72x72px、XHDPIの場合には2倍の96x96pxでアイコンを作成する必要があるということになります。(XXHDPIなら3倍の144*144)
注意:
AndroidはLDPIの解像度もサポートしていますが、AndroidはHDPIで作成されたアイコンを効果的に半分のサイズにダウンスケールして表示するため、通常はLDPI用のアイコンを作成する必要はありません。
ランチャー
|
![]() |
![]() |
![]() |
サイズとスケール
モバイルデバイス上のランチャーアイコンは必ず48x48dpです。
GooglePlay画面でのランチャーアイコンは必ず512x512ピクセルです。
|
大きさ
完全なリソースは48x48dpです。
|
スタイル
はっきりした影をつけるようにしましょう。3次元の正面の斜め上からの画像を用意することで、立体感のある画像を提供できます。
|


アクションバー
アクションバーのアイコンは、アプリ内で実行できる最も重要なアクションを表現する画像のボタンです。それぞれはほとんどの人がひと目で把握することができる、1つの概念を表すシンプルなメタファーを採用するべきです。
すでに定義されている「リフレッシュ」や「シェア」などのグリフは、特定の共通のアクションに使用されるべきです。下記のダウンロードリンクでは、様々な画面密度にスケーリングされ、HoloLightとHoloDarkテーマでの仕様に適しているアイコンのパッケージを提供しています。パッケージには、それらを更にカスタマイズするためのAdobe® Illustrator®のソースファイルに加えて、あなたのテーマに合わせて変更できるスタイルなしのアイコンが含まれています。
Download the Action Bar Icon Pack
![]() |
![]() |
![]() |
サイズとスケール
端末のアクションバーアイコンは32x32dpです。
|
焦点エリアと大きさ
完全なリソース:32x32dp
視覚的な矩形:24x24dp |
スタイル
絵文字でフラットで細かくなく、なめらかな曲線や鋭い直線から構成される図形です。グラフィックが細長い場合、45°左または右に焦点エリアを埋めるために回転します。線と色がついていない部分の太さは最低2dp必要です。
|
カラー
カラー: #333333
有効: 60% の不透明度 無効: 30% の不透明度
カラー: #FFFFFF
有効: 80% の不透明度 無効: 30% の不透明度 |
![]() |
小さい/文脈上のアイコン
アプリのボディ部分には、アクションや特定のアイテムの状態を表すために小さなアイコンを使用してください。例えば、Gmailアプリでは、各メッセージは重要なメッセージをあらわす星マークのアイコンがあります。
![]() |
![]() |
![]() |
サイズとスケール
小さなアイコンは16x16dp
|
焦点エリアと大きさ
完全なリソース:16x16dp
視覚的なサイズ:12x12dp |
スタイル
自然でフラットでシンプルです。塗りつぶされた図形は細い線よりも見やすいです。ユーザーがその目的を簡単に認識し理解できるように、一つの視覚的なメタファーを使用してください。
|
![]()
カラー
控えめかつ意図的に非中間色を使用してください。例えばGmailはブックマークしたメッセージを示すために黄色の星アイコンを使います。アイコンがアクションするものなら、背景から際立つ色を選んでください。
|
![]() |
通知アイコン
アプリが通知を生成した場合、新しい通知が利用可能なときはいつでも、システムがステータスバーに表示するアイコンを提供します。
![]() |
![]() |
![]() |
サイズとスケール
ノーティフィケーションアイコンは24x24dp
|
焦点エリアと大きさ
完全なリソース:24x24dp
視覚的なサイズ:22x22dp |
スタイル
ランチャーアイコンと同じ単一の視覚的メタファーを使用して、スタイルをフラットでシンプルなものにしてください。
|
カラー
通知アイコンは完全に白でないといけません。システムはアイコンを縮小したり暗くする事があり得ます。
|
![]() |
デザインのTips
ここではアプリのアイコンやその他の画像を作るのに便利なTipsをいくつか紹介します。これらのヒントは、Adobe®Photoshop®または同様のラスターやベクトル画像編集プログラムを使用していると仮定します。
可能であればベクトル画像を使用する
Adobe® Photoshop®のような画像編集プログラムの多くは、ベクトル図形やラスタレイヤやエフェクトを組み合わせることができます。ファイルのディテールやエッジのきめ細やかさを損なうことなく拡大する必要が生じた場合に備えて、可能であればベクタ図形を使用してください。
ベクタ画像を使うことで、小さい解像度のピクセルに合わせて簡単にエッジと角を揃えることができます。
大きなアートボードで始める
画面密度が異なる端末に合わせてアイコンを作る必要があるので、対象サイズの倍数となる大きさで、デザインすると効率的です。例えば、ランチャーアイコンは画面密度に依存して、48、72、96、144の大きさで表示されます。(それぞれmdpi、hdpi、xhdpi、xxhdpi)このため、864x864サイズでランチャーアイコンを描いておくと、アートボードを最終的なリソースのサイズに縮小する時に便利で、かつ綺麗にアイコンを調整できます。
拡大する場合は必要に応じてビットマップレイヤを書き直す
ベクタレイヤではなく、ビットマップレイヤから画像を拡大した場合、より高い画面密度に合わせて表示させるために手作業で書き直す必要があります。 例えば、mdpi用の60x60の円がビットマップで描かれている場合、hdpi用の90x90の円を書き直す必要があります。
アイコンに共通の命名規則を使用する
関連するリソースがアルファベット順にソートされた時に、ディレクトリ内で一緒のグループになるようにファイル名を付けます。 特に各アイコンの種類ごとに共通のプレフィックスを使用すると便利です。
アセットタイプ | 接頭辞 | 例 |
---|---|---|
アイコン | ic_ | ic_star.png |
ランチャーアイコン | ic_lancher | ic_lancher_calender.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/...
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
xxhdpi/...
_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
xxhdpi/...
_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
drawable-ldpi/...
finished_asset.png
drawable-mdpi/...
finished_asset.png
drawable-hdpi/...
finished_asset.png
drawable-xhdpi/...
finished_asset.png
アプリのプロジェクト内にリソースを保存するについてのさらなる情報は、Providing Resourcesを参照してください。
最終的なリソースからメタデータを削除する
アプリバイナリにアプリリソースを取り込む時にAndroidSDKツールは自動的にPNGを圧縮するので、PNGリソースから不要なヘッダとメタデータを削除するのが良い方法です。OptiPNGやPngcrushのようなツールは、このメタデータが削除されていることと、画像リソースのファイルサイズが最適化されていることを確認することが出来ます。
原文はこちら > Iconography
Except as noted, this content is
licensed under
Creative Commons Attribution 2.5. For details and
restrictions, see the Content
License.