ひつじのにっき

mhidakaのにっきです。たまに長文、気が向いたとき更新。

Android 2.1アイコン作成方法 3つのポイント

ADF2010 LT Android開発Tipsの後半です。お待たせしました。

Android DeveloperのIcon Design Guidelines, Android 2.0が原典です。
英語ですがデザインについて大変参考になります。
以下を読んで興味を持ったひとは是非、読んでみて下さい。

  • ランチャアイコンのデザインポイント
  • アイコンの推奨サイズ
  • 綺麗に見せる便利ツール"Draw9patch"

ランチャアイコンはアプリの顔

Androidアプリケーションの顔といえるアイコンですが、意外に苦労している人が多いはず。
アイコン作成のポイントを紹介します。


(Style Do's and Don'ts)より


図はグッドプラクティスとバッドプラクティスの比較です*1

Android2.0で良いとされるアイコンでは以下の3つのポイントがあります。

  • モダンなデザイン

あまり古くさくしないこと(アプリまで古ぼけて見えるかも)

  • 最小限の表現でアプリケーションの概要を表現する

(たとえば左から二番目のアイコンはミキサーですが、ごちゃごちゃしています。一つ上のスピーカーはシンプルですが、うまく表現しています)

  • 平面的で、統一感のある色使いを心がける

  (いろんな色を使いすぎると、落ち着きが無くなります)


また、Android1.xの時は、アイコンガイドラインでは「角度をつけて斜めで置けばいいよ」とありましたが、Android 2.0 エクレア以降では推奨していないようです。
(デザインガイドラインはプラットフォームの進化とともに変わっています)

アイコンサイズの肝

ランチャに表示されるアイコンは解像度によって3つのサイズが規定されています。

説明/解像度 高解像度 中解像度 低解像度
最大サイズ 72 x 72 px 48 x 48 px 36 x 36 px
推奨範囲 60 x 60 px 40 x 40 px 30 x 30 px
矩形の範囲 56 x 56 px 38 x 38 px 28 x 28 px


デザインごとに推奨範囲があり、四角いデザインのアイコンが
もっとも小さい指定を受けています(それだけ存在感があるから?)

(Size and positioning)より

アイコン作成に便利なツール"nine-patch"

Androidアプリケーションにはたくさん、アイコンが登場します。

ランチャ・メニュー・ステータスバー・タブ・ダイアログ・リストビュー、
それぞれの機能に解像度(高・中・低)が更に指定され、最大6パターン必要です。
全てを最初から用意するのは手間なので、出来るだけ手を抜きたいところです。


そんなとき便利なのが、SDKに同梱されているDraw9Patch。
(android-sdk-windows\tools\draw9patch.bat)
NinePatchイメージ(拡大・縮小しても きれいなまま)の作成ツールです。
これで、1つのアイコンを用意すればソコソコきれいに見えます。


9つのエリアを指定して伸縮の可/不可を決定します。
編集後は[なまえ.9.png] 拡張子で保存してください。
名前が上記規則に従っていれば、自動的にきれいに拡大縮小してくれます。



ドラッグアンドドロップで元素材を読み込みます。
今回はPowerpointで四角い箱を用意しました*2



ちょっとツールの使い方にはコツがあるのですが、
・画像の左端と上端を拡大して左クリックしながら、端をなぞる
(図のように最初は緑、交差している範囲がピンクで色がつきます)

失敗しても右クリックでなぞり直すと消去できます。
画像の拡大、縮小を使いながらうまく9分割できれば、「xxx.9.png」で保存して下さい。


画面でピンクの部分が拡大・縮小(左右比を保ったまま)される箇所です。
緑の部分が引き延ばし方向に合わせて伸びます。
どの環境でも綺麗に見えるアイコンのできあがりです。
(アイコンだけでなく、拡大/縮小が必要な各種画像に使えて便利)

*1:ガイドラインに則して、分り易いという視点で

*2:案外便利な図表ツール