Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

スキルアイコンとプロジェクトアイコン

f:id:thleap:20140922212608p:plain

いま作品集を作っているわけですが、そのなかで使用するデザイン、イラスト、コーディング、プロジェクトのアイコンを作りました。製作中に「使うツール」をメインに据えて考えてみました。

アイコンにしてはスペースの中にいろいろ詰め込み過ぎた気がしますが、それぞれどういう意図で作ったのか解説してみたいと思います。

デザイン

f:id:thleap:20140922212658p:plain

方眼紙の中にペンや定規といったデザインを作るときのツールを詰め込みました。色彩やタイポグラフィといったデザインするのに必要な知識もこの中に含めましたが、これが少し詰め込み過ぎた気がしないでもないです... 。イラストアイコンと区別できるようにするため、図形や整った線意識して作りました。

また、デザインというと Adobe などのアプリケーションを使ってパソコン上で製作を行うことを連想する人も多いと思います。しかし、僕がデザインをするときはノートとペンを使ってアイデアをスケッチする時間も同じくらいあり、それがデザイン製作の中でもっとも重要な時間だと思ったのでこのようにしました。

イラスト

f:id:thleap:20140922212711p:plain

まず、デザインアイコンと違いを出したかったため、図形をアイコン内に含めないことを決めました。

はじめはパレットと筆でアイコンを作っていましたが、他のアイコンと並べるとテイストが合わないと感じたのですぐに別の案を考え出しました。その結果、少々見た目が不格好でもできるだけ有機体に近い形にしたいと思い、そのイメージがアメーバに近かったのでこのようなアイコンになっています。

コーディング

f:id:thleap:20140922212722p:plain

これは一番考えやすいと思ったアイコンです。コーディングといったらエディターだろ!と思ってからは、自分が普段シェルから開いている Vim の見た目を真似て作り出しました。

シンタックスハイライトの色は僕が普段 HTML を書いているときのものです。

プロジェクト

f:id:thleap:20140922212732p:plain

いくつか案を考えていましたが、他のアイコンが製作に使うツールを元にしていたので、最終的にはそれに合わせてプロジェクトのスケジュールを管理するガントチャートをモチーフにしたアイコンにしました。これが「プロジェクト」を表すアイコンということが少しわかりにくいかもしれませんが、日常的に Backlog などのガントチャートを見てる人も多そうですし、まぁ良いのではないでしょうか。

プロジェクトというとチームで開発することが多いと思うので人を複数人並べたものも良いかと思いましたが、自分の作品集の中では個人プロジェクトも多く発表していくことになるだろうと思い、ガントチャート案を採用することにしました。