黄金比とは?基本的な考え方とデザインへの取り入れ方

what-is-the-golden-ratio

紀元前の象徴であるギザのピラミッドやルネサンス期の巨匠レオナルド・ダ・ビンチのモナ・リザ。現代のグローバル企業のTwitterやペプシ。これらの共通点とは?

簡単な答えを言うと、ギザのピラミッドもモナ・リザも黄金比を使用して設計・デザインされています。

黄金比は数学的な比率のことで、自然の中でも見つけることができます。黄金比をデザインに使用すると、自然なパターンでありつつ非常に美しい様相をした構成になります。しかし、一度は聞いたことがある黄金比。正確には一体何なのでしょうか?また、黄金比を用いてデザインをより良くするためには、どのように使えば良いのでしょうか?

黄金比とは?

できる限りシンプルに見ていきましょう。(難しいけど!)黄金比(黄金分割、中庸や神授比例法、もしくはギリシャ文字でPhiとしても知られています)は、1本の線で物を2分割にした際に現れます。2分割にしたうちの長い部分(a)を短い部分(b)で割った時、その答え(商)は、((a)+(b))÷(a)の答え(商)と等しく、双方が1.618になります。

数学や数字の羅列にうんざりしないでくださいね。デザインの世界では黄金比とは結局のところ、美学的な思想ということになります。作品やデザインを作成し、色やパターン等の調和と比率の美しさを評価するためのものです。デザインに黄金比を使用すると、未知の要素や言葉で言い表せない上質さといった芸術的センスを作品に加えてくれるのです。

この調和と割合の存在は、はるか昔から認識されていました。ギザのピラミッドから始まり、アテネのパルテノン神殿、 ミケランジェロのシスティーナ礼拝堂にある天井画のアダムの創造、そしてレオナルド・ダ・ヴィンチのモナ・リザに至るまで、数千年の歴史があるのです。現代では、ペプシやTwitterのロゴマークにも黄金比が用いられています。そして、私たちの体や顔にも数学的な比率が当てはめられるのです。

 

The Science Forum

実のところ、私たちの脳は本能的に黄金比を用いた物体やイメージを好みます。私たちが意識をしなくても潜在意識が黄金比に魅力を感じます。また、イメージをより黄金比に近づける細かい微調整でさえも脳に大きな影響を与えるのです。

また、黄金比は形にも使用することができます。 正方形の1辺の長さに1.618を掛けてみると、バランスが良く、均衡のとれた長方形を作ることができます。

ここで、その長方形の上に元の正方形を重ねてみると、この2つの四角形が黄金比を作り出します。

上のイメージのように、右の長方形(小さい面積の方)に黄金比の公式を用い続けると、徐々に小さくなっていく正方形が集まった図形ができます。

難しいですよね! 休憩が必要でしょうか?小難しい話はもう少しで終わるので、もう少し頑張ってくださいね。

上の黄金比の図形を参考にして、正方形の角から対称する角まで弧(アーチ)を書いてみましょう。そうすると、黄金螺旋(もしくはフィボナッチ数列(Fibonacci Sequence))の最初のカーブを描くことができます。フィボナッチ数列は、三項目(3番目)の数字がその数列の一項目と二項目(1番目と2番目)の2つの数字の合計(和)になるというパターンを持っています。0から始まり、その数字の配列は、0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…と続いていきます。

それぞれの正方形の1辺の角から対称する角に曲線を描き加えていくと、黄金螺旋を表す図形を描くことができます。

豊かな自然の中で黄金比率が当てはまる美しい植物や創造物を見つけることができます。例えば、シダ植物、花々、貝殻やハリケーンの衛星写真など。このようなものを見ると、きれいだ!と感じるはずです。なぜかというと、そうですね。人の手の加わっていない自然が織り成す形は本当に素晴らしいからです。

natureandwisdom.wordpress.com

