これだけでOK!デザインの基本4原則【近接・整列・反復・コントラスト】

デザインの教科書といえば、というくらい有名なこちらの本を参考に【デザインの基本4原則】を解説します。

参考文献:ノンデザイナーズ・デザインブック [第4版]

Is this book for you?

この本の基本原則に従えば、あなたの作品が、もっとプロらしく、組織化され、一体化され、おもしろくなることを保証します。

そしてあなたは、新たな力を獲得したことを実感することでしょう。

p10

デザインの4つの基本原則

近接

近接の基本的な目的は、組織化です。

p32

まずはダメな例から。すべてのテキストが縦方向に等間隔に配置されています。

近接ができていない例

これを見出しごとに近づけるとこんな感じに。たったこれだけでかなりわかりやすくなったと思います。

近接ができている例

近接は、情報伝達の速度を飛躍的に向上させます。わざわざ文字で書くことなく、それらがグループであることを暗示してくれます。

近づけるだけで組織化ができる

整列

整列の基本的な目的は、ページの一体化と組織化です。

p54

整列ができていない例

一見問題がなさそうですが、整列をすればもっとよくなります。

整列ができている例

整列はデザインに信頼感を与えます。わざわざ線を引くことなく、見た目を整えてくれます。根拠なく配置するのではなく、ほかの要素との視覚的なつながりをもつようにしましょう。

見えない線を意識しよう

反復

反復の基本的な目的は、一体化視覚的なおもしろさを加えることです。

p68

反復は暗黙のルールを相手に伝えます。見出しは○色で反復、箇条書きは□で反復など、ルールを作ることで見る人が構造を理解しやすくなります。

反復して一貫性を持たせよう

コントラスト

コントラストお互いに密接に関連する2つの基本的な目的があります。

一つは、ページにおもしろみを作りだすことです。もう一つは、情報の組織化を支援することです。

p84

コントラストがない例

コントラストは変化量の落差です。2つの項目が正確に同じでないのなら、コントラストを強めて違いを強調しましょう。フォントを変える、色を変える、サイズを変えるなどやり方はさまざま。コントラストは私たちの目を引きつけます。

コントラストがある例

まとめ

  • 近接:同じグループは近づけよう
  • 整列:見えない線を意識して整えよう
  • 反復:スライドのルールを決めよう
  • コントラスト:異なるものは対比させよう