こんにちは。デザイナーの田辺です。
UIの仕事をしていると、必ずといっていいほど制作しなければいけないのがアイコンです。デザイン案件で外部のエンジニアの方から、ちょっとしたアイコンを作って欲しいという要望を受けることも多いです。アイコンといえばデザイナーが作るもの、もしくはデザイナーに頼まないと作れない、という認識が一般的かもしれませんが、コツをおさえれば誰でも簡単に作ることができます。
そのコツとは、ズバリ分解です！
私も初めの頃はなかなかうまく作れませんでした。でも、分解しながら作って行くと高度な技術がなくても綺麗なアイコンを作れるようになるんです。
自作アプリを作りたいけどいい感じのアイコンが見つからない！
急遽新しいアイコンが必要になったけど自社にデザイナーがいない！
今回はそんな非デザイナーの方でもアイコンをサクッと簡単・綺麗に作れるようになる方法をご紹介します（ちなみに分解法という言葉は私が勝手につけた用語なので、特にデザイン用語というわけではないです）。
サンプルアイコンを分解
みんな大好き、ありがた〜い Material icons です。まずは試しにこれらを分解してみましょう。制作ツールには、Photosnop 、illustrator 、Sketch と色々ありますが、一般的な制作ソフトであれば矩形や円形を描画するツールは備わっていると思いますので、使い易いものを使ってみてください（サンプル画像はSketchで作っています）。
コメント、編集、カメラのアイコンです。これらを分解するために、まずキーとなるパーツに色をつけてみました。
どうでしょうか？これだけでもなんとなく作り方のイメージがわいてきませんか？さらに分解します。
コメントのアイコンは角丸の矩形に三角形、編集アイコンは正方形と角丸矩形、カメラのアイコンは円と六角形、直線のシェイプから作られていることがわかりました。これらの図形を使えば、この３つのアイコンが作れそうですね。
もう少し複雑なものもみてみましょう。
電話アイコンです。有機的な形をしているように見えますが、キーパーツはどれだかわかるでしょうか？
円が見えました。さらに分解します。
同じ角丸の矩形を4つ使い、それっぽい形にすることができました。なるべく同じ矩形を使うと統一感が出ていい感じになります。あとは受話器の凹みなど細部を少し調整すれば作れそうですね。
応用編
分解法は単純な形のアイコンに使うだけではありません。複雑なアイコンを作ることもできるので、試しに東京タワーのアイコンを作ってみましょう。
まず、キーパーツを作成して装飾をつけます。台形を３つの円でくり抜きました。
なんだかそれっぽくなりました！さらに菱形を加えて白抜き、直線を加えて同じように白抜きします。
最後に微調整をして、完成です！
いかがでしたでしょうか。一見複雑に見えるアイコンも分解法を使えば作り方が見えてきます。ぜひ、これを機会に自分だけのアイコンを作ってみてください！
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
