ProFutureマーケティングソリューション|MarkeTRUNK

ProFutureマーケティングソリューションMarkeTRUNKはリードジェネレーションを中心としたソリューションです。HRプロや経営プロを中心としたマーケティング、人事データを活用したDSP、SEOに強いコンテンツマーケティングなどのマーケティングソリューションと情報を提供しています。

黄金比ってなに?デザインを思考する上で欠かせない概念を徹底解説!

2023.6.27
読了まで約 14

自社のサービスサイトやブログ、ランディングページなどのWebデザインを行う際、または広告のグラフィックを作成する際、デザインや構成をどのようにすればいいのか迷うことはありませんか?いざデザインを考えると、なかなか最初の一歩が踏み出せないものです。

Webサイトのデザインの目的は、閲覧するユーザーにとって最も使いやすく、快適に感じてもらうことです。人の心に無意識に響き、サービスや会社、ブランドの印象にも大きくかかわってくるのがデザインだと言えます。

人に快適さを感じてもらうためのアプローチの一つが、「美しい」と感じさせることであり、その一つの方法が「黄金比」を活用することです。実際に多くのデザイナーが黄金比をデザインに活用しています。

そこで今回は、黄金比とは何か、Webデザインやグラフィックデザインを思考する上で役立つ概念を解説し、黄金比を取り入れるヒントをご紹介します。

目次

黄金比とは、人間が最も美しいと感じる比率である

「この絵は構図が優れている。黄金比を使っているからだ」「このデザインは非常に美しい。そうか、黄金比でできているのか」などの言葉を目や耳にしたことはありませんか?

黄金比とは「人間が最も美しいと感じる」といわれている比率です。まずは黄金比とは何のことなのか、確認していきましょう。

黄金比を示す数式

黄金比は、古代ギリシアの数学者エウドクソスが最初に発案したといわれており、近代になって「黄金比」と名付けられ、現在に至っても使われ続けている概念です。数式で表すと、次のようになります。

画像:黄金比とは?

こうして見るとわけがわかりませんが、近似値では「1:1.618」、「5:8」という比率になります。これならわかりやすいでしょう。

つまり、長方形の縦が1であれば、横が約1.618となり、この比率であれば、ほぼ黄金比と言えるというわけです。

単純な例で言えば、縦が1cm、横が1.6cmの長方形があったとします。これはほぼ黄金比であるといえるでしょう。

この黄金比で作られた長方形のことは「黄金長方形」と呼ばれています。

歴史的な建造物や美術品も、実は黄金比で構成されている

黄金比は、世の中にある多様な場面で広く活用されています。黄金比は、特にヨーロッパでは古くから最も美しい比率として親しまれており、美術品に活用されてきました。

たとえば、著名な彫刻、ミロのビーナスや、歴史的建造物といわれるパリの凱旋門、ギリシア遺跡 パルテノン神殿などにも、黄金比の比率が使われているのです。

なぜ黄金比を美しいと感じるのか

なぜ黄金比は長年評価されてきたのでしょうか。それは、人間の感覚にとって最も美しいとされてきたためです。

黄金比は「安定した美しさ」「調和の取れた美しさ」などと表現されるように、人間にとって魅力的でバランスのいい比率であるといわれています。なぜ黄金比が美しいのかという点については、まさに神秘の世界と考えられています。

関連記事:【UI/UXとは?】それぞれの意味や違い、デザインの改善方法まで解説

実は「身の回り」の意外なところにある黄金比

黄金比というと、著名な美術作品や芸術作品のイメージが強いものですが、実はもっと身近なところに存在しているのをご存知でしょうか。

● 名刺・クレジットカード・タバコの箱
● AppleとGoogleのロゴ
● Webサイトの2カラム

これらの身の回りにある黄金比について、確認していきましょう。

名刺・クレジットカード・タバコの箱

たとえば、一般的な「名刺」のサイズは55×91mmで、「1:1.65」ほどになるといわれています。まさに黄金比です。

名刺はほとんどの社会人にとって慣れ親しんだ形ですが、そう言われてみると確かに名刺のサイズは感覚的にしっくりする形である気がしてきます。

また、クレジットカードなどのカード類も「53.98×85.60mm」なので黄金比に近い「1:1.58」であるといわれています。その他に、タバコの箱も黄金比といわれています。

