黄金比について詳しく解説、レイアウトや構図に効果的に取り入れるデザインテクニックのまとめ

Post on:2019年2月23日

黄金比（Golden Ratio）とは

まずは黄金比の数学的な比率について、確認しておきましょう。
黄金比の「1.618」は、1本のラインを2つに分け、長い方(a)を短い方(b)で割った値とその1本のラインを長い方(a)で割った値が両方とも「1.618」になります。

黄金比の数学的な比率

数学がでてきたからといって、意気消沈しないでください。デザインにおいて黄金比は美学に要約されます。その調和と比率は美しさを作り出し、価値があがります。黄金比はデザインに芸術的な意味を与えます。

黄金比の調和と比率は、何世紀もの間使われてきました。エジプトのピラミッドからアテネのパルテノンまで、システィーナ礼拝堂の天上に描かれたミケランジェロのアダムの創造からゴッホのモナ・リザまで、そしてペプシのロゴからTwitterのロゴまで。わたし達の身体や顔も数学的な比率で構成されています。

顔の数学的な比率

実際に、わたし達の脳では黄金比を使ったオブジェクトやイメージを好む傾向が生まれつき備わっています。いわゆる潜在意識と呼ばれるものです、黄金比はわたし達の脳に大きな影響を与えます。
参考: live science

黄金比は形に適用することもできます。正方形を描き、天地の辺を1.618に増やして長方形にしてみてください。

正方形の天地の辺を1.618に

この長方形に正方形を重ねると2つの形ができます、これが黄金比です。

黄金比の作成

この作業を繰り返すと、最終的には下記の画像が作成できます。

黄金比の繰り返し

ここで少し違う視点で見てみましょう。

上で作成した黄金比の図形に手を加えてみます。正方形の一辺を半径として、1つのコーナーから反対のコーナーまで弧を描いてみてください。すべての正方形に弧を描きます。これが黄金螺旋（Golden Spiral）です。

各半径のサイズは前の2つを合計した値になり、ゼロから始まり、0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144と続きます。これがフィボナッチの数列（Fibonacci Sequence)です。

黄金螺旋（Golden Spiral）

この黄金螺旋は、ひまわりの種、シダの葉、カタツムリの殻、台風、海洋波など自然界でも多く見られ、その見た目は非常に魅力的です。なぜならそれは自然界が作り出した最高級のデザインだからです。

自然界の黄金螺旋
参考: Naturalistic Pantheism

さらに一歩進めて、今度は正方形の中に円を描いてみてください。
1:1.618の比率で、お互いにバランスのとれた円の完成です。

黄金比の円

それで今、わたし達は黄金比にもとづいた正方形と長方形、そして円を手に入れました。あなたのデザインにこの魔法の数字を振りかけていきましょう。
準備はいいですか？

1. 黄金比をレイアウトに使う

レイアウトのサイズを決めるために、黄金比を有用なガイドラインであると考えてみてください。1つのシンプルな方法はサイズを1:1.618にし、黄金比を適用させることです。

例えば、960pxの幅のレイアウトの場合、それを1.618で割った594pxを使います。この594pxを高さにすると、黄金比を使ったレイアウトの完成です。
そして黄金比を使って、2カラムにしてみましょう。バランスのよいレイアウトが完成しました。

黄金比を使ったレイアウト

この2カラムのレイアウトはWebデザインに適しています。2カラムをオンラインのサイトで多く見かけるでしょう。National Geographicではこのレイアウトを採用しており、クリーンで読みやすく、情報の構造もうまく機能しています。Webデザインによい緊張感、バランスと階層をユーザーに提供します。

National Geographic

2. 黄金比をスペースに使う

スペースはあらゆるデザインにおいて非常に重要な要素です。ネガティブやポジティブのスペースを巧みに使うことで素晴らしい結果を生み出します。要素間のスペースを決めることは時間がかかるかもしれません。そんな時は黄金比を使ってみるのも一つの手です。それぞれの要素をどこに配置するか正方形のガイドを使い、黄金比をそこに当てはめます。これだけでデザインのスペースは保証されるでしょう。
これは直感的というより、むしろ計算されたデザインです。

そして、もし複数の要素をデザインするのであれば、その要素のサイズを一貫させるために黄金比を使うことができます。

基準となる黄金比

