デザインの4原則で誰でもデザインが上達！ -icon design

2022年07月05日(火曜日)

デザインの4原則で誰でもデザインが上達！

デザインの４原則は、近接（Proximity）、整列（Alignment）、反復（Repetition）、強弱（Contrast）から構成されるもので、デザインの４原則に則りデザインすれば、センスの有無に関係なく制作物の質は格段に向上します。
たとえあなたがデザイン経験のないノンデザイナーであってもです。

また、このデザインの４原則に則りデザインすることで、単に見た目が良くなるだけでなく、伝えたい情報が上手に伝えられるようになります。

デザインの４原則は単に見た目を良くするためのテクニックに留まらず、上手に情報を整理するための方法論でもあります。

Contents

1 近接（関係する情報を近づけてグループ化する）
2 整列（要素を揃えてレイアウトする）
3 反復（デザイン上の特徴を繰り返す）
4 強弱（情報の優先度を明確にし、違いを明確にする）
5 まとめ

近接（関係する情報を近づけてグループ化する）

関係する情報同士は近づける一方、関係性の乏しい情報は遠ざけて適切な余白をとります。そうすることで情報が整理され、直感的に情報の構成を伝えることが出来る様になります。

仮に下のようなメニュー表があったとします。その商品名はどちらに属するものか、どのような商品群があるのか何か直感的に理解しづらい気がしませんか？

下は近接という観点から、メニューを改善したものです。要素の関係性を考え、関係性が高いものは距離を近づけ、関連度が低いものは距離を離しました。

いかがでしょう？デザインも良くなったし、直感的に理解しやすくなったと思いませんか？

整列（要素を揃えてレイアウトする）

デザイン要素の色、フォント、位置などを揃えていきます。
色に関しては無彩色にキーカラーとなる有彩色を1,2色繰り返し使用する程度に、色数を減らすとデザインはまとまります。

フォントに関しては一つの画面の中で使用するフォントを統一させます。差をつける場合は、ウェイト（太さ）や、文字の大きさで変化をつけるとデザインがまとまります。

位置を揃える場合、左右の場合「右揃え」「左揃え」「中央揃え」を使用し、上下を揃える場合、「上揃え」「下揃え」「中央揃え」を使用します。しっかり位置を揃えることで見えない線を感じさせることができ、デザインはまとまります。
（ただ中央揃えは行頭が動いてしまうため、長文の場合かえって見づらくなってしまいますので注意が必要です。）

では、名刺のデザインを例にとって位置を揃えてみましょう。下は必要な情報を集めただけの状況です。

情報の関係性を考え、関係性が高いものは距離を近づけ、関連度が低いものは距離を離す「近接」の作業をした後は、それぞれ垂直方向、水平方向を揃えていきます。

デザインと言えるほどのことは何もしていませんが、随分スッキリして見やすくなったと思いませんか？

反復（デザイン上の特徴を繰り返す）

色やアイコン、線、レイアウトなどデザイン上の特徴を繰り返すことで、一貫性やリズム感が生まれデザイン全体に統一感が出ます。

下はリスト要素をそれぞれ異なるデザインにした様子です。どうもガチャついた印象を受けてしまいます。

下はリスト要素を統一し、同じデザインを反復させた様子です。

デザイン上の特徴を反復させることで、コンセプチュアルなデザインになり、ユーザーもメッセージを理解しやすくなります。

強弱（情報の優先度を明確にし、違いを明確にする）

見出しを大きくし、その説明は小さくするなど、情報の優先度を明確にすることで、緩急が生まれて情報が上手に伝えられるようになり、デザインが良くまとまります。

なんらかのコンテンツを作成する際も、下のように強弱がないとどこかのっぺりしたものになってしまいます。

下のように少し強弱を与えるだけで随分デザインの質はあがります。情報の優先度が明確になり読みやすくもなります。

まとめ

いかがだったでしょうか？冒頭でも触れましたが、デザインの４原則は単に見た目を良くするためのテクニックに留まらず、上手に情報を整理するための方法論でもあります。逆に言うなら、視覚的に情報が上手に整理されれば、デザインは良くなるとも言えます。

デザインの４原則

1.近接（関係する情報を近づけてグループ化する）
2.整列（要素を揃えてレイアウトする）
3.反復（デザイン上の特徴を繰り返す）
4.強弱（情報の優先度を明確にし、違いを明確にする）

物事の習得のプロセスを表す守破離という言葉があります。辞書に寄ると、

”「守」は、師や流派の教え、型、技を忠実に守り、確実に身につける段階。「破」は、他の師や流派の教えについても考え、良いものを取り入れ、心技を発展させる段階。「離」は、一つの流派から離れ、独自の新しいものを生み出し確立させる段階。”

とありますが、デザインの４原則はまさにこの「守」にあたる段階で、デザインの基本を身につける段階です。
世の中にはこのデザインの４原則に則っていない素晴らしいデザインが多くありますが、まさに守破離で言うところの「破」であり「離」です。
まず型を知ることが上達への近道であり、独自表現への第一歩となります。

配色のルールを知るとデザインがもっと上手になります。