AppleとGoogleのロゴ

実は世界的な大企業であるApple社とGoogle社のロゴも、黄金比であることが知られています。名刺やクレジットカードのようにパッと見た感じでは分かりませんが、実は黄金比が隠れているのです。

Webサイトの2カラム

ひと昔前までは、Webサイトは2カラムで構成されるのが一般的でした。2カラムとは、webサイトを正面から見たときに、画面を左右に分割する構成方法です。通常、メインとなる大きい画面と、サブとなる狭い画面の2つに分かれます。

メインとなる大きい画面を「メインカラム」と呼び、サブとなる狭い画面を「サイドカラム」もしくは「サイドバー」などと呼びます。

このメインカラムの横幅とサイドカラムの横幅の比率を黄金比にすると、見やすく美しいWebサイトになるといわれています。実際に黄金比となっているレイアウトのWebサイトも存在します。

やはり黄金比を利用したほうが、人が受ける印象として美しくなるようです。

関連記事: Google推奨のマテリアルデザインとは

黄金比の歴史

ここで、黄金比の歴史について確認しておきましょう。

黄金比は、古代ギリシアの時代にはすでに存在していたといわれています。紀元前300年頃の数学者ユークリッドの著書「ユークリッド原論」の中にもみられるようです。

また、ローマ時代の建築理論に登場し、さらにレオナルド・ダ・ヴィンチが挿し絵を描いたL.バチオーリの1509年の「神聖比例論」という著書では、黄金比が「神聖比例」として登場します。黄金比は、その神秘的な美しさを実現することから、神聖なるものとして扱われてきました。

そして1571年から1630年に生きたケプラーは、惑星の運動に関する法則で有名ですが、彼は黄金比を貴重なものだと重要視していたといわれています。

主に西洋において、黄金比は重宝されてきた歴史があるのです。

フィボナッチ数列とは

フィボナッチ数列とは、イタリアの数学者レオナルド・フィボナッチにちなんで名付けられた数列のことです。

フィボナッチ数列はレオナルド・フィボナッチ自身が発見した数列ではありませんが、著書である「算術の書」の中で事例として紹介したことから、フィボナッチ数列と名付けられたとされています。

レオナルド・フィボナッチとは

レオナルド・フィボナッチとは約1170年から1250年頃までに存命したとされるイタリアの数学者です。13世紀初頭に著書である「算盤の書」を出版するにあたり、アラビア数字のシステムをヨーロッパに導入したとされています。

ちなみにフィボナッチは本名ではなく「ボナッチの息子」を意味する愛称のことで、本名は「レオナルド・ダ・ピサ」とされています。

フィボナッチ数列とはどのような数列なのか

フィボナッチ数列は以下の数列のことです

「1、1、2、3、5、8、13、21、34、55、89、144、233・・・」と以下、延々と続きます。

一見、何の規則性もない数列に見えますが、前の2項を足すと次の項が得られるという規則に基づいて導き出されています。

1+1=2
1+2=3
2+3=5
3+5=8
5+8=13
8+13=21
13+21=34
21+34=55
34+55=89
55+89=144
89+144=233
・・・

このフィボナッチ数列は黄金比と意外な関係にあります。

フィボナッチ数列と黄金比の関係性

フィボナッチ数列の隣りあう2つの数を分数の形にして新しい数列を作ると、以下のような数列ができあがります。

「1/1、2/1、3/2、5/3、8/5、13/8、21/13、34/21、55/34、89/55、144/89、233/144・・・」
以下、延々と続きます。

これらを計算すると以下のようになります。

1÷1=1
2÷1=2
3÷2=1.5
5÷3=1.6666666・・・
8÷5=1.6
13÷8=1.625
21÷13=1.6153846・・・
34÷21=1.6190476・・・
55÷34=1.6176470・・・
89÷55=1.6181818・・・
144÷89=1.6179775・・・
233÷144=1.6180555・・・

つまり、フィボナッチ数列の隣りあう2つの数を分数にすると、黄金比である「1.618」に限りなく近づいていくのです。

計算上1.618に到達することはありませんが、延々と1.618に向かって進んでいき、値の間隔を狭め続けていきます。フィボナッチ数列と黄金比はこのような不可思議な関係にあるのです。

自然界におけるフィボナッチ数列の事例

