ウェブデザインにおけるヴィジュアルのバランスを実現する5つの方法とその要因
Post on:2011年9月22日
sponsors
エレメント同士を水平に配置したり、垂直に配置したり、またそれが対称だったり非対称だったりなど、ウェブデザインでヴィジュアルのバランスを実現する5つの方法とバランスに大きな影響を与える5つの要素を紹介します。
Developing Balance in Web Design
[ad#ad-2]
下記は各ポイントを意訳したものです。
はじめに
もしあなたのウェブサイトのデザインがヴィジュアル的にバランスがとれていないなら、あなたのサイトは混乱に陥っているようにユーザーは感じるものです。そして、心地悪く感じさせるでしょう。
あなたのデザインは魅力的であり、ユーザーにリラックスして見回してもらえるようにするべきです。それを達成する最も良い方法はヴィジュアルのバランスです。
ヴィジュアルのバランスとは、デザインエレメントのバランスをとるだけです。
通常バランスは二つ以上のものを見た目の重量で調整します。デザインの重量はフィジカルな重量と非常に似ており、それが非常に小さいものであっても非常に重要なポイントとなることがあります。物理的なオブジェクトの重量とデザインエレメントとそれぞれのエレメントのヴィジュアルの興味は同じで、オブジェクトの重さが他のデザインエレメントを引っ張り、他の物理的なオブジェクトに影響を与えます。
デザインエレメントのヴィジュアルに興味を与えるようにするには、二つの要因があります。
- どのようにエレメント同士のバランスをとるか
- どのようにエレメントがもつプロパティをつかうか
この二つを使いこなすことで、効果的なバランスをヴィジュアルに与えることができます。
バランスの5つのタイプ
ウェブページにおけるヴィジュアルのバランスは、デザインエレメントがお互いに相互に作用する多くの異なるタイプがあります。
これらの異なるタイプはあなたがデザインする上で、エレメントが持つ重力を利用して組織化を行い、ユーザーが快適に感じるように使用することができます。
バランスを実現するには、基本的には5つの方法があります。
- 水平のバランス
- 垂直のバランス
- 放射状のバランス
- 対称のバランス
- 非対称のバランス
水平・垂直のバランス
ヴィジュアルの興味を管理する素晴らしい方法は、中央の軸から水平あるいは垂直にバランスをとることです。
水平のバランスはエレメントを左と右に互いにバランスをとり、垂直のバランスはエレメントを中央の軸の上から下へバランスをとります。
放射状のバランス
放射状のバランスはエレメントを中央の軸からとる代わりに、中央のポイントから放射状にバランスをとります。基本的には中央の軸の周りにエレメントを配置します。サンバーストのような感じになります。
対称・非対称のバランス
よく見かける水平・垂直・放射状のバランスと組み合わせることができるバランスが対称・非対称のバランスです。
対称のバランスは構図の両側がお互いの鏡像になっています。対称は非常にフォーマルなバランスで、グリッドレイアウトにも相性がよく、ユーザーにも快適なバランスを提供します。また、Responsive Web Designのように表示サイズに合わせてレイアウトが変更になる場合もバランスが容易なため、人気が高くなっています。
非対称のバランスはおそらくもっとも普通のバランスです。本質的に対称のバランスとは反対で、エレメントはお互いにバランスをとられており、正確に互いから配置されません。非対称のレイアウトは高いヴィジュアルヒエラリティを提供することができるので、対称より面白いものができます。
非対称は構図にバランスがない、ということではありません。エレメントが互いに影響されないように配置されていることを意味します。
[ad#ad-2]
バランスの5つのプロパティ
構図内のそれぞれのオブジェクトは、それがどのように他のオブジェクトと関連しているかという特性と同時に、自身のプロパティも持っています。バランスの主要なプロパティは、サイズ、カラー、シェイプ、バリュー、ポジションの5つです。
これらのプロパティのそれぞれが個々に対称のバランスをつくるために使用できます。また、組み合わせることで非対称のバランスをつくります。これは一つが変化することで他に影響を与えるということです。
サイズ（大きさ）
大きい空っぽのオブジェクトはもっとも軽いヴィジュアルのウェイトを持っており、より小さいもので満たされるか、密度の高いオブジェクトでバランスを保つことができます。
例えばコンテンツエリアとサイドバーがあるブログで、オブジェクトは二つのはっきりとしたサイズを持っています。コンテンツエリアはサイドバーより通常大きいです。これらのバランスをとるには、コンテンツエリアにはホワイトスペース、サイドバーにはヴィジュアル的に重みのあるものを加え、二つのバランスをとります。
デザインで対称のバランスをとりたいときは、エレメントのヴィジュアルの重さに関わらず、同じ大きさであることを確認することが必要です。
カラー（色）
構図におけるオブジェクトのカラーは、そのオブジェクトをより軽くより重くすることができます。より暗いカラーはより重く、より明るいカラーはより軽くなり、例えばユーザーの注目を必要とするオブジェクトにはイエローよりレッドがより重くなります。
もしも暗いカラーのエレメントと多数の明るいカラーのエレメントのバランスを保とうとしているのであれば、バランスの他のプロパティを調整するのではなくエレメントの背景カラーを調整するとうまくいきます。
シェイプ（形状）
シェイプはそのオブジェクトの形状のことで、構図のバランスを劇的に変えることができる特性です。曲がりくねった形、ぎざぎざの形など非常にきれいな直線はヴィジュアル的に非常に面白いです。
しかし、あまりにも複雑な形はバランスをとるのが困難で、同様の複雑な形とバランスを保つことになります。
バリュー（明度）
コントラストは構図のバランスで強い要因です。オブジェクトのコントラストが強いと、それだけで重さを与えることができます、低いとそれだけヴィジュアル的に軽くなります。
コントラストの高い低いはオブジェクトのバランスをとるのにも一役買います。一つの素晴らしい方法は、コントラストのないエレメントをコントラストのある背景カラーやテクスチャで配置することです。グラデーションやドロップシャドウをエレメントのコントラストを下げるために加えることもできます。
ポジション（位置）
ポジションは大きい要因です、カラー・サイズ・シェイプ・バリューと異なるのはエレメントから離れてバランスをとるプロパティであるということです。
大きいオブジェクトが小さいものよりより重いですが、中央の軸により近いものはより重くなります。言い換えると中央の軸により近いオブジェクトはより遠いものに比べて重さがあるということです。
sponsors
