ノンデザイナーズ・デザインブックのまとめ(4つの基本原則とは?)

HowTo

本業を頑張ってる方をWebデザインを通して後押ししたいということに気付かされ、デザインの入り口について調べてみました。

大体のブログでこの『ノンデザイナーズ・デザインブック』が良いと書いてあったので、早速購入してみました。

結果、デザインについて無知な私には『ハッ』とさせられる1冊でしたので情報をまとめておきます。

デザインの4つの基本原則は下記のとおりです。

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

これら4つの基本原則をレイアウト例を見ながら深掘りします。

1:近接 (ノンデザイナーズ・デザインブック)

近接 トルーパー

まずは、『近接』についてです。

近接の原則とは、関連する項目をまとめてグループ化することです。

before(名刺レイアウト例)

名刺のレイアウト例

初心者がデザインした作品は、語句や絵柄が、あちこちにばらまかれ、四隅を埋め、空白がいっさいできないように多量の空間を占める傾向があります。

たしかに、上のレイアウトの場合、見落としがないか、あちこち見回してしまいます。

after(名刺レイアウト例)

名刺のレイアウト例

関連する要素を近接させてグループ化すると、こちらのように生まれ変わります。

この名刺は組織化され、情報がはっきり伝えられるようになりました。

近接は、関係があることを意味するのです。

ただ空いているという理由だけで、中央や隅に何かを貼り付けてはいけないことがわかりました。

2:整列 (ノンデザイナーズ・デザインブック)

整列 スター・ウォーズ

次に『整列』についてです。

整列の原則とは、ページ上の全てのものを意識的に配置しなければならないということです。

ページ上の全ての項目が、なにかほかのものと視覚的に関連していなければなりません。

名刺レイアウト例

名刺のレイアウト例

すべての要素を右へ動かして、整列方法を一種類にしたら、たちまち情報がより組織的になりました。
(あわせて、『近接』でグループ化も忘れず実施)

テキストを右ぞろえか左ぞろえにすれば、テキストを結び付ける透明な線がはるかに力強くなります。

ちなみに、中央ぞろえは、初心者にもっとも一般的に使われる整列方法です。

失敗の危険がなく、安心感を与えるからです。

注意点としては、同じページで2種類以上の文字ぞろえを用いないことです。
(たとえば、中央ぞろえと右ぞろえを同じページで使うようなこと)

3:反復 (ノンデザイナーズ・デザインブック)

反復 トルーパー

次に『反復』についてです。

反復の原則とは、デザイン上の何かの特徴を作品全体をとおして繰り返すということです。

反復させる要素としては、太いフォント、太い罫線、ビュレットの種類、デザイン要素、色、フォーマット、配置などが考えれます。

名刺レイアウト例

名刺のレイアウト例

下の例では、強くて太い書体という反復要素を加えました。

視線が2つの要素を行ったり来たりするのに気付くはずです。

それが反復のポイントなのです。

レイアウト例

レイアウト例

強い反復要素が、内容を非常に明確に示しています。

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

おもしろそうに見えれば、読んでもらえる可能性が高くなるのです。

4:コントラスト (ノンデザイナーズ・デザインブック)

コントラスト ベイダー

最後は、『コントラスト』についてです。

コントラストの原則とは、読者の目をページに引き込むために、作品のさまざまな要素にコントラストをつける、ということです。

2つの項目が正確に同じでないのなら、本当に異ならせるのです。

書体の選択、線の太さ、色、形、サイズ、空きなどでコントラストを付けましょう。

before(ニュースレターレイアウト例)

ニュースレターのレイアウト例

before(ニュースレターレイアウト例)

ニュースレターのレイアウト例

タイトル・大見出し・小見出しに、より強く太い書体が使われています。

どれほど目を強く引き付けるか実感できるはずです。

まとめ

まとめ トルーパー

4つのポイントを知れば、自ずとそれに近づいたデザインが作れる気がしてきました。

この4つを知っていることで、『私は最低限の知識がある』と思いながら、デザインに没頭できるので、かなりの自信になってくれます。

デザイナーでなくとも、あらゆるデザインに触れることの多い現代にはピッタリの1冊です。

また、私のように、『デザインに関して興味はあるけど全く無知な方』におすすめの本でもあります。

デザインに興味はないけれど、最低限の知識を、身につけたい人ももちろん。

最後に、レイアウト例はご紹介した限りではなく、他のレイアウト例も紹介されていますので、ぜひ手にとって確認してみてください。