この記事はAndroidAdvent Calendarのエントリーです。
はじめに
Androidが国内に出回って5年が経ちました。当初の標準アイコンのままアプリがAndroid Marketに公開されるような状態は落ち着き、時代とともにデザインも洗練され一定の秩序が見られるようになってきました。
しかし、未だにデザイン面を考察した形跡が見えないアプリも少なくありません。
スマートフォンは多数のアプリを使うため、ルールに基づいたプラットフォームで一貫性のあるデザインを土台にするのが操作性の良さにつながります。
独自性を出すためや新たな操作性を開拓するためにあえてルールを守らないと言う事もありますが、まずはデザインルールを知りその上で設計することが大原則になります。
ランチャーアイコン
アプリデザインについて語る上でランチャーアイコンから入らない訳には行きません。ランチャーアイコンはアプリの顔であり、マーケットでアプリを選ぶ基準となり、ユーザーがアプリに抱く第一印象を作ります。
GooglePlayマーケットではアイコンが最も大きく表示され、次にアプリ名が表示されるため
、ユーザーがアプリをダウンロードするかどうかの重要な判断基準にもなります。
ランチャーアイコンはホームスクリーン上で他のアプリのアイコンと並ぶため、ルールに基づいた統一感があるデザインを心がける事がより重要です。
アプリメーカーにとってはiPhoneとAndroidで同じアプリをリリースする時に同じアイコンを使い回せばいいと思うのかもしれません。しかし、iPhoneとAndroidはアイコンのルールが異なるためそれぞれ別のアイコンをデザインする必要があります。
絵心
アイコンを作ることは絵を描くことに似ているので、絵を描くのが苦手な人はアイコンを描くのを苦痛に感じるかもしれません。しかし、心配しないで下さい。
芸術的アイコンを作ることは困難でも、見栄えがするアイコンを作るにはドロー系ツールを使っていくつかの決まりを守るだけで可能です。
ガイドライン
AndroidのアイコンガイドラインについてはIconography | Android Developersで示されています。ルールは多くなく立体感があり真正面ちょっと上から描き立体感をもたせるということと、特徴的なシルエットを使うことです。
ガイドラインについて以前はもっとたくさん提示されていたのですがかなり省略されました。
これは「これらのガイドラインが無効になった」というより、守るべきルールから良いデザインを作るためのアドバイスを切り離したと考えるべきでしょう。
すなわち、残ったルールはより重要な守るべき内容で、消えてしまったルールも良いアイコンを作るための良いアドバイスであり続けています。
過去言われていた内容を思い出してみましょう。
細い線は使わない
スマートフォンは小さいためPC上でのデザインした時に比べてディテールが見えづらくなります。また、ランチャーアイコンは様々なサイズに拡大縮小されるため、細い線を使うと見えづらくなったり縮小時に線が埋もれて消えてしまったりします。
そのため、識別に必要な線は太くしっかりと描画するべきです。
1/24の空白
四方に1/24程度の空白を空けた矩形を描いてそれと質量が同程度に感じられるようにデザインします。空白の部分は尖っている部分をはみ出させたり、ドロップシャドウを付けるのに使用します。
質量はディテールを描き増すほど増えていき、透過を使うと減っていきます。
個性的な質感を保つ
初期のiPhoneではアイコンに自動で光沢がついたため、Androidでも同様に光沢を使うアイコンが多く見受けられます。しかし、Androidにおいては質感も個性の一つと捉えられていて光沢があるものに光沢を付け、光沢がないものには光沢を付けないことが推奨されます。
オブジェクトの全体を描く
顔の一部とか、オブジェクトの一部を描くのではなく、パーツ全体を描くことが推奨されています。これはデザインルールとして残っている特徴的なシルエットを使うことにもつながっています。アイコンサイズについて
アイコンサイズについては新たにxxhdpi(144x144)とxxxhdpi(196x196)が足されました。5インチモデルを中心に人気モデルでxxhdpi対応端末が増えているのでxxhdpiについては早めの対応が必要です。
5インチスマートフォンの中にはXperiaZ1やNexus5のように、ホーム画面においてxxhdpiのアイコンを176x176に拡大して表示する仕組みの物があります。
そのような端末をターゲットにする場合、画像は拡大するより縮小したほうが画質の劣化が少なくなるため、、xxhdpiには144x144ではなく176x176の画像を用意したほうが好ましいかもしれません。
純正アプリを解析
純正アプリを参考に適切なアイコンデザインを探っていきます。Androidは3.0以降純正アプリのアイコンデザインも注意を払われて設計されるようになり、アイコンデザインを学ぶ良いサンプルとなっています。
また、純正アプリは圧倒的なユーザー数を誇るため、純正アプリと並んで違和感がないデザインにすることは大事です。
黒枠は176x176pxでフルサイズのアイコンを置いた場合の境界線を表しています。
アイコンガイドラインの通りに、立体感があり、真正面ちょっと上から見た視点で、特徴的なシルエットを持っています。
カレント、ドライブ、設定は中央に穴が空いたドーナツ状になっており、
ニュース、カレンダー、ダウンロード、写真、ChromeBetaはプリミティブを少し崩したスタイル、電話や電卓は実際のオブジェクトを活かした特徴的な形となっています。
アイコンにはうっすらと黒いドロップシャドウがつけられています。
矩形に近いアイコンほど余白が広めに取られており、カメラや電話のような余白が多いアイコンはディテールを加えて質量を持たせバランスを取っていることが分かります。
アイコンはオブジェクトの全体を映し出していて、アイコンの外にはみ出しているようなデザインはありません。下地もなく、ただオブジェクトが描かれているだけです。
光沢は控えめで、電話の受話器とカメラのレンズ、ギャラリーの写真のみです。
カメラのシャッターボタンやニュースと天気の文字部分などでは細かい文字が使われていますが、主要コンテンツは太くしっかりと描かれており、細い部分は見落とされても問題がないようになっています。
色はモノトーンと彩度が高い色が多く使われています。
明暗差は色相のグラデーションを使って高い彩度が保たれ、モノトーン部分では明度のグラデーションが使われています。
完全なモノトーンは設定と電卓のみでそれ以外ではなにかしらの色が使われています。
色相環を思わせる色とりどりな原色を円形に配置するのはGoogleのコーポレートスタイルなため、これについては無理に真似する必要はないかと思います。（作りにくいし）
個別のアイコンを見ていきます。
ギャラリー
ギャラリーはガイドラインにある真正面ちょっと上から見るというのをどのように描いたら良いかを示す良いサンプルになっています。アイコンの上部分が明るい色で描かれ額縁の上面が見えていることが表現されています。
これにより、アイコンの奥行きも表現されています。
他のアイコンに比べて奥行きを太めの線で描くことで重厚な印象を与えています。
ギャラリーアイコンは正方形に近い形をしていますが、実際には上部分は奥に行くほど狭くなっており、正確には六角形で構成されているのがわかります。
上から見ているのを表現するために、キャンバス側の奥行きも上と下で違い、上は2px下は8pxとなっています。
写真下部のフレームにはハイライトが入れられ、額縁が丸みのある素材であることを表現され、上部のフレームは写真の色がうっすらと刺さっていて全反射が表現されています。
マップ
マップアイコンはギャラリーより斬新なデザインになっていて特徴的なシルエットと真正面の概念について考える良いサンプルです。
このアイコンでは地図の上部を描くのではなく、上辺と下辺の角度を変えることでちょっと上から見た感じを表現しています。
これにより目の前に大きな地図を広げている雰囲気が表現されています。
以上によりアイコンは以下の点に注意で描いていくと良いでしょう。
- 正面ちょっと上から描画する（ガイドラインより 必須）
- 透過により特徴的なシルエットをつける（ガイドラインより）
- 色数は少なめに（デザイン的にも容易になる）
- 黒のドロップシャドウを微量につける
- シンプルなデザインを保つ。サイズを50%にしてもそれがなにか識別できる様にする
アイコン実践
それでは実際にアイコンを描いてみようと思います。今回はクリスマスにメッセージを送り合うアプリを想定してアイコンを作ってみます。
アイコンを描く上では、最初に何を描くかを考える必要があります。
アイコンの内容はアプリを象徴する物であり、シンプルでなければいけません。
ラフスケッチ
アイディアは瞬時に思いつくこともあれば、そうでないときもあります。アイディアが思いつかないときは、とりあえず、それっぽい絵を沢山描いて見るといいでしょう。
アイコンを描くのは紙でもPCでも構いません。自分が描きやすいツールを使ってください。
多くのデザイナーさんは紙と鉛筆を使う傾向にあります。これは多くのデザイナーにとって紙と鉛筆が使いやすいだけにすぎません。
特に絵を描き慣れていない人にとっては自分の描いたアイコンの下絵を誰にも見られたくないかもしれません。そんな時に便利なのがブギーボード
。感圧センサーと電子インクを使ったノートです。
白黒反転ですが、普通に鉛筆で書くようなフィーリングで気軽に絵が描けて一瞬で完全に抹消できるのでアイデア出しに持ってこい。
今回はFireworksでいきなり下絵から書いていきます。
クリスマスを象徴する物をイメージしてガシガシ書いていきます。
デザイナーさんはこの時点で既に高品質な絵を描いてますが、絵に慣れていない人は雑でも問題ありません。
品質は後の工程でも洗練させる事が出来るので絵が苦手な人は品質より量を重視してとにかくアイディアが出るまで数を描きます。
今回は右下のプレゼント箱が気に入ったのでこれを元に描いていきます。
箱の正面といえば真上か真横が定番ですが、クリスマス用のアイコンにしては華やかさに乏しいため斜め45度を正面として、正面的な安定さを保つために左右対称のバランスとしています。
上から見ていることを示すために上面を大きく描きました。
ツールについて
今後もアイコンやデザインパーツを描くことがあるのであれば思い切ってFireworksを購入することをお勧めします。アイコンはInkScapeで描く事も出来ますが細かなドットを綺麗に描くのはFireworksが便利です。
今回はFireworksCS4を使用しています。
Fireworks特有の機能をあまり使わずに描くため、Illustratorやその他ツールを使って描く人は適宣置き換えてください。
FireworksはもともとWebで使われることを想定して設計されていたためピクセルとの相性が良くスマートフォンの部品を書き出すのに有利です。
3万円台中盤はソフトウェアとしては高額ですがIllustratorに比べればほぼ半額です。
新規ドキュメント作成
幅と高さは1024ピクセル カンバスカラーは透明を選びます。
現在AndroidのアイコンはGooglePlayで使用する512x512が最大サイズですが、現在のディスプレイ技術の進化を考えれば近いうちに1024x1024へのアップデートが考えられるので先に手を打っておきます。
イラストレータと違い、ドットの概念を大事にするFireworksでは最後はドットに丸められるためドロー系ツールながら拡大はそれほど得意ではありません。
はじめから大きなサイズで作っておけば小さくしていくのは容易です。
補足
アプリランチャーのアイコンとGooglePlayのアイコンは多少異なるデザインをつけることも出来ます。GooglePlayアイコンはより大きなサイズで識別しやすい状態で表示されるため、より装飾的に作ることが出来ます。
ただし、過度にランチャーアイコンと異なるアイコンを使った場合、インストールを行ったユーザーがアプリを探せなくなることがあるため注意が必要です。
シルエットを描く
全体的なバランスを取るために大枠を描きます。全体的な構図を作る上ではAndroid Icon Design Trainingの後半に書いた黄金比、フィボナッチ数、白銀比が有効です。
これらの比率を使えば安定したバランスの良いデザインを描くことが出来ます。
この段階では私はペンタブレットを使って描いています。
ペンタブレットはマウスより素早く操作ができますが、細かな操作が苦手です。
llustratorやFireworksのようなドロー系ツールは細かな操作を伴うことが多く、マウスを使った方がいいシーンが多いのですが、前半はそこまでの微調整を求められないため微調整はキーボードにまかせてペンタブレットでガシガシ描いていきます。
ペンタブレットは今までIntuos3を使っていましたが今年IntuosPenに買い換えました。
IntuosPen はIntuosという名前こそつくもののFavoやBambooの後継で性能面ではデチューンですがIntuos3より小さく軽く気軽に使うことができるようになりました。
従来のIntuosシリーズはIntuos Pro
に名前が変わっています。筆圧入力を多用する本格的なペンタッチをしないのであれば無印のIntuosが価格も安く十分使い物になります。
実機で確認する
アイコンのデザインをする上では実機で見てみることが大事です。多くのスマートフォンではPCに比べて3倍以上の高密度なディスプレイを持っているためPC上の見た目と大きく異なる場合があります。
Android Design Previewを使えばWindowsやMac、Linux上の画面をリアルタイムにAndroid上へ表示することが出来ます。
Android端末をUSBで接続し、ダウンロードしたJarファイルをPC上で実行すればAndroid側にもアプリがインストールされリアルタイムに描画が行われるようになり、PC上でのデザイン結果を即時にスマートフォンのディスプレイで確認することが出来ます。
ベジェを描く
曲線部分はベジェを使って描きます。ベジェはドロー系ツール最大の難関と言われつつも、これほど便利なものはないツールです。ベジェを描くこつはできるだけポイントの数を少なくすること。
これによりなめらかな曲線を描くことが出来て修正も簡単になります。
ポイント数が少ないベジェはあとからいくらでも修正できるので失敗を恐れずカンバスを飛び出すほど描いてしまって大丈夫です。
補助線がどのように曲線に影響を与えるかを体感できるまで何度も描き直してみて下さい。
着色する
全体的なデザインができたら着色にかかっていきます。まず、余計な情報を省くためにアウトラインを非表示にします。
境界線は色の差で表現していきます。
色には相性があります。相性が良い色同士はお互いを引き立て合いますが、相性が悪い色はお互いを汚します。
色の組み合わせは無限大にあるため、当てずっぽうで作るわけにはいけません。
色の組み合わせを探るには便利な方法がいくつかあります。
色数を減らす
色を一色しか使わない限り色の組み合わせで失敗することはありえません。２色より３色、３色より４色と色を増やすほど失敗するおそれが大きくなります。
モノトーン＋1色に抑えればデザインの個性と配色を容易に両立することが出来ます。
他の配色を真似る
より多くの色を使いたくなった場合、広告やロゴマーク等から気持ちよく感じる色の組み合わせを探してみましょう。真似るというと悪い印象がありますが、過去の技術の蓄積をたどるのは知識を身に付ける上での基本です。実際のところ、プロの配色も結局は過去に使われた配色の使い回しであることに気がつくと思います。
配色ツールを使う
気持ちがいい色の組み合わせの傾向がつかめたらColor Scheme Designerを使えば色相環をもとに自由に相性の良い組み合わせを探すことが出来ます。最初は色数が少ないデフォルト配色から選ぶと良いでしょう。慣れてくると多色や基準色の入れ替えにもチャレンジしてみて下さい。
アプリにテーマカラーがあるのであればそれを基準とすることも大事です。
立体感を付ける
陰影付けを行うことで立体感を表現することが出来ます。上から光があたっていることを想像し、上を向いている部分は明るく、下を向いている部分を暗くします。
明度のグラデーションと色相のグラデーション
単に明度だけで明るさを表現すると白けた締りのない絵になってしまいます。これはディスプレイの特性で例えば青を表現する場合
#000000〜#0000FFまでの間は純粋に青の要素が増えるだけでそれ以外の色は0のため彩度は最大のまま明るさを変えていくことが出来ます。
それ以上明度を上げていくには#0000FF〜#FFFFFFと青以外の要素を上げていかないといけなくなり、彩度が下がり白けた感じになってしまいます。
#0000FFを青における最大値とする方法もありますが、色相を変えることで彩度を保ったまま見た目の明るさを上げることが出来ます。
彩度を使って明るさを表現するには2つの方法があります
人は青よりも赤のほうが明るく見えるように同じ明るさでも色相により目に見える明るさの印象は異なります。
そのため、明るく見える色を選ぶことで彩度が最大同士でも明るさに差をつけることが出来ます。
もう一つがディスプレイの仕組みに基づくもので、純粋な青#0000FFに対して純粋な水色#00FFFFは青の要素はそのままで緑の要素が増えるため実際により明るくなります。RGBのうち2色だけを使えば彩度を落とすことなく明るさを増やすことが出来ます。
このような相関的に色をデザインする際には、RGBによる指定よりHSVによる指定のほうが適しています。
FireworksではカラーパレットでHSVを選ぶことでHSVによる色選択が可能となります。
Hが色相（赤とか青とか）を意味し、S が彩度を意味します。
Sの彩度は255の時ほど色鮮やかで0に行くほど無彩色になります。
白や黒、灰色はSが0の状態、赤や青、緑はSが255の状態です。
Vは明るさを表し0だと暗く、255だと明るくなります。
InkScapeの場合、これとはちょっと違い、HSVのVは0〜128までの間はFireworksのVのように振るまい、128以上は彩度が落ちて白に向かいます。
丸みを描く
丸みを表現するには丸い場所にグラデーションのハイライトをつけます。ハイライト部分が大きいほどより丸く感じられ、細いほど尖って感じられます。
紙や布の厚みを表現するために1ピクセルでも大きすぎると感じる場合、半透明にしたり恥部を描く事で1ピクセル未満のほそさを表現することも出来ます。
また、光の立ち上がりが急であるほど固く平滑で軽く感じ、鈍いほど柔らかく、ざらついてあり、重量を感じさせます。
今回は箱の角とリボンの厚み部分にハイライトを入れて厚みと丸みを表現しました
ディテールを描く
今回のアプリはクリスマス向けの特別仕様なのでディテールを多めに描き足します。ディテールが多いアイコンほど見栄えはしますがケバくなり飽きられやすくなります。
Googleの純正アプリやFacebook、LINEは毎日使われることからシンプルなデザインになっています。
一方、使用時間が限定されているキャンペーンアプリやゲームアプリは派手目のアイコンが似合います。
ただしディテールはノイズになりやすいので描き過ぎに注意してください。
ドロー系のツールは描き足しが容易なため、ハマってしまうとつい描きすぎてしまいます。
特にPC上でデザインする場合に比べてスマートフォン上では情報が過密されノイズとみられやすいので注意が必要です。シルエットや面の大きな部分に関してはシンプルさを保つように注意し、控えめに装飾を足していきます。
ドロップシャドウをつける
アイコン全体にドロップシャドウをつけてアイコンが浮かんで見えるようにします。ドロップシャドウは決して画像からはみ出さないように注意してください。
ドロップシャドウをつけるには、まず全体をマージしたオブジェクトを作ります。
すべてのオブジェクトを選択後、コピーします。
パスを統合し塗りを黒にします。
このオブジェクトに対してドロップシャドウとぼかし(ガウス)を適用し再背面に移動すればアイコン全体に対してドロップシャドウがついて見えます。
書き出す
アイコンが完成したら書き出しを行います。ランチャーアイコンはユーザーに対してアプリを識別させるのが目的であるのに対してGooglePlayマーケットの場合はターゲットが未ユーザーでありアプリをダウンロードしてもらう事が目的のため、多少宣伝要素を入れるなどのブラッシュアップを行っても良いと思います。
ただし、あまりランチャーアイコンと異なる場合インストール後のユーザーがアプリを探せなくなる恐れが有るので注意して下さい。
ファイル形式の設定
ファイル形式は透過PNGなので設定が「最適化」でPNG 32になっていることを確認します。
この先は不可逆な修正を加えるためここまで出来たら画像ファイルを保存します。
GooglePlay用の画像を出力
画像サイズを512ピクセルに縮小します。
ファイルー書き出しでファイルを書き出します。
このときファイルー名前をつけて保存で書き出さないように注意して下さい。
Fireworksの保存形式はpngで通常のpng形式と互換性がありますがFireworksのためのデータが追加されている分とても重たくなっています。
書き出しで保存することでファイルサイズが小さな状態で出力することが出来ます。
ランチャーアイコン用の画像を出力
次にxxhdpi用に144x144に縮小し書き出しを行います。GooglePlay用にカスタマイズを加えている場合はここで消しておいて下さい。
Fireworksの場合toAndroidスクリプトを使うことで一度に多サイズのアイコンを書き出すことも出来ます。
書き出されるファイル名は元のファイル名を踏襲するため画像をファイル名ic_launcher.pngとして保存します。（ファイル名は自由ですがランチャーアイコンはic_launcherが標準的スタンダードとなっているのでそれに合わせておくと良いと思います。）
toAndroidを使うにはまず、toAndroidForFireworksをダウンロードし、メニューバーよりコマンド-スクリプトを実行を選びます。
toAndroidのtoAndroid.jsfファイルを開きます。
ファイルを出力するフォルダを指定します。
指定したフォルダの下にoutputフォルダが作成されます。
outputフォルダにはoriginalImage.pngと各解像度ごとのフォルダが作成されています。
originalImage.pngは各サイズのアイコンを出力する元となったFireworksのファイルです。不要な場合削除して問題有りません。無意味にファイルサイズを消耗することになるためAndroidのソースには含めないようにしてください。
各解像度フォルダの中にはそれぞれの解像度に応じたアイコンファイルが作成されているのでプロジェクトファイルにマージしてください。
特にMacを使っている人は元のファイルを上書きしないように注意して下さい。
toAndroidのlicenseはCreative commons 3.0に基づきライセンス条件を継承の上で自由に改変、再頒布、商用利用が可能です。
また、このツールを用いて作成されたコンテンツの著作権は各コンテンツ作成者の帰属します。
これでアイコンの書き出しは終了です。
アイコンが変わったり新しいアイコンサイズをサポートするときは「書き出す」から作業をやり直して下さい。
追記
アイコンの立体感を抑える
アプリのアイコンが標準アイコンに比べて立体的すぎるのではないかというご指摘を頂きましたので。若干修正し見た目の立体感を抑えてみました。後からの修正が楽なのはドロー系ツールの嬉しいところです。
次回はアクションバーについて検討していく予定です。