それでは、さらにもう一歩先に進んで、それぞれの正方形の中に円を描いてみましょう。そうすると、1:1.618の比率に当てはまる大小さまざまな円を作ることができます。また、その円は互いにバランスの良い比率をしています。

黄金比の法則を使用した正方形、長方形と円について学んできました。これで、魔法(黄金比の1:1.618のこと)をあなたのデザインに使うことができますね。

黄金比の説明は十分でしょうか?

デザインに黄金比を活かす5つの方法

黄金比の骨格となる理論を頭に入れたところで、どのようにあなたのデザインをより良いものにするのかについて掘り下げていきましょう。

レイアウト、スペーシング、コンテンツ、イメージやフォームといった様々なデザインの要素に黄金比を用いることができます。1つずつ詳しく見ていきましょう。

01. レイアウト - 黄金比でサイズを設定する

黄金比はデザイン等のレイアウトのサイズを決める便利な基準(ガイドライン)と考えてみましょう。黄金比を使用する一番シンプルな方法は、制作物のサイズに1:1.618を取り入れることです。

黄金比を使用する場合、ごく一般的な960ピクセル幅のレイアウトを1.618で割ってみると、その 理想的なレイアウトの高さは594になります。このような方法で黄金比を取り入れていくのです。

次に、黄金比を使ってレイアウトを2列に分割してみましょう。そうすると、ほらもう出来上がり!分割したそれぞれのコラムの中で作業を進めることで、黄金比に基づいたバランスの良いサイズのレイアウトを保持できます。

縦に2分割したレイアウトはウェブデザインに最適なので、多くのネット上のコンテンツでこの形式が使われています。National Geographic(ナショナルジオグラフィック:自然・環境・各国の文化等を様々な記事を掲載している月刊誌)は、読者が読みやすいバランス良くコンテンツが整えられたホームページを作るために、この2分割のレイアウトを使用しています。National Geographicのホームページ上では、コンテンツやデザインが整理され、それぞれが程良いバランスを持ち、重要度や読者に読んでもらいたい順序分けがなされています。これだけ論理的にコンテンツを整理していても、見た目にはごく自然な雰囲気があるのです。

 

National Geographic website

02. スペーシング - 黄金比の図でレイアウトしてみる

スペーシングは、どのようなデザインにも不可欠な要素で、ネガティブスペースもしくは、ポジティブスペースとして扱われ、作品の出来栄えを良くも悪くもします。デザインの要素の1つであるスペーシングを決めるために、膨大な時間がかかることがあります。多くの時間を費やす代わりに、それぞれの要素を配置する場所の基準となる正方形を置き、黄金比の作図から始めると良いでしょう。基準をおくことで「直観的」というよりもむしろ計算され尽くしたスペーシングとバランスをデザインに作り出すことができます。また、黄金比を完璧なものにするための微調整が大きな効果をもたらしてくれます。

さらに、複数の要素を取り扱う場合、デザイン全体に一貫性のある比率を持たせるよう、複数の黄金比の図を重ねてみると良いでしょう。

デザインスタジオのMoodleyは、プログラム、芝居のビラ、屋外でのキャンペーンに使われるロゴマーク、ロゴタイプ、コラージュデザイン(コラージュ:描画の手法の1つ。切り抜きや加筆を1つのデザインに加える手法)といった、舞台芸術フェスティバルのBregenzer Festspiel(オーストリアのイベント)のブランドアイデンティティ(ブランドを識別させるもの)を展開しました。広告のビラには、写真とイラストの双方の特徴を活かしながら、手でちぎったような余白のあるロゴマークも取り入れています。バランスの良い表紙を作るために、黄金比に従ってそれぞれの要素のサイズと配置場所が決められているのです。

 

Bregenzer Festspiele by Moody

シンガポールに拠点を置くデザイン会社のLemon Graphicは、Terkaya Wealth Management(資産の運用や企画等に携わる企業)のビジュアルアイデンティティ(ロゴマークといったその企業を象徴するデザインのこと)を制作しました。小さなワシ、文字、大きなワシが3つのデザイン要素として名刺に印刷されています。よく見てみると、これらのデザイン要素は黄金比で分割されたそれぞれのセクションに収められていることが分かります。

