(2)レイアウトに白銀比を利用する | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

セオリーや考え方を実践に生かそう!WEBの完成度をもっと高める76の正攻法



THINKING
02
レイアウトに白銀比を利用する
REASON
グリッドレイアウトがベースになっている
ページデザインに気持ちよいリズム感を
もたせるため、白銀比を取り入れる。

白銀比は黄金比と同じくらい知られており、古くから使用されている比率である。よく日本建築などが事例として紹介されるが、身近なものでは「用紙」がある。A判(A3、A4など)やB判(B3、B4など)の紙が白銀比になっているのだ。白銀比の描き方を解説しておこう。

まず正方形を描き、左下角の点を中心にして円弧を描く。正方形の底辺を右方向に延長させていくと円弧の線とぶつかる。このとき、正方形の底辺と延長した線の長さが白銀比の関係になる。この長方形を「三分割法」で9つに分割すると、それぞれが白銀比の長方形になっている。

かわいらしいキャラクターの多くは白銀比に収まっていると言われている。実際に見てもわかるとおり、白銀比のバランスは構図に気持ちよいリズム感を与えてくれる。Webにおいては固定幅のレイアウトデザインで有効な手法といえよう。特にCSSレイアウトはグリッドレイアウトベースで進められるので、実践しやすい。


A点を中心にして描いた円と底辺を延長した線がぶつかる。底辺と延長線が白銀比の関係
A点を中心にして描いた円と底辺を延長した線がぶつかる。底辺と延長線が白銀比の関係


「用紙」(A判やB判など)が白銀比。同じ形の繰り返しになっている
「用紙」(A判やB判など)が白銀比。同じ形の繰り返しになっている


かわいらしい漫画キャラクターの多くは白銀比の領域(長方形)に収まっている
かわいらしい漫画キャラクターの多くは白銀比の領域(長方形)に収まっている


かわいらしい漫画キャラクターの多くは白銀比の領域(長方形)に収まっている
グリッドベースで設計される固定幅のレイアウトデザインに、白銀比を利用する



文=境 祐司
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在