【超単純】デザインの基本4原則をわかりやすく図解します【センス以前に大事なこと】

デザインの基本
デザインセンスがないのか、自分で作ったレイアウトがすごく見づらい・・・

こういった方に向けて「これさえ知ってればデザインが劇的に良くなる基本ルール」を解説します。
 
デザインはセンスが必要と思いがちですが、実はルールを知ってるか否かで出来栄えに大きく影響します。

この記事を読み終えたら、ご自身が作ったレイアウトやプレゼン資料を改善したくなると思います。

デザインの4原則とは

大見出し1
 
デザインをする際の基本的なルールです。

この4つを守って資料やレイアウトなどを作ると、見る人にとてもわかりやすく伝わります。

しかもルールに従えば見栄えが良くなるので、デザインする側にも助けになります。

では、それぞれの原則を図解しながら解説します。

その①近接<仲間は近くに>

大見出し1
 
近接とは関係するもの同士をまとめることです。
 
互いに関連する要素をグループ分けしてあげると、はっきりわかりやすくなるからです。
 

  • どこから見始めるか
  • 次はどこを見るか
  • どこで終わりなのか

見てる人の視線の流れを作ることができるわけですね。

近接のコツ

大見出し1
 

  • 情報をグループ化する
  • 近づけるものと離すものを明確にする
  • 空間を意識する

近接の良い例と悪い例

大見出し1
 
同じグループを近づける、違うグループを離す
 
それだけで自然と余白ができて見やすくなりますよね。

近接の注意

大見出し1
 
ひとつのページにグループを作りすぎないことです。

余白のある方が見やすくなるため、ページ数を増やすことも考えてみてください。

その②整列<意識して並べる>

大見出し1
 
ページ上のすべての項目の位置を揃えることです。

揃えることで視覚的なつながりがうまれます。

  • 文章、項目をすべて左揃えにする
  • 文章、項目をすべて中央揃えにする
  • 文章、項目をすべて右揃えにする

このブログは左揃えですね。

もし1文でも右揃えがあったりすると、私たちは違和感を感じるはずです。

整列のコツ

大見出し1
 

  • 揃えるための透明な線を意識する
  • 関連する情報を近づける
  • 右揃えと左揃えは中央揃えより美しく見える

整列の良い例と悪い例

大見出し1
 
単純に配置を揃えるだけで記載されてる情報を理解しやすいですよね。

整列の注意

大見出し1
 
デザイン初心時はひとつのページで2種類以上の文字揃えを使わないことです。

すべて左揃えにするか、中央揃えにするか、右揃えにするか、選択します。

その③反復<規則的に繰り返す>

大見出し1
 
反復とはデザイン上の特徴を繰り返すことです。

  • 太いフォント
  • 太い罫線
  • 配色

デザインに一貫した特徴があると内容が理解しやすいですよね。

例えばこのブログ記事も、同じ見出しの形を繰り返してるので「次の章に進んだ」ということがわかると思います。

デザインを見てる人が視覚的に認識できることであれば何でも構いません。

反復のコツ

大見出し1
 

  • 書体、色、形など色々な要素を繰り返す
  • 見てる人の視線が迷わないことを意識する
  • 意図的に繰り返してることがわかるぐらい強調する

反復の良い例と悪い例

大見出し1
 
悪い例のように一部だけを変えると、そこに何か意味があるのかな?と無意識のうちに感じてしまうと思います。

それだと内容を理解するのに時間がかかってしまいますよね。

反復の注意

大見出し1
 
要素をしつこく感じてしまうほど繰り返さないことです。

全体とのコントラストを意識してみてください。

その④対比<強弱をつける>

大見出し1
 
対比とはページ上の様々な要素にコントラストをつけることです。

そうすることによって読者の眼をページにひきつけることができます。

  • 大きなフォントと小さなフォント
  • 太い線と細い線
  • 寒色と暖色

強弱があるとつい視線をおくってしまいますよね。

対比のコツ

大見出し1
 

  • 強調したい部分を決める
  • 文字サイズ、フォントの種類、色味などを大きく変える
  • 対照が際立っているかを意識する

対比の良い例と悪い例

大見出し1
 

メリハリをつけることで情報が整理されるだけでなく、印象に残ってくれますよね。

対比の注意

大見出し1
 
似てるもの同士で対比させないことです。

以下のような似てる要素で対比すると「衝突」がおきてしまいます。

  • 茶色の見出しと黒い本文のフォント
  • 太い線とさらに太い線

対比は大きく差をつけることで効果を発揮します。

まとめ

以上、デザインの基本4原則の解説でした。

  1. まとめる
  2. 揃える
  3. 繰り返す
  4. 対比させる

この4つのルールを守ると自分のデザインが見違えます。

この記事を読み終えたら、この記事で紹介してるデザインツールを使ってデザインしてみましょう。

デザインを始めるんだけど何を使えばいい?基本の素材サイトを5つまとめました【これさえあれば無料でおしゃれなデザインが可能】