スペーシングの奥義“黄金比”を活用する

システム開発

コラム

連載 :

ＩＴエンジニアのためのデザイン入門

2016年8月26日(金)

伊藤博臣（いとう・ひろおみ）

連載第8回です。今回はスペーシングの“黄金比”について解説します。美術やデザインの勉強をされてきた人なら一度は聞いたことがある美の奥義です。

今回も、前回までと同様に下記のようなモデルケースを用いて解説を進めていきます。

【例】ECサイトの制作

取扱商品：雑貨
想定顧客：20代後半～40代の女性
お店のコンセプト：生活を少しセンスアップする雑貨を販売している

黄金比：人間が最も美しいと感じる基準の数値

絵画やデザインの世界では、最初に黄金比を学びます。

黄金比とは「人が最も安心して美しさを感じられる比率」のことで、芸術品だけでなく建造物など様々なところで使われている技法です。その歴史は古く、古代ギリシアまで遡ります。一説によると、黄金比はその後何世紀もの間“美の象徴”とされてきたため、人間のDNA（潜在意識）に刷り込まれたのではないかとも言われています。

この黄金比の“美しく見える比率”は、シンプルに<5：8>や<1：1.618>で説明されることが多いです（正確には<1：(1+√5)/2>）。図で表せば図1のような感じです。簡単に説明すると、正方形の一辺（AB）の中心点eとdを結ぶ半径edの円弧と、ABを延長した線との接点をCとした時にできる“ABとACの比率”です。

図1：黄金比の図形

さらに、図1ではABを一辺とする正方形に足された右側の長方形も“黄金長方形”となります。しかも、図1のように、その黄金長方形から正方形を削り取っていくと無限大に黄金長方形ができます。

白銀比：日本人にはこちらの方がしっくりくるかも

“黄金比”に対して“白銀比”というものがあります。黄金比ほどメジャーではありませんが、実は我々日本人にはこちらの方がしっくりくるかもしれません。いわば黄金比はヨーロッパの芸術や建造物の“美しい比率”で、日本の芸術や建造物には白銀比が使われてきたからです。

この白銀比の“美しく見える比率”は1：√2（≒1：1.414）です。図で表すと図2のような感じです。

図2：白銀比の図形

一番身近なところでは“A4”“B5”など、我々がよく使っている用紙やノートのサイズに白銀比が使われています。A4を半分にすると、比率は変わらないままA5になりますよね。これは白銀比が使われているからです。白銀比も半分にしていくことで無限大に“白銀長方形”を作ることができるというわけです。

黄金比をデザインに活かすには

では、前回の“均等なスペーシング”で解説した“一番美しいレイアウト”のトップページヘッダ（図3）に、黄金比の図形を重ねてみましょう（図4）。

図3：前回作成したトップページヘッダのタイポグラフィの位置（改善案2）

図4：黄金比図形を重ねてみた（黄色は横長方形、赤は縦長方形に）

いわゆる”美しいレイアウト“とは「タイポグラフィやビジュアルモチーフの位置の空間面積バランスを黄金比の面積比率に近づけていくこと」であり、それが最もバランス良く感じる秘訣です。図4でも黄金比と重ねると明白ですよね。“Natural Style”の上部を赤い線で縦に二分すると上下が黄金比になっています。

こうした黄金比は、デザインを変化させていく時にも常に意識するようにします。そうすれば“美しいビジュアル”は崩れないからです。最近では写真を加工したり、既存のバナーを改造したりしますよね。そういう時に何も考えずに改造すると、どんなに良い素材を使っても……ぐちゃぐちゃに変わり果てた姿になってしまいます。

それでは、例として図3からビジュアル（コンセント）を取りたい場合に、黄金比をキープしたまま調整するとどうなるのかを見ていきましょう（図5）。