【デザインの4原則】近接・整列・反復・対比

概要

Webデザインについて勉強していた際に、教材やWeb上の記事で「デザインの4原則」というテクニックが扱われていることが多く、この機会に理解を深めるためアウトプットしておく。

※各画像はAdobe XDで作成しました。

4つの基本原則

デザインを通して情報を伝える手段には以下の4つの基本原則が存在する。

• 近接
• 整列
• 反復
• 対比

近接

• 関係する情報と情報を近くに配置することで、直感的にそれらが同一グループの情報であることを伝えられる。
• 他のグループ間との距離を大きく取ることで情報同士の境界が明確になる。
• 大事なポイントは「余白」をうまく使うこと。

整列

• 要素を揃えて配置し、レイアウトを整えることで情報の構成が理解しやすくなる。
• 左右の整列は「左揃え」「中央揃え」「右揃え」に分けられる。
• 上下の整列は「上揃え」「中央揃え」「下揃え」に分けられる。
• 必要に応じて近接と組み合わせる。

反復

• ある特徴を繰り返し一貫性、統一感を持たせる。
• 統一感を持つことで、グループ化をさらに分かりやすくできる。

対比

• 情報の優先度を付けたい時や、異なる要素・情報であることを伝えられる。
• フォントの色や大きさなどに変化をつけることで優先度に差を付けることができる。