D
DigiSchool
コース一覧カテゴリブログ
ログイン無料で始める
D
DigiSchool

デジタルマーケティングとWeb制作のスキルを身につけて、キャリアを加速させましょう。

カテゴリ

AIWebデザイン広告運用SEOMEOLP制作HP制作SaaSECデザイン

サービス

  • コース一覧
  • カテゴリ一覧
  • ブログ
  • 無料会員登録

サポート

  • 利用規約
  • プライバシーポリシー

© 2026 DigiSchool. All rights reserved.

← 実践Webデザイン - Figma完全マスター講座
3 / 12
レッスン 3
30分

デザインの4原則 - 近接・整列・反復・コントラスト

デザインの4原則 - 近接・整列・反復・コントラスト

デザインの4原則とは

ロビン・ウィリアムズが著書「ノンデザイナーズ・デザインブック」で提唱した、デザインの基本4原則です。これらを意識するだけで、素人っぽいデザインから脱却できます。

1. 近接(Proximity)

関連する要素を近くに配置し、関連しない要素は離して配置するという原則です。

  • 1名刺デザインでは、名前と肩書きを近くに、電話番号とメールアドレスを近くにグループ化します
  • 2Webサイトでは、見出しと本文の間隔(8-16px)より、セクション間の間隔(48-80px)を大きくとります
  • 3カードUIでは、画像・タイトル・説明文・ボタンを一つのまとまりとして近接させます

近接の実践ポイントは「余白のメリハリ」です。関連要素間の余白を小さく、グループ間の余白を大きくすることで、情報の構造が視覚的に伝わります。

2. 整列(Alignment)

すべての要素を意図的に配置し、視覚的なつながりを作る原則です。何も考えずに要素を配置すると、散漫な印象を与えます。

  • 1テキストは左揃え・中央揃え・右揃えのいずれかに統一する
  • 2要素の端を揃えることで、見えない線(アライメントライン)が生まれる
  • 3Figmaのスマートガイドやグリッドを活用して正確に整列させる

特にWebデザインでは、12カラムグリッドに沿って要素を配置することで、自然と整列された美しいレイアウトが実現できます。

3. 反復(Repetition)

デザインの中で視覚的な要素を繰り返すことで、統一感と一貫性を生み出す原則です。

  • 1見出しのスタイル(フォント・サイズ・色)を統一する
  • 2ボタンのデザイン(角丸・色・パディング)を統一する
  • 3アイコンのスタイル(線の太さ・サイズ)を統一する
  • 4セクション間の余白ルールを統一する

反復を意識することは、デザインシステムの考え方にもつながります。ルールを決めて繰り返すことで、効率的かつ一貫性のあるデザインが可能になります。

4. コントラスト(Contrast)

異なる要素をはっきりと区別し、情報の優先順位を視覚的に伝える原則です。中途半端な差は避け、大胆に差をつけましょう。

  • 1**サイズのコントラスト**: 見出しは本文の2-3倍のサイズにする
  • 2**色のコントラスト**: 背景と文字色は十分な明度差を確保する(WCAG基準 4.5:1以上)
  • 3**太さのコントラスト**: 見出しはBold、本文はRegularで明確に区別する
  • 4**余白のコントラスト**: 重要な要素の周りに十分な余白を確保する

🏋️実践ワーク

1. 名刺デザインを作成し、4原則すべてを意識して配置してください

2. 既存のWebサイトを観察し、4原則がどう適用されているか分析してください

3. 悪いデザイン例を作成し、4原則に基づいて改善してください

📝まとめ

デザインの4原則は、あらゆるデザインワークの基盤となる考え方です。近接で情報をグループ化し、整列で秩序を生み、反復で統一感を出し、コントラストで優先順位を伝える。この4つを常に意識しながらデザインに取り組みましょう。

← 前のレッスン
次のレッスン →

レッスン一覧

1Figmaとは?Webデザインツールの選び方2Figmaの基本操作 - フレーム・シェイプ・テキスト3デザインの4原則 - 近接・整列・反復・コントラスト4配色の基礎 - カラーパレットの作り方5タイポグラフィ - フォント選びと文字組み6コンポーネント設計とバリアント7Auto Layoutで効率的なレイアウト8レスポンシブデザインの実践9プロトタイプとインタラクション10デザインシステムの構築11開発者への引き継ぎ(Dev Mode)12ポートフォリオサイトの実践制作