Android Icon Design Training

2012/4/14 10659hit

はじめに

Android Icon Design Training
ランチャーアイコンはアプリを識別する顔であり、マーケットにおいて最も重要で最も目立つ宣伝です。
そのため、アプリのアイコンにこだわる事はとても重要です。
しかし、同時にプログラマーに取っては苦手意識や他人事になりやすい部分でもあり、素晴らしい機能を持ちながら投げやりなアイコンが付いたアプリも少なく有りません。

そこで非デザイナー向けに、絵心が無くてもハイクオリティなデザインは可能である事をAndroidのランチャーアイコン作りを通じて体感し、デザインを身近に感じてもらうとともにデザイナーと話をするための基礎を築くことを目的としたイベントAndroid Icon Design Trainingを4/6にAIP Cafeにて開催しました。
そのときの資料をアップしてほしいというリクエストがあったため、前半部分を中心に説明を追記しながら公開します。
後半部分はInkScapeやホワイトボードを使いつつ、各自のPCでそれぞれのアイコンを描くライブコーディングスタイルだったこともあり資料がありません。

イベントのアジェンダ

Android特有のルールに付いて説明(前半)
デザイン全般のテクニックの紹介(前半)
どんなアイコンを作るかを決める方法(前半)
ベジェを描くときの簡単なこつと練習方法(後半)
どうやって現実の物をグラデーションで表現するかのテクニック(後半)
実際にテクニックとルールに従ってオリジナルのアイコンを作ってみました(後半)
イベントのアジェンダ

Androidのルール

あらゆるプラットフォームでもそうであるように、Androidにも特有のルールが有ります。

アイコンのサイズ

ランチャーアイコンのサイズは以下の通りです
Androidのアイコンサイズ一覧

1/24の空白

ただし、このサイズをフルに使ってデザインを行うべきではなく、主要なコンテンツは1/24分内側に入れるべきです。
例えば96pxx96pxの場合左右4px分程度内側にデザインします。
余白は何に使うかと言うと、影を付けたり、突起物を付けたり、細いアイコンの場合にはみ出させ他のアイコンと面積をあわせて統一感を出すのに使います。

その他のルール

アイコンは小さく表示される事も有るため、小さな画面でもそれが何を表しているか分かるようにコンテンツを厳選し大きくシンプルにデザインします。
ランチャーアイコンはアプリを区別するのに使われるため、個性的な形状と質感を持って見分けがつきやすいようにします。
Androidにおいてはアイコンは「非光沢な質感」が求められると紹介される事が有りますが、これは正確ではなく、本来の質感を大事にする事が大切です。
本来光沢が有るもの(ガラスとか)に対して光沢をつける事は構いません。
布などの本来非光沢なものに対して装飾として光沢をつけるのは他のアイコンと区別がつきづらくなるため推奨されません。
アイコンに質感を持たせるためにアイコンには有る程度の太さが求められています。
Androidのアイコンに置いてはシンプルさが要求されていますが、アイコンはアプリの顔でもあるため単にシンプルなだけでなく、控えめにアクセントをつけてユーザーを魅了する事も大切です。
また、背景色はフルサイズの単色を使ってはいけません。
グラデーションや半透明で変化をつけてください。 また1/24の空白を忘れないでください。
Androidアイコンにおけるルール
アイコンは真っ正面のちょっと上から眺めるようなデザインにします。
平べったい物であれば上部にハイライトを入れる事でこれを表現出来ます。
奥行きが有る物であれば、奥行きを描く事で上から見ているのを表現します。
ただし、正面の概念は人によって異なる事に注意してください。例えば人の顔の場合、横顔が正面であると言う事も出来ます。(純正アイコンでいうと受話器がその例に当たります)

デザインのルール

デザインは単に絵心によってのみ作られる訳ではなく、先人達が切り開いてきた美しく見える方法が有ります。
それらを純粋に守るだけで美しい絵の下地を作る事が出来ます。

黄金比

黄金比はデザインにおいて最も重要な比率です。
その割合は1.1618033...と続きますが、おおよその5:8で覚えると覚えやすいです。
黄金比は安定感やかっこよさをもたらします。
黄金比
黄金比の特徴として、黄金比の長方形を描いた場合、長辺に同じ辺の長さの正方形を繋げるともとのサイズと同じ比率になるという点が上げられます。
例題では丸めて5:8にしているため多少誤差が発生していますが
8x5(8/5=1.6)の長方形に、8x8の正方形を繋げると13x8(13/8=1.62)となり
13x8の長方形に13x13の正方形を繋げると21x13(21/13=1.62)となり
21x13の長方形に21x21の正方形を繋げると34x21(34/21=1.62)となるように長辺と短辺の比率がずっと黄金比のままとなります。