自然界にもフィボナッチ数列の事例を見つけることができます。フィボナッチ数列にしたがって成長を遂げる生物や植物、そして自然現象などが至る場面で確認できるのです。

以下では、自然界とフィボナッチ数列の不思議な関係について事例を紹介します。

● 生物の事例
● 植物の事例
● 自然現象の事例

生物の事例:うさぎの場合

生物もフィボナッチ数列に従っているとされる事例がいくつもあります。たとえばうさぎの出生率に関する数学的解法が、レオナルド・フィボナッチ著書の「算盤の書」で紹介されています。

うさぎのつがいが生まれ、成長して親になるのには1ヶ月がかかり、2ヶ月目には毎月つがいを生みます。さらに生まれたつがいも同じく1ヶ月で成長し、同じように2ヶ月目からは毎月つがいを生みます。順調に進むと、12ヶ月後のうさぎのつがいは144匹(羽)になるとされています。

フィボナッチ数列を見てみると12ヶ月目は144となり、一致していることがわかります。

期間(月) 1 2 3 4 5 6 7 8 9 10 11 12 13
フィボナッチ数列 1 1 2 3 5 8 13 21 34 55 89 144 233

生物の事例:人体の場合

人のDNAの2重螺旋構造もフィボナッチ数列に従っているとされています。さらに、気管支の枝分かれや肝臓の血管の枝分かれなどもフィボナッチ数列と一致するとされています。

参考資料:フラクタルは自然界でも多く観測されるって知っていますか-植物や各種の地形にも多くみられる- |ニッセイ基礎研究所

こういった事例から、人体も少なからずフィボナッチ数列に従って形成されていると言えそうです。

植物の事例:枝

植物の形成においてもフィボナッチ数列に従っているとされる事例があります。木の成長に伴う枝分かれもフィボナッチ数列に従っていると考えられています。

1本の木がおよそ1年で成長するとして、2年目には枝分かれして、枝は2本になります。3年目には幹から枝分かれし、幹と枝は3本になり、4年目には2年目に分かれた枝から1本枝分かれし、さらに幹からも枝分かれするので、この時点で合計8本の幹と枝があることになります。

以降も同様に成長過程をたどっていくと、見事にフィボナッチ数列に従って枝分かれを続けることになるのです。

植物の事例:葉っぱ

植物の茎に対する葉の配列様式を葉序(ようじょ)と言い、この葉の付き方もフィボナッチ数列に従っているとされています。

茎の周りに螺旋状に葉を付けていく「螺旋葉序」では、植物の種類やその開度(茎につく葉の位置関係を示す尺度)の違いによって差があるものの、フィボナッチ数列に従って葉を付けていくことが確認されています。

ほかにも、ひまわりや松ぼっくり、パイナップルなどがフィボナッチ数列に従って成長しているとされています。

自然現象の事例

台風の渦巻きや、銀河の渦の形成などの自然現象も、フィボナッチ数列に従って発達していくとされています。実際に台風の渦や銀河の渦は「黄金長方形」に当てはめると見事に収まります。
(黄金長方形は下記項目で解説しています)

こういった事例から、もっとも効率よく発達でき、またもっとも効率よくエネルギーを吸収できる形がフィボナッチ数列であると言えるのです。

参考資料:ヒマワリ・稲妻…自然界を司る神秘的な「数式」・日本経済新聞

黄金比に関連する図形

著名な美術品からAppleやGoogleのロゴまで、さまざまなものに利用されている黄金比。この黄金比は、デザインする際などに、図形が使われることが多くあります。ここでは、黄金比に関係する図形を2つご紹介します。

● 黄金長方形とは?
● 黄金螺旋とは?

黄金長方形とは?

先ほどもご紹介した「黄金長方形」ですが、縦と横の比率が「1:1.618」の黄金比となっている長方形のことをいいます。図で表すと次のようになります。

画像:黄金長方形とは?

これは、よくデザインなどで用いられています。ただの長方形ではなく、内部に線が複数引かれているのがわかるでしょう。

この黄金長方形を作るには、まず一つの黄金長方形を作った後、その短辺と等しい長さの辺を持つ正方形を作ります。つまり、長方形の内部に線を縦に1本引きます。すると、左側に正方形、右側に長方形ができあがります。この右側の長方形も、黄金長方形になるのです。