Moodleyは、ロゴを含んだアートフェスティバルのポスターを作成しました。このデザインはたくさんのスペースと共に、写真やイラストのコラージュやロゴが特徴的です。黄金比はそれぞれの要素のサイズと配置に使われており、非常にバランスのとれたデザインになっています。

黄金比をスペースに使用している例
参考: Moodley

シンガポールを拠点にしているデザイン会社Lemon Graphicは、ビジュアルアイデンティティを作成しました。名刺は3つのデザイン要素（小さい鷲・テキスト・大きい鷲）で構成され、そのすべては黄金比の異なるセクションに配置されています。さらに小さい鷲のエリアに黄金比を重ねると、同じ比率で配置されています。

黄金比をスペースに使用している例
参考: Lemon Graphic

3. 黄金比をコンテンツに使う

黄金螺旋は、コンテンツの配置を決めるときにも使うことができます。
わたし達の目はコンテンツの詳細を探す時に螺旋の中心に導かれていきます。螺旋の中心にデザインのフォーカスを合わせ、螺旋に沿ってビジュアルで関心をひくエリアをつくりだします。

基準となる黄金螺旋

さきほどのNational Geographicを違う視点で見てみましょう。螺旋の中心に向かって第2の小さなロゴが配置されています。わたし達の目はこのロゴに導かれるので、ブランドイメージにとって大きな意味がある配置です。
これはサブリミナル効果でしょうか？おそらくそうです。黄金比はそれを実行することができます。

黄金螺旋を使って、小さなロゴを配置
National Geographic

グラフィックデザイナーのTim Roussilheのポートフォリオサイトでは要素が密集しているように見えますが、黄金比と黄金螺旋に従って非常にうまく組織化されています。
サイトを見た時にまず、左上のセクションのテキストに目がいき、「Bonjour My Name is Tim.」の挨拶と自己紹介で目が止まります。それから説明文に移動し、必要であれば詳細を見て、ネガティブスペースに休止する前に、左上のロゴに目がいきます。

黄金螺旋を使ってをコンテンツを組織化
Tim Roussilhe

Saastamoisen säätiöでは、ビジュアルアイデンティティが進むにつれて黄金螺旋に従ってコンテンツの密度が高くなっています。螺旋に沿って視線を移動させると、文字のサイズはしだいに小さくなり、そのスペースも少なくなります。文字は順番通りに読む必要がありますが、繰り返し書かれているので、問題なく理解することができるでしょう。

黄金螺旋を使ってコンテンツの密度を変える
Saastamoisen säätiö

Helms WorkshopではFullsteam Breweryのブランディングをデザインし、レイアウトとコンテンツに黄金比と黄金螺旋を使用しています。デザインのさまざまな要素は区切られた正方形の中にフィットし、視線はメインキャラクターを見た後、スタンプ、アルコール度数、製造場所へと導かれます。このデザインの意図は、黄金螺旋でブランドの詳細を知ることができるということです。

黄金螺旋を使ってを使って詳細を配置
Helms Workshop

4. 黄金比を写真の構図に使う

構図はどんな写真でも重要です、大切な情報を伝えたり、印象に残る写真に欠かせません。黄金比は人の目を写真の重要な要素に導くための構図づくりに非常に役立ちます。黄金比を使って写真を3つのセクションに区切り、そこにできたラインと交差点を写真の構図に使用します。

3つの比率は「1:0.618:1」にし、垂直方向の1番目と3番目の幅を1にし、中央の幅を0.618にします。水平方向も同様に1, 3番目を1にし、中央を0.618にします。
そこにできたラインと交差点をユーザーの目やフォーカスを引きつけるために使います。緊張感を与え、構図に興味とエネルギーを加えます。

黄金比を使った写真の構図

黄金比を使った構図づくりのもう一つの方法が、1/3ルールを使うことです。黄金比ほど精密ではなくシンプルな方法ですが、かなり近い結果を得ることができます。
1/3ルールを使う時はまず、垂直・水平に1:1:1のラインを準備します。理想的な構図は、4つのコーナーすべてに重要な要素が配置されるようにすることです。
参考: Photography Mad

下記のComplex Magazineの表紙では、黄金比をネガティブスペースの割合を決定するために使用しています。顔の上部と頬に水平のライン、鼻と目に垂直のライン、これらのラインで中央に長方形がつくられています。