デザインに役立つ！黄金比や白銀比の比率を計算してくれる5つのツール

※この記事は、2015年4月15日に公開された記事を再編集したものです。

世の中には、物事を美しく魅せるための「比率」が存在します。

建築や、Webデザイン、通常のデザインなど「なんだか綺麗」と思わせなけらばいけない場面で利用されるこれらの比率。具体的には黄金比、白銀比、青銅比、白金比、第二黄金比など、利用される比率は複数存在します。

そこで今回は、その中でもよく使われる黄金比・白銀比を簡単に、自動で計算してくれる便利なサービスを5つ選んでみました。

黄金比とは

黄金比とは、「Golden Ratio」の日本語訳で、1：1.618という人間にとって最も安定し、美しく感じられる比率のことです。

正方形の一辺にその約60％分の長方形を足した時、自然とバランスが取れていると感じることができます。名刺などの縦横比もほぼ黄金比で構成されており、有名なものをあげると、パルテノン神殿、モナ・リザ、ミロのビーナスも黄金比を採用しています。

パルテノン神殿

黄金比の例でいえば、紀元前5世紀に建設されたパルテノン神殿は、地面から屋根の最上部、横幅の端から端までが黄金比で構成されています。また、大きな企業でいうとAppleのロゴや、Twitterのロゴも黄金比でつくられています。また人物でもクレオパトラをはじめ、オードリーヘップバーンの顔も黄金比になっているとして一時期話題になったこともありました。

白銀比とは

livedoor.blogimg.jp

白銀比は、「Silver Ratio」の日本語訳で、1：1.414（1 : √2）を表す比率です。√2であれば「一夜一夜に人見頃（1.41421356）」というので記憶している方もいらっしゃるかと思います。

別名で「大和比」とも呼ばれるくらい日本と深く関わる比率で、日本建築の中にも古くから用いられている比率です。そのため日本人にとっては「黄金比」よりも親近感がわくという説も存在します。

白銀比で構成された長方形は、長辺で2等分すると、元の白銀比の長方形と相似になるのが特徴的。白銀比の例でいうと、身近なものでいうと、A3やA4などの用紙サイズ、キティちゃんやアンパンマン、せんとくんなどのキャラクターにも採用されている比率があります。

また、白銀比が使用されている有名な場所としては、法隆寺・五重塔、日本の畳、仏像の顔などがあげられます。

黄金比・白銀比の比率計算ツール

それでは、黄金比・白銀比の比率を簡単に計算できるツールを5つほどご紹介します。webサービスやアプリ、シンプルなものから多機能なものまで、自分にあった用途でこれらのサービスを利用してみてください。

RATIO

まずはRATIOというアプリのご紹介です。基準となる数値を入力するだけで、黄金比や白銀比の比率を算出してくれる無料アプリです。

比率を計算して表示するというだけのシンプルな機能のおかげで、操作に迷わず使い勝手がいいです。

キャッチコピーは「シンプルなデザインツールをあなたの手に」

▷ RATIO

レイアウトの小技

レイアウトの小技は、黄金比や白銀比を計算して算出できるWebサービスです。数値をいれると、その数値にあてはまる長方形がサイトの下の部分に登場します。

縦幅無視して横幅を基準に計算したり 横幅を無視して縦幅を基準に計算することもできます。

▷ レイアウトの小技

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

Webデザイン「黄金比・白銀比」計算ツールは、ZAPAnet総合情報局管理人ZAPAのブログの中にある1つの機能です。

画像にある四角のどこか1ヶ所の幅を決定すると、残りの幅を黄金比、白銀比として全て自動で計算してくれる便利ツールです。

ちょっとした計算を行いたいときに利用すると便利なサイトです。Webサイトのレイアウトを考える際によく利用していました。

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

Get Ratio

Get Ratioは、任意の横幅の数値を入力するだけで、黄金比などを含めたいろんなパターンの比率を計算して表示するWebサービスです。

横幅を入力するだけで、定番の比率で計算した時の高さを教えてくれます。

▷ Get Ratio

Grid Designer2

リアルタイムにWebブラウザ上に算出した数値のレイアウトが表示できるツールです。

「Columns」の部分はカラム数自体を増減させたり、幅、やカラムの間隔を設定できます。「Margins」で横幅に割り当てられる幅を設定。「Export」のボタンを押せば、そのレイアウトのhtmlcssをソースコードとして吐き出してくれるので便利なジェネレーターでもあります。

▷ Grid Designer2

黄金比や白銀比をうまく活用しよう

いかがでしたか？

綺麗に感じるサイトには、必ず法則や理由があるとされています。今回は、定番である「黄金比」や「白銀比」を簡単に算出できるサービスをご紹介しました。

何かのデザインを行う際は、そのレイアウトにする意味や理由をしっかりと考え、こういった比率を利用して綺麗なデザインにしてみてください。

【デザインにおけるレイアウトのおすすめ記事】
▷クリエイティブな広告やポスターのデザインから学ぶ！参考にしたい文字レイアウト