黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに

Webサイト、雑誌や同人誌の表紙、フライヤーなどのレイアウト、コンテンツの配置、余白のとり方、写真の構図、オブジェクトの形のデザインに、黄金比や黄金螺旋をうまく取り入れるデザインテクニックを紹介します。

以前に1,000ブクマ越えの「黄金比をサイトのデザインに取り入れる簡単な3つの方法」を記事にしましたが、黄金比の取り入れ方もいろいろ進化しています!

黄金比とは、デザインに黄金比を活かす5つのテクニック

What Is The Golden Ratio?

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

エジプトのピラミッド、ダヴィンチのモナリザ、これらとTwitterやペプシのロゴとの共通点は何でしょう?

正解は、黄金比が使われてデザインされていることです。

黄金比とは数学的な比率です。自然界で多く見られ、そしてデザインでも使われており、その審美的な構図は多くの人を魅了します。そんな黄金比とは厳密いうと何でしょうか? そしてデザインをよくするためにどのように黄金比を使うことができるでしょうか?

黄金比(Golden Ratio)とは

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

黄金比の数学的な比率

黄金比の数学的な比率

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

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

顔の数学的な比率

顔の数学的な比率

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

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

正方形の天地の辺を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)

黄金螺旋(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の表紙では、黄金比をネガティブスペースの割合を決定するために使用しています。顔の上部と頬に水平のライン、鼻と目に垂直のライン、これらのラインで中央に長方形がつくられています。

黄金比を使った構図づくり

黄金比を使った構図づくり
参考: Creative Blog

Jason Mildrenがデザインした雑誌の表紙は、1/3ルールが機能しています。中央の長方形の4つのコーナーに興味があつまり、中心の大部分は空っぽです。モデルの目は右上のコーナーに正確に配置されており、鋭い目線が印象的です。

1/3ルールを使った構図づくり

1/3ルールを使った構図づくり
参考: Jason Mildren

Feld Magazineの表紙では黄金比を使い、モデルの目を中心にクロップしています。顔を中央に配置するのではなく、左側を垂直のラインに合わせることで、うまく機能しています。

顔を中央ではなく、ずらした構図

顔を中央ではなく、ずらした構図
参考: Feld Magazine

全体的にも黄金比と黄金螺旋が使われています。
コンテンツは黄金螺旋に沿って配置されており、螺旋の中心に近づくにつれて情報が多くなっています。

黄金螺旋を使った配置

黄金螺旋を使った配置

5. 黄金比を形に使う

黄金比が互いにバランスのよい正方形と長方形をつくるのと同様に、円をつくるためにも適しています。下記の画像はそれぞれの正方形の中に隣接した円を描いたもので、そのサイズは1:1.618の比率に従っています。

黄金比にもとづいた円

黄金比にもとづいた円

これは「Golden Circles」と呼ばれるもので、この形を通じて調和と釣り合いだけでなく、一貫性もつくることができます。ここでペプシとTwitterのロゴを見てみましょう。

ペプシのロゴは黄金比に従った2つの交差している円にもとづいています。より小さい円は簡単には気がつかないかもしれませんが、ロゴの中心にあるホワイトの区切りのベースを形成しています。

ペプシのロゴ

ペプシのロゴ

Twitterのロゴは幾何学を使い、完璧な円にもとづいてデザインされています。ロゴを黄金比と重ねると、いくつか不足分がありますが、大部分はロゴのデザインにバランス、そして秩序と調和を与えています。

Twitterのロゴ

Twitterのロゴ

top of page

©2017 coliss