さらに、その新しく生まれた黄金長方形について、先ほどと同じように短辺と等しい長さの辺を持つ正方形を作ります。こうして、何度も繰り返していくと、最終的に図のような長方形になるのです。実際に、この黄金長方形に基づくレイアウトとなっている絵画作品や雑誌の表紙などがよくあります。

黄金螺旋とは?

もう一つ、黄金比をデザインに用いる際に利用される図が、この「黄金螺旋(おうごんらせん)」と呼ばれる図形です。「螺旋」といえば「螺旋階段」を思い出す方が多いのではないでしょうか。螺旋とは、巻貝の貝のようにぐるぐる巻きになっている形状のことをいいます。

画像:黄金螺旋とは?

実は、黄金長方形の図形の内部にも、螺旋を作り出すことができるのです。黄金螺旋を描くには、黄金長方形の内部にあるすべての正方形の角の点をなめらかにつないでいきます。すると、自然と図のような黄金螺旋を作り出すことができます。

この黄金螺旋の曲線を見て、なんとなく「美しい」と感じませんか?もしかしたら見慣れている曲線といえるかもしれません。

たとえば、オウム貝の貝殻、バラの花びらが複数重なっている状態描く曲線、そして前述した枝葉やDNAの螺旋構造など、いずれも黄金螺旋に近しいといわれているのです。

関連記事:バナー完全ガイド!広告・デザイン・サイズ・制作方法などマルっと解説

黄金比をWebデザインに使う例

黄金比は、さまざまなデザインに利用することができます。もちろん、Webデザインに利用することができます。ここでは、黄金比をWebデザインに使う、簡単な例をご紹介します。

たとえば、最も簡単なのは、2カラムを黄金比で作る方法です。

まず、幅を「960px」にするとします。高さを決める際、黄金比にしたい場合どうすればいいでしょうか。960を1.618で割ると、「960÷1.618=593.325・・・」になるので、高さは「594px」にすればいいことがわかります。これにより、黄金比の長方形ができあがります。

画像:黄金比をWebデザインに使う例

そして、2カラムにする際には、幅の960pxの線の左の端から594pxの位置で、縦に線を引きます。これにより2カラムが完成しました。

この黄金比の2カラムは、実は多くのWebサイトに見られるレイアウトです。黄金比だからこそ、見やすく、美しいといわれているのです。

関連記事:装飾デザイン、機能デザインとは?マーケターに求められるWebデザインディレクション

黄金比をデザインに活用する際のお助けツール5選

デザインの初心者であっても、デザインに黄金比を取り入れてみることで、デザインのレベルが上がったり、デザインが洗練されたりすることでしょう。

黄金比を使いこなすには、自分自身で試行錯誤しながら進めていきたいところですが、まずは一歩を踏み出すために、お助けツールを活用してみましょう。ここでは5つのツールをご紹介します。

1. 黄金比計算 – 高精度計算サイト
2. METALLIC RATIO / 貴金属比 [黄金比・白銀比などを計算] 3. Ratio Calculator
4. web計。
5. RATIO – Golden ratio & Silver ratio Calculator

1.黄金比計算 – 高精度計算サイト

スクリーンショット:高精度計算サイト「黄金比計算」画像引用:ke!san

CASIOが運営する、生活や実務に役立つ計算サイト「ke!san」と呼ばれるサイトでは、さまざまな計算がブラウザ上で簡単にでき、その中には、黄金比計算というページが用意されています。

黄金比を知りたい場合、まず一辺を指定して、それをもとに比率を1:1.618にしていきます。たとえば黄金比の長方形を作る場合、縦の辺aの長さを50pxに設定したとしましょう。画面の辺aの項目を選択して、右のテキストエリアに「50」と入力します。すると、辺bはおよそ「30.9」となり、長辺a+bは「80.9」となります。ですので長方形の底の長さを80〜81pxに設定すれば、黄金比の長方形ができあがります。

このように、このツールを活用すれば、黄金比のデザインを瞬時に作ることができるでしょう。

2.METALLIC RATIO / 貴金属比 [黄金比・白銀比などを計算]

スクリーンショット:METALLIC RATIO「貴金属比 [黄金比・白銀比などを計算]」画像引用:METALLIC RATIO