また、小さなワシのデザインの上に黄金比と黄金螺旋を重ねてみると、そのデザインも比率の中にきちんと収まっています。

 

Terkaya by Lemon Graphic

03.コンテンツ -黄金螺旋を描いてみる

コンテンツの配置を決める基準の1つとして黄金螺旋を使うと良いでしょう。私たちの視線の先は、物の詳細をより注意深く見るために自然と螺旋の中心へと向くものです。そのため、螺旋の中心部分にデザインを集中させ、さらに螺旋のカーブの内側が見る人の視覚に有効的に訴えかける範囲と考えると良いでしょう。

もう一度、National Geographicのホームページに注目をしてみると、螺旋の中心に近い部分に小さなロゴマークがあることにお気付きいただけるでしょう。先で書いたように、私たちの視線の先は螺旋の中心にひきつけられるので、企業のイメージを強調するにはここは最適な場所なのです。サブリミナル効果だと思いますか?もしかしたらそうかもしれませんね。黄金比は、サブリミナル効果をも実現してしまうのです。

 

National Geographic website

グラフィックデザイナーであるTim Roussilhe自身が手がけた本人のホームページは、コンテンツが密集しているように見えますが、よく見てみると黄金比と黄金螺旋を使用し、非常にバランス良く構成されています。ホームページの左上のセクションにテキストが集中していますが、このホームページを見たユーザーの視線の先は自然と「Bonjour My Name is Tim.」で始まる文章がある画面の中央上部に向きます。その次に、Timの実績や経歴、それに続く必要な情報に視線が移り、ネガティブスペースでホームページ全体をゆっくりと見る前にメニューボタンの左上にあるロゴマークに視線が向かうのです。

 

Bonjour My Name is Tim

Saastamoisen säätiö(フィンランドのアートディレクション等を行う団体)のこのデザインのヴィジュアルアイデンティティでは、螺旋の中心部ほどコンテンツが密になっています。螺旋の中心に近づくにつれ、それぞれ文字サイズが小さくなり、文字同士の間隔も狭くなっています。単語のスペルどおりにはなかなか読めないのですが、繰り返して表現されているので、どの単語なのか、何を意味しているのか十分に理解できます。

 

Saastamoisen säätiö

Helms Workshop(アメリカのデザイン等を手掛ける企業)は、Fullsteam Brewery(アメリカの酒造メーカー)のブランド戦略をデザインし、そのレイアウトとコンテンツに黄金比と黄金螺旋を使用しています。デザインの様々な要素は分割された正方形の中に収まっていて、消費者の視線はデザインのメイン部分に配置されている肖像画を見た後に、右上のスタンプ、アルコール度数、製造場所へと移っていきます。Helms Workshopが手がけたこのFullsteam Breweryのデザインの意図は、「スチームパンク(SFのサブジャンルの1つで、ファンタジーや歴史変革等のこと)な架空の出来事をエッセンスとして加えた、祖先から代々受け継いできた醸造所のブランドのストーリー」を創り出すことでした。黄金螺旋が、ラベルに描かれたストーリーを消費者が目で追うように手助けをし、肖像画の人物とブランドにまつわる様々な情報を伝えているのです。

 

Fullsteam Brewery by Helms Workshop

04. イメージ- 黄金比(3分割法)

重要な情報をユーザーに伝えるものや、人の持つ美的感覚を大いにくすぐるものを作り出すにしろ、どのようなイメージにも構図は重要な要素です。黄金比は、写真の中の重要な要素に見る人の視線をひきつける構図を作り出すことに役立ちます。黄金比を使用し、写真を不均等に3分割をします。その後、線と交差を使用して写真の構図を組み立てます。

