年初からアシアルにてデザイナーとして働いており、
今日からブログも書くようになりました。
どうぞよろしくお願いいたします。
さて、今日はAndroidにおけるLancherアイコン制作を中心に、
お話をさせていただきたいと思います。
なぜ、この話題かというと、アシアルでは現在、
Androidアプリの制作を積極的に行っていて、
正式なプレスリリースは明日行いますが、
今日から、「ClapClap Clock」というAndroidアプリがAndroid Marketにて、
無料公開されています。
どんなアプリかというと、拍手に反応して、
現在の時刻を声で知らせてくれるという時計ユーティリティです。
興味のある方は是非インストールして頂ければと思います。
今回はそのデザインを自分が担当したので、
そのときに参考にしたデザインガイドラインを大まかに翻訳しながら、
(翻訳というか、かなり意訳して、簡潔にしてあります)
AndoroidにおけるLauncherアイコンについて、お話させていただきます。
大元のAndroidデザインガイドラインは、下記になります。
http://developer.android.com/intl/ja/guide/practices/ui_guidelines/icon_design.html
こちらも一緒にご覧頂きたいと思います。
○Lancherアイコンについて
■見た目
「クリーンで現代的に」
・古臭く見えたり、みすぼらしいデザイン、暗喩的な表現のアイコンは避ける。
「シンプルかつシンボリックに」
・シンプルにデフォルメをして、小さなサイズでもわかるようにし、複雑にはしない。
・アプリケーションの特徴を示す一部分を取り上げる。
・自然なアウトラインと形になるように考慮する。
・だからといって、大きな画像の一部分のトリミングにはしない。
「質感とテクスチャー」
・あまりツヤツヤしたものではなく、マットな質感にすること。
「正面向きで、トップライト」
・Android 2.0以降のプラットフォームでは、アイコンは正面向きに表現する。
トップライトを用いて、ほんの少しだけ奥行き感をつける。
■するべきこと、しちゃいけないこと
「するべきこと」
・現代的に、シンプルに、マットに、質感を大事に表現する。
・正面からの見た目、トップライト、色は限定されたカラーパレットから選ぶ。
「しちゃいけないこと」
・古臭く、複雑で、光沢感のある、平面的なデザイン。
・奥行き感のある表現、トリミング、使用すべきでない色を使う
アイコンがとてもシンプルなものだったら、質感の表現を重視して作るといいようです。
デフォルトのアイコンセットでは、図3のようなマテリアルを使っており、
これをそのまま応用してもいいようです。
Andoroidのランチャーアイコンは２色で表現するのがふさわしく、１色はモノトーンカラーを用い、
もう１色のプライマリーカラーは予め用意されたカラーパレットから選択した方がいいようです。
そして、コントラストの表現をつけることが推奨されます。
推奨カラーパレットは、明るさが異なるモノトーンカラーとプライマリーカラーから出来ています。
このカラーパレットを使って作ったサンプルアイコンが図4になります。
異なる明るさのベースカラーとハイライトカラーを組み合わせて使うことで、
コントラストの表現が容易にできるようになっています。
推奨カラーパレットは図5になります。
テンプレートファイルも用意されています。
(http://developer.android.com/shareables/icon_templates-v2.0.zip)
■サイズと位置
ランチャーアイコンのサイズは画面の解像度によって決まっていますが、
そのままのサイズで作るのではなく、余白を考えて配置をします。
例えば、高解像度(hdpiサイズ)の場合、アイコンそのものの画像サイズは、72×72pxになりますが、
上下左右に、6pxの余裕をもって、配置させるようにします。
形状によって、その範囲から飛び出す分には構わないようです。
また、アイコンが真四角なものだったら、56×56pxにするのが適切なようです。
xhdpiスクリーン：
画像サイズ ：92×92px
※2012/2/6追加
hdpiスクリーン：
画像サイズ ：72×72px
アイコン ：60×60px以内
真四角の場合：56×56px
mdpiスクリーン：
画像サイズ ：48×48px
アイコン ：40×40px以内
真四角の場合：38×38px
ldpiスクリーン：
画像サイズ ：36×36px
アイコン ：30×30px以内
真四角の場合：28×28px
■サンプルアイコン
■実際に作ったアイコン
こちらが、実際に「ClapClap Clock」用にデザインしたアイコンになります。
手の形をIllustratorを使って、デザインして、
それをPhoshopに取り込み、大きさを整えて、
あとはアイコンテンプレートから、
グラデーションやカラーパレットを拝借しました。
おそらく、形のデザインさえしてしまえば、
後はテンプレートからいろいろ持ってくると、
簡単に出来るのではないかと思います。
Lancherアイコンに続いて、
背景やボタンに使う画像の説明を簡単にしたいと思います。
○背景画像やボタンについて
Androidアプリでは、画面サイズによって、
アイコン以外の画像も変える必要が出てきます。
背景やボタン画像などがそうです。
可変サイズのボタン画像の作り方もガイドラインに書いてあります。
http://developer.android.com/intl/ja/guide/topics/graphics/2d-graphics.html
ひとつの画像を９つのパーツに分け、
ストレッチ部分と固定部分を指定することで、
大きさが可変する画像の作成ができます。
具体的な制作手法は以下のようになります。
1.構成要素をすべて入れ込んだミニマムな画像を作ります。
2.ストレッチ部分の範囲を、上と左の端に、1pxの黒いラインを入れて指定します。
3.固定部分も含めて、コンテンツ部分にしたい範囲を下と右の端に、1pxの黒いラインで指定します。
4.完成です。
こちらが完成品で、上下左右の端に1pxのラインがある画像になります。
つまり、下図の白部分がストレッチ部分、赤部分がコンテンツ部分となります。
拡大された時のイメージは、このようになります。
○おわりに
結構な駆け足になってしまいましたが、いかがでしたでしょうか。
実は、アイコンガイドラインは最近になって変更されて、
それまではもっと作りにくい3Dっぽいアイコンの制作が推奨されてました。
ある日、ガイドラインがいきなり変わって、
ほぼ2Dで、しかも色数も制限されるようなものになったので、
アイコンに関しては作りやすくなったのではないかと思います。
Andoroidに携わるデザイナーさんには、常識なのかもしれませんが、
これからAndoroidに関わるデザイナーさんの手助けになればと思います。
○追記
Androidのアイコンガイドラインは下記が最新です。(2012/2/6現在)
いろいろと変わっているようですね。
http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html