ウェブデザインの黄金比 黄金分割法のウェブサイトデザインへの応用

ウェブデザイナーとして、プロジェクトを開始するときは、ウェブページのレイアウトについてよく検討します。現在、多くの人がグリッド CSS フレームワーク (960、blueprint など) を使用する傾向がありますが、独自のレイアウトを設計する必要がある場合もあります。この記事では、黄金比理論をウェブデザインに適用する方法について説明します。関連するテクニックのほとんどは、他のデザインやアートワークにも適用できます。もちろん、主にウェブサイトのデザインレイアウトを対象としています。

黄金比

黄金比とも呼ばれる黄金分割は、2 つの要素の比率を表すために使用される数学用語であり、その値はおよそ 1.618 に等しくなります。黄金比はルネッサンス時代から存在しています。当時の芸術家たちは黄金比を高く評価し、さまざまなデザイン作品に広く使用しました。何百年もの間、黄金比は建築、彫刻、絵画などの分野で見られ、今日ではデジタルアートにも応用されています。

黄金比は数学用語なので、最初は理解しにくいかもしれません。簡単な例で説明できます。2 つの線分 a と b があるとします。その長さの値 a+b/a が a/b に等しい場合、つまり a+b/a=a/b=1.618 の場合、黄金比が成立し、a と b の間の点が黄金比点になります。

黄金比の応用

960 ピクセル幅の Web デザイン レイアウトを例に挙げます。この Web ページを 2 つの列に分割する場合、黄金分割点を見つけるにはどうすればよいでしょうか。

とても簡単です。上記の数式から、a+b/a=1.618 であり、960px は a+b の値に等しいことがわかります。したがって、960/1.618=593 を使用するだけで、593px の位置が黄金分割点になります。 2 列の Web ページ レイアウトの場合、左の列の幅を 593 ピクセルに設定し、右の列の幅を 367 ピクセル (960 - 593) に設定できます。

この方法は、固定されていない柔軟な Web ページ レイアウトにも適用できます。同じ計算式を使用して対応する値を取得し、それを相対単位 (パーセンテージなど) で表現する限り、この種の Web ページ デザインは最も自然に感じられます。 Web ページをさらに 3 列または 4 列に分割することもできます。

もちろん、黄金比はデザイン上のガイドにすぎません。このルールを破っても、Web デザイン ページの自然なバランスを維持できるのであれば、問題ありません。一般的なルールとして、黄金比は 5:3 に置き換えられることがよくあります。あまり正確ではありませんが、より直感的で使いやすいです。

三分割法

前述のように、Web ページを設計するときには、特定の設計理論に固執するべきではありません。Web デザインは 1.618 の値に完全に従う必要はありません。三分割法は、黄金比を適用するシンプルで実用的な方法です。

三分割法とは、2 本の水平線と垂直線を使用して構図を水平方向と垂直方向に 3 つに分割することです。これら 4 本の線の交点は 4 つの点を形成し、これをキーポイントと呼びます。重要なデザイン要素は、この 4 つの場所に配置するのが最適です。多くのウェブデザインでは、無意識のうちに三分割法が使われています。例えば、ウェブサイトの重要な情報（ロゴ、ナビゲーションバー）は左上隅に配置され、重要度が少し低いコンテンツは右上隅に配置されることがあります。見出し、ボタン、リンクをどこに配置するかを検討するときは、三分割法をガイドとして使用します。もちろん、これを「厳密に従う」のではなく、柔軟に使用する必要があります。

黄金比長方形

Web ページを設計する際、Web ページはさまざまな機能に応じていくつかの長方形に分割されます。これらの長方形のサイズは黄金比に基づいており、多くの黄金長方形が形成されます。これらの長方形は、Web デザインのレイアウトで遭遇する混乱のほとんどを解決できます。たとえば、これらの黄金長方形を使用して、ホームページ上のフラッシュや画像を配置する場所を決定したり、サイドバーの位置や Web サイトの下部にあるコンテンツを決定することもできます。一部の電子商取引ウェブサイトでは、特に商品のディスプレイをデザインする際に黄金比の長方形を参照することがあります。

出典: designshack

出典: デザインボックス

元のタイトル: ウェブデザインの黄金比 黄金分割法のウェブサイトデザインへの応用

キーワード: ウェブページ、黄金比、カット法、ウェブサイト、計画、使用、1、プランナー、ウェブマスター、ウェブサイトのプロモーション、収益化