均した淡い象り印

久しぶりのブログ．

自作フラットアイコン

特に何か書きたいわけでもないから更新が停滞してたね．今日は自作のフラットアイコンの話！捻って絞られてる紙巻きたばこから水の滴がしたたり落ちてる状態のピクトグラムを描いたつもりね！

それが上の画像です！どう？淡い色使いがレトロ感を演出してお洒落だし，流行のフラットデザインで小綺麗にさっぱりまとまってる．ワンポイントの縦線も割とよく見る手法で，オーソドックスなデザイン手法って感じで小慣れてる．さりげない細やかなグラデーションで立体感を強調して，単純なピクトグラムからも「捻り」の状態を理解しやすいような工夫もある．自分では「よくこの完成度まで持って行った！すごい！」と思ってます笑．

紙の下描きから一段落まで

まず下書き状態がこれ．

まず中央の水がジョロジョロしたたってる絵から描いたけど，「こんな線の多い絵じゃピクトグラム的にならない！もっと単純化しなきゃ！」との思いで次に一番右の絵を描いた．でもこのバージョンも一か所から滴が垂れてるだけで濡れてる感じがいまいち弱い．

そこで，絞ってるピクトグラムを利用して水滴がタラタラ絞り出されてる様子にしようと考えて，次に左の3つを描いた（これら3つは基本的なアイデアが変わってないから何が違ってるのか分からないね笑）．これでもう紙でアイデアを練るのはおしまい！次にパソコンで清書だ！

これが最初にパソコンで描いた清書＃１．

下書きの時点ではモノクロのイラストを想定してたんだけど，想像以上にモノクロだと何が何だか伝わらない… これじゃまずいなと思って色を付けることに．それと同時に，この白黒バージョンを弟に見せたら「上下が寂しすぎる」と指摘を頂いたので，それも改善できないか模索．

そして完成した清書＃２がこれ．

上下の寂しさを紛らわすためにタバコ本体を傾斜させて，さらに縦に真っ二つに2分する線を導入．こういう線ってフラットデザインにときどき見かけるよね，，，機能が謎だけど，今回は上下の余白の寂しさを紛らわす目的で追加したよ．

でも何かしっくり来ない．実は外周の濃い紺の縁は不要なんじゃないかと疑い，さらに縦線で半分に切った左側の明度が下がりすぎるのが気になるからもっと明るくしよう！と考えて修正を加えたのがこの清書＃３．

これでかなり小慣れて垢抜けてきた印象．左右の明度の差はかなり縮まってさりげない感じでお洒落．明度変化がタバコ本体をまたがるのはよくないだろうと思って，左右の明度変化は背景だけに留めて本体のイラストには影響がないようにも変えた．

一晩寝かせて，もうひとつ洗練を！

で，この状態で一晩寝かせた．アイデアは寝かせるとまたよくなるというけど，まさにその通り．この状態でもまた不満点や不合理な箇所が見つかって，変更を敢行！そして完成したのが最終版＃４！

＃３で，水滴が傾斜の上側から垂れてるのっておかしいよねって思った．こういうことね↓

• ＃３の絵だと絞られて節になってる最上端から水滴が零れてるみたいで不自然な感じがした．だからそもそも捻る向きを変更して下端から水滴が落ちるのに相応しい形に変更．
• ぼてっと太ってスマートじゃない水滴の形も変更．簡略化，デフォルメ，図案化，そういう感じ．したたる水滴を直線で構成した．より洗練された図案の風格を演出．
• 背景と水滴の区別がつきにくい問題があった．共に明るい色で，したたる水滴が背景に埋もれて見えずらい．この問題を解決するために，背景を暗い青に，水滴を明るい淡い青で表現．人間の視覚は明度の変化に敏感だそうだから，「背景：青／滴：緑」の色相で区別するより見分けやすくなったはず！「背景：濃／滴：淡」の明度で区別できるように変更！
• 冒頭でも述べたように捻って絞られて節になってる下側に，さりげないグラデーションを追加（フラットデザインにおいてはグラデーションは反則かもね笑）．これによって軽い立体感が出て，より「捻られてる！」というイラストを読み取りやすく．
• 全体の色味をより淡く．具体的には彩度を落とした．これによって淡く柔らかな印象が生まれて，フラットデザインの素朴な印象が強調されてる．

以上のバージョンアップを経て完成したフラットアイコン！Twitterのアカウントアイコンに使ってます．気に入ったからしばらく長く使い続けるかな！

追記＠2016/05/24

このフラットアイコンを作成したのは2014年の8月．で，追記時点は2016年5月．2年も経過したけど，まだこの画像をいじってます笑！Googleの提唱するマテリアルデザインを適用してみた画像がこちら．詳しく書いた記事もあるのでよかったら読んでね！