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...に近づいていく特徴もある。

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

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

ちなみにFigmaでこんな感じのコンポーネントを作っておくと、めちゃ便利。 pic.twitter.com/owVnQqrLUG

— KYOTA KONNO (@kyota) April 26, 2020

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

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

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

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

今回一番試行錯誤したのは縦の角度。
ちょっと位置を変えるだけで、顔の印象も大分変わる。
添付はボツ案。
スプレッドシートでも計算式をいろいろ試して、結果、(n × 2) + (n × 5)の位置が一番しっくりきた。 pic.twitter.com/Ekjm95Ne7b

— KYOTA KONNO (@kyota) April 26, 2020

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

前回との比較

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

最後に

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

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

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

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