デザインコラム vol.

02

デザインの基本の4大原則「近接」「整列」「反復」「対比」とは？
デザインの 4 大原則とは？
デザインの4大原則とは……

「デザインの基本となる原則」
デザインを始めたばかり人はもちろん、ほとんどのデザイナーが意識して使っている原則です。この原則を守って制作すると、きれいで情報を正しくわかりやすく伝えるデザインを作ることができます。

・近接 ・整列 ・反復 ・対比
この4つがデザインの基本の原則となります。見やすいデザインはこの4つの原則が隠されています。

近接近接

簡単に言ってしまえば、近接とは「まとめること」です。
関連性のある要素をグループにまとめて 近くに 配 置し、反 対 に関連性の低い要素は余白や線などを用いて離して配置します。
要素ごとにグループを作り区切りを明確にすることで、受け手が瞬時に情報を理解しやすい表現にすることができます。

デザインコラム vol. 02

レッドブルーレッド¥13,000¥14,000¥13,000

SMLSMLS

Mブルー¥14,000L

レッドのグループS

M

L

ブルーのグループ

商品の情報をまとめて配置することで情報を正しく受け取れる

デザインの基 本の4大原則「近接」
「 整列」
「 反復」
「 対比」とは？

1/6

長い文章でイメージしてみよう
長い文章でイメージするとわかりやすいと思います。
長 い 文 章 が 何 の 区切りも なく文章に区切りがない

文章が内容ごとに区切られている

どこに何の内容が書かれているかわかりにくい

見出しで内容ごとに区切られていてわかりやすい羅列されているだけでは、どこに何についての内容が書かれているかがわかりにくいですよね。
これを解決するには、内容ごとに文章を区切って見出しをつけると思います。
そうすることで、受け手が 読むべ きところが わかりやすくなり、内容が正しく伝わります。これも「近接」のひとつの方法です。

要素の区切り方
要 素 ごとに グ ル ープ を 作 って区切る方法もさまざまです。3つ近接

要素の区切り方

余白で区切る

線で区切る

面で区切るグループの大小に準じて余白の大きさを変える要素の間に線を挟んだり要素そのものを囲む

背景の面に色を塗り中の要素は余白で区切るの方法を紹介します。

余白で区切る

まとまりの中の情報をグループにし、大きなグループ間は余白を大きく、小さなグループ間は余白を小さくとります。

線で区切る

要 素 間 の 間 に 罫 線 を 挟 むことで、両隣の要素は別のグループになります。

面で区切る

まとまりごとに背景の面に色をつけて、グループ間に余白を入れることで、区切られていることが伝わります。

デザインコラム vol. 02

デザインの基 本の4大原則「近接」
「 整列」
「 反復」
「 対比」とは？

2/6

整列

整列

整列とは「揃えること」です。
要素を各ポイントを基準にして秋に見つかる植物揃えて配置することで、統一感が秋に見つかる植物
どんぐり

どんぐり

生 ま れ、き れ いで 見 や す い デ ザ・ブナ科の果実の俗称

・ブナ科の果実の俗称・■■■■■■■■■■■■■■■■

・■■■■■■■■■■■■■■■■

インにすることができます。

まつぼっくり・松（マツ科マツ属）の果実のようなもの

まつぼっくり整 列 をするだ け でとて も 見 や・■■■■■■■■■■■■■・松（マツ科マツ属）の果実のようなもの
・■■■■■■■■■■■■■

すくなるため、デザインに必須と要素の配置場所や
文 章の開始 位置を揃えるも言える原則です。

複 数の要素を基準に沿って揃えて配置することで違和感を感じることなく見ることができる

整列のコツ
整列を守って制作するときは、視線の基準となる線を意識します。その線に沿って要素を配置することで、整列を守ったデザインを作ることができます。
デザイン制作ツールであるAdobe Illustratorを使用する場合は、ガイドや整列ツールを活用することで複数の要素の配置を揃える作業がしやすくなります。

どこを整列させるべきなのか
整 列をするといっても、どの要素をどう揃えたらいいかわから整列整列させる箇所

要素の情報

ない……という人は、まず下記のグループ同士の間隔

要素の向き■■■■■■■■■■■■■

箇所から整列させてみてはどうでしょうか。

■■■■■■■■■■■■■

デザインする際に、よく整列が■■■■■■■■■■■■■

使われる箇所になります。

・関連する要素のグループの情報
・要素のグループ同士の間隔■■■■■■■■■■■■■

揃えることでグループを認 識しやすくなる

間隔を均等にしてまとまりを出す

車の向きを揃えることでまとまりが出る

・要素の向きデザインコラム vol. 02

デザインの基 本の4大原則「近接」
「 整列」
「 反復」
「 対比」とは？

3/6

