【再現性】幾何学図形でマテリアルデザイン！

再現性のあるグラフィックデザイン．

マテリアルデザインな，微かな立体感

僕はTwitterアカウントのアイコンに自分で書いた絵を設定してる．「タバコ屋湿気る」という名前のアカウントだから，タバコが湿気ってる絵を描いた．「湿気ってる」って「濡れてる」よりも微かで，「何もしなければ水は滴らないけど，絞ったら水が垂れる」くらいだよね．そう思ってタバコを絞って水が滴ってる絵をアイコンにしたのです．

これは案外歴史が深い絵で，2014年の8月から存在してる．それから数回の更新を経て，今回また新たにマテリアルデザインっぽくなって再登場！それがこのデザイン．

幾何学的に！再現性を！

マテリアルデザインを完成させるまでにも色々あった．2016年2月に僕は誤ってパソコン内のデータを全削除した．だからそれ以前に描いて持ってたこのアイコンイラストのSVGデータがなくなってしまった！かなりショックだったねー．

でもこれをいい機会にして，デザインを一新しようと考えた．以前のデザインは既製の絞るイラストを元に改変したというか加工して作ったイラストだった．だから「この絵のこの箇所がこのようなデザインになってるのは，参考にした元画像がそうだったからです」という，何とも力のない根拠しかなかった．

そこで今回はすべて0から作成することにした．力強いアイコンイラストは数学的，幾何学的な線しか使わない．「しか使わない」は誇張だけど，「そうすると良くなることが多い」はたぶん本当だと思う．以下に引用しようか．

デザインが過度に機械的で退屈なものに見えない範囲で、角、曲線、角度は、できるだけ数学的に正確にした方がいいでしょう。つまり、目測やフリーハンドでこれらの細部を描こうとせず、数字に従うのです。

6つの簡単なステップで改善するアイコンデザイン | デザイン | POSTD

ゼロからの見直し

せっかくゼロから作りなおすんだから，これくらい拘って作り直したい．幸いなことに，パソコン内のデータは無いけれど，このブログに貼ってあった過去のデザインが残ってる．それを下描きとして使って，単純な図形でトレースしてリデザインしたのがこれ．

円と直線しか使用してない，簡潔で力強いデザインができた！色は以前のまま，それで十分綺麗だからね．全ての直線，曲線が一意に決定出来るだけの十分な情報をこの1枚に詰め込んだ．そのせいで若干ごちゃごちゃしてるけど，図形的にとても整ってる．気に入った！

上のデザインをInkscapeで作成して，それをPNGに書き出してGIMPでマテリアルデザイン風に加工した．500x500pxの元画像に対して，2pxの内側ベベルを付けて，ドロップシャドウを適当に付けたかな？マテリアル風にする加工の手順は覚えてない，適当です笑．

2014年8月のデザインからはずいぶんと進化した．先に引用したブログにもあるけど，やっぱり整った幾何学図形は洗練された印象を与えるね．手描きとは大違い．僕はクールに澄ましたデザインが好きなので，幾何学的に整ったデザインは凄くいいと思う！いやぁ，洗練された．嬉しい！

ところで，今回デザインを再構成するときにもたくさんのことを考えたけど，2014年に初めて作成するときもたくさんのことを考えた．それを記録した記事もあるから，よかったら読んでね！