このサイトでは、黄金比をはじめとした貴金属比を計算できます。

貴金属比についてはのちほど詳しく解説しますが、貴金属の名前がついた種類の比率は黄金比だけではなく、「白銀比」や「青銅比」などが存在します。それらの総称が「貴金属比」なのです。

貴金属比は、どれも人間にとって美しいと感じさせる比率ですので、デザインを行う人はぜひ知っておきましょう。ちなみに黄金比は第一貴金属比と呼ばれています。

このサイトでは、まず「RATIO TYPE」という項目で比率を選びます。黄金比は「1.618」「Golden Ratio」の部分を選択します。お気づきになったと思いますが、黄金比は英語で「Golden Ratio」と呼びます。

そして「RESULT」と書かれている箇所の下に大きい長方形の枠があり、枠の縦横に数字が記載されています。数字の部分にカーソルを合わせると選択できるようになっており、好きな数字に変更できます。

たとえば初期設定で「Golden Ratio」を選び、縦の数字に「10」と入れると、横の数字は「16」と、小数点以下を四捨五入した状態の比率に変化します。FLOATING POINTの項目で小数点の位は変えられます。

このように、比率に応じた数字が自動的に反映されますので、黄金比のみならず、貴金属比の比率を簡単に計算することができます。ぜひ活用してみましょう。

3.Ratio Calculator

スクリーンショット:「Ratio Calculator」画像引用:Ratio Calculator

こちらもとても便利なサイトで使い方は簡単です。上部にある入力フォームに好きな数字を入れると、下部にある4種類それぞれの比率の数値を知ることができます。

たとえば、「100」と入力してみます。「px(ピクセル)」が単位となっているので「100px」という意味です。「width」では横の幅を、「height」では高さを選ぶことができます。

黄金比率は、下部に4つ並んでいる長方形のうち、右上の「Golden Ratio」と書かれている黄金色の長方形の右側に表示されている「width: 100 px」「height: 62 px」が具体的な数値となります。

つまり黄金比率で長方形を作りたい場合、横幅100pxのときは、高さは62pxにすればいいということがわかります。

シンプルながら実践で便利に使えそうです。

4.web計。

スクリーンショット:「web計。」画像引用:web計。

続いてはこのサイトです。まずは3つのタブメニューから「黄金比・白銀比」を選択します。

入力する場所は一か所だけです。「900」と入れてみると、次のような結果が表示されました。

黄金比(1:1.618で計算)
900×1456(1456.20)px

長い方が900×556(556.24)px

900pxなら343.76pxと556.24pxに分割される

556.24pxと900px(長い方)なら合計約1456px

1456pxと900px(短い方)なら合計約2356px

黄金比に基づいた長方形を作る場合、高さが900pxなら、横幅は1456pxにすればいいことがわかります。もし横幅を900pxにしたい場合は、高さは556pxにすればいいのです。

そして、2カラムをつくるときなどは、長方形を二つに分割することもあるでしょう。一辺の長さが900pxの場合、「343.76pxと556.24px」に分割されることがわかります。

また、横幅と高さの合計も出してくれます。

このサイトは特にWebサイトのレイアウトを作るときに、実用的で便利なサイトといえるでしょう。

5.RATIO – Golden ratio & Silver ratio Calculator

スクリーンショット:「RATIO - Golden ratio & Silver ratio Calculator」画像引用:RATIO – Golden ratio & Silver ratio Calculator

最後はスマートフォンのアプリです。現時点ではiOS版が公開されており、無料でダウンロードできます。デザイナー向けに作られているアプリで、黄金比と白銀比の計算に特化しています。基準となる数値を入力すると、黄金比・白銀比となる数値を算出し、図式を表示してくれます。

基準値を入力すると、比率計算によって算出した関連数値を5段階同時に表示されるのは、お得な感じがします。

スクリーンショット:「RATIO - Golden ratio & Silver ratio Calculator」画像引用:RATIO – Golden ratio & Silver ratio Calculator

ほかのWebサイトのツールでも同じように数値表示はされますが、このアプリのようにスマートフォン上に美しく表示されるとデザインのモチベーションが上がりますね。

どれも黄金比をデザインに利用する際に、便利なツールです。お好みで、使いやすいものを選んで活用してみてください。

関連記事:レスポンシブの意味とは。Webデザイン上で気を付けること

