Design Stock

デザインのアレコレ

  1. HOME
  2. レイアウト
  3. デザインの基本原則②:「整列」で美しく洗練されたデザインにしよう

デザインの基本原則②:「整列」で美しく洗練されたデザインにしよう

こんばんは !TAKAです。

今日はずっと前に紹介したデザインの基本原則の続きです

前回は「近接」でしたが、今回紹介するのは4つの基本原則

  1. 近接
  2. 整列
  3. 反復
  4. コントラスト

の中の3つ目「整列」です!

人間は不思議なもので規則正しく揃っているものを見ると、本能的に「美しい」「綺麗だな」と感じます。

皆さんも何か要素がバラバラに配置されているのを見て、違和感を覚えたり不愉快に感じたりした経験があるのではないでしょうか?

ということで今回はそんな「整列」の効果や方法について解説したいと思います!

 

整列の原則って?

f:id:mtk-hcwj:20180303160857j:plain

レイアウトの基本は要素同士を揃えることです。

整列しているものを美しいと感じる人間の特性をデザインにいかすことで、安定感やまとまった印象を与えることができます。

上の図を見てください。

左側は赤い点線を基準線にして要素が規則正しく並んでいます。

一方、右側は基準線がわからず、どこか不安定で見栄えの悪いデザインになっています。

人間の脳はとても優秀で、ほんの少しのズレているだけでも違和感を覚えます。

逆に要素同士がきちんと揃っていることにより、読み手は力強い透明な線を感じ取ることができます。

そして、その線がレイアウトに力強さをもたらしてくれます。

様々な揃え方

f:id:mtk-hcwj:20180303162221p:plain
出典:http://excel-chirashi.com/shimen-soroeru.html

揃える場所は主に以下の6つです。

  • 左揃え
  • 右揃え
  • 中央揃え(左右)
  • 上揃え
  • 下揃え
  • 中央揃え(上下)

デザインの目的や媒体に合わせて揃える場所を決めましょう。

また、要素の固まり(グループ)同士を揃える時は、間隔にも注意しましょう。

中央揃えは意図を明確に

f:id:mtk-hcwj:20180228232005j:plain

中央揃えは安定感をもたらすことができますが、レイアウトとしては少し弱く見えてしまいます。

なぜなら、他の揃え方と違い明確な一本の線をレイアウトから感じ取ることができないからです。

読み手としては明確な基準線が見えた方が制作者の意図を理解しやすくなります。

デザインではまず左右上下どちらかで揃えることを検討してみましょう。

揃える方法

要素同士を揃える方法は以下の2つです。

補助線

f:id:mtk-hcwj:20180303170434j:plain

illustratorなどのグラフィックツールには補助線を引く機能がついています。

自分で補助線を引き、それに沿って要素を配置する方法です。

グリッド

f:id:mtk-hcwj:20180303171043j:plain

こちらもグラフィックソフトに標準でついているグリッド機能を使います。

グリッドの大きさは図版や文字サイズから計算しましょう。

あまりにもグリッドが細かすぎると読み手が基準線を見つけづらくなるので注意してください。

まとめ

今回はデザインの基本原則「整列」について解説しました!

デザイン制作では意識的に要素同士の関係性に注目して揃えるようにしましょう。

整列は見た目を美しくするだけでなく、デザイン全体にまとまりをもたらしてくれます。

ぜひ今日ご紹介した例を参考にしてデザイン制作に取り組んでみてください。

今日はここまで

バイバーイ