人が嫌でも美しいと感じてしまう黄金比って？鉄板ルールと使えるツールを紹介

デザインをおこなう上でセンスは必要な要素ではありますが、デザインのルール、理論に沿ったものにするということが重要です。プロはこれらルールを理解した上でデザインを作成しています。

ルールを守ってデザインをおこなえば誰でもセンスのいいデザインに近づけることができます。逆に、最低限のルールを無視してデザインしたものはいくら工夫を凝らしても素人っぽさが抜けない、ということになります。

ビジュアルデザインを行う上で、最低限知っておきたいものとして「貴金属比」というものがあります。「黄金比」という言葉を誰しも一度は耳にしたことがあるかと思いますが、これも貴金属比の一種です。貴金属比は古くから人間が美しいと感じる比率として用いられており、デザインに取り入れればバランス良く、整った見た目に仕上がります。

今回は、黄金比を初めとした貴金属比5つと、貴金属比をデザインに取り入れる際に便利なツールをご紹介します。デザインの機会があるという方はぜひ、参考にしてみてください。

黄金比とは

画像引用：http://ameblo.jp/soho-college/entry-11068470315.html

黄金比とは、近似値1:1.618、約5:8の安定的で美しい比率とされる貴金属比の一つです。
古代ギリシア以来「神の比」とも呼ばれ、別名は、中末比（ちゅうまつひ）や外中比（がいちゅうひ）です。貴金属比の中でも最もポピュラーな存在です。

黄金比の歴史

黄金比を発見したのはエウドクソス（紀元前408年頃～紀元前355年頃）で、その後古代ギリシアの彫刻家であるペイディアス が初めてパルテノン神殿建設時に使ったと言われています。

1800年代に入ると人類が最も美しいと感じる比率と広く知れ渡り「黄金比」と呼ばれるようになります。
海外の建築物ではサグラダ・ファミリア、日本でも鹿苑寺金閣をはじめとした建築物に用いられ時代、国境を越え人々を魅了している比率です。

黄金比を使った 身近なものとしては名刺をはじめとした様々なカード類、郵便はがきを挙げることができます。
この黄金比は自然界にも多く存在しており、松ぼっくりのかさ、花びらの数、葉の生え方においても黄金比を発見することができます。

黄金比を使った代表的な例として、ミロのヴィーナス、パルテノン神殿、名刺、ハガキ、Appleのロゴ、デジタルカメラ、サグラダ・ファミリアなどがあります。

モナ・リザ

画像引用：http://mhidetoshi.exblog.jp/20508500

レオナルド・ダ・ヴィンチが描いた有名な絵画「モナリザの微笑」も黄金比が使われている代表的なものの一つです。
モナリザの顔を細かく見ていくと、生え際から顎先までが綺麗に黄金比で成り立っています。

Appleのロゴ

画像引用：http://blog.goo.ne.jp/jiten4u/e/c796b6ad5fdaa5af3fdf5123fe9188b6

Apple社のおなじみのリンゴマークも黄金比が使われていることで有名です。
シンプルながら美しい印象を与えるのには安定した比率が用いられてるからだと言えます。
ちなみにAppleではiPhoneからMacBookの中身まで、様々なデザインが黄金比になっています。

黄金比の他にも金属比は存在した

白銀比（大和比、第2貴金属比）

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

日本では白銀比を美しい比率と考え、黄金比よりも馴染みがあり人気があると言われます。
白銀比には2つの種類があり大和比と呼ばれる【比率 1:1.414 = 1:√2】と、第2貴金属比【比率1:2.414 = 1:1+√2】があります。

ポピュラーなのは大和比で、直角二等辺三角形の辺の比です。
学生時代に「 一夜一夜に人見頃(1.41421356)」と習ったこともあるのではないでしょうか。
大和比を使ったもので身近なものといえば印刷物の規格で、例えばA3、A4の紙はいずれも白銀比を採用しています。
また、キティちゃん、ドラえもんといったアニメキャラクターでも白銀比が使われるケースを多く見かけます。
一方の第2貴金属比は身近なデザインではあまり見かけることがありません。

比率：大和比 1:1.414 = 1:√2（約5:7）、第2貴金属比 1:2.414 = 1:1+√2（約5:12）
白銀比（大和比）を使った代表的な例：薬師三尊像、法隆寺、生け花、仏像の顔、アンパンマン、キティちゃん、印刷物の規格

印刷物の規格

画像引用：http://chihochu.jp/52644633/

日本の紙の規格であるA4、B4といったサイズは白銀比を使っています。
ご存知の通りこれら規格は、A4を半分にするとA5といったように折り返しても同じ比率が保たれるため、美しさと便利さを兼ね備えた比率と言えます。

法隆寺

画像引用：http://www.bs-j.co.jp/off/backnumber/backnumber01_37c.html

日本古来の建造物にも白銀比は積極的に使われており、中でも法隆寺の金堂、五重塔は有名です。

青銅比（第3貴金属比）

