アイコンデザインの練習

普段、システムの開発をしているエンジニアの皆様は設計やコーディング、マネジメントが主な仕事になりがちです。

しかし、エンジニアだからデザインができなくていいのか？

ふと疑問に思いました。例えば私の場合は個人でアプリを開発しています。勿論、個人開発のアプリでデザイナーに外注する予算もありません。

従って、デザインやアセットの作成もある程度自分で行う必要が出てきます。

そんな経緯から、今回はデザインの練習を兼ねて作品を作ってみました。

始める時点でのレベル感

さて、筆者はこの練習を始める際にどのくらいのレベルまでデザインができるか、レベル感を事前にお伝えしようと思います。

実は、画面のデザインはある程度行ってきました。

このデザインはエンジニアの友人などからも「綺麗！」などのお褒めの言葉を頂きましたが、これは画面のデザインだからできた話。

画面のデザインはボタンの形や色など、コーディングだけで再現できるレベルが多く、比較的簡単に作れるようになるんです。Pinterestなどで流行りのデザインをチェックしてるだけで、”それっぽい物”は簡単に作れるようになります。

また、画面のデザインに関してもこないだまで下のようなカラーを選択してました笑

初心者がCSSを書くとWebサイトが目の痛いビビッドなカラーになる感じです。

アイコンデザインに挑戦

なぜアイコンデザインなのか。

それは、アプリを個人開発する中でアイコンやピクトグラムのデザインが一番難しいと感じたからです。

画面のデザインはUIパーツをデザインするわけですが、構成される要素が限られています。

角を丸くしたり色を変えるだけでそれなりに”いい感じ”のパーツが出来上がります。

しかし、アイコンはそう簡単には作れません。図形の数も多いですし形が複雑です。

僕のようなエンジニアがささっと作るとこんなアイコンになります。

アルファベット一文字も悪くないですが、これが「f」だと某有名SNSにしか見えません。

使った物

SketchはmacOS専用ですがシンプルかつ高機能で初心者にとっては嬉しいソフトです。とは言えSketchはプロも使うツール。初心者が全ての使い方をマスターできるわけはないので困ったときはChromeでGoogleに教えてもらいます。

練習開始！

早速アイコンデザインの練習を開始します。今回のテーマは

あえて自分からは遠いテーマにしました。LIPSとか流行ってますしね…

さて、テーマは決まりましたがアイコンに書くべきシンボルが決まりません.. メイクだと一目見ただけで連想できるものは何か…コスメに疎すぎてメイクブラシのことを筆と言っていた私がいくつか考えてみました。

↑これアイシャドウパレットと言うんですね.. (彼女に教えてもらいました…)

これらをいい感じに組み合わせを試して完成したのがこ！ち！ら！

ワークスペースはこんな感じです。ぼつになった口紅が転がってます笑

まとめ

アイコンデザインを試してみました。複雑な図形はまだ作れないのですが(イラレの勉強をした方がいいのか…)UIデザインを応用して図形を組み合わせてなんとか作ってみました。

自分としては自信作ですが、プロのデザイナの方からするといろいろ突っ込みどころはあると思います笑