見出し画像

Figma 黄金比パーツ素材を作った話

ロゴやアイコンを作るときに黄金比のガイドを使いたいなーと思ってたときに、ググってもFigmaで使える素材がなかなか見つからない。。

自分で作ったほうが早そうだったので作ってみた。
そして、これをオープンなFigmaの素材として公開しているので、ComponentやInstanceを読み込んで好きに使っていただければと!

黄金長方形

画像1

フィボナッチ数列である、1, 1, 2, 3, 5, 8, 13の比率の正方形を組み合わさっている。バラして使ってもいいし、構図を考えるときにも使える。

黄金螺旋

画像2

黄金長方形の頂点をつないで作った螺旋。
構図を考えるときに、どこにターゲットを置くかを考えるときに使える。

黄金グリッド

画像3

1 : 0.618(1.1618 - 1)のグリッド。
こちらも構図を考えるときに使えるやつ。

フィボナッチ数列比率の円

画像4

TwitterやAppleのロゴの設計でも使われている。
ロゴなど作るときに使える。

参考

フィボナッチルーラー

画像5

縦幅や横幅を決めるときに使える。

幅の割合と計算式
・赤:23.6%((1 - 0.618) × 0.618)
・黄:38.2%(1 - 0.618)
・黄緑:61.8%(1.1618 - 1)

ちなみに、株価などのチャート分析(フィボナッチ・リトレースメント )にも使われていたりする。美意識だけではなく、価値の影響までするなんて人間の心理っておもしろい。

フィボナッチ数列比率の円の使用例

画像6

黄金比とフィボナッチ数列ってどう関係しているか

補足だが、黄金比とフィボナッチ数列は深い関係がある。

最初に紹介した黄金長方形を描いていくと、長方形の比率がフィボナッチ数列の比率になる。

また、フィボナッチ数列のnの前の数字n - 1を、1/2, 2/3, 3/5, 5/8, 8/13, 13/21...という形で割ると限りなく黄金比率の1.618...の数値に近づいていく。

ちなみに、なぜ限りなく黄金比率に近づくかは自分では理解できないぐらい難しかったが、以下記事が参考になった。

最後に

黄金比は、自然界において合理的であり、美しさでもあり、種の繁栄の強さでもあり、それを応用してデザインにも活用できるなんて本当におもしろい。

また、Figmaの素材の配布ってやり方次第でもっと面白くできそうなので、今後も作っていければなーと思う。

Figma URL(プレビューのみ)

Figma ファイルダウンロード

※Figma Resourcesに申請中

アイコンを再設計した話


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
とっても嬉しいです💚
10
デザイナー。日々の体験を綴っています

こちらでもピックアップされています

Figma のまとめ
Figma のまとめ
  • 141本

デザインツール Figma の使い方、良い紹介などをまとめたマガジンです。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。