フィポナッチ数

黄金比を便利に使う方法としてフィポナッチ数を覚えると良いでしょう。
フィポナッチ数は1,1,2,3,5,8,13,21...と続いて行く整数の値で、次にくる値は前の二つの値を足した数という決まりになっています。
1+1=2 1+2=3 2+3=5 3+5=8 8+13=21...
この値の特徴は並んだ二つの値を比較すると黄金比に近づくと言う事です。
1/1 = 1 2/1=2 3/2=1.5 5/3=1.67 8/5=1.60 13/8=1.63 21/13=1.62
つまりフィポナッチ数に合わせて複数のオブジェクトを並べるだけでそれぞれが黄金比に近い比率となります。
有名な実例はApple社の有名なリンゴのロゴマークで複数のフィポナッチ数を直径にもつ曲線で構築されています。
フィポナッチ数の不思議な特性

白銀比

覚えるべき比率は黄金比だけではなく、白銀比も大事です。
白銀比は1:√2の比率を持ちます
白銀比は1:√2

白銀比の特徴は長辺で2等分すると元の比率と同じ比率の長方形が2つ出来上がる事です。
このトリックは1:√2と√2/2:1の比率が同じ事から求められます。
白銀比は様々なところで使われていますが、最も身近で有名な例がコピー用紙や書籍です。
これらの紙を長辺で折り曲げると、もとの紙と同じ比率となるのは白銀比が使われているからです。
人は白銀比に対して安心感や親しみやすさを感じます。

比率のまとめ

比率の話は追い求めると難しくなるため本職ではない非デザイナーが覚えておくべきなのは
黄金比が5:8白銀比が1:√2
これらの比率は安定感や落ち着きを演出するのに使えて万人受けするので、比率に困ったらとりあえず使っておくと失敗しにくくなります。
注意点として、これらの比率は決して万能薬ではなく、使いどころを間違えると逆効果になる事です。
驚きや恐怖感の演出など安心や落ち着きを意識的に削りたい場合にはマイナス効果になります。
黄金比をあえて破った実例としては定型フォーマットより細長い名刺でインパクトを出すのに使われています。

黄金比や白銀比が使われている例

熊本県の人気キャラクターは至る所に黄金比、白銀比が使われています。
まるで手抜きのような絵ですが、実は計算深くデザインされているのが分かります。
これらによってシンプルなデザインと間の抜けた表情で親しみやすくしながら熊が持つ重厚感、安定感を表現するのに役立っています。
黄金比と白銀比が多用されているくまモン

アイデアのまとめ方

Androidのルールとデザインのルールが分かったところで次に重要なのは、何を描くかです
それを決める方法にも方法論が有ります。

アプリの特徴を洗い出す

アプリの機能を書き出して、その中で自分のアプリが他のアプリには無い重要な特徴点を洗い出して行きます。
最終的に最大の特徴を1つに洗い出して、必要であれば追加の機能をもう一つ程度入れても良いです。

とりあえずドロイド君を入れておこうはNG

Androidのアプリだからという理由だけでドロイド君を特徴とするのはNGです。
Androidアプリと言う特徴は開発者としては大きくても、ユーザーはランチャーアイコンを他のAndroidアプリの中から識別する時に使うため、ユーザー視点ではAndroidアプリであることは当たり前で特徴して成り立ちません。
ドロイド君を操作するゲーム等、ドロイド君自体に関するアプリとかでも無い限り、ドロイド君をアイコンに組み込むべきではありません。

機能を特徴とする絵

実際に特徴とする絵を洗い出したところでそれをシンプルに表現する方法を考えます。
その機能を象徴する物がどこであるかを考えます。
例えば音楽であれば、レコードやヘッドフォン、自動車であればエンジンやハンドル、あるいはボディ全体等。
様々な表現方法が有ります。

下絵描きまくり