画像引用：http://www.biwako.shiga-u.ac.jp/sensei/mnaka/ut/sozai/etc.html

青銅比は、1：(3＋√13) / 2で表される比のことを指します。
比較的身近な黄金比、白銀比と比べ名前すら聞いたことがないという方も多いのですが、こちらも同じく貴金属比の一つに数えられます。

しかしながらデザインの現場ではほとんど使われている例を見かけません。知識として、存在することだけは知っておきたい比の一つです。

比率：1:3.303（約3:9）
青銅比を使った代表的な例：実際の使用例はほとんどなし

白金比

画像引用：http://kotsuwo.fc2web.com/study_image/trivia/yamagata03.html

白金比は、正三角形の底辺の1/2の長さとその正三角形の高さの比に等しい定数です。
別名プラチナ比とも言われる比で、デザインに使える比率として存在はするものの青銅比同様あまりポピュラーではない比です。

比率：1:1.732 = 1:√3（約4:7）
白金比を使った代表的な例：実際の使用例はほとんどなし

第二黄金比

画像引用：http://chihochu.jp/52644633/

黄金比に対して、第二黄金比という比も存在します。
しかしこちらも青銅比、白金比と同様使用されているケースを見かけません。
近似値は1:2.618で、約3:8の比率です。

比率：1:2.618 約3:8
第二黄金比を使った代表的な例：実際の使用例はほとんどなし

デザインに役立つ簡単に黄金比などを作るツール

1.Get Ratio

http://getratio.com/

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

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

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

「黄金比」計算ツールは、一カ所だけでも任意の数値を入れれば残りの幅を自動計算し黄金比を割り出してくれるツールです。
入力が一カ所だけでもいい、というのが最大の特徴です。

3.Metallic Ratio

http://voidism.net/metallicratio/

シンプルなフラットデザインで見た目も美しい計算ツールです。
Result部分の数値を変更することが出来、自動で黄金比はもちろん、白銀比を含むいくつかの比率で計算してくれます。

4.CSS-黄金比・白銀比ジェネレーター | WEB道

http://web-dou.com/tool/css_gen_ratio_silver.php

定番の黄金比に加え、白銀比（2タイプ）、青銅比の計算ができるツールです。

5.レイアウトの小技

http://viskowaza.web.fc2.com/layout/ratio/divide/index.html

四角の枠にカーソルを合わせると、分割していってくれる計算ツールです。
あらゆるレイアウト決めを簡単にしてくれます。

6.黄金比・白銀比計算機（iOS対応）

https://itunes.apple.com/jp/app/huang-jin-bi-bai-yin-bi-ji/id649275446?mt=8&ign-mpt=uo%3D4

短辺か長辺のいずれかに任意の数値を入力すると、もう片方の長さを自動で割り出してくれる計算アプリです。
シンプルかつ使いやすいので、日頃比率を計算する機会が多い方は入れておくと便利です。

7.RATIO – Golden ratio & Silver ratio Calculator（iOS対応）

https://itunes.apple.com/jp/app/ratio-golden-ratio-silver/id896355952?mt=8&ign-mpt=uo%3D4

黄金比、白銀比の算出に特化したアプリです。
基準の数値をベースに、一度で5段階分の計算ができるので便利です。

8.Less Framework 4

http://lessframework.com/

黄金比を取り入れたレスポンシブデザインのCSSフレームワークです。
これがあれば手っ取り早く黄金比にデザインすることができます。

9.Golden Grid System

http://goldengridsystem.com/

Less Frameworkと同じ作者が作ったフレームワークで、こちらも黄金比に対応したバランスの良いレイアウトとなっています。

まとめ

実際にプロが全てのデザイン作業を細かく計算しておこなっているかというと、必ずしもそうとは言えません。しかし、美しい比率を勉強し理解していればレイアウトのセンスが身に付くはずです。

今までなんとなくレイアウトしてきていた、という方はこれを機会に比率にも考慮しながらデザインに取り組んでみてはいかがでしょうか。

もっとデザインスキルを向上させる

ノンデザイナーが抱きがちな、デザインに関する「7つの誤解」

自社のホームページを少人数で運営している場合、デザインのことは外部に委託したり、あるいはチーム内にデザイナーが不在のときもあるのではないでしょうか。 しかし、昨今では経営陣にデザイナーをCDO(Chief Design Officer＝最高デザイン責任者)として招き入れたり、ビジネスにおいても問題解決の考え方としてデザイン思考が取り入れられたりして、ノンクリエイティブ職でもますますデザインや発想力の重要性が増してきています。

優れたデザイナーはやっている？デザイン力を鍛える前に強化しておきたい4つのスキル

今回は、デザイン力を鍛える前に強化しておきたい4つのスキルをご紹介します。 「単にデザインが上手い人」「単にデザインセンスが抜群な人」を抜け出すためには、デザイン＋αのスキルを身に着けるのが近道です。 そうした「＋α」を生み出すためのスキルを確認してみましょう。