黄金比をはじめとする貴金属比で、より美しいデザインを。

揺るぎない美しさのルール、貴金属比とは?

皆さんは「黄金比」という言葉を一度は耳にしたことがあるかと思います。これは、「貴金属比」の一種です。

nの場所に自然数が入り、第1貴金属比を黄金比、第2貴金属比を白銀比、第3貴金属比を青銅比といいます。よく聞く黄金比は、貴金属比の1つです。

全5種類ある「貴金属比」はどれらも総じて人に美しいと感じさせたり、安心感を覚えさせるため、このルールにさえ則れば、新米デザイナーでもプロに一歩近づいたデザインができます。現代のWebデザインやDTPデザインなどのビジュアルデザインにおいて、プロなら意識せずに守っているデザインの「比率」。

今日はその「比率」に目を向けて、ルールに則って美しくデザインする方法をお伝えします。

黄金比

黄金比は、貴金属比の中でも最も広く知られ、古代ギリシア以来「神の比」とも呼ばれ安定的で美しい比率であると言われています。英語だと Golden Ratio 、世界で最も美しい比率との呼び名が高いです。

この黄金比は自然界にも多く見つけることができます。松ぼっくりのかさ、花びらの数、葉の生え方においてもすべてに黄金比を見つけることができます。その比率は【 1 : 1.618 】(約5:8)からなります。

ひとつの線を a, b の長さで2つに分割するときに、【 a : b = b : (a+b) 】が成り立つように分割したときの比a : b のことであり、その値はどちらも【 1.618 】となります。

その調和された比率は、トランプカードなどの日常的なものから、ギザの大ピラミッドからギリシャにあるパルテノン宮殿、システィーナ礼拝堂内にあるミケランジェロの「アダムの創造(Creation of Adam)」、ヴァン・ゴッホの「モナ・リザ」などの芸術分野まで、多数存在します。

最近ですと、名刺をはじめとした様々なカード類、郵便はがきにも黄金比が用いられています。Apple社のリンゴマークにも黄金比が使われていることで有名です。Apple製品はiPhoneやMacBookなど、様々なデザインに黄金比が用いられています。世界共通で美しいと感じさせるのは、さすがのAppleと言えますが、それらにもきちんと理由があったのですね。

シンプルながら美しい印象を与えるのには安定した比率が用いられてるから、というのも大きな要因でしょう。実際私たちの脳みそは、黄金比を利用している物体やイメージを好むとされており、ほとんど無意識の反応をしています。黄金比を利用してデザインを微調整することで、脳により強いインパクトを与えることができます。

さて、実際に黄金比がどういった理屈で成り立っているかご説明しましょう。

黄金比は、図形にも適用することができます。

正方形を用意し、片方の長さを1.618倍にすることで、美しく均等のとれた長方形「黄金長方形」を作成することができます。正方形と長方形を並べることで、黄金比を表現することができます。一番右の長方形に黄金比を適用することで、正方形の大きさが次第に小さくなります。それぞれの正方形の角を使い、アーチ状の滑らかなカーブ曲線を描くことで、螺旋状のライン(フィボナッチ数列)を描くことができます。

この数列は、0からはじまり、前の2つの数字を足すことで、0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144と連続して続きます。

この美しい螺旋デザインは、ひまわりの花や、貝殻、台風、シダの草など自然界でもよく見かけ、どれも魅力的に見えるものばかりです。

白銀比

白銀比とは、黄金比同様によく知られている比率で、日本で発祥した古くから日本建築で使われている比率です。

白銀比には2つの種類があり大和比と呼ばれる【 比率 1:1.414 = 1:√2 】(約5:7)と、第2貴金属比【 比率1:2.414 = 1:1+√2 】(約5:12)があります。

白銀比(大和比)

白銀比(第二金属比)

白銀比で構成された長方形は、長辺で2等分すると、元の白銀比の長方形と相似になります。もっとも美しい比率として西洋の黄金比、日本の白銀比と言われています。大和比が使われた身近なものと言えば日本の紙の規格で、A4、B4といったサイズはいずれも白銀比を採用しています。

そのためこれらの規格は、A4を半分にするとA5といったように折り返しても同じ比率が保たれるため、美しさと便利さを兼ね備えた比率と言えます。

