デザインの４原則

## デザインの４原則とは

デザインの４原則とは、デザインの要素を「見やすく」「分かりやすく」「整って」見せるための４つの基本的な考え方を指す。

一般的に、以下の４つの要素からなる。

---

1. 「近接」 (Proximity)

“関連する情報は近くにまとめてグループ化する”

〇 この原則の目的

配置の遠近によって、情報の関連性を表し、ひとまとまりの情報として理解しやすくする。

〇 例

ECサイトにおいて、商品の一覧を表示する際に、それぞれの商品に対して商品名と商品の説明、価格が表示されるが、
関連する要素を近づけることで、どれがどの商品の情報であるかが分かりやすくなる。

---

2. 「整列」 (Alignment)

“文字や画像の配置を基準にそって整える”

〇 この原則の目的

見出しや文章の始まりの位置を揃えることで、視線を迷わせないようにし、ユーザーが読みやすくなるようにする。

〇 例

エンジニアスキルの一覧画面にて、スキルそれぞれをカードとして並べるときに、
３×３のグリッドで両端をそろえて配置することで、画面全体が整って見えて見やすくなる。

---

3. 「反復」 (Repetition)

“色・形・文字・配置などのデザインルールを繰り返して使用する”

〇 この原則の目的

同じ役割のものに同じデザインを適用することによって、サイト全体に統一感が生まれる。
また、ユーザーも直感的に、どのサイトのどの項目か、ということが理解しやすくなる。

〇 例

学習した内容をまとめるページにおいて、並列した要素を並べる際には、
見出し（H2）、引用、見出し（H3）、内容、見出し（H3）、内容、（あれば）画像、というルールで並べる。

---

4. 「対比」 (Contrast)

“重要なものとそうでないものに明確な差をつけて目立たせる”

〇 この原則の目的

大きい文字と小さい文字、太い文字と細い文字など、情報の表示に差をつけることで、
ユーザーの視線を誘導し情報の優先順位を伝わりやすくする。

〇 例

新装開店する喫茶店にて、ポスターを作成する際に一番伝えたいこと（開店日）を明確にしたうえで、
開店日には大きな文字を使用して中央に配置し、その他の情報は小さな文字を使用する。

---