現代のデザインにおける黄金比の適用
理想的なWebページは機能的で調和のとれたものですが、最もベテランのWebデザイナーでさえ、デザインに自然な流れを与えるものをあなたに伝えるのは困難です。色とナビゲーションの理論があるにもかかわらず、完璧なWebページの審美的な要素の中で最も重要な側面が説明できないことがあります。それがなぜうまくいくのかはわかりませんが、時々うまくいくことがあります。それはすべて単純な概念のせいかもしれません.
文字通り自然な順序であなたのウェブサイトのデザインを支えることによって、視聴者はあなたのデザインがより面白くて本質的に楽しいと感じるかもしれません。この概念は 黄金比, 数学的概念の性質は従う、そして私たち人間は無意識のうちに完璧の表現として認識する.
ゴールデン何?
簡単に言えば、黄金比（別名 神聖な割合 または 中庸）は、自然とアートワークに繰り返し現れる数学定数です。.
式で表すと、 ある より大きい b, （a + b） で割った ある 等しい ある で割った b （ちょうど下の画像を見てください）、これは約に等しいです 1.618033987. ギリシャ語の文字「phi」で表されることが多いその数は、 黄金比.
（画像ソース：mathsisfun.com）
同じ理論を使って四角形を作ることができます。 金色の長方形. 黄金比に従う画像は、その比に従う長方形の中にきれいに配置できます。.
（画像ソース：creativeautomaton.com）
金色の長方形を作成するには、長方形の短辺の長さとなる数を選択してください。議論のために、500ピクセルとしましょう。 1.618を掛けます。結果、809ピクセルは、長方形の長辺の長さです。したがって、500 x 809ピクセルの長方形は金色の長方形です。それは黄金比に従います.
自然の美
実際には、科学者たちは、それが人間がとても好きな比率についてのものであるかどうかわからない。彼らが確信しているのは、私たちがそれをどれだけ好きかということです。研究は、それを黄金比により正確にするような画像へのわずかな変更でさえも見る人の頭脳に大きな影響を与えることを示唆している.
人間の顔もこの比率に従います。そして、その比率に真正面の人々の方が魅力的です。貝殻、古典的なルネサンスの傑作、古代からの建築、さらには人体の部分までが、指自体の比率に基づいてプロポーションされています。.
（画像ソース：in2visualdesign）
私たちの心の奥深くにあるものは、黄金比を美しいと登録しています。事実、芸術家や建築家は何千年もの間、故意であろうとなかろうと利用してきました。それは画像の中で主な言語です。結果は有機的で直感的で、ちょうどいい感じです.
神の構成
それでは、このマジックナンバーをWebページの構成にどのように使用しますか。数学はあなたの創造性が苦労するであろう息苦しい箱のように思えるかもしれませんが、黄金比は単に有用なガイドラインです。基礎となる基本的なガイドラインを作成することで、推測と配置からプロポーションと配置を除外することで、よりクリエイティブなスペースを得ることができます。.
ケージではなくツールとして考えてください。最も基本的には、コンテンツ領域とサイドバーのサイズと配置を指定するのに、黄金比を使用できます。固定幅レイアウトが最も簡単なアプリケーションです。金色の長方形を作成する方法で、レイアウト全体のサイズを決めます。.
グリッド/ブロック用
線によって作成された正方形は、コンテンツブロックになります。小さい方の長方形はサイドバーまたはナビゲーションバーです。四角形のサイズが決まったら、ナビゲーションバーの幅を判断するのは簡単です。.
- この例では、四角形は 525 ピクセル数 850 ピクセル.
- 525です ある そして850は （a + b）, そして b サイドバーの幅になります.
- 見つけるには b, 我々は単に差し引く （a + b）, 325です.
- したがって、サイドバーの幅は325です。.
サイドバーを上、下、または反対側に置いて、目的に合わせて長方形を反転させることができます。比率が保たれている限り、あなたのデザインは調和的に感じるでしょう。.
テキスト用
あなたが必要とする測定値を得るためのより速い方法があります、そしてそれはテキストコンテンツで適用することができます.
- あなたの文脈テキストがサイズ12であるとしましょう.
- 12を掛ける 1.618, 黄金比、そしてあなたは19.416を得るでしょう.
- 19または20のヘッダーテキストサイズは、黄金比に厳密に従います。.
黄金比はあなたの心が理解する言語であり、それと通信することによって、あなたのアイデアはより効果的に出くわすでしょう。あなたはそれに厳密に従う必要はありません。基本原理は十分です。画像サイズに対する比率の適用、テキストと画像の配置の関係、サイドバー内での分割の作成はすべて可能な概念です。.
グリッドワーク：サーズルール
数学がお茶ではない場合は、黄金比の概念を単純化することができます。の 三分の一のルール シーン内の関心点の配置を決定します。任意の画像を水平方向と垂直方向の両方に3分の1に分割します。あなたは9グリッドを得るでしょう.
（画像ソース：digital-photography-school.com）
3分の1の法則によれば、それらの線の交点（線が交差する場所）は、関心のある点にとって理想的な配置です。ページをスキャンしている人は、ポイントの近くに置かれたものに気付く可能性が高く、その区分は見やすくなっています。これらの3分の1をさらに3分の1に分割することで、より複雑な設計が可能です。.
（画像ソース：net.tutsplus.com）
一言で言えば、目は怠惰になり、重要な詳細を探す必要がなくなります。私たちの脳はこのようなものです。主要な画像、ニュースボックス、検索バー、その他の関心のある点を頂点の上または近くに配置することができます。このきちんとした小さなショートカットは、目にやさしく、重要なデータに惹かれるようにデザインされています。.
列とフォントサイズ：フィボナッチ数列
黄金比にリンクされているWebデザインのためのもう一つの簡単なツールは フィボナッチ数. フィボナッチ数列は0と1で始まります。前の2つの数を足し合わせて、次の数を数えます。 0、1、1、2、3、5、8、13、21、34… 等々.
ちょっとした数学は、連続したフィボナッチ数列間の関係が驚くほど黄金比に近いことを教えてくれます - 数列の中の任意の数をその前の数で割るとあなたはそれを推測します - - 1.618.
黄金比と同様に、フィボナッチ数を使用して、ヘッダーとコンテンツのテキストサイズの関係を決定できます。列の幅を指定するためにも使用でき、ブログやその他のテキスト密度の高いレイアウトで特に効果的です。合成は、フィボナッチタイル張りの概念に基づいて構築することもできます。この場合、タイルサイズはフィボナッチ数列を使用して構築されます。.
（画像ソース：Wikipedia.org）
ゴールデンスパイラルとコンテンツクラスタリング
黄金比とフィボナッチ数の両方を使用するもう一つの可能な方法は、 ゴールデンスパイラルとフィボナッチスパイラル. 黄金のらせんは、四半期ごとに黄金比に等しい倍率で拡大し、フィボナッチらせんはフィボナッチタイルを使用して形成されます。.
スパイラルは、数と比率自体が限り、アートワークで使用されてきました。理論的には、負の空間と視覚的な関心のある分野はスパイラルに収まるべきです。この優雅なレイアウトの中では、3分の3の法則と同様に、細部を探すために目は自然にらせんの中心に描かれます。.
（画像ソース：fabiovisentin.com）
スパイラルは、コンテンツ密度とクラスタリングのガイドラインとして役立ちます。彼らはあなたのウェブサイトのヘッダー画像、検索バー、およびツールバーの比率の基礎として役立つことができます.
店舗のホームページや写真のWebサイトなど、大規模なグラフィックを中心に構築されたフロントページに理想的な画像を選択するときは、金色のスパイラルとフィボナッチスパイラルの恩恵を受けることもできます。.
強力なメッセージは多くの場合サブリミナルであり、黄金比は自然の中で最も豊富なサブリミナル広告の1つです。神聖な割合を利用することによって、あなたはあなた自身にすべての人間が潜在的な魅力を持っているという自然な論理と有機的な優美さの端を与えます。黄金比はあなたの創造的な処分でまだ別のツールです.
もっと読む：
- Webレイアウトおよびオブジェクトへの黄金比の適用
編集者注： この投稿はによって書かれています クリスペンタゴ Hongkiat.comのために。 Chrisは、オンラインビジネスのパフォーマンスを向上させるための重要なテクノロジに関心のある、経験豊富なWeb開発者、デザイナー、インターネットマーケティング担当者です。Twitterで彼を見つけることができます。.
