Staccal2のアイコンが出来るまで

年始にPCを整理していた所、Staccal2のアイコンが出来るまでのデザインの変遷を見つけてしまいました。

いつか記事にしようと開発中に残しておいたものと思いますが忘れ去っていました。かなり今更なコンテンツなのですが、折角なのでご紹介しようと思います。

version 1

一番最初のバージョン。UIをブルー基調にしようとしていたので、アイコンも併せてブルーで製作をはじめました。Staccalの折り曲げを踏襲しており、色のバリエーションを見せたかったので2枚めに赤いシートを挟んでみました。

version 2

他のデザイナーからversion1が「カバに見える」という評価を受けたので、カババージョンを作りました。

version 3

シートの折れ曲がりのパースがおかしいと専らの評判だったので、パースを直し別の色を増やしてみました。

version 4

あまりに色がまとまらないので、色々な要素をシンプルにして再出発しました。フラットデザインに沿うように折り曲げは控えめにしました。

version 5

やっぱり色を増やしたいので、2枚めに赤いシートを入れてみました。

version 6

もっと色を入れたいので、WWDC2013のロゴを真似てみましたが、何か違う。

version 7

version5に戻して、ちょっと立体感を出してみました。

version 8

やはり2枚めの赤が口っぽいという事で、2枚めもブルーにしました。

version 9

この辺でまったくノーアイディアになり、真っ白で再出発しました。

version 10

iOS7らしいグラデーションを用いたらどうかと、Safariのグラデーションをあててみました。

version 11

文字を少し太くしました。

version 12

代々のStaccalのアイコンにつけている「カレンダーの穴」を付けてみました。この時点でかなり満足してこのデザインに決定しかけました。

version 13

アプリのUIのデフォルトカラーがブルーであるものの、テーマカラーを変更できる多様性をアイコンで示さなければいけないのでは？という疑問からカレンダー部分は白にして、バックグラウンドに色を多くあしらってみました。

version 14

4色にしてみました。Googleアプリっぽくなってしまうのでボツ。

version 15

ちょっと色を調整。

version 16

テーマカラーを変更できるから、彩りが出るように色相環を取り入れてみようと、iOS7の写真アプリの色相環を後ろに入れてみました。ちょっとイメージを掴みかけました。

version 17

普通の色相環を入れたらどうなるか試してみました。なにかが違う。

version 18

version15に戻して、色を調整してみました。この後奇跡が起きました。

version 19

なんの考えも無しにversion18のレイヤーを45度回転させてみたら、その下にversion15のレイヤーが残っており、この様な色相環(みたいなもの)が出来上がってしまいました。

version 20

バックグラウンドの色相環はほぼ完成したので、カレンダー部分の調整に入りました。要素をシンプルにして再検討する為に「穴」を取り除きました。

version 21

文字サイズを変更。

version 22

文字のウェイトを変更。バックグラウンドの色のバランスも調整。

version 23

やはりカレンダー部分のボリュームが弱くなってしまうので「穴」を元に戻しました。

version 24

違いがよく判りませんが、諸々調整して完成。

以上、Staccal2のアイコンが出来るまででした。

この様にStaccal2のアイコン製作は、最初のバージョンから完成に至るまでのプロセスが全く整然としておらず、かれこれ3ヶ月くらいを要し非常に大変でした。

ただ、試行錯誤を繰り返す事で「たまたまアイディアに出くわす」という事があり得るので、答になかなか辿り着けない時でもあきらめずに何度でも繰り返す事が一番大事なのかなと思っています。

以上、ご参考になれば幸いです。
Staccal2のアイコンのコンセプトムービーも併せてご覧ください。


Staccal 2 - Icon Redesign from Mobile and Design on Vimeo.