日本古来の建造物にも白銀比は積極的に使われており、中でも法隆寺の金堂、五重塔は有名ですね。黄金比がもてはやされる場合が多いですが、日本人向けのサイトデザインや印刷物においては、白銀比(大和比)を用いた方が日本人向けのレイアウトになりやすそうです。

青銅比(第3貴金属比)

青銅比は、【 1:(3+√13) / 2 】で表される比のことを指します。

比率がだいぶ難しくなってきましたね…。

言い換えれば、【 1:1:3.303】(約3:9)と言えます。

比較的身近な黄金比、白銀比と比べ名前すら聞いたことがないという方も多いのですが、こちらも同じく貴金属比の一つに数えられます。デザインの現場ではあまり多用されていませんが、デザイナーとして知識のひとつに持ち合わせていきたいですね。

白金比

白金比は、正三角形の底辺の1/2の長さとその正三角形の高さの比に等しい定数です。

その比率は【1:1.732 = 1:√3 】(約4:7) となります。

別名プラチナ比とも呼ばれる比で、デザインに使える比率として存在はするものの、青銅比同様あまり知られてはいませんが、こちらも美しい比率です。

第二黄金比

黄金比に対して、第二黄金比という比も存在します。

近似値は【 1 : 2.618 】(約3:8) の比率です。

しかしこちらも青銅比、白金比と同様使用されているシーンは少ないですが、あることは知っておけるといいですね。

貴金属比をレイアウトに使うためのツールいろいろ

レイアウトのグリッドや余白間、写真のサイズ、配置など、あらゆるシーンで貴金属比、おもに黄金比や白銀比は活躍します。ただ、数値が計算式で求めなくてはいけないため、ちょっと割り出したい、というときでもいちいち計算機を叩いたりしなくてはならないとなると、面倒です。Web上で簡単に貴金属比各種を求めることができるツールをいくつかご紹介しますので、ぜひお役立てください。

Get Ratio

http://getratio.com/

Get Ratioは、任意の数値を入れるだけで黄金比を含む様々なパターンの計算をしてくれるツールです。幅と比率を入力するだけで求められるので、無駄がなく分かりやすいのが特徴です。

Webデザイン「黄金比」計算ツール

http://zapanet.info/blog/item/1298

こちらの「黄金比」計算ツールは、一カ所だけでも任意の数値を入れれば、残りの幅を自動計算し黄金比を割り出してくれるツールです。入力が一カ所だけでもいい、というのが最大の特徴です。黄金比のみとはなりますが、見た目にもわかりやすく使いやすいですね。

Metallic Ratio

http://voidism.net/metallicratio/

Web自体がシンプルで、計算ひとつするにしても気分があがりそうですね。Result部分の数値を変更することができ、自動で黄金比はもちろん、白銀比を含むいくつかの比率で計算してくれます。

まとめ

今回は黄金比を初めとした貴金属比5つと、貴金属比をデザインに取り入れる際に便利なツールをご紹介しました。黄金比というと、数値の計算が大変…ととっかかりにくいと感じられるかもしれませんが、上手にWebツールを併用してデザインに取り入れていけるといいですね。

ちなみに、「日本人は正方形(1:1)も大好き」と統計も出ていますので、貴金属比からははずれますが、日本人向けのデザインでは正方形もおすすめです。

すべてのプロが比率をしっかりと求めてデザインしているわけではありません。むしろ、感覚的にデザインしたら貴金属比に近づいていくのがプロでしょう。これからデザインを学ばれる方は、まずは黄金比や白銀比、正方形の比率の絶対的に美しいとされるルールに則ってデザインしてみると必ずある程度の高みまではいけるかと思います。

ぜひ、ご参考ください。

このエントリーをはてなブックマークに追加

筆者

Y.Nakatani

二児の母で、Bigmacに入って2年、Web業界は丸7年。デザイン以外は繊細さのかけらもない杜撰さ。 好きな色は浅葱色とか、新橋色とか、シアン系の色味。好きなタグはsectionとolタグ。ほっとくと擬似要素多用。好きなフォントはヒラギノのW0。今一番してみたいことは、語尾にハートマークをつけてみる。

筆者が最近執筆した記事