WEBデザイナー講座その④ 箱とバランスを意識する

前回の講座で少しふれましたが、

web・広告・チラシのデザインとは「箱を並べる作業」が基本となります。

各要素をまとめて「箱化」をすると、バランスがとりやすくなる!

「箱ってなんだ?」というと、簡単に言うとこういうことです。

見た目がよろしくないデザイン

上記のデザインは、おそろしいぐらいバラバラですよね。

これを、前回の講座で触れた「左揃え・中央揃え・右揃え」のルールを交えながら、

少し整えてみたいと思います。

■少しだけ整えてみる

どうでしょう?少しは見れるようになったのではないでしょうか?

どこの要素が、どういう揃えになっているかを、1度考えてみてください。まずは揃えを意識することが、デザインの第1歩となり、今後デザインをどういった形にまとめるのかのヒントになります。

 

さて、肝心の箱化ですが、下記の通りになります。

■箱化したらこうなる

 

このように、各要素を箱化してイメージしてみて、「揃え」のルールに従い、きれいに並べることが、デザインのコツです。

  1. 文字やイラスト等の要素を「揃え」のルールに従い、揃える
  2. 各要素を、箱化して考える。
  3. 箱化した要素を、さらに「揃え」のルールに従い、揃える

ひたすらこれの繰り返しとなります。

しかし、上記の様に並べるだけでは、まだまだ「美しいデザイン」とは到底呼べません。

実はこれでも「バランスが悪い」のです。お気づきのあなたはセンス◎です。

空間を均一に整えてあげると、さらにキレイに!

箱化した各要素と要素の間や、画像端との隙間を、同じ間隔に整えてあげるともっときれいに見えます。

ちなみに、デザインの世界では各要素間の隙間(余白)のことを「マージン」と呼びますので、覚えておきましょう。

隙間を意識して、均一に整えてみると、こんな感じになります。

■各要素の隙間を整えてみる

■各要素の隙間を図にするとこんな感じ

さて、お気づきの方がいらっしゃると思いますが、例えば、「感謝されて、健康に!」という文字。各要素の「大きさ」は自由に変更してかまいません。それがデザインであり、センスが問われる要素になります。

そして、その「余白」を均一の大きさの余白で整えると、デザインはキレイに見えるようになります。

「余白」を意識して、各要素の大きさや位置を整える。

これが、デザインレイアウトの基本となります。

「余白」と「バランス」については、黄金比や白銀比、プラチナ比など、深く掘り下げれば無限大に比率について話せるのですが、この辺はセンス頼りになる感覚的な分野なので、本講座が成熟したころに、余談として解説をします。

次回は、装飾と、要素の優先順位について解説をしたいと思います。