黄金比という言葉をご存じでしょうか。
おそらくほとんどの人は、耳にしたことがあると思います。
黄金比は身近なものにも取り入れられたり、自然界に存在していたりします。
しかし、その定義や効果、どのようなものに黄金比が潜んでいるかについて、知っている方はあまり多くないと思います。
そこで今回の記事では、黄金比とは何かということや黄金比の歴史、そしてデザインに取り入れるための方法をご紹介していきます。
ぜひ参考にしてみてください。
目次
黄金比とは？
黄金比とは数学的な比率です。
数学的に確認してみましょう。
まず、一本の線分をaとbに分けます。
このとき、「a/b=(a+b)/b=1.618…」となり、この1:1.618…の関係を黄金比と言います。
ところで、デザインにおいて黄金比とはどのようなものとされているのでしょうか。
デザインでは、黄金比とは美学に集約されます。
黄金比は、それを含むデザインに技術的な価値を付与するのです。
次の章で解説しますが、黄金比は、歴史的にも長く使われてきました。
そして私たち人間の脳は、黄金比を使ったものに対し好ましい感情を抱く傾向があるとされています。
そのため、黄金比は私たちの感じ方に大きな影響を与えるのです。
さて、黄金比と聞くと「螺旋」を思い描く人は多いのではないでしょうか。
これは「黄金螺旋」と呼ばれ、また数学的な話となってしまいますが、ここには「フィボナッチ数列（Fibonacci Sequence）」が現れます。
この黄金螺旋のすごさは、自然界の様々なものに黄金螺旋が存在していると言う点にあります。
たとえば銀河の渦、ヒマワリの筒状花（とうじょうか）、アンモナイト、台風、上から見たときの植物の葉の付き方などです。
また、もっと私たちの身近なところでも、黄金比は使用されています。
詳しくはまた後で解説しますが、多くの人に利用されているあのサービスにも取り入れられています。
最後に、黄金比の縁について解説していきます。
皆さんは、黄金比の渦がいくつかの正方形の組合せにより作られている画像をご覧になったことはあるでしょうか。
これら正方形は、縦と横の大きさが1:1.618…となっている長方形をいくつかに分割すると出来ます。
たとえば、一辺の大きさが8、5、3、2の正方形を1つずつ、1の正方形を2つ用意することで黄金比の渦は描けます。
あのそれぞれの正方形に、内接する正円を描いてみましょう。
すると、お互いに均整の取れた円が完成するでしょう。
この円の反駅のサイズは、0、1、1、2、3、5、8と続きます。
これら数字は、前2つの数字の合計になっており、この数列はフィボナッチ数列となっています。
実はこの円も、デザインによく取り入れられています。
最後の章でこれら黄金比を用いたロゴのデザイン法をご紹介しています。
ぜひ最後まで読んでみてください。
以上が黄金比の簡単な説明です。
数学的に美しいからこそ「黄金比」という名前が付き、様々なデザインに応用されているのです。
黄金比の歴史
黄金比を発見したのは、古代ギリシャの哲学者・エウドクソスとされており、その後彫刻家・ペイディアスはあの「パルテノン神殿」の建築に黄金比を用いたとされています。
「黄金比」という名称は数学者のマルティン・オーム（独）が初めて用い、その後世界で広く知られるようになりました。
黄金比を用いたとされるアートとしては、以下の物がよく挙げられます。
・ミロのヴィーナス
・ピラミッド
・モナリザ
・凱旋門
・サグラダファミリア
・神奈川沖浪裏（富嶽三十六景）
以上が黄金比の歴史です。
有名なアートにも使用され、そのすごさがお分かりいただけたと思います。
次の章では、身近に潜む黄金比について解説していきます。
身近に存在する黄金比
私たちは現代において、様々なスマートフォンのアプリを用います。
そしてそのアプリのロゴにも、黄金比は使用されています。
例えばTwitterのロゴや、Googleのロゴにも、黄金比は使用されています。
世界的なアプリには、当然のように黄金比が潜んでいるのです。
ウェブデザインにおける黄金比
TwitterやGoogleのロゴに黄金比が取り入れられているように、黄金比はデザインにおいても使用されています。
ウェブサイト、イラスト、雑誌の表紙など、デザインに関わるものには取り入れられることは非常に多いのです。
ウェブデザインでは、テキストの配置や全体のレイアウトにおいて、黄金比が使用されています。
実際にデザインする際も、意識して取り入れてみると、バランスよく見えます。
たとえば横幅を960ピクセルとする場合、1.61:1の比率に分けてみましょう。
このとき593:367になるのですが、バランスよく感じられると思います。
もちろんレイアウトといった条件によっては希望通りにならないこともありますが、できるだけこの比率に近づけてみてください。
「こんな単純な比が、ウェブデザインに用いられているとは思えない」
こう考える人もいるでしょうが、実際に以下のウェブサイトでは取り入れられています。
・Fast Company
・BuzzFeed
・Salon.com
これらサイトには、黄金比の2列レイアウトが採用されています。
黄金比を取り入れることにより、サイトの閲覧者はスムーズに様々な記事やコンテンツにアクセスしていきます。
ある意味で、美しさだけでなく機能性も備えていると言えるでしょう。
ロゴデザインに黄金比を取り入れる方法とは？
先ほど紹介したのは、ウェブデザインに黄金比を取り入れるための最もシンプルな方法でした。
ここからは、TwitterやGoogleのような、ロゴデザインに黄金比を取り入れる方法をご紹介していきます。
具体的には3つほど方法があります。
ここでは、よく見るあの黄金比の渦巻き状の形状を、「フィボナッチグリッド」、フィボナッチグリッドを作る際に先んじて生まれる正方形に内接する正円を「フィボナッチサークル」と定義しておきます。
01.曲線の調節
1つ目は、「曲線の調節」です。
曲線の形状を調整するとき、フィボナッチサークルを曲線上に合わせてみましょう。
フィボナッチグリッドの円弧の部分を用いて調整していく手法も見受けられますが、こちらの方がより一般的な方法でしょう。
02.全体のレイアウトに使う方法
2つ目は、「全体のレイアウトに使う方法」です。
フィボナッチサークルを組み合わせるといった方法を用いることで、全体のレイアウトが整えられます。
03.空白の調整に使う方法
3つ目は、「空白の調整に使う方法」です。
ロゴの中の要素間の空白の大きさを調整するためにも、フィボナッチサークルは使用できます。
以上をまとめると、以下の通りです。
・曲線の調整
・全体のレイアウトへの適用
・空白の調整
今回紹介した方法では、すべてフィボナッチサークルを使用しました。
しかしもちろん、フィボナッチグリッドを使用してデザインすることも可能です。
これらを用いて作られたロゴは、世界中にあふれています。
ご興味がある方は、ぜひ調べてみてくださいね。
まとめ
今回の記事では、黄金比の特徴や歴史、デザインへの取り入れ方をご紹介してきましたが、いかがでしたでしょうか。
黄金比の美しさだけでなく、その実用性もお分かりいただけたかと思います。
今回の記事が、皆様がデザインする際の参考になれば幸いです。
当社では、Webページや原稿、デザイン案などの修正案をWeb上で可視化し、共有するコミュニケーションツール「mitekaku」を提供しています。
このツールを用いることで、コミュニケーションを効率化できるだけでなく、イメージの共有の際に認識の違いが生まれることも少なくなります。
修正回数の削減にもつながるこのツールを、利用してみませんか。
＞＞mitekakuはこちら
