黄金比とは？基本的な考え方や美しさのルールと作成ツール｜モナリザ、A4など

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

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

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

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

▼ディレクターとデザイナーで読みたい資料

マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ

リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。

黄金比とは

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

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

黄金比の歴史

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

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

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

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

モナ・リザ

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

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

Apple（アップル）のロゴ

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

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

▼読まれています

デザインのコツがわかる！オススメお役立ち資料5選

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

白銀比（大和比、第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）
白銀比（大和比）を使った代表的な例：薬師三尊像、法隆寺、生け花、仏像の顔、アンパンマン、キティちゃん、印刷物の規格

● 印刷物の規格

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

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

● 法隆寺

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

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

白金比

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

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

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

第二黄金比

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

黄金比に対して、第二黄金比という比も存在します。しかしこちらも青銅比、白金比と同様使用されているケースを見かけません。

近似値は1:2.618で、約3:8の比率です。

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

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

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

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

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

2.Metallic Ratio

https://voidism.net/metallicratio/

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

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

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

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

4.レイアウトの小技

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

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

5.Less Framework 4

http://lessframework.com/

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

6.Golden Grid System

https://goldengridsystem.com/

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

デザインに黄金比を取り入れよう

実際にプロが全てのデザイン作業を細かく計算して行っているかというと、必ずしもそうとは言えません。しかし、美しい比率を勉強し理解していればレイアウトのセンスが身に付くはずです。今までなんとなくレイアウトしてきていた、という方はこれを機会に比率にも考慮しながらデザインに取り組んでみてはいかがでしょうか。

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

デザインのコツがわかる！オススメお役立ち資料5選

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

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

Webデザインスキルを独学で身につけたい時に踏むべき4つのステップとは？

現在はWeb関連スキルを学習できる無料サービスも豊富にあるため、まずは行き詰まるまで自力で勉強してみてはいかがでしょうか。今回は、Webデザインを自力で学ぶ方法をご紹介します。

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

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