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