それぞれのデザイナーのテイストや好みによって、何を「良い」デザインと呼ぶのかが違うように、多くの人は、デザインは主観的なものだと思っているでしょう。良い悪いの解釈が個人の自由であるという点はデザインの良いところであるとも言えますが、実は「正しい」デザインを作るための客観的な方法があるのです。

「黄金比」はあらゆる場面で使われている数学上の比率ですが、デザインにおいては、一般的に美しく、安定しているとされる構図のことを指します。レオナルド・ダ・ヴィンチも「最後の晩餐」を完成させるにあたり、壁や背景、テーブルに至るまで全ての構図を決める際に黄金比を使用したと言われています。人間の目には、この黄金比と呼ばれる比率が潜在的に美しくみえるのです。

黄金比とは?

黄金比では、1.618がマジックナンバーであり、黄金分割、中庸や神授比例法、もしくはギリシャ文字でPhiと呼ばれることもあります。黄金比は、自然界、建築、絵画、音楽などのあらゆるところで自然に生じる数列である、フィボナッチ数列が基になっています。

フィボナッチ数列とは、前のふたつの数を足したものが次の数になる数列のことで、0,1,1, 2, 3, 5, 8, 13, 21…と続きます。この数列を利用し、ギリシャ人は数列内にある2つの数字の差を簡単に表現するために黄金比を開発しました。この比率をデザインに適用することで、長い要素と短い要素を組み合わせる際に調和を生み出すことができるのです。黄金比は、レイアウト、ロゴなど、バランスの取れた構図が必要なデザインを作成する際に役立ちます。

2つの要素がある場合、長い要素(a)を短い要素(b)で割ったものは、2つの要素(a)+(b)の合計に等しく、また、1.618に等しくなります。

つまり、下記のような数式になります。

a ÷ b = 1.618

(a+b) ÷ a = 1.618

そして、この2つの要素を重ね合わせることによって、黄金比が得られるのです。

右端に位置する新しい長方形に対して黄金比の数式を適用し続け、各パーツに螺旋を描くと、フィボナッチ数列(黄金螺旋とも呼ばれる)の最初の曲線を描くことができます。

実用的な使い方

では、実際にデザインするにあたって、黄金比をどのように適用させれば良いのでしょうか?確かにプロダクトデザインなどにおいては、すでにサイズの決められている複数の要素で構成されたレイアウトであるため、この数式を利用している実例はあまりないかもしれません。しかしながら、今回は私たちReproが実際にインターフェイスに黄金比を利用したいくつかの例とともに、黄金比をデザインに適用させる簡単な方法をご紹介したいと思います。

コンテンツ

webメッセージは、顧客がwebサイトのユーザーに画像やテキストのダイアログを送ることができるReproの最新機能です。ここでは、画像とコンテンツの比率を決定する際に黄金比を使用しています。

タイポグラフィ

ヘッダーと本文の文字の大きさに差をつけることによって、まとまりのあるテキストブロックを作成することができます。黄金比は、このようなフォントの大きさを決める際にも役立ちます。

下図の例では、ヘッダーのフォントは24pxであり、それを1.618で割ると14.8になります。そのため、この場合には14pxもしくは15pxのフォントを本文で使用することで、バランスの取れたテキストブロックを作ることができます。

イベントバナー

アプリケーションだけでなく、イベント用サムネイルのテンプレートを作成するときにも黄金比を使用しました。

黄金比を使用する際に知っておくべきこと

  • 数字を四捨五入する必要がある場合もあるということ。例えば、小数点のない画像やフォントのサイズの方がコード化しやすいため、無理に352.286773795pxなどのサイズを使用することはあまり推奨しません。
  • 黄金比よりも実用性を優先させること。時には、黄金比を利用するべきではない場合もあるため、無闇に黄金比を信用しすぎるのはやめましょう。
  • 以下のようなツールを使うことで、毎回電卓を使うことなく簡単に比率を出すことができます。
    • Omnicalculator 最もシンプルなツールで、入力した値に基づいて、長い要素、短い要素、または全長の長さを知ることができます。
    • Golden Ratio Typography (GRT) Calculator Webタイポグラフィに特化したツールで、フォントサイズ、線の高さ、およびコンテンツの幅の比率を正確にしてくれます。
    • Golden Ratio Sketch Resource レイアウトとデザインを重ね合わせて黄金比に合わせるための、黄金比のシンプルな図をダウンロードすることができます。

タグ

著者について
Alex Kwa

デザインマネージャー、Repro
Repro創設時からデザイナーとして従事。
ディーター・ラムス、吉岡徳仁と深澤直人を敬愛している。
ストリートブランドSupremeをこよなく愛するノマドワーカー。