デザインの黄金比とそれがあなたのブランドにとって重要である理由

公開: 2020-10-22

デザインの黄金比とそれがあなたのブランドにとって重要である理由

私たちのDNAとサルバドールダリの最後の晩餐の聖餐がペプシのようなブランドと共通していることを知っていますか？これらは、設計における黄金比の例です。黄金比は、視覚的に満足のいく結果を作成するために使用できる数学的比率です。そして、それは人為的な結果の問題だけではありません。黄金比は、自然全体、さらには人体全体に見られます。

デザインで黄金比を使用すると、人間の目に自然に心地よい構成になります。これはまさに、ターゲットオーディエンスにブランディングについて感じてもらいたい方法です。そのため、このブログでは、デザインの黄金比について詳しく説明します。

黄金比とは正確には何ですか？

2つの量は、それらの比率がそれらの合計の比率と同じである場合、2つのうちのより大きな量に対する黄金比を形成すると言われます。複雑すぎる？それを単純化した下の図を見てください。

黄金比は、神の比率、ファイ、および他のいくつかの名前としても知られています。何世紀も前に、何人かの観察的で好奇心旺盛な魂が、彼らの周りの自然の中で起こった驚くべきパターンを観察し始めました。植物の葉の配置、花びらの模様、松ぼっくりの棘が完璧に配置されている方法、そしてパイナップルの鱗さえ。彼らは、これらすべてがまったく同じパターンを持っていることに気づきました。上記のパターンは、1、2、3、5、8、13、21、34などになります。

このパターンは、フィボナッチ数列として知られるようになりました。 1つのフィボナッチ数とその前の数の比率を計算し始めると、常に得られる答えは1.61803です。これは、黄金比を得るために小数点以下3桁に切り上げられます。自然に人間の目に心地よいものだったので、この比率は多くの異なるタイプのアートワークに組み込まれました。モナリザから彫刻、写真、建築に至るまで、すべてがデザインの黄金比の例になりました。

黄金比の他のいくつかの例は、ハリケーン、カタツムリの殻、人間の顔（比率に最も近いものが最も美しいと言われています）、ミケランジェロによるアダムの創造、そして花のパターンにも見られます花びら。

デザインにおける黄金比の重要性

黄金比は、ほんの数例を挙げると、マーケティング資料、名刺、雑誌の表紙、Webサイト、さらにはポスターを作成するときに考慮することが重要です。それをデザインで効果的に使用する方法を見てみましょう。

デザインに黄金比を使用する

黄金比を持つ形状

黄金比に沿った形には、黄金という言葉が記号として追加されています。それらは、黄金長方形、黄金円、黄金スパイラル、および黄金三角形です。これらの形状を正しく組み合わせると、無視できないデザイン要素を作成できます。

タイポグラフィの黄金比

テキストを含むデザインを作成する場合は、常にタイポグラフィの階層について考える必要があります。これは、設計のベストプラクティスです。そしてこの目的のために、黄金比を使用して、フォントのサイズを設定する方法をガイドできます。

たとえば、最も重要なテキスト（A）、やや重要なテキスト（B）、およびそれほど重要ではないテキスト（C）の階層を把握する必要があるとします。最小のフォントサイズが10pxの場合は、これに1.618を掛けて、より大きくする必要があるフォントサイズのおおよそのガイドを取得できます。

画像を構成する際の黄金比

品質を犠牲にすることなくデザインをすばやく完成させるには、デザイナーにゴールデンスパイラルでデザインをオーバーレイするように依頼します。その後、さまざまな要素の正確な位置を確認し、実際に調和しているかどうかを判断できます。デザインの焦点は、ゴールデンスパイラルを使用して解決することもできます。これは、デザインで黄金比を使用すると、たとえば、最も注目を集めるように見出しを配置する方法を見つけるのに役立つ可能性があることを意味します。デザインがより多くのエネルギーを必要とする場合、この手法は、どの要素をシフトする必要があるかを確認するのにも役立ちます。

ロゴの黄金比

よく考えられたロゴはあなたのブランドにとって非常に重要です。正しく行われると、それはあなたのブランディングで最も簡単に識別できる要素になります。そして、ターゲットオーディエンスの頭脳を維持する上で大きな役割を果たします。これが、ロゴデザインで黄金比を無視してはならない理由です。それは、顧客の目を瞬時に引き付け、顧客があなたのブランドとつながるのにも役立ちます。

ペプシ、ツイッター、アップルなど、世界で最大かつ最も成功しているブランドのいくつかは、実際には黄金比に沿ったロゴを持っています。ロゴをデザインするとき、デザイナーはフィボナッチ数列を一連の円と考えることさえできます。次に、円を再配置して、ロゴのデザインの基礎としてグリッドを形成できます。これは上の例で示されているもので、ロゴがどのように円に配置されているかを確認できます。

レイアウトを選択する際の黄金比

さまざまな要素をまとまりのあるようにデザインに組み込むのは大変な作業です。特にランディングページやあなたのウェブサイトに関しては。ただし、黄金比は1日を節約するのに役立ちます。これを使用して、レイアウトに必要な寸法、および関連する各要素を配置する場所を決定できます。これを開始する非常に簡単な方法は、get getから1：1.618に従って寸法を設定することです。そして、今後そのフレームワークを使用します。これは、基本的な960ピクセル幅を使用し、それを1.618で割る最も実用的なアプローチです。ここで得られる答えは、デザインの高さです。

ウェブ上の黄金比とコンテンツ

黄金比は、テキストの列がどのように配置されるかを決定するためにも使用できます。ランディングページに最小限のテキストがあるかもしれませんが、これはあなたのウェブサイトに影響を及ぼします。たとえば、右側に狭いテキスト列があり、左側に広いテキストブロックがあるページは、視聴者の目を引き付けるだけではありません。また、最も重要な情報を強調しています。ピクセル幅が960のサイトの場合、これは、右側の列の幅が367ピクセル、左側の列の幅が593ピクセルであることを意味します。

