続エンジニアだけでアプリアイコンを作る

昨日「エンジニアだけでアプリアイコンを作る」を書いたのですが、500はてブ以上と思わぬ反響をいただいて驚いています。

ほぼツールの紹介だったので大方予想はできていたのですが「で、結局絵はどう書くの？」といったコメントを多くいただきました。 

このあたりについてもどのようにやってきたかをざっくりですが紹介しておきたいと思います。

アイコンを書けるようになるまで

1. 模写する
2. 勉強する
3. 自分なりに作る（ゴール）

ざっくり言うとこの３つの手順です。

あくまで「なんとか書けるようになるまで」なのでデザイナーさんから見ればまだまだなレベルにしか到達しないでしょうが、やれないよりはマシなはずです。

模写する

まずは今あるアイコンと同じものをとにかく作っていきます。

ここでの主な目的はツールの使い方を把握することです。（前記事ではInkscapeを紹介しました）

10個ほど作ればおそらくツールの使い方はほとんどわかってくるでしょう。

初めに模写するおすすめのアイコンを並べておきます。

アプリ名の横にどんな機能を使えば模写できそうかも載せておきます。

とにかくアイコンを作ってみる

以下の３つのアイコンは基本的には丸と多角形だけで作れるはずです。

さくさく作っていきましょう。

• Yahoo!リアルタイム検索（四角、三角、角丸）
  
• Dropbox（四角、角丸、オブジェクトの差分（白い影））
  

  

•  Presso（四角、角丸、パスのノード（カップの下端））

  

影の付け方を覚える

続いて影の付け方を学んでいきます。

影は以下のように黒くて少し透明な図形を重ねれば表現できます。（もっといい方法あれば教えて下さい…）

• TED（文字の内側に影）
  

  

•  Flat TO-DO（アイコンの外側に影）

  

• Google Adsense（色んなところに影）
  

  

曲線の使い方を覚える

これが一番むずかしいですが曲線の使い方です。

使うツールとしてはベジェ曲線やパス、ノードなどです。（Inkscape、Illustatorのどちらでも使えます）

難しければはじめはやらなくては良いでしょう。。。

• Tumblr（「t」の左肩が曲線）
  

  

• Vine

  

• ボケて
  

  

 

勉強する

上記のようなアイコンの模写をしていくとツールの使い方がだいたいわかってくるはずです。

このようなタイミングで一度「デザインってどうやるの？」を勉強しておくと自作する際の大きな足しになるでしょう。

ここは本を購入することをおすすめします。

「デザイナーじゃない人向けのデザイン本」というまさにドンピシャな本です。 

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

 アプリアイコンに限らず、スライドやWebサービスのUI設計にも大きく活かせますので必読です。

内容は４つの大原則の説明です。それぞれ一行で説明します。

• 近接
  関連の濃いものを近くに、関連の薄いものを遠くに配置する
• 整列
  一つの直線を軸にして要素を配置する
• 反復
  繰り返し同じ表現を使って統一感を出す
• コントラスト
  意味を変えたい場合ははっきりと違いを表現する

一行で説明しましたがそれぞれかなり奥が深いです。続きは是非本で呼んでください。

自分なりに作る（ゴール）

模写と勉強が終われば、「ツールの使い方がわかる、かつ、なんとなくデザインのことを知っている」という状態になるでしょう。

ここまで来ればひとまずゴールです。

自分なりにアイコンを作っていきましょう！

それでもアイディアが全然浮かばない、という方におすすめなのは現実にあるものを極力シンプルに表現する方法です。

例としてクマを挙げておきます。

　（これが）→　（これ！！）

このようにアプリに関連のあるものを極力シンプルに表現するアイコンにしてみましょう。

この他良い方法などがありましたら是非教えて下さい！

以上です。