黄金比に関する書籍

続いては、黄金比に関する書籍を3つご紹介します。

黄金比と一口に言っても、非常に奥が深く、歴史も深いものです。また、デザインに活用する際のヒントも書籍から得ることが可能です。

黄金比の理解を深められそうな3つの書籍をピックアップしてみました。

1. ビジュアル・ハーモニー 黄金比、フィボナッチ数列を取り入れた、世界のグラフィックデザイン事例集
2. 黄金比: 秘められた数の不思議
3. 黄金比はすべてを美しくするか?―最も謎めいた「比率」をめぐる数学物語

1.ビジュアル・ハーモニー 黄金比、フィボナッチ数列を取り入れた、世界のグラフィックデザイン事例集

こちらはSendPointsという出版社による著書です。黄金比、フィボナッチ数列、フラクタル構造、幾何学的グリッドなどに基づいてデザインされた制作事例を、多数掲載したビジュアル資料集となっています。

たとえば、「黄金比と数列」では、「黄金比」の解説や関連する「フィボナッチ数列」についての解説があります。「ロゴとグラフィック」では、ロゴやグラフィック作品を見ることができます。

「プロジェクト」では、黄金比やフィボナッチ数列を取り入れたプロジェクト作品が紹介されています。

本書では、プロたちがデザインにどのように黄金比を取り入れたのかというところを実際のデザインで見ることができるので、現場でデザインを行う際には役立ちそうです。

ビジュアル的に優れているデザインを見るだけで、アイデア創出のヒントにもなるでしょう。

書籍リンク:https://www.amazon.co.jp/dp/B07F8NDCC7/

2.黄金比: 秘められた数の不思議

これはゲイリー・B・マイスナーさんという黄金比研究の技術・システムに関するコンサルタントとして活躍する方の著書です。

黄金比の歴史や神秘を知りたいときに、役立ちそうです。黄金比についての解説や事例と共に、多くの図版を見ることができます。黄金比にどっぷり漬かりたい人に向いている書籍です。

黄金比は神秘的な世界ではありますが、デザインや数学の世界でもあります。現代的な学問の一つとして黄金比を学びたいという場合に良い書といわれています。

書籍リンク:https://www.amazon.co.jp/dp/4422414372

3.黄金比はすべてを美しくするか?―最も謎めいた「比率」をめぐる数学物語

宇宙物理学者のマリオ・リヴィオさんによる著書です。宇宙物理学者がとらえる黄金比を知ることができます。

黄金比の歴史を知りたい人や、黄金比の魅力と真実を知りたい人におすすめです。この書籍は黄金比関連の中でも、Amazonレビューが充実しており、その深い内容に圧倒されるユーザーが多い印象でした。

黄金比を深く極めてみたいと思ったら、一度手に取ってみてはいかがでしょうか。

書籍リンク:https://www.amazon.co.jp/dp/415050377X/

関連記事:クオリティの高いwebデザインを制作するためのノウハウとは

黄金比と同様に有名な比率

黄金比についてご紹介してきましたが、その他にも、貴金属比と呼ばれるものや、その他の金属の名がついた比率があります。ここでは、4つの比率の概要をご紹介します。いずれもデザインに活用できるので、ぜひ取り入れてみましょう。

1. 白銀比(第2貴金属比)
2. 青銅比(第3貴金属比)
3. 白金比
4. 第二黄金比

1.白銀比(第2貴金属比)

「白銀比」は、「Silver Ratio」と呼ばれています。黄金比の次に有名な比率です。

なぜ「白銀」と呼ばれるのかというと、元素のうち、金の次は銀が選ばれることが多いことから、順番的に「黄金比の次」というという意味合いから「白銀比」と呼ばれるようです。

白銀比には2種類あり、それぞれ一般的に「第2貴金属比」と「大和比」と呼ばれています。

● 第2貴金属比
● 大和比

第2貴金属比

第2貴金属比は、黄金比同様、美しさや安定感に評価のある比率です。実際、さまざまなデザインの中に見られています。比率は「1:2.414」です。整数で表すと、近似値は「5:12」です。

大和比

大和比は、日本で特に好まれている比率といわれています。比率は「1:1.414」、整数の近似値は「5:7」です。大和比は、一般的な用紙サイズ規格の「A4」や「B4」などに使用されています。

