けいブログ

プログラミングとお金の知識を身につけていくブログ

デザイン4つの原則

  

ノンデザイナーズ・デザインブック [第4版]を読んで得た知識をざっくりまとめておきます。特にデザインの原則についてです。

 

原則

4つの原則

デザインには「近接、整列、反復、コントラスト」の4つの原則がある。良いデザインにはこれらの原則が適用されている。どれか一つが欠けてはいけない。

 

デザインの目的

なんのために原則を使う必要があるのかという原則の目的の前に、デザインそのものの目的を考える。

デザインの目的は情報に興味を持ってもらい、情報を伝えること。

情報に興味を持ってもらうためには何を主張しているのかがわからないぼんやりとしたデザインや、空白が少なく窮屈なデザインではいけない。また情報を伝えるためにはどこから見て、どういう流れで見ればいいのか構造がはっきりしている必要がある。

どちらにしてもユーザーにストレスを感じさせないことが重要。

 

4つの原則の目的

4つの原則を適用する目的は情報を組織化すること。組織化することによって、情報に一体性が生まれ、論理的な構造や流れを把握しやすくなる。

各原則は一つずつ適用する。近接→整列→反復→コントラスト

 

近接 

近接とは関連している情報を近づけることによってグループ化すること。逆に関連していない情報は明確に遠ざける。

近接が適用されていなければ他の原則の意味もなくなるため、どの原則よりも先に適用する。 近接だけで組織構造を作ることができる。

  

整列

整列とはデザインに使用する全ての要素を意識的に配置すること。要素同士を引き離したとしても、それらが規則的に並んでいれば、どちらも同じものの一部であることがわかる。

左揃え、右揃え、中央揃えも意識的に使うこと。左揃え、右揃えは力強い洗練した印象を与える。逆に中央揃えは弱い、静か、安心感といった印象を与える。

無秩序な情報よりきちんと並んで構造化している情報のほうが伝わりやすい。

 

反復

デザイン上のフォントや線、色などの何らかの特徴を作品全体で繰り返すこと。各要素がばらばらに配置されていたとしても、反復されている部分があれば情報に一体性が生まれる。

また反復は視覚的な面白さを加えることもできる。

1ページの作品はもちろん複数のページを扱うときに反復は不可欠である。

 

コントラスト

要素同士が同じではないなら、色や書体、線、サイズなどをはっきり異ならせること。コントラストの言葉の意味は対比、対照である。

ページの中で一番興味を持ってほしいもの、重要なものを異ならせることで強調する。

コントラストによって目を引くデザインを作れるだけでなく、ひと目で構造を把握しやすくなる。

 

まとめ

原則を学んだとしても優れたデザインを作れるとは限らない。ただし原則を学んで使えるようになると最低限のデザインを作ることはできる。原則を使える状態というのは、良いデザインのどの部分で原則が適用されていて、良くないデザインのどの部分に原則を適用すればいいか、指摘できること。そのためには原則を知り、様々なデザインに触れて真似することが大事。

 

 

デザインチェックリスト

最後に原則に基づいたチェックリストを作ってみました。

  • どこから読み始めてどこで読み終わるか?
  • 一目で見たときに、情報を区別できるぐらい見やすいか?
  • 関連している情報を近づけているか?
  • 情報が関連していない場合、余白を作っているか?
  • 情報が無秩序に配置されていないか?
  • 意識して揃え方を使い分けているか?
  • 情報に一体感はあるか?
  • 重要な情報、伝えたい情報をはっきり異ならせているか?

 

参考 

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

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

 

 

f:id:kei610:20200630150336p:plain