WEBデザイン基礎

デザインの「揃える・近づける・繰り返す・対比」って?

WEBデザイン基礎

デザインが「なんか整ってない」原因は?

  • 文字や画像がバラバラに見える

  • 情報が散らかっていて読みにくい

  • 「頑張って作ったけどダサい…」

そんなときは、この4つの原則を意識するだけで一気に改善します!

デザインの基本4原則とは?

デザイン初心者でも“すぐ実践できて効果バツグン”なのがこの4つ👇

① 揃える(整列)

→ 要素をきちんと揃えると、それだけでプロっぽく!

  • 文字・画像・ボタンを左揃え・中央揃えなどで統一

  • 余白や間隔も「揃ってるかどうか」がカギ

NG例:見出しが左、本文が中央、ボタンが右

OK例:すべて左揃えでスッキリ!

 ② 近づける(近接)

→ 関連するものはまとめて、距離で意味を伝える!

  • タイトルと説明文

  • 画像とキャプション

  • ボタンとその説明

NG例:関係あるのにバラバラに配置

OK例:ひとまとまりで読みやすい!

③ 繰り返す(反復)

→ 同じパターンを繰り返すと「統一感」が生まれる!

  • 同じ見出しには同じフォント・サイズ

  • 同じボタンには同じデザイン・色

 NG例:ボタンごとに色や形がバラバラ

OK例:全ページで同じパターンで統一!

④ 対比させる(コントラスト)

→ 重要な部分は“あえて差をつけて”目立たせる!

  • 見出しは大きく・太く・濃く

  • ボタンは背景と反対色で目立たせる

  • 重要じゃない情報は小さく薄くしてメリハリを

NG例:全部同じフォント・サイズでぼやける

OK例:見出しがパッと目に入り、本文もスッと読める!

この4つを意識するだけで、こう変わる!

Before(意識してない)

After(4原則を意識)

バラバラ・詰め込み感あり

整っていて読みやすい

情報のつながりが不明

グループが明確で理解しやすい

目立たせたい部分が弱い

強調と抑制が効いてわかりやすい

どんなデザインでも使える万能ルール!

  • バナー、LP、プレゼン資料、SNS投稿、チラシ…

  • どんな媒体でも、この4原則を使えば「伝わるデザイン」に!

まとめ:迷ったらまずこの4つをチェック!

✅ 揃ってる?

✅ 近づけてる?

✅ 繰り返してる?

✅ 対比できてる?

このルールは初心者のうちから習慣化すれば、ぐんぐんスキルアップできます!

タイトルとURLをコピーしました