Android 2.0のアイコンを描くには

2010.04.13 // blog // hiroakin // 1 Comment

先日発売されたXperiaに続いて、4月末には最新のAndroid OS2.1を採用したHTCのDesireも発売開始され、いよいよ日本でもAndroidを採用した端末が普及する予感がします。Android OS 2.0以上では様々な新機能がサポートされているのですが、デザイナーの立場からいうとランチャーのアイコンが大きく変わっています。詳しい内容はAndroidデベロッパーサイトの「Icon Design Guidelines, Android 2.0」を見ていただくとして、旧ガイドラインではアイコンは斜めから見た立体表現だったものが、2.0からは（iPhoneのような）正面から見た半立体風の表現に改められています。もちろんこの変更は描きやすさを考慮したものだと思います。旧ガイドラインのような3D風のアイコンは描きにくいですからね。

ただiPhoneの場合はただの四角いグラフィックを用意すればシステムで角を丸くして、反射まで入れてくれるのですが、Androidではそういう工夫はないので、2.0であってもアイコンをあくまでちゃんと描かないといけません。Androidでは結構有名な企業のアプリケーションでもアイコンのデザインが残念なものを見かけることが多いので、せっかくですからアイコンもちゃんとしたデザインにした方がいいのではないかと思います。ガイドラインは英語で長い文章なのでここに簡単に要約して描き方を説明してみます。

まずはデベロッパーサイトから「Android Icon Templates Pack, v2」をダウンロードします。Launcherのアイコンは「Launcher-icon-template.psd」というファイルに入っています。PhotoShopがなくても最近のGimpで開くことができますから、とりあえずそれで開いてみましょう。２つのレイヤーに分かれていて、ひとつはMaterials Paletteというベースとなるグラフィックです。もうひとつはCombined Materialsというレイヤーでこれはベースデザインの参考例です。前述のガイドラインによれば、Androidのアイコンが何かしらの現実のマテリアル（金属、プラスチックなど）から削り出したようなデザインがいいそうなので、Material Paletteにあるような素材感のあるベースを用意して、そこに何かしらのモチーフを組み合わせるということになります。またガイドラインによればナチュラルな色、簡単に言えば黒、白、グレーですが、をベースにガイドラインにあるような色を組み合わせることが推奨されています。上の例では薄いグレーのグラデーションを引いた四角にマテリアルを加えてベースとし、明るい青の色を組み合わせて、そこに電話のモチーフを描き加えています。

実際に作成する場合、Launcherのアイコンのサイズは例えばXperia用のアプリケーションであれば、high-density screenなので、72×72ピクセルになります。新規ファイルで72×72ピクセルのファイルを作成します。最初にTempleteからベースとなるグラフィックをペーストします。そしてレイヤーを追加して組み合わせる順番にグラフィックを描き加えていきます。描き方は人それぞれなのですが、PhotoShopで作成する場合、グラフィックはビットマップではなく、ベクトルマスクで描いた方がいいと思います。なぜかというとビットマップで描いてしまうと後で大きさを拡大・縮小する時に都合が悪いからです。Templeteの作例も、ほとんどがベクトルマスクで描かれています。

ここで注意しなければいけないのはアイコンの実サイズです。アイコンサイズ72×72ピクセルというのは最大サイズなので、実際にすべてのアイコンがその最大サイズいっぱいに描かれてしまうと、当然ですが四角のアイコンが丸のアイコンより大きく見えてしまいます。そのためガイドラインでは四角形のベースを持つアイコンは57×57ピクセルで描くように指示があります。丸のベースの場合は、それより少し大きな60×60ピクセルで描きます。そうすることでバランスが取れて同じ大きさに見えるのです。そうしないとユーザーがアイコンを並べた時にバラバラな大きさになってしまいます。ベースのない、例えば吹き出しのようなアイコンでは大きさを調整して72×72ピクセルに収まるように描きます。この場合、ドロップシャドウ分も含めて72ピクセルに収まるよう注意します。この辺もiPhoneでは必要のないテクニックなので面倒です。iPhoneではベースが決まっていますから。ただAndroidでは逆に好きな形のアイコンにすることができますから、ガイドラインに準拠して素敵なアイコンを用意できるといいですね。ちなみにガイドラインを作成したのはサンフランシスコの「PUNCHCUT」というデザイン会社のようです。記述に多少違ったことが書いてありますから、結構時間のない中で作成されたのかも知れません。