また、日本ではかの有名な「法隆寺」に使われているなど、古くから多くの場所で利用されています。

2.青銅比(第3貴金属比)

青銅比の比率は「1:3.303」で、整数では近似値「3:9」です。青銅比は、白銀比の次に有名ですが、使用頻度は少ないようです。

とはいえ、貴金属比の一つであるため、デザインを行っていくに当たって、いつか役立つかもしれません。デザインに迷ったら、黄金比、白銀比の次にあてはめてみるのもいいかもしれませんね。

3.白金比

白金比の比率は「1:1.732」で、整数では近似値「4:7」です。貴金属比ではありませんが、デザインに利用できる、美しい比率とされています。

これもあまり活用頻度は高くないようですが、正三角形や正六角形のデザインの際には活用されていることがあるようです。

4.第二黄金比

第二黄金比と呼ばれるものもあります。比率は「1:2.618」、整数では近似値「3:8」です。これも貴金属比ではありませんが、黄金比に近い比率といわれています。

デザインにおいてはこちらもあまり活用されることはないものの、何かいい比率がないかと探すときには、あてはめてみるのもいいのではないでしょうか。

デザイン以外の黄金比

デザイン以外にも黄金比はあります。

● 顔・(マスク)の黄金比
● 料理の黄金比

顔・(マスク)の黄金比

デザイン以外の黄金比では、顔・(マスク)の黄金比があります。たとえばイタリアの美術家レオナルド・ダ・ヴィンチが描いた「モナ・リザ」の顔も「1:1.618」の黄金比となっています。

また顎変形症の矯正手術を行う際にも黄金比を確認しながら手術が行われ、横顔の美しさを示すEラインができるように施術する例もあります。

料理の黄金比

料理にも黄金比となる調味料の絶妙な配合があります。たとえば、しょうゆ、酒、みりんをそれぞれ「1:1:1」の比率で合わせると、さまざまな料理に使える万能だれができあがります。

家庭料理の定番メニューともいえる「肉じゃが」にも、味を決定づける甘辛つゆの黄金比があります。それが以下の比率です。

水(1と1/2):しょうゆ大さじ(3):みりん大さじ(2):砂糖大さじ(1)

絶妙な王道の甘辛つゆに仕上がりますので、ぜひ覚えておいてください。

デザインに黄金比や他の比率を取り入れよう

黄金比についての概要から、Webデザインやグラフィックデザインの際に活用できる便利なツール、書籍などをご紹介してきました。

黄金比は、すでに著名な建築物や美術作品のほか、Webサイトやロゴ、広告、雑誌など、さまざまなものに活用されていることがわかります。

世の中には、黄金比と呼ばれるものがあるということ、そして優れた芸術作品、グラフィックアートなどに利用されているということを知っているだけでも、デザインに少し磨きがかかったはずです。

ぜひ積極的に取り入れて、人が無意識に感じる「美」を追求していきましょう。

関連記事:オウンドメディアの運営~デザイン成功事例について徹底解説

黄金比ってなに?デザインを思考する上で欠かせない概念を徹底解説! まとめ

・黄金比とは、古代ギリシアの数学者が最初に発案したといわれており、近代になって「黄金比」と名付けられ、今もなお使われ続けている比率のこと。

「人間が最も美しいと感じる比率」といわれている。近似値では「1:1.618」、「5:8」となる。

・黄金比は、世の中にある多様な場面で広く活用されている。特にヨーロッパでは古くから最も美しい比率として親しまれており、美術品に活用されてきた。

ミロのビーナスパリの凱旋門、パルテノン神殿などがある。身近なところでは名刺、クレジットカード、タバコの箱などがある。

・黄金比をデザインに活用する際、黄金長方形や黄金螺旋がよく使われる。

・黄金比をデザインに活用する際のお助けツールとして、Webサイト上で自動計算してくれるものや、図を同時に表示してくれるスマートフォンアプリなどがある。実際のデザインの際に便利に活用できる。

・黄金比の他にも、美しいとされる比率がある。その代表的なものに、白銀比、青銅比、白金比、第二黄金比がある。

比率はそれぞれ、白銀比の第2貴金属比は「1:2.414」「5:12」、白銀比の大和比は「1:1.414」「5:7」、青銅比は「1:3.303」「3:9」、白金比は「1:1.732」「4:7」、第二黄金比は「1:2.618」「3:8」である。

