デザイン

デザイン

【黄金比にフィボナッチ数列、三分割法…】デザインに役立つ数学の知識を簡単解説!

7,232 views

読了時間 : 約1分44秒

UXデザイナーのあなたは、おそらく数学が嫌いでしょう。芸術やデザイン方面を学んできたデザイナーたちにとって、数学は正反対の学問だからです。

しかしデザイナーがペンやブラシを走らせるとき、知らず知らずのうちに数学を活用しているのです。

今回はUXデザイナーが知るべき数学の3つの法則についてご紹介します。

 

 

  1. 1.黄金比

あのモナリザからGoogleのロゴまで、黄金比は幅広く使われています。下の図で、aとbの比がbとa+bの比に等しくなることを言います。

math①

 

 

幸運なことに、デザイナーたちはもっとシンプルな理解で黄金比を活用することができます。下の四角のように、黄金比で分割されたものは人間の目に非常に美しく見えるようになります。

math②

 

 

Googleのロゴにおいては2つの円の円周の比が黄金比になっています。Google以外にもロゴに黄金比を利用している企業はたくさんあります。

math③

 

math④

 

 

 

  1. 2.フィボナッチ数列

フィボナッチ数列は、次の数が前2つの数の和となっている数列です。0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144……と続きます。これはフィボナッチデザインの基礎となっており、ブログなどコンテンツ重視のサイトにおいて役立ちます。ひとつ例を見てみましょう。

math⑤

 

シンプルながらもよくデザインされたブログです。コンテンツの配置やフォントサイズ、分割の割合まで美しく見えます。フィボナッチデザインを利用するとこうしたサイトを作ることができます。

math⑥

 

それぞれの列幅がフィボナッチ数列の比になっているのがポイントです。

 

 

 

  1. 3.三分割法

これはデザイン以外の分野でも知名度が高いため、きっとどこかで聞いたことがあるでしょう。縦を同じ長さで3分割、横も同じ幅で3分割することで作ります。

math⑦

 

するとこのように縦と横の線が交差する点が4つできます。この4点は目立たせたい要素を配置する場所としてぴったりです。ウェブデザインでは左上の交点が最も重要で、人間の目がウェブページのうち最初に目にするのがそこだと言われています。

 

 

 

全てのデザインがこうした法則を守るべきかといえば、そんなことは全くありません。これらの法則はテンプレートというよりはあくまでガイドラインであり、厳守すべきものとは違います。しかし優れたUXデザイナーがこうした法則を上手に活用しているのも事実です。迷ったときの手がかりやあなたのデザインの基礎として取り入れてみてください。

 

 

 

※本記事は、3 Things Math Class Taught You About UXを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1000円分招待コード】
当サイト限定招待コード:CMUTDF

 
利用可能店舗:メルカリ、コンビニ、ドラッグストア等

金額:※さらにメルペイスマート払で2000円分ポイント!
友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

 

【Uber初回利用2000円オフクーポン】
【Uber初回利用2000円オフクーポン】
130v4g

プロモーション コードを追加するで「130v4g」を入れてください。
※プロモコードは日本国内でのみ利用可能
 
»当サイト限定の初回利用2000円オフのクーポンを使って登録はこちら!

Uber

Uber

 

【UberEats初回1000円オフクーポン】
【UberEats初回1000円オフクーポン】
ins6je2v

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き
 
»当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

Uber Eats のお料理配達

Uber Eats のお料理配達

おすすめ新着記事

おすすめタグ