反復

反復

反復とは「同じ要 素を 繰り返すこと」です。
要素ごとにデザインのルールを繰り返し配置することで、見た目の統一感が生まれます。
規則性を持って要素を繰り返す

01

2 SummerSpring

304

01

0203

04

SpringSummerAutumnWinter

WinterAutumnことで、受け手はそれぞれの要素要素のグループごとに色を分けることでそれぞれの違いを明 確にすることができる同士に関連性があると認識します。
同じ 要 素 を 繰り返し 配 置 する

季節の項目という同じ要素のデザインを繰り返すことでとき は、デ ザインル ール も 繰 り

受け手に素早く情報を伝えることができる返します。そうすることで、同じ
要 素 だということを 瞬 時 に 理 解することができます。
反復する要素を色で分けることで、内容の違いを出しながら統一感を出すことも可能です。

ページをまたぐ反復

反復

ページをまたぐ反復

書 籍 など 複 数 ページ をまたぐ制作物の場合、タイトルや見出し、

01 title

ノン ブルな どの 位 置 や サイズ をタイトル

反 復 することで、受 け 手 が 迷 う

02 title

見出しことなく読 み進めることが でき、
書 籍 全 体 の 統 一 感を出すことができます。

ノンブル01

意 味 も なく、同じ 制 作 物 内 で異なるデザインにするのは避けま02

ページが変わっても同じデザインであればしょう。

受け手が迷わない

Web デザインの反復

反復

Webデザインの反復

Webサイトを制作するときも、同じ要素を反復しています。
ヘッダーやフッター、ボタンのpage title 1

デザインなど、すべてのページでメニュー
タイトル

page title 2

見出し

共通する要素は、反復することでWebサイト全 体 の 統 一 感を出すことができます。
コンテンツ幅

コンテンツ幅

タイトルや見出し、コンテンツ幅などの位置やサイズを反復することで、統一感を出すことができる

デザインコラム vol. 02

デザインの基 本の4大原則「近接」
「 整列」
「 反復」
「 対比」とは？

4/6

対比

対比

対比とは「コントラストをつけること」です。
複数の要素を比較して優先度を明 確 化します。要 素 の 優 先 度 に
よってデ ザイン に 強 弱 を つ ける
ことで、伝 え たい 情 報 に 視 線 をOPEN SALE
50%
50%OFF!!

1000円以上のお買い上げの方が対象です

集めることができます。

OPEN SALE

50 %OFF!!
1000円以上のお買い上げの方が対象です「50%OFF!!」が 優 先度が高いので大きく配置している

複 数の 要 素に優 先 度を 決 める
ことで、要 素のデザインにコント要素の優先度によってコントラストをつけることで伝えたい情報を目立たせられるラストをつけ、優先度が高い要素を目立たせます。要素の優先度を明確にすることで、要素間の関係性を表現し、情報をより効果的に伝えることができます。

ジャンプ率で印象を変える
デザイン上にある文字や画像の要 素 にお いて、大 き い 要 素 と小さい 要 素 の 大 きさの比 率 をジャンプ率と言います。
要 素 同 士 の 大 きさの比 率 が 大対比

ジャンプ率で印象を変える

ジャンプ率が高い

ジャンプ率が 低い

期間限 定new arrival

スペシャル
ハンバーガー

きいことを、「ジャンプ率が高い」、要素同士の大きさの比率が小さいこ とを、「ジャン プ 率 が 低 い」と言います。
タイトルを 強く言 い 表したり、含まれるアレルギー■■■■■■■■■■■■■■■■■■■■

Diamond ring
¥4 0 0,0 0 0 -560円

商品名を強く出して目立たせる
注釈 などは 小さくする

各要素の大きさの差が 少なく高級 感が出せる商品を強調してアピールするなどの 特 定の 要 素を 強 調したい 場 合は、ジャンプ率を高くすることで、その要素を目立たせます。
反 対 に、デ ザイン の 全 体 的 な統一感を優先したり、全体の要素を同じように見せたい場合は、ジャンプ率を低くします。

デザインコラム vol. 02

デザインの基 本の4大原則「近接」
「 整列」
「 反復」
「 対比」とは？

5/6

まとめ● デザインの 4 大原則とは、デザインの基本となる原則● 近接「まとめること」● 整列「揃えること」● 反復「同じ要素を繰り返すこと」● 対比「コントラストをつけること」

記事・資料制作｜株式会社SMC - POWER （https://smc-power.jp/）
本資料の再配布、資料を加工した転載や配布、販売は禁止させていただきます。
利用で発生した障害や事故などに関していかなる保証も行いません。
デザインコラム vol. 02

デザインの基 本の4大原則「近接」
「 整列」
「 反復」
「 対比」とは？

6/6