デザインはセンスじゃない

先日、マコなり社長のこちらの動画を見ました。

 

www.youtube.com

 

3:33〜のやりとりで、衝撃を受けました。

 

マコまり社長

「デザインは生まれ持ったセンスではなくて、全部論理なんですね。」

 

!?

 

マコまり社長

「ぜひ皆さんにはノンデザイナーズ・ブック

っていうのがあるんで、読んで欲しんですけれども。」

 

・・・

 

早速、動画で紹介された本、

Robin Williams『ノンデザイナーズ・デザインブック[第4版]』

マイナビ出版、2016年)

を読んでデザインについて勉強しました。

www.amazon.co.jp

 

 

デザインの4原則

この本によると良いデザインには、

必ず見られる基本原則が4つあります。

  • 近接の原則
  • 整列の原則
  • 反復の原則
  • コントラストの原則

これらは互いに関連しており、

1つだけを使うことは滅多にないそうです。

 

近接の原則

目的 

近接の原則とは、

関連する項目をまとめてグループ化する

という原則です。

関係する項目を物理的に近づければ、

それらはまとまったグループに見えます。

つまり近接の原則の目的は、

組織化することなのです。

 

実用例

例えば、下の2つの名刺を比べて、

どちらが見やすいでしょうか。

A)

f:id:jagaimobaron:20200404082451p:plain

B)

f:id:jagaimobaron:20200404082724p:plain

 

B)の方が関連する情報がまとまっているため、

読みやすいと思います。

近接の原則を使うだけで、

わかりやすさが大幅に改善されます。

  

気をつけるポイント

近接の原則では、

以下のやり方を戒めています。

  • ページ上に個別の情報を作りすぎない
  • 要素間に均等な空白を作らない
  • 関連しない項目は離して配置する
  • 意味もなく空白に何か貼り付けない

要するに、

無秩序に情報を並べてはいけない、

情報を意味のあるまとまりにする、

ということです。

 

整列の原則

目的 

整列の原則とは、

ページ上のすべてのものを

意識的に配置しないといけない

という原則です。

目的は、情報の組織化と一体化です。

 

目的だけ書くと難しく思えます。

しかし言い換えれば、見やすくするために、

ただ整理整頓するだけです。

例えるなら、

散らばった子供のおもちゃを片付けて、

見やすくかつ取り出しやすくすること、

に似ています。

 

実用例

C)

f:id:jagaimobaron:20200404083415p:plain

 

D)

f:id:jagaimobaron:20200404083457p:plain
 

D)の方が見やすいのではないでしょうか。

理由は、全ての項目の始まりが、

1本の線で引けるほど整列されているためです。

この活字でできた線を

ベースライン(活字の基準線)

と呼びます。

 

ベースライン

ベースラインは、整列の原則を使う上で、

とても重要となる考え方です。

例えとして、下の図をみてください。

 

D)

f:id:jagaimobaron:20200404083457p:plain

 

E)

f:id:jagaimobaron:20200404083708p:plain 

 

左揃えの方が中央揃えよりも、

ベースラインをはっきりと見ることができます。

 

中央揃えは、結婚式の招待状など

フォーマルな場面でも使用します。

しかし、それ以外では余程の意図がない限り、

使わない方が無難です。

 

気をつけるポイント

整列の原則では、次の2つを戒めています。

  • 同じページで2種類以上の文字揃えを使わない
  • 意味なく中央揃えにしない(やるなら意図的に)

まずは、はっきりしたベースラインを意識する。

デザインを考える上で、これが重要になります。

もしベースラインを崩すのであれば、

整列の原則を理解した上で崩すと

よいデザインになります。

 

反復の原則

目的 

反復の原則とは、

デザイン上の何かの特徴を

作品全体を通して繰り返す

原則です。

言い換えれば、

デザインの一貫性

とも言えます。

 

反復の原則は、

作品全体を一体化させ、

作品に面白さを与えます。

これが反復の原則の目的です。

 

統一感を持たせる例 

サンプルとして、喫茶店のメニューを

反復の原則を使って作りました。

 

f:id:jagaimobaron:20200404092309p:plain


繰り返し同じ書き方にすることで、

統一感が生まれています。

  

気をつけるポイント

反復は、やりすぎるとかえって逆効果になります。

コントラストを意識して、くどくならないよう

気をつけましょう。

 

コントラストの原則 

目的

コントラストの原則は、

読者の目をページに引き込むために、

作品の様々な要素にコントラストをつける

原則です。

この目的は、

ページに面白みをつけること、

情報の組織化を支援すること

の2つです。

 

実用例

f:id:jagaimobaron:20200404083457p:plain

先程の名刺に

コントラストを加えてみます。

f:id:jagaimobaron:20200404093528p:plain

 

変更点は以下の通り。

  • 「氏名」と「会社名」は太字
  • 「氏名と「会社名」のフォントを変更
  • 他の情報は細字
  • 会社のロゴ追加
  • 連絡先に目を引かせるために下部にライン

コントラストを加えることで、

相手に伝えたい情報を

強調させることができます。

 

気をつけるポイント

違いを際立たせないと、

衝突が生まれてしまい、

読者に違和感や不快感を与えてしまいます。

コントラストの原則で大事なことは、

大胆にはっきりと違いをつけることです。

 

感想

デザインの法則はとてもシンプルで、

わかりやすいものでした。

ポスターや名刺などを見るときは、

ぜひ法則を思い出してみてはいかがでしょうか。

 

デザインの法則を取り入れるだけで、

見栄えの良さが格段に変わります。

私もブログを書くときなどに取り入れていきたいです。