黄金比をサイトのデザインに取り入れる簡単な3つの方法

黄金比をサイトのデザインに取り入れる簡単な3つの方法を紹介します。

黄金比

黄金比とは、「1:1.618」からなる比率で、最も美しい比率と呼ばれています。
赤線は、黄金螺旋。

その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。

黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。

黄金比を矩形に使用する

サイトで使用する画像などの矩形に黄金比を適応します。

サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。

黄金比を横長の矩形に使用

黄金比を適応した矩形の画像

黄金比を縦長の矩形に使用

黄金比を適応した矩形の画像

黄金比をマージンに使用する

レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。
その際、1つの値を基準とし、それ以外のマージンに対して黄金比を用いて算出する例を紹介します。

黄金比を元にマージンのパターンを算出:例1

5, 8, 13, 21, 34, 55, 89, 144, 233、を適応したスケール

黄金比のスケール:例1

黄金比を元にマージンのパターンを算出:例2

6, 10, 16, 26, 42, 68, 110, 178, 288 を適応したスケール

黄金比のスケール:例2

グリッドシステムとは、下記のエントリーを参照ください。
グリッドシステム -サイトへの有効活用方法

黄金比をパーツに使用する

サイトに使用するパーツのデザインに黄金比を導入します。

黄金比を見出しの画像に使用

黄金比を使用した見出しの例

左横に罫線を入れた見出しの例です。
罫線を「1」マージンを「1.6」として黄金比を導入しています。
2番目のものは罫線が太いので、点線にしています。

黄金比をナビゲーションの画像に使用

黄金比を使用したナビゲーションの例

よくあるナビゲーション画像をサンプルにしています。
文字の高さに対して、「1」「1.6」の黄金比のマージンをもたせ、画像を作成しています。
2番目のものは、さらにグラデーションの開始地点を黄金比で算出しています。

sponsors

top of page

©2024 coliss