それらを決めるために実際に下絵に描きまくります。
プロでもない限り脳内でデザインを行うのには限界があり、実際に目に見える形に出力して具体的な物にして行く必要が有ります。
下絵を描くときはデジタルを使わずに紙とペンを使う事って良く言われますが、大切なのは自分が一番描きやすいツールを使う事です。
デジタルがNGというのは紙とペンでデッサンの練習をしまくったプロの場合の話です。
しかし、そういう経験が無い我々非デザイナーには紙とペンで絵を描くのは時間がかかり苦痛に感じる人も居ます。。
そういう場合に無理に紙とペンでやる理由は一つもなくデジタルでも何でも好きなツールを使って構いません。
大切な事はたくさん描く事と、楽しく描く事です。

人にも見せなくていい

下絵はたくさん人に見せていろんな意見を貰った方が良いと良く言われますが、デザインを人に見せるのが恥ずかしくて、苦手意識から下絵を描くのが嫌になるくらいなら見せる必要は有りません
繰り返しますが一番大切な事は楽しく描く事です。

消しても良い

絵心が無い場合、自分で描いた絵を自分で見るのも苦痛に感じる事が有ります。
恥ずかしい絵を見て自己嫌悪に陥ったり、、机にしまっておいた恥ずかしい下絵が見られるのが不安と言う場合も有ります。
そういう場合は簡単に消去出来るガジェットを使うのもおすすめです。
ブギーボードならさらっと描いて不満なデザインはすぐに消去出来るので絵を描く心理的障壁をぐっと下げてくれます。

別にデジタルじゃなくても昔ながらの「せんせい」を使うと言う手も有ります。
ブギーボードほど描き味は良くないけれど、子供と遊ぶ道具にも使えて一石二鳥ですね。

ブラッシュアップ 〜そして芸術へ〜

下絵で何を描くか決まったら実際にデザインして行く段階に入ります。
InkScapeやイラストレータ等ドロー系ツールを使って、人に見せなくても良かった下絵を人に見せるアイコンへとブラッシュアップして行きます。
そのために役立つテクニックがいくつか有ります。

神は細部に宿る

例えば下のアイコンを見比べた場合、印象が大きく異なるのが分かると思るとおもいます。
二つのアイコンは9割同じで異なるのは白い縁取りがされたことと影が付いただけです。
それでも、これだけ印象の差が出るのは、人は細部ほど注意が行き、色が大きく変わる部分などの境界は注意深く演出する事で控えめで美しいデザインを作る事が出来ます。
特に細い溝やハイライトは美しさを感じやすいです。
実例としてMacBookProは部品間の溝がとても細くそれが高級感を演出するのに役立っています。
神は細部に宿るとは単に細部まで手を抜かずしっかり作る事、という話ではなく、むしろ細部こそしっかりと注力してデザインすべきと言う事を表します。

マイナスの美学

デザインにおいてはあれもこれも詰め込みすぎるより、厳選して要素を少なくした方が良いです。
デザインの要素を絞り込み、大切な要素を大きく表現する事で、美しさに加えて先述したAndroidアイコンのルールで求められているシンプルさにも繋がってきます。

黄金比 白銀比

そして困ったときの黄金比や白銀比です。
レイアウトが上手く決まらないときはとりあえず黄金比や白銀比にしてしまいましょう。
意外と上手く行ったりします。
また、アプリの特徴を示す機能が二つある場合、主要素と副要素を黄金比の比率で重ねる事も出来ます。

作る

実際にアイコンを作ってみましょう。
ドロー系のツールは作り込みの積み重ねです。
慣れるまではたくさんの時間が必要かもしれませんが、細部を一つずつ改善して行く方法は最初から完成系が求められるペイント系に比べて、時間さえ書ければ初心者でもハイクオリティなアイコンを作りやすいとも言えます。
注意深く細部まで改善を続けて美しいアイコンを完成させ、自分たちも見栄えのするデザインが出来る。
それが事実である事を実感してください。

デザイン同様ベジェやグラデーションも美しく描ける方法論などを消化しいたのですが
後半部分はInkScapeを使ってライブコーディングしたため資料が有りません。
また、アイコンの発表では参加者の素晴らしいアイコンを見る事が出来ました。
今後のイベントはカメラで録画しておきたいです。(そのカメラを持っていませんが・・・)


前:Androidトレーニング 不要なダウンロードは不要 次:勉強会、その先へ FutureSync vol.2のお知らせ

関連キーワード

[Android][イラスト][IT][イベント]

コメントを投稿する

名前URI
コメント