見出し画像

16年間使っているSNSアイコンを4度目のアップデートした話

先日、SNSアイコンをアップデートしたので、どんな考えで作っていったをまとめておこうと思う。

なぜ変えたか?

前回のバージョンは約2年前にアップデートしたが、最近、鼻の位置など微妙に気になり位整をしたくなった。
また、もう少しロジカルに設計したく、フィボナッチ数列をベースに今回デザインをした。

フィボナッチ数列について

フィボナッチ数列とは?
1, 1, 2, 3, 5, 8, 13, 21…
と、前の数字を足し合わせていく数列。

下図のように黄金長方形続けて設置した場合に、正方形比率がフィボナッチ数列となり、黄金比とフィボナッチ数列は深い関係がある。

ちなみに、前の数字を割ると1/2, 2/3, 3/5, 5/8, 8/13, 13/21...と計算していくと限りなく黄金比率の1.618...に近づいていく特徴もある。

スクリーンショット 2020-04-29 16.27.14

どうやって作っていったか

まず、以下のようにフィボナッチ数列の円形をFigmaのコンポーネントを作成。これをガイドとして利用する。

今回は、【1】を48pxとし、以下の数字を設定。

【1】 = 48px
【2】 = 96px
【3】 = 144px
【5】 = 240px
【8】 = 384px
【13】 = 624px
【21】 = 1008px

一番細い鼻の線を【1】、目を【2】とした。
顔の輪郭を【21】として、それぞれの間隔をフィボナッチ数で調整していく。
最終的にできたのが以下。

画像2

縦の位置調整が半日ほど悩んだ。
試しにTwitterなどに登録して遠くから眺めたり...

最終的に、下部から【2】と【5】のあわせた位置がちょうどしっくりきた。

前回との比較

若干、中央に目が寄り、鼻がスリムに。
ちょっぴり小顔になった。

画像3

最後に

いろんなSNS等に登録してみたが、違和感なく収まり自分でも納得できる形にできた。

自分から言わなければ気づかないレベルのアップデートだったが、細部にこだわりながら今後も進化させていきたい。

(ただ、今回が最終形態だ!といつも思いながら作っているので、次回があるかどうか分からないが)

なぜこのアイコンにしているかは以下の記事で紹介


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ありがとうございます🤩
デザイナー。日々の体験を綴っています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。