デザインの基本原則である 「近接」「整列」「対比」「反復」は、デザインの勉強をスタートさせる中で基本事項となります。
本記事ではその基本原則について解説します。
1. 近接（Proximity）
近接とは
近接とは、関連する要素を物理的に近づけることで、グループ化すること
を指します。
これにより、ユーザーは情報の関係性を直感的に理解できます。
グループ化
余白の調整
不要な要素を取り除き、適切なスペースを確保することで、情報の整理と強調を図ります。
セクション分け
コンテンツを論理的なセクションに分け、それぞれを視覚的に区別します。
実例
一般的な名刺のデザインを例に挙げると、
①会社名/店舗名
②肩書・氏名
③住所・SNS
とそれぞれセクション分けして、グループ化して配置してあります。
2. 整列（Alignment）
整列とは
整列は、要素を視覚的に整列させることで、一貫性を生み出す
ことを指します。これにより、デザインが整理され、読みやすくなります。
ラインによる整列
アンダーラインを基準に整列させます。
グリッドによる整列
グリッドを元にレイアウトを整えます。Webサイトのレイアウトを決める際に使うことが多くあります。
要素を揃える
左寄せ、中央寄せ、右寄せなど要素ごとに統一します。
実例
DIsney＋やNetflixのような映像配信サイトは多くの情報量を扱うので、整列によって視覚的に分かりやすくなっています。
カード型レイアウトまたはタイル型レイアウトと呼ばれており、
- 情報が区切られていて探しやすい。
- 沢山の情報を一度に表示できる.。
などのメリットがあります。
3. 対比（Contrast）
対比とは
対比は、異なる要素を際立たせるためにコントラストを使用すること
を指します。
これにより、重要な情報が強調され、視覚的な興味を引きます。
色を使った対比
色の明暗や補色を使って対比します。
文字サイズでの対比
文字の大きさや太さ、フォントの違いで対比します。
形状での対比
要素の大きさ、形状により対比させます
実例
広告のデザインでは、キャッチフレーズを太字の大きなフォントで表示し、背景と対照的な色を使って強調します。
4. 反復（Repetition）
反復とは
反復は、デザイン全体に一貫性と連続性を持たせるために要素を繰り返すこと
を指します。
これにより、デザインの統一感が生まれます。
フォントの統一
各サイト内の記事セクションで使用するフォントは基本的に統一します。
パターンの作成
各サイトごとにレイアウトパターンを決めて一貫性を持たせます。
ナビゲーションの一貫性
コーポレートサイト及び一般的なWebサイトでは、ロゴ、カラーパレット、フォントスタイルなど全てを要件定義して、マーケティング資料やウェブサイトで繰り返し使用します。
まとめ
デザインの4原則「近接」「整列」「対比」「反復」は、様々な制作物を作成するための基本ガイドラインです。
これらのデザインの基本原則は日常で当たり前に適用されていますが、意識して使用することで、ユーザーが情報を容易に理解できるデザインを実現できます。
さまざまなデザインでこれらの原則を意識して活用してみてください。
デザインを本格に学びたいと思った方は
Webデザイン習得には色々な方法があり、特に独学よりもスクールに入って短期間で要点を覚えて、現場でという形が最短距離です。私もデザインスクール出身ですが、現役のデザイナーが講師じやなかったので古いスキルを学んで終わりで、結局現場で苦労して学びなおしました。
まずは無料説明会を開催している現役の技術が学べるスクールで検討してみてください！
▼おススメのスクール▼
デザスタの強み
- 現役の講師によるフルマンツーマンの授業
- 講師の方が現役のため古い技術ではなく新しいノウハウを学ぶことができる。
- 少人数制のマンツーマンのため手厚いサポート
- 初心者の方も安心して受講できるフォロー体制
- 何度でも理解できるまで個別に質問OK
- 授業以外でも講師と個別にZoomができる
- デザインやコーディング以外にSEOなど200本以上の動画コンテンツが見放題。
- 場所を選ばず参加できるオンライン型学習
- 短期間でWebデザインを習得し自身のポートフォリオが作れるように!!
