デザイナー必見!古代から受け継がれるデザインルール「貴金属比」とオススメツール9選

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

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

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

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

Curriculum pt1

1.美しいとされる比率

1.黄金比(第1貴金属比)

黄金比(第1貴金属比)
画像引用:http://ameblo.jp/soho-college/entry-11068470315.html

黄金比は、貴金属比の中でも最もポピュラーな存在で、古代ギリシア以来「神の比」とも呼ばれ安定的で美しい比率であると言われています。
別名は、中末比(ちゅうまつひ)や外中比(がいちゅうひ)です。

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

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

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

比率:1:1.618(約5:8)

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

モナ・リザ

モナ・リザ
画像引用:http://mhidetoshi.exblog.jp/20508500

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

Appleのロゴ

Appleのロゴ
画像引用:http://blog.goo.ne.jp/jiten4u/e/c796b6ad5fdaa5af3fdf5123fe9188b6

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

2.白銀比(大和比、第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.青銅比(第3貴金属比)

青銅比(第3貴金属比)
画像引用:http://www.biwako.shiga-u.ac.jp/sensei/mnaka/ut/sozai/etc.html

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

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

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

4.白金比

白金比
画像引用:http://kotsuwo.fc2web.com/study_image/trivia/yamagata03.html

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

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

5.第二黄金比

第二黄金比
画像引用:http://chihochu.jp/52644633/

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

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

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

1.Get Ratio

Get Ratio
http://getratio.com/

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

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

Webデザイン「黄金比」計算ツール
http://zapanet.info/blog/item/1298

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

3.Metallic Ratio

Metallic Ratio
http://ratio.kish.in.net/

シンプルなフラットデザインで見た目も美しい計算ツールです。
黄金比はもちろん、白銀比を含むいくつかの比率が計算できます。

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

黄金比・白銀比ジェネレーター | 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対応)

黄金比・白銀比計算機(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対応)

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

Less Framework 4
http://lessframework.com/

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

9.Golden Grid System

Golden Grid System
http://goldengridsystem.com/

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

まとめ

今回は黄金比を初めとした貴金属比5つと、貴金属比をデザインに取り入れる際に便利なツールをご紹介しました。

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

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

このニュースを読んだあなたにおすすめ

Photoshop初心者必見!Photoshopを使いこなすために知っておくべき情報まとめ
【2015年版】商用無料の人気フリーフォント35選
【必須スキル】2015年は入力速度を上げる!見ないで打てる簡単タイピング術

このニュースに関連するカリキュラム

LPOに関するカリキュラム
LPOに関して、カリキュラム形式で学びましょう
ferret編集部
Profile
Profile

ferret編集部

ferret編集メンバーが不定期で更新します。
Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します!

Curriculum pt bt5
会員になると、お気に入りに保存ができたり、
便利な機能が使えるようになります。

or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

会員になると、限定記事を全て読めるようになります。
他にも便利な機能が使えます。

or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

Small

現会員273,537

会員になると限定機能が使えます。
or

▼SNSで登録/簡単ログイン

Icon fb
Icon yahoo
Icon twitter

利用規約プライバシーポリシーに同意の上、ボタンをクリックしてください。

Curriculum pt r4

この記事に関連したタグ

人気記事ランキング

  • 昨日
  • 週間
  • 殿堂
  • はてブ

7月14日(火)にアクセスの多かった記事

1Thumb

コピペで簡単実装!CSS3でオシャレなデザインのサンプルコード23選

2Thumb

デザイナー必見!古代から受け継がれるデザインルール「貴金属比」とオススメツール9選

3Thumb

【決定版】SEOに効く内部対策のチェックリスト

4Thumb

【永久保存】和風な日本語のフリーフォント40選

5Thumb

続々登場!今話題のコーディネートアプリ15選

Webマーケティングに強くなるための情報を発信しています。

体系的に学べるカリキュラムの閲覧やお気に入り機能などが使えるようになります。