pixel-arms

Androidのアイコン一覧ファイルを作成しました。

アイコンをデザインする際には一貫性を保ったり、新規のモチーフを検討するために他のアイコンを参照するといいと思います。Drawableのフォルダの中からアイコンだけを抽出して、編集しやすいようにPhotoShopのファイルにしましたので、必要な方はダウンロードしてお使いください。

アメリカでPalm Preが発売になったようです。Androidには期待していますが、単純に携帯端末としてはPalm Preもなかなか魅力的な端末です。iTuneに接続できちゃうなんて大丈夫なんだろうかと思いますが、良いアイデアですね。それだったらWalkmanとかも接続できたらいいのにと思います。

下はPreのアプリケーションランチャーの画面です。アイコンのデザインテーストはちょっとMacっぽいというか、おそらくIconFactoryとかに（コメントを書き込んで頂いた方によると別の会社のようです）外注したんではないでしょうか。特徴は外形線ありで、描き込みが細かいことです。立体表現は正面、もしくはやや上からで、アイコンの後ろに薄い丸が見えます。設定のアイコンには黒い四角型の座布団のようなグラフィックを下に描いています。おいおいガイドラインなどで意味やルールが説明があると思いますが、アイコン作成はiPhoneより難しく、Androidよりやや簡単な印象です。

実際にテンプレートをベースにIllustratorを使ってアプリケーションのアイコンを描いてみます。アプリケーションのアイコンデザインは、Market Placeでの売れ行きを左右しますからとても大事だと思います。例としてメモ帳のようなアプリを想定しています。まずはテンプレートのパース図に沿ってベースとなる形状を描きます。

まずはメモ帳本体の底面となる四角形を描いて、「効果」＞「スタイライズ」＞「角を丸くする」、半径16ピクセルで角を丸くします。それを天面にコピーして稜線でつなぎ、全体の形を作ります。位置はテンプレートに合わせて微調整します。

次に塗りを適用できるように、側面と天面に分割して線を接続し直します。

このようにして基本となる形状を作ったら、細かな形状を追加していきます。ガイドラインには細かな角度が書いてありますが、それはあくまでベースとなるパースペクティブの話なので、見た目でおかしくないように、また実際は48×48ピクセルに縮小するので細かくなりすぎないように細部を書き込みます。例ではリング部はちょっと細かすぎたかもしれません。

形が決まったらテンプレートのスウォッチから塗りを選択して角度や濃度を調整します。またシャドー部を追加します。オリジナルアプリアイコンの色から抽出したスウォッチを使っているので、何となく感じが似てきます。コツは外形線を引かないことと、明るめの配色を心がけることです。外形線がないので背景が暗めになってしまうとアイコンの絵自体が見えづらくなってしまうので明るめにします。もちろんGoogleっぽくしたくない場合は、まったくオリジナルのカラースキームを使った方がいいでしょう。

最後にもう一度250×250ピクセルの枠内に配置して全体の大きさを微調整します。これをPhotoShopに書き出して48×48ピクセルのサイズに縮小し、透明背景付きのPNGファイルに書き出して完成です。

こうして描いてみると、適当な絵を1枚用意すればいいiPhoneと違って結構大変ですね。

Googleのガイドラインに文句を言っていても仕方ないので、テンプレートを自作しました。標準のアプリケーションアイコンからグラデーションを抜き出して、ドキュメント内にスウォッチとして作成保存してあります。この色の組み合わせをベースにすれば、ある程度、本家のアイコンと見た目が同じようなアイコンになると思います。

また、メニューやタブアイコンの塗りカラーもスウォッチとして保存してあります。ファイル形式はIllustrator CS4です。もちろんRGBカラーモードにしてあります。

<追記>　Illustratorをお持ちでない方は、オープンソースのInkSpaceでも開くことができます。

公開されたUIガイドラインとアイコンデザインガイドラインですが、疑問な点が多々ありました。特にアイコンデザインガイドライン。まずテンプレートとしてダウンロードできるIllustratorのAIファイルですが、これがCMYKのカラーモードなのです。印刷用のデータではないのですからカラーモードはRGBにすべきでしょう。そうでないとPhotoShopにデータを持って行った際に色が変わってしまいます。まあ、それはいいとしてもカラーパレットの指定でWhiteがRGB＝0, 0, 0でBlackがRGB＝255, 255, 255というのはどう考えても逆ではないでしょうか。他にも作成があまりいい例でなかったり、説明が偏っていたり、どうも急いで作成してあまり推敲していないように思えます。

AndroidのUIガイドラインがようやく整備されて公開されました。

Android User Interface Guidline

同時にアイコンのテンプレートも正式に公開されました。ただガイドラインといってもアイコンとウィジェットに関するものだけであまり参考にならないように思います。アイコンのガイドラインもポリシーではなくて、妙に細かい書き方だけが記述されていますし、テンプレートもかなりやっつけ感が高いです。まあ、おいおい整備して行こうってことだとは思いますけれど…。

YouTubeのGoogle公式チャンネルに、Android携帯でのGoogleのサービスの動画がアップされています。早送りじゃないのってくらいサクサク動いてますが、3G環境でこんなに早く動くなら欲しいです。

AndroidのUIが不満な人は沢山いるようです。有名なハッカー、HaykuroさんがカスタマイズしたUIのデモがYouTubeにアップされました。そうですよね、これぐらいやってくれないと。Googleとしてはとりあえず出したという感じだとは思いますが、真剣にiPhoneを超えてスマートフォンの標準を取りたいのならもう少し手を入れてもらいたいものです。