黄金比：それを理解して使用するための究極のガイド
公開: 2019-06-07どこのデザイナーも黄金比について知っておくべきです。 これは、見た目に美しいデザインを作成する数学的比率です。 黄金比は自然界に非常に頻繁に存在するため、その結果が自然に見えることは驚くことではありません。
UnsplashのBogomilMihaylovによる写真
黄金比には他にもいくつかの名前があります。
- 神の比率
- 黄金比
- 黄金分割
- ファイ（ギリシャ文字）
黄金比の背後にある数学
黄金比の計算については、実際に知る必要のない詳細には触れずに、できるだけ簡単に説明します。 あなたが数学についていくことができれば、素晴らしい。 しかし、それができない場合でも、それは問題ありません。デザインでこの概念を使用することはできます。
黄金比を理解するには、最初に黄金長方形を理解する必要があります
黄金長方形は、内部に正方形がある大きな長方形です。 正方形の辺は、長方形の最短の長さに等しくなります。
出典：ウィキペディア
黄金比は、円周率がほぼ3.14に等しいのと同じように、1.618に等しい（種類の）数値ですが、正確ではありません。
あなたは線を取り、それを長い部分（a）と短い部分（b）の2つの部分に分割します。 全長（a + b）を（a）で割った値は、（a）を（b）で割った値に等しくなります。 そして、それらの数は両方とも1.618に等しい。 だから、（A）で割った値（+ b）は1.618に等しく、（）（B）で割っも1.618に等しいです。
黄金長方形に戻りましょう。理解しやすいからです。
長方形の内側に正方形を配置すると、別の小さな長方形が作成されます。 黒い線を無視して、赤と緑のボックスを見てください。
赤い正方形には4つの辺の長さが等しく、その長さは長方形の最短の長さに等しくなります。 その正方形を分割することにより、別の小さな長方形（緑色で輪郭が描かれている）が自動的に作成されます。 一緒に、それらは完全な黄金比レイアウトと黄金スパイラルのベースを作成します。
また、青で概説した次のように、小さい長方形から新しい黄金長方形を作成することもできます。
従来の黄金比図には、8つの黄金長方形があります。
そして、これが最小の黄金長方形、＃8です：
左下から始めて、各正方形と小さな長方形の断面の向こう側を接続するアーチを作ると、ゴールデンスパイラルが得られます。
フィボナッチ数列
フィボナッチ数列は非常に簡単に理解できます。0と1から始めて、その前の2つの数値を合計して次の数値を取得します。 0 + 1 = 1、次に1 + 1 = 2など。シーケンスの最初の数個は0、1、1、2、3、5、8、13、21、34です。
これらの数値を使用してこれらの幅の正方形を作成すると、ゴールデンスパイラルをほぼ作成できます。
出典：数学は楽しい
ゴールデンサークル
スパイラルの代わりに、またはスパイラルに加えて、正方形に円が描かれることがあります。 黄金比オーバーレイのボックスに完全な円を描くと、1つの隣接する円と1：1.618の比率になります。
出典：ライムライト部門
ペプシとツイッターのロゴはゴールデンサークルを使用しています。
出典：Hybrid Talks
あなたはこれを前に見たことがあります、たくさん
自然は黄金比に満ちています。 植物相、貝殻、天気…
出典：UnsplashのAnnieSprattによる写真
出典：UnsplashのNASAによる写真
そして、私たちはそれを頻繁に見るので、私たちの脳はそれを好みます。 その生来の魅力が、デザイナーが使用するための非常に強力なレイアウトである理由です。
アートとデザインの黄金比
時々、黄金比は非常に簡単に認識できます。
ソース：staceysdetailinginc.com
時々あなたは行きます、「私はあなたが何について話しているのか分かりません…ああ待ってください。 今、私はそれを見る。 私が思うに。"
出典：マーケティングインサイダー
他の時にはあなたはそれを見て夢中になるかもしれません…
出典：Widewalls
…しかし、メインの黄金長方形に焦点を合わせると、もう少し明確になります。
一般的に参照される例を見てみましょう：パルテノン神殿
出典：Creative Bloq
最初は、これを見て、「それは私には対称的に見えます。 私が見ているものは、その黄金長方形スパイラルにどのように適合しますか？」
黄金比は、デザインの各部分がどのように完全に収まるかではなく、特定のセクションにのみ収まります。 それがポイントだとすれば、パルテノン神殿の右側は1つの大きなブロックになり、左側は小さなブロックに分割されます。
代わりに、比率は調和と比率を作成するために使用され、それはいくつかの異なる方法で解釈できます。
黄金比は数学に基づいていますが、創造的な方法で適応させることができます。 パルテノン神殿の場合、黄金比が設計コンポーネントの高さと配置を決定します。 さらに、黄金比図をその上に配置する方法はいくつかあります。
出典：Archinect
出典：Esther Sugihto on Medium
出典：GoldenNumber.net
黄金比とウェブサイトのデザイン
あなたが数学に興味があるか、頭が爆発しようとしているかにかかわらず、黄金比はデザインの観点から少し理解しやすいです。 あなたは重労働をしました。 次に、基本的なオーバーレイを使用して、Webコンポーネントを完全に快適なものにします。
黄金比とレイアウト
完璧な黄金比のレイアウトが必要な場合は、寸法を1：1.618に設定します。 たとえば、幅を960ピクセルに、高さを594ピクセルに設定できます。 黄金長方形は各辺が594ピクセルで、長方形が残りのレイアウト（594 x 366）を占めます。
電卓スープには便利な黄金比計算機があり、任意の項（A、B、またはA + B）を設定して、正しい黄金比の値を見つけることができます。
または、このタイプの2列レイアウトを使用することもできます。この場合、一方の列はもう一方の列よりもかなり広くなります。 整理されており、階層が明確に示されています。
出典：ナショナルジオグラフィック
ホームページは私のブログ投稿のコレクションであるため、これをWebサイトで使用しています。これは、ブログで最もよく知られているレイアウトの1つであると感じています。
しかし、私の意見では、エレガントなテーマで使用する対称的なレイアウトはより現代的です。
黄金比と間隔
黄金比は、デザインの要素を配置する場所、使用する比率、およびネガティブスペースを残す場所を決定するのに役立ちます。 これは簡単な例です。黄金比オーバーレイを上に配置しなくても、ほとんど見ることができます。
出典：Digiarts 2011
Photoshopでゴールデンスパイラルを適用すると、次のようになります。
繰り返しますが、黄金比は数学に基づいていますが、それを設計に適用することになると、それは完璧ではありません。 そのデザインは黄金長方形で作成されていないため、黄金スパイラルは通常の比率から外れています。 ただし、最小の要素とネガティブスペースだけでなく、デザインの最大の要素を配置する場所を設計者が選択するようにガイドする方法を確認できます。
黄金比オーバーレイを重ねて、同じデザインのさまざまな要素に適用することもできます。
出典：Lemongraphicによるブランディング。 Canvaの例。
黄金比と内容
黄金比のレイアウトと間隔を一緒に考えるとき、あなたはあなたのウェブサイトのどこにコンテンツを置くかを決めることを始めることができます。
ナショナルジオグラフィックのウェブサイトをもう一度見てみましょう。今回はCanvaの黄金比オーバーレイが表示されています。
コンテンツがスパイラルの中心線に沿って並ぶようにレイアウトが分割されます。 左側には、コンテンツの大きなブロックがあります。 右側では、コンテンツがより密になり、より多くのネガティブスペースがあります。 スパイラルの中央の渦巻きに向かって、2番目のナショナルジオグラフィックのロゴが表示されます。目が自然に行く場所に配置するよりも、ホームブランディングを推進するのに最適な方法はありません。
これは、ゴールデンスパイラルが、その主要コンポーネントを超えても、デザインを通してどのように目を導くことができるかを示す優れた例です。 これは、1ページに詰め込むコンテンツがたくさんある場合に便利です。 また、このように詰め込まれた詳細なデザインでも、そこにはまだネガティブなスペースがあることに気付くでしょう。
出典：HelmsWorkshopによるデザイン。 Canvaの例。
佳作：黄金比と画像
黄金比は、写真の構図にも使用されます。 黄金比は、黄金スパイラルを作成する代わりに、画像を6つのブロックに分割します。 このタイプのグリッドでは同じ黄金比が使用されます。セクションの幅と高さは1または0.618です。
出典：Canva
次に、交差点を使用してショットを作成します。 目標は、被写体または被写体の主要部分を交差する線の1つに配置することです。被写体を中央に配置せず、一部のブロックを空のままにする必要があります（ほとんどの場合、少なくとも–マクロ写真とクローズアップポートレート）。フレームのほぼすべてを埋めます）。 これにより、被写体が中央に配置されている場合よりも面白いポートレートを作成できます。
このルールに従うためのはるかに簡単でアクセスしやすい方法は、おそらく携帯電話の内蔵カメラまたはデジタル一眼レフにある三分割法グリッドを使用することです。
これがいとこの息子の写真です。 三分割法のグリッドをその上に配置して、被写体がフレームを埋める場所と埋めない場所を示しました。
また、ゴールデンスパイラルが主題をほぼ完全に包み込む様子を見てください。
黄金比は、三分割法グリッドに同じ長さと幅のセクションがあるため、三分割法とは異なります。 ただし、これは写真家が写真を作成または編集するときに一般的に使用するものであるため、非常に近く、非常に簡単です。
まとめ
黄金比はそのまま使用することも、目的に合わせて調整してサイズを調整することもできます。数学には厳格なルールがあるかもしれませんが、創造性にはありません。 最初から黄金比を使用して設計をガイドできますが、設計を開始した後に黄金比を使用して微調整や改善を行うこともできます。 目標は、比率にデザインを強制的に適合させるのではなく、比率をガイドすることです。
あなたのウェブサイトのレイアウトをさらにいじる準備はできていますか？ レスポンシブデザインを作成するためのDiviの新しい高さと幅のオプションの使用に関する記事をご覧ください。