どーも、こんにちは。okamotoです。
また週末がやってきました。明日から３連休ですね。
あまり予定もないので、家に引きこもって勉強しようと思います。
さて今日は、”デザインの基礎の基礎「レイアウトのルール」”について
まとめてみようと思います。
私のように今までデザインとあまり関わってこなかった方など、これを
知っておくと、デザインがグッとよくなるはずです。
目次
１．４つの基本ルール
２．余白について
３．まとめ
１．４つの基本ルール
レイアウトの基本ルールには次の４つがあります。
１）グループ化する
２）揃える
３）繰り返す
４）強弱をつける
１）グループ化する
レイアウトに入る前に、まず各要素の「グループ化」が重要になります
。関連のある情報を「グループ化」し、近づけるものは近づけ、離すも
のは離すことで、Webページ全体の構成が理解しやすくなります。
例えば、①はただ並べただけのレイアウト。各要素の関係性がいまいち
ピンとこないと思います。
しかし、②のように「グループ化」すると、いっきに理解しやすい良い
レイアウトに変わります。
２）揃える
各要素を配置する際に気を付けるべきことは”揃える”ということです。
②のように揃えるだけで、デザインにまとまりが生まれ、全体的にバラ
ンスが良くなります。
初心者によくありがちな例としては、見出しの下のテキストをインデン
トを下げて書き始めてしまうというものがありますが、左なら左に揃え
た方が閲覧者の視線をバラつくことなく、スムーズに引き付けるデザイ
ンにすることができます。
３）繰り返す
次に全体的な統一感を出すためには、同じようなパターンを繰り返し使
うことが有効です。Webページの閲覧者に安心感を与え、内容に集中して
もらうことができるでしょう。
例えば２の例ののように左揃えのパターンがあるなら、他の要素にも繰
り返し反映させましょう。
４）強弱をつける
最後に、各要素の重要性に応じてしっかり強弱をつけましょう。閲覧者
がパッと見ただけで、どの要素が一番重要なのか理解できるぐらいコン
トラストをはっきりさせることが大切です。
２．余白について
これまでのレイアウトの基本ルールができたら、余白について考えてみ
ましょう。
さて、余白とはなんでしょうか？
辞書で引いてみると・・・
「字や絵などが書いてある紙面で、何も記されないで白く残っている部
分。」
出典：デジタル大辞泉
とあります。Webページで考えるなら、テキストや写真などのコンテンツ
がない部分ですね。
しかしWebデザインに限らずデザインにおいては、「残っている部分」で
はなく、「わざと残している部分」といえます。
余白を活かすも殺すもデザイナー次第、だと聞きました。
余白を上手く使うとコンテンツを目立たせることもできるし、Webページ
全体の構成の流れを作ることもできます。
３．まとめ
いかがでしたでしょうか？
早くこれら基礎をマスターし、余白を上手く活かせるWebデザイナーに成
長したいと思います。
by okamoto