デザインの4原則 01 近接・整列・反復・対比(詳細)

更新日: 2026-09-29

1. 近接(Proximity)

定義: 関連する要素を近づけてグループ化し、情報同士を関連づける。
目的: 情報の関係を見た目で示し、構造を整理して、瞬時に理解できるようにする。
例(元資料): 商品紹介で、商品画像・商品名・キャッチコピーを近づけ、別の商品との間には余白をとる → 商品情報が一目で正しく伝わる。
NG(元資料): 商品画像と商品名の間が必要以上に空いている → どの名前がどの画像のものか瞬時に分からない。
コツ

「グループ内の間隔 < グループ間の間隔」を必ず守る(目安: 内側 8px なら外側 24px 以上)
線や枠で囲む前に、余白だけでグループを表現できないか考える
見出しは「上の段落」より「下の本文」に近づける(見出しと本文は同じグループ)
ラベルは入力欄の近くに(フォーム)

2. 整列(Alignment)

定義: 要素を一定のルールに沿って配置し、視認性を上げる。
目的: 全体を見やすくし、要素同士の繋がりを直感的に分からせる。
コツ

すべての要素を、どこかの見えない線(左端・中心線・右端)に揃える
迷ったら左揃え(日本語・英語は左から読むので視線の起点が揃う)
中央揃えは短いもの(見出し、LP のヒーロー、ボタン1つ)に限定。長文の中央揃えは読みにくい
1画面で揃え方を混在させない
数値の表は右揃え(桁が揃う)
グリッド(12カラムなど)を使うと自然に揃う

3. 反復(Repetition)

定義: 同じ要素を一定のルールで繰り返し、一貫性を持たせる。
目的: デザインの一貫性、ブランドの認識、「今どのサイトにいるか」を直感的に伝える。
対象: 色、フォント、アイコン、ボタンの形、見出しのスタイル、カードの作り、余白の取り方
コツ(元資料): 反復の中にあえて反復しない要素を1つ入れると、強調やアクセントになり緩急がつく
実務

同じ役割 → 同じ見た目(主要ボタンは全ページで同じ色・形)
違う役割 → 違う見た目(リンクとボタンを似せない)
これを仕組みにしたのがデザイントークンとデザインシステム、部品として配るのが shadcn/ui

4. 対比(Contrast)

定義: 要素に強弱をつけ、優先度を視覚的に伝える。
目的: 重要な情報を明確にし、注目を集め、優先順位を直感的に伝える。
例(元資料): セール広告で「●%OFF」を大きく打ち出す。
注意(元資料): 近接・整列・反復で整理されると、コントラストが弱くなり、一番伝えたい情報が目に止まらなくなることがある → 最後に対比で調整する。
強弱の付け方

手段	例
大きさ	見出し 32px / 本文 16px
太さ	700 / 400
色	primary の塗りボタン / 控えめな outline ボタン
明るさ	foreground / muted-foreground
余白	大事なものの周りを広く空ける
形・位置	画面上部・中央、視線の起点
コツ

差ははっきりつける。中途半端な差は「ミス」に見える(16px と 17px など)
1画面で「一番」は1つ(主要ボタンも1つ)
強調を増やすほど、何も目立たなくなる

4原則の関係

近接 ─┐
整列 ─┼─▶ 情報が整理される ─▶ 対比 で「一番大事なもの」を立たせる
反復 ─┘