デザインの４原則（書評：ノンデザイナーズ・デザインブック）

四行早見

• 近接：関連要素をくっつけて、他と離す→情報のグループ化
• 整列：左揃えで統一する→一体感・読み方の暗示
• 反復：ある要素を作品全体で繰り返す→一体感・視覚的面白さ
• コントラスト：大胆に区別する→視覚的面白さ・情報の組織化

良いデザインの広告や、洗練された書類を見て、ハッとさせられたことはありませんか？

そして、自分の作る書類やビラも、できれば読んだ人をハッとさせる、分かりやすいものであればいいと思いませんか？

本書には、レポート・記事・名刺・Webページなど、あらゆる情報媒体を、分かりやすく目を引くものにするノウハウが詰まっています。

その核となるのが、デザインの４原則。

近接・整列・反復・コントラストです。

一つ一つ見ていきましょう。

近接：関連要素をくっつけて、他と離す→情報のグループ化

近接は、関連する要素同士をくっつけて、他の要素と離す、という概念です。

以下の2つの例を眺めてみてください。

この中にグループ分けが存在すると、どちらで分かりますか？

右の例では、4個と10個の要素が互いに異なるグループを作っている。

 左の例では、ただ元素記号が並んでいるだけですね。

しかし右の例では、上4個、下10個の要素が、グループを形成していると一目で分かりますよね。

このように、関連する要素同士をくっつけると、情報をグループ化することができます。

そして、そのグループと他のグループの間を離すことで、それらが異なるグループであると、読者に一瞬で理解してもらうことができます。

さて、第１段階の近接を理解できたところで、次の段階である整列に進みましょう。

整列：左揃えで統一する→一体感・読み方の暗示

整列は、強い意図を持って、要素の揃え方を統一するという概念です。

以下の2つの例をご覧ください。

どちらの方が、より文字の流れを追いやすいでしょうか？

右の例では、縦の強いラインが、一体感と読み方の暗示を生む。

二つの架空論文のタイトルが並んでいますが、左の例ではスタンダードな中央揃え、右の例では全ての要素を左揃えにしてあります。

左揃えにすると、要素同士が強い縦のラインで結ばれて、一体感が出ます。

加えて、上から下に、どこをどの順番に読めばいいのかが、中央揃えに比べて一目瞭然です。

このように、意図的に左揃えを用いることで、要素に一体感を与え、読者に読み方を暗示できるのです。

さて、整列を理解したところで、続いては第３の概念、反復です。

反復：ある要素を作品全体で繰り返す→一体感・視覚的面白さ

反復は、ある要素を作品全体で繰り返すという概念です。

以下の例を見てみましょう。

どちらの方が、情報が分かりやすく構成されていますか？

右の例では、赤いゴシック体という反復要素が、記事全体をまとめている。

左の例では、前述の近接と整列を用いて、記事をまとめています。

右側の例では、そこからさらに赤いゴシック体という反復要素を設定しています。

この赤色が、記事の見出しや小見出しを本文と区別するのに役立っています。

加えて、最後の箇条書きでも、点を赤くしてあります。

こうして、箇条書きもこの記事の一部であると認識させることが容易です。

このように、反復を用いると、要素を一体化し、視覚的な面白さを加えることができます。

さて、反復を理解したところで、いよいよ最終段階のコントラストへうつりましょう。

コントラスト：大胆に区別する→視覚的面白さ・情報の組織化

コントラストは、強調したい要素を、他と大胆に区別するという概念です。

次の例をご覧ください。

二つの記事で、注目に値すると感じるのはどちらでしょうか？

右の例では、「原始人」がことさらに強調され、目を引く。

左の例は、先ほど反復を加えた記事の例ですね。

右の例では、そこからさらに、タイトルの「原始人」を強調しています。

コントラストの「大胆に区別する」とは、強調したい文字の、大きさ・フォント・色などを他と大きく変化させることです。

このことで、重要な情報が視覚的に面白くなります。

しかもその重要性が一目で分かるようになります。

加えて、反復の際に用いた、赤いゴシック体は、反復要素であると同時にコントラスト要素でもあります。

赤いゴシック体である小見出しは、重要事項として本文と明確に区別されています。

このように、コントラストを用いて、情報に階層を生むことも出来るのです。

まとめ

• 近接：関連要素をくっつけて他と離す→情報をグループ化する。
• 整列：左揃えで統一する→一体感と読み方の暗示を与える。
• 反復：ある要素を作品全体で繰り返す→一体感と視覚的面白さを与える。
• コントラスト：大胆に区別する→視覚的面白さと情報の組織化を与える。

この４原則を用いれば、あらゆる情報媒体において、より分かりやすくて目を引く表現が可能になります！

本書には、私の拙い例よりはるかに優れた、幾多のデザイン改善例が載っています。

この記事で、デザイン４原則の可能性に目から鱗が落ちたあなた。ぜひ、ご一読ください。

ちなみに、この記事では、全ての例で「左が改善前、右が改善後」という配置をしています。

これは４原則の反復にあたり、2〜4つ目の例で、無意識にそう読むだろうと想定して配置しました。

どうですか、４原則。強力でしょ？

本書を読んで、あなたの強大な武器にしましょう。 

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