・フィボナッチ数列は「1、1、2、3、5、8、13、21、34、55、89、144、233・・・」といった数列のことで、黄金比とは密接な関係にある。これらの数列で隣あう2つの数を分数の形にして新しい数列を作ると「1/1、2/1、3/2、5/3、8/5、13/8、21/13、34/21、55/34、89/55、144/89、233/144・・・」となり、これらを計算すると黄金比「1.618」に限りなく近づいていく。

・黄金比はデザイン以外の分野でも取り入れられており、医療分野においては整形手術、料理の分野においては調味料の配合など、さまざまな種類の黄金比がある。

よくあるご質問

黄金比は何対何?

黄金比とは、1:(1+√5)/2という比率です。「1:1.618」や「5:8」などの近似値で表記されることもあります。黄金比は、人間がもっとも美しいと感じる比率のことです。縦と横の比だけでなく、デザインの一部に黄金比が使われていると、安定している感覚を覚え、調和のある美しい状態だと感じる人が多いといわれています。

黄金比が使われている例は?

黄金比は、パルテノン神殿や凱旋門などの歴史的な建造物や、ミロのヴィーナスなどの著名な美術品などに使われています。また、名刺やクレジットカード、タバコの箱など、身の回りにある長方形のものにも、黄金比は使われています。ほかにも、Apple社やGoogle社などの世界的企業のロゴも黄金比は使用されています。

黄金比はどのように使用する?

黄金比は、画像の大きさを決めるときに使用できます。縦:横が黄金比になるようにサイズを決めると、縦長すぎず横長すぎない画像に仕上がります。
また、画像を2つ並べるときにも、黄金比を使うことが可能です。よくあるレイアウトとしては、左側に1:1の正方形、右側に正方形の1辺と同じ高さで、高さ÷1.618で求めた幅の長方形を配置したものなどが挙げられます。

監修者

古宮 大志

古宮 大志

ProFuture株式会社 取締役 マーケティングソリューション部 部長
大手インターネット関連サービス/大手鉄鋼メーカーの営業・マーケティング職を経て、ProFuture株式会社にジョイン。これまでの経験で蓄積したノウハウを活かし、クライアントのオウンドメディアの構築・運用支援やマーケティング戦略、新規事業の立案や戦略を担当。Webマーケティングはもちろん、SEOやデジタル技術の知見など、あらゆる分野に精通し、日々情報のアップデートに邁進している。

執筆者

get_field('cf_general_profile_name', 39);

『MarkeTRUNK』編集部

マーケターが知りたい情報や、今、読むべき記事を発信。Webマーケティングの基礎知識から
知っておきたいトレンドニュース、実践に役立つSEO最新事例など詳しく紹介します。
さらに人事・採用分野で注目を集める「採用マーケティング」に関する情報もお届けします。
独自の視点で、読んだ後から使えるマーケティング全般の情報を発信します。

メルマガ会員登録で最新マーケティング情報やトレンド情報、
セミナーイベント情報をチェック!

メールマガジンのサンプルはこちら

リード獲得などBtoBマーケティングにお困りではありませんか?
マーケティング施策に関するお問い合わせはこちら

アクセスランキング

  • 2024.3.25

    メールアドレスの作成方法を解説!初心者にも簡単な作り方や無料のサービスを紹介

  • 2024.2.8

    キャッシュとは?初心者でも分かる仕組みやキャッシュクリア(削除)の方法を解説!

  • 2022.9.21

    Wayback Machine(ウェイバックマシン)とは?使い方や意味を徹底解説します!

  • WEBマーケティングカテゴリの
    おすすめ記事

    マーケティングカテゴリの
    おすすめ記事

    SEOカテゴリの
    おすすめ記事

    おすすめ記事

    PAGE TOP
    閉じる
    2022.6.6

    マーケティング担当者必見!資料ダウンロード

    BtoBでゼロから始めるWebマーケティング手引書【企業が取り組むべき4ステップ】

    こんな方にオススメ!
    ・社内に詳しい人材がいないため何をしたらよいか分からない…
    ・Webマーケティングのどこから手を付けていいかわからない…

    マーケティングお役⽴ち資料資料ダウンロード