レイアウトでは正確な黄金比が得られない場合がありますが、1：1.61の比率にできるだけ近づける限り、黄金比を組み込むことのメリットを享受できます。

この戦略のもう1つの利点は、読者が、含めるさまざまなタイプのコンテンツ（ビデオ、写真、テキストベースのコンテンツなど）をナビゲートするのに役立つことです。そして、これが多くの人気のあるサイト（Fast Company、BuzzFeedなど）でこのレイアウトの例を見つける理由です。

黄金比で要素の間隔を空ける

ホワイトスペースまたはネガティブスペースの重要性は、すべてのデザインブログで強調されています。これにより、デザインの要素が呼吸し、雑然と見えないようになります。とはいえ、その方法を理解することは必ずしも簡単なことではないこともわかっています。このネガティブなスペースをどこにどのように残すかを理解するのは難しい場合があります。

ただし、黄金比を使用する場合は、間違いなく良い出発点になります。また、参照点を持たずにこれを理解しようとすると非常に時間がかかる可能性があるため、絶対に避けましょう。上記の例をご覧ください。ネガティブスペースが必要な場所を決定するために正方形がどのように使用されているかを確認できます。

黄金比を使用して画像を切り抜く

黄金比をデザインに組み込む最も簡単な方法の1つは、それに応じて画像をトリミングすることです。持っているすべての画像に対してこれを行う必要はありませんが、特定の画像が重要であり、強調表示する必要があると思われる場合は、黄金長方形に切り抜くことができるかどうかをデザインに尋ねてください。写真を撮るときにこのテクニックを実装することもできます。金色の渦巻きは、画像の構成方法のガイドとして使用できます。

三分割法は何ですか？

この原則は黄金比に似ており、実装が簡単です。これは、結果が比率ほど正確ではなく、目に心地よいものになることを意味しますが。三分割法には、9つの部分からなるグリッドが含まれます。各パーツは、ルールに従って同じサイズになります。線の交点または線自体に焦点を当てることをお勧めします。これにより、バランスの取れた写真やデザインの結果が得られます。

写真の場合、ファインダーの上に方眼紙を置くと、撮影しているオブジェクトがページ上の長方形や正方形にどのように整列するかがわかります。これらの交差点は、写真の対象となる一次要素と二次要素をどこに配置するかについてのガイドラインとして機能します。

ルールにはいくつかの例外もあります。たとえば、ヘッドショットをまっすぐに行う場合は、顔を画面の中央に配置し、グリッド線を忘れるのが最適です。

黄金比と雑誌の表紙のデザイン

雑誌の表紙は、デザインの黄金比がいかに効果的であるかを示す良い例です。 SolangeKnowlesを特集した上記のComplexマガジンの表紙をご覧ください。この設計では、黄金比を使用して、正と負のスペースの比率を正しく決定します。これは、彼女の鼻の上部とほぼ額が上向きに傾斜していることでわかります。そして、彼女の鼻と目がどのように整列しているか。その結果、バランスが取れており、自然に人間の目に魅力的な画像が得られます。雑誌の表紙は読者を引き付けて問題を購入するものであるため、デザインの黄金比を含めることは非常に重要です。そして、それを、オーディエンスとの最初の接点として機能する任意の数のマーケティング資料と同一視することができます。

デザインで黄金比を使用するのに役立つツール

デザインに黄金比ルールを実装することに慣れるのは、最初は難しい場合があります。それで、あなたがあなたのデザインを成し遂げることについて考えるとき、ここに役に立つかもしれないいくつかのツールがあります。

PhiMatrix

これは、デザイナーが使用している編集ツールとうまく連携するオーバーレイソフトウェアです。これはプラグインではなく、実行中のデザインの上に配置できる透明なデジタルテンプレートです。これは、WindowsとMacの両方、およびさまざまなアプリでうまく機能します。

GRT電卓

GRT Calculatoreは、コンテンツのフォントサイズと幅を簡単に決定するのに役立ちます。これにより、設計者は画面上でさまざまなバージョンのフォントを試すことができます。

集中

WordPressでデザインを作成したい場合は、Focusが頼りになるツールです。これは、黄金比に完全に焦点を当てたWPテーマです。また、理想的な現代のWebサイトに必要な他の多くの機能も備えています。

ファイ電卓

これは、比率を計算するのに十分快適であれば、デザイナーを支援する素晴らしいMacウィジェットです。それはファイの計算を可能にします。また、ボックスの向きと形状について必要な情報を提供します。

ゴールデンミーンキャリパー

紙や帆布でデザインを行い、黄金比を使用したいですか？このツールは、それを実行するのに役立ちます。それは芸術家やデザイナーによって世界中で芸術的なバランスの完璧なダッシュを得るために使用されています。そしてそれは特に人体のあらゆる構成に役立ちます。

デザインの黄金比についての最後の言葉

黄金比が設計にとって非常に重要である大きな理由があります。それは実際に、あらゆる要素や構成の中で最も美的に魅力的な側面を引き出します。黄金比もあなたの周りのいたるところにあります。それはあなたの手のひらのラインにもあります！やりたいすべてのデザインで黄金比を使用する必要はありません。特定のニーズ、フォーマット、および/または含める必要のあるすべての要素が、それを許可しない場合があります。

しかし、可能な限りそれを組み込むことは、顧客の注意を引くための保証された方法です。結果として生じる変更はかなり微妙ですが、それらは「meh」から「amazing！」へのデザインを取ります。結局のところ、モナリザは彼女の魅力を失うことはありませんでした、今彼女はそうしましたか？