WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >イラスト

今回は簡単なアイコンの作り方と、応用としてイラストの作り方をご紹介します。

Webサイトのデザインを作っていると、イラストやアイコンって入れたくなることが多いと思います。
最近は便利なイラスト素材がたくさんあるので、すべてのイラストをイチから制作するよりも、そういったものの力をお借りするほうが効率が良いのですが、いざ探してみると、

「あるにはあるけど、イメージに合うものが見つからない…」
「そもそも、見つからない…」

ということもあると思います。
そんなときは、かえって自分で作ったほうが早いし間違いない、ということもあります。

デザイン制作をしていくうえで、簡単なものだけでもイラストやアイコンをパッと自作できると、効率も良くなりますし、毎回少しでも個性が出せて、お得です。

そこで、簡単な考え方でのイラスト制作のやり方をご紹介したいと思います。
自己流なのでどこまでご参考にしていただけるかは分かりませんが、1つの方法として捉えていただければ幸いです。

まずは完成品

カメラです。好きなんです。

今回は、こんな感じのイラストを作っていくのですが、同時に、途中経過のものはそのままアイコンに使っちゃえばいいじゃん！というお得なやり方です。

1. まずはこんなパーツで組み立てます

こんなふうに並べてみる必要はないのですが（笑）、まずはこの3つで土台を作ります。

アイコンを作るときは特にそうなのですが、基本的には何を作るときも、「●」「▲」「■」をベースに作ることが多いです（それに加えて、線とか星型とか、です）。
何かを作ろうと思ったら、まずはこの3つのどれをどう組み合わせると近いものになるか、から考えていくと分かりやすいと思います。

2. 組み合わせます

組み合わせてみました。なんだかもうこれで、カメラっぽくなったように思いませんか？
日常的に、比較的よく見かけるものであれば、簡単なつくりでも「あ、カメラっぽいな」と見分けられます。

3. ちょっと角を丸くしてみる

本当にただの長方形と円の組み合わせだとさすがに図形っぽすぎるので、ここでちょっと土台の長方形を角丸にしてみます。最初から角丸で作ってみてもOKです。デザイン全体のテイストによっては、丸みがないほうが良い場合もありますので、そのあたりはデザインと相談です。

アイコンなら、これで完成でもOK

アイコンレベルなら、ここで作業を止めて、完成でも良さそうです。

4. ちょっと作りこんでみる

最近はイラストよりもアイコンのほうが使用率が高くなってきたので、ここからはあまりやらない作業になるかもしれませんが（笑）、せっかくなのでもう少し作りこみます。

カメラって実は、レンズが本体のど真ん中にあるわけではないので、より本物に近づけようとなってみると、少し位置をずらす必要があります。

これはあくまでイラストの段階で必要なことで、単純なアイコンの時点ではど真ん中に合わせたほうが綺麗に見えると思います。
アイコンは細かいところにこだわりすぎると、かえって分かりにくくなってしまうので、特徴がパッと見で分かるように、削れるものは削りましょう。

ここでの作りこみは、要素を足していくのがメインになります。

5. さらに作りこんでみる

要素をある程度足したので、色を少しつけてみます。といっても今回はモノトーンですが…。
要素もさらに、足します。

6. さらに作りこんで完成

色をつけたので、今度は効果をつけます。
機械なので、やっぱりツヤがほしいところです。あまりグラデーションをつけすぎると古臭くなってしまうので、加減に注意して加工していきます。

それっぽくなったら、完成です。

まずは単純なものから

イラスト制作は、慣れないとすごく難しいもののように見えますが、いきなり複雑なものを作ろうとするのではなく、まずはざっくりと作ってみて、用途に応じて作りこんでいく、というやり方だと手を出しやすいかと思います。
それなりに作れるようになると楽しいので、まだあまりイラストを作ったことがないという方には、おすすめですよ～。