その際の比率は1:0.618:1になります。両端の縦列の幅は1で、中央の縦列の幅は0.618になります。同様に、横方向では、最上段と最下段は1で、中央の段は0.618です。このように線と交差を使用し、見る人の視線をひきつけることができます。さらに、この比率を用いることで写真の中にピンと張りつめた緊張感を創り出し、興味や活力を構図に加えられるでしょう。

黄金比を使用してイメージをトリミングする別の方法(少し簡素化されています)は、3分割法(Rule of Thirds)を用いることです。3分割法は黄金比ほど正確ではありませんが、類似した効果を得ることができます。3分割法では、それぞれの間隔が均等になるように縦と横の線を1:1:1の比率で設定します。イメージの重要な要素は、中央の長方形の近くに配置します。もっと理想的なことを言えば、中央の長方形の4隅に重要な要素を配置すると良いでしょう。

Solange Knowles(ソランジュ・ノウルズ:アメリカの女優、モデル)を雑誌の表紙にしたこのComplex誌は、ポジティブスペースとネガティブスペースの割合を黄金比で決めています。Solangeの鼻先と彼女の額(にかなり近い部分)が最上段の横の線に接しています。一方で、彼女の鼻と目は、中央の長方形を形作る2本の縦線上にあります。

 

Complex Magazine

Jason Mildren(ジェイソン・ミルドレン:アメリカのクリエイティブ・ディレクター)は、下に表示されているPilot誌の表紙をデザインし、同じく3分割法を活用しています。中央の長方形の4隅に重要なデザインの要素がありますが、最も重要な中央の長方形の内部はほとんど空白になっています。しかし、モデルの女性の目は中央の長方形の角の上に位置し、見る人をしっかりと見据えています。

 

Pilot Magazine by Jason Mildren

下に表示されているFeld誌の表紙は、モデルの男性の目をデザインの中心に配置させるように黄金比のトリミングを使用しています。一方で、モデルの顔は中心に位置しておらず、左の縦線に沿うように顔の輪郭が位置しているので、デザインがうまく機能しているのです。

 

Feld Magazine

そして全体的なデザインとして、表紙のレイアウトは黄金比と黄金螺旋のルールに基づいて作られています。コンテンツは螺旋の中心部に集中し、中心に行くほどより詳細な情報が記載されています。

 

Feld Magazine

 

05.フォーム:ゴールデンサークル

黄金比に基づいて互いに調和のとれた比率の正方形と長方形を作成できるように、それぞれの四角形の中に円を描くこともできます。そしてその四角形の中の真円は、隣り合う円と1:1.618の比率になります。

ゴールデンサークルを使用すると、調和とバランスを作り出すだけでなく、その形や構図の統一感も同時に作り出してくれます。ここで、ペプシとTwitterの話に戻りましょう。

ペプシのロゴマークは、黄金比による2つの交差する円に基づいて作られています。 小さい方の円は直ぐにはその存在の意味がはっきりしませんが、作成の過程を見ていくと、ロゴマークの中心を横切っている白の部分を形作る重要な基礎になっていることが分かります。

Twitterのロゴマークは幾何学を使用し、デザインは真円に大きく基づいて作成されています。黄金比の図を重ねてみるとほんの少し正確さに欠いてはいますが、大部分のデザインのバランスや調和を作り出すために、ゴールデンサークルを使用していることが分かります。

 

ここから、あなたの番です。

黄金比の持つ様々な要素を使用して、より良いデザインを作ることができます。細かい微調整は必要になるでしょうが、見る人の目線で「良いデザイン」から「素晴らしいデザイン」にするためには必ず通る道です。

最後に、「調和を生み出す黄金分割の作用は、デザイン全体に散りばめられた異なる部分同士を結び付けるユニークな特色から生み出されます。それぞれの要素は独自性を保ちつつ、全体のより大きなパターンに調和をしながら溶け込んでいくのです」とGyörgy Dóczi(ジョージ・ドーチ:ハンガリー生まれの建築家)が、自身の著書「The Power of Limits」で記しています。

デザイン作成の切り札