デザインの基礎、黄金比から大和比、第2黄金比まで

2011-08-16

よく黄金比という言葉を聞いたりしますが、実際にどういうものかわかっていなかったり、
デザインの当てはめ方が分からなかったりすることが多いので、簡単にまとめてみました。

貴金属比

nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を白銀比、第3貴金属比を青銅比といいます。
よく聞く黄金比は、貴金属比の１つです。

近似値　1.6180(約5:8)
CSSで黄金比を見る

伝承では古代ギリシアから使われ始めたと言われています。
パルテノン神殿、モナリザなど数多くの建築物や美術、アートなどに使用されています。

白銀比には、以下の2つがあります。

どちらも白銀比と呼ばれることが多いので、紛らわしいです。

近似値　1:2.414(約5:12)
CSSで白銀比を見る

仏像の顔、日本建築や彫刻、生け花などに用いられている比率です。
日本人は黄金比よりも白銀比や正方形が好き？

黄金比がもてはやされる場合が多いですが、サイト制作で考えた場合に、白銀比(大和比)を用いた方が日本人向けのレイアウトになりやすいかもしれません。

青銅比の近似値は　1:3.303(約3:9)
CSSで青銅比を見る

確証や使用されているケースを見つけられませんでしたが、以下のような比率もあるようです。

近似値は　1:1.732(約4:7)
CSSで白金比を見る

近似値は　1:2.618(約3:8)
CSSで第2黄金比を見る

文字の上下間隔に比率を持ち入る場合は、以下のどれかを指定します。


.golden-ratio {
  line-height:1.61; /* 黄金比 */
}
.yamato-ratio {
  line-height:1.41; /* 大和比 */
}
.platinum-ratio {
  line-height:1.73; /* 白金比 */
}

上記は文字の高さを1とし、line-heightで文字の上下間隔を指定しています。
数字の後ろに「%」「em」を指定してしまうと、子の要素に計算値が継承されてしまうので単位指定を行っておりません。

比率を用いると、裏づけの得られたデザインを制作することができます。
以下のようなツールを使用することによって、より簡単に数値を得ることができます。

Golden Ratio Calculator

Grid Calculator

レイアウトの小技 Ver2.0 電脳狂想曲 WEBデザインの小技

Web計。 -Webデザイナ向けアレコレ計算式-

Less Framework 4

マルチデバイスに対応したフレームワークで、
デバイスが変わってもその幅が黄金比になるように設計されています。
CSSを見るだけでも、比率の取り込み方の勉強になるかもしれません。

ということが多いです。
しかし全てを比率で埋め尽くす必要はなく、大まかなレイアウトやマージンの幅の指標や
デザインが安定しない時に比率を用いるなど、一つの手段として利用してみてはいかがでしょうか？