メインコンテンツへスキップ
cataly design
デザインの4原則とは|近接・整列・反復・対比の基本を解説
制作Tips

デザインの4原則とは|近接・整列・反復・対比の基本を解説

#Web制作
公開日 2026.10.06更新日 2026.10.06
監修者 鹿又勇太
Share On
Share On

作った資料やチラシが「なんとなく素人っぽく見える」と感じたことはないでしょうか。その原因の多くは、絵心やセンスではなく、要素の置き方の基本ルールが守られていないことにあります。デザインの4原則(近接・整列・反復・対比)は、専門的な技術がなくても情報を整理して伝わる形にするための土台です。この記事では、非デザイナーの方が資料作成や制作依頼の場面で使えるように、4つの原則それぞれの意味と使い方を、身近な例とともに解説します。

この記事の要点

  • デザインの4原則とは、近接・整列・反復・対比の4つで、情報を整理して伝わりやすくするための基本ルールです。
  • 特別なセンスは不要で、要素の「まとめ方」「そろえ方」を意識するだけで見た目は大きく整います。
  • 資料・チラシ・スライド・Webサイトなど、あらゆる制作物に共通して使えます。

デザインの4原則とは

デザインの4原則とは、近接・整列・反復・対比という4つの基本ルールのことです。デザイナーのロビン・ウィリアムスが著書『ノンデザイナーズ・デザインブック』で体系化したもので、情報を整理し、読み手に伝わりやすくするための土台として広く知られています。

4原則の狙いは、装飾を増やすことではなく、情報の関係を目で分かるようにすることです。どの要素が仲間で、どこが重要かが一目で伝われば、読み手は迷わず内容を理解できます。逆に、この4つが崩れていると、どれだけ配色やフォントに凝っても雑然とした印象になります。

専門ソフトも絵の技術も必要ありません。PowerPointやWord、Googleスライドで資料を作るときにも、そのまま応用できる考え方です。

近接|関連する要素を近づけ、無関係なものは離す

近接とは、関係の深い要素どうしを近づけてグループに見せる原則です。人は近くにあるものを仲間、離れているものを別のものと自然に認識します。この性質を利用して、情報のまとまりを目で分かるようにします。

たとえば、見出しとその説明文が離れていると、どの説明がどの見出しに対応するのか分かりません。関連する情報どうしの間隔を狭め、別のグループとの間隔を広げるだけで、構造が一気に読み取りやすくなります。

迷ったら「関係のあるものは近く、ないものは遠く」。要素の間隔を意図して変えるだけで、まとまりが生まれます。

整列|見えない線に沿ってそろえる

整列とは、要素の位置を見えない基準線にそろえて配置する原則です。文字や画像の左端、あるいは中央をそろえると、ページ全体に一本の筋が通り、整った印象になります。

ありがちな失敗は、要素をなんとなく中央寄せで置いてしまうことです。中央揃えは軸が見えにくく、要素が増えるほど散らかって見えます。特に理由がなければ、左揃えを基本にすると安定します。

そろえる基準を一つに決め、すべての要素をその線に関係づけるのがコツです。ばらばらの位置に置かれた要素は、たとえよい素材でも落ち着きなく見えます。

反復|同じルールを繰り返して一貫性を出す

反復とは、色・書体・余白・あしらいなどのルールを、制作物全体で繰り返し使う原則です。見出しの大きさや色を毎回そろえる、箇条書きの記号を統一するといった小さな一貫性が、全体をまとまった一つの制作物に見せます。

反復が効くのは、複数ページの資料やWebサイトのように要素が繰り返し登場する場面です。ページごとに見出しのスタイルが変わると、読み手は毎回ルールを読み直すことになり、内容に集中できません。

色の選び方そのものに迷う場合は、Webサイトの配色の決め方もあわせて参考にしてください。反復させる色数を絞るほど、統一感は出しやすくなります。

対比|違いをはっきりつけて優先順位を伝える

対比とは、要素どうしに明確な差をつけて、重要度の違いを伝える原則です。見出しと本文の文字サイズを大きく変える、重要な一文だけ色を変えるといった差が、読み手の視線を自然に誘導します。

対比で大切なのは、中途半端にしないことです。見出しを本文より少しだけ大きくする程度では、差なのか誤差なのか伝わりません。変えるなら思い切って変えるほうが、意図が明確になります。

対比が効いている

  • 見出しと本文の差が大きく、読む順番が一目で分かる
  • 強調したい情報だけが目立つ

対比が弱い

  • すべてが同じ強さで、どこから読めばよいか迷う
  • 強調が多すぎて、結局どれも目立たない

4原則を実践するときのポイントと失敗例

4原則は個別に使うものではなく、同時に働かせて初めて効果が出ます。近接でグループを作り、整列で軸を通し、反復で一貫性を持たせ、対比で優先順位をつける。この順で見直すと、崩れている箇所を見つけやすくなります。

よくある失敗は、原則を無視したまま装飾だけを足してしまうことです。フォントを何種類も使う、色を増やす、影や囲みを多用するといった足し算は、たいてい逆効果になります。まず引き算で情報を整理してから、必要な装飾を最小限に加えるのが基本です。

Cataly Designでも、制作物のレビューではまず4原則の観点で、まとまり・そろい・繰り返し・めりはりを確認してから、色や装飾の調整に進みます。土台が整っていれば、装飾は少しで十分に見栄えします。

制作物の伝わりやすさは、見た目だけでなくUI/UXデザインとはで扱う使いやすさ・分かりやすさの考え方とも地続きです。

まとめ|4原則は引き算で情報を整える技術

デザインの4原則は、近接・整列・反復・対比の4つで、いずれも情報を整理して伝わりやすくするための考え方です。センスや専門ソフトがなくても、要素をまとめ、そろえ、繰り返し、めりはりをつけるだけで、資料や制作物の印象は大きく変わります。

要点を振り返ると次のとおりです。

  • 近接:関係する要素を近づけ、まとまりを作る
  • 整列:見えない基準線にそろえて軸を通す
  • 反復:色や書体のルールを繰り返して一貫性を出す
  • 対比:差を思い切ってつけ、優先順位を伝える

まずは手元の資料を、この4つの観点で見直すところから始めてみてください。自社の制作物やWebサイトのデザインを専門家に相談したい場合は、Cataly Designのサービス一覧もご覧いただけます。

よくある質問

A

使えます。4原則はソフトや媒体を問わない考え方で、スライド資料でも効果的です。1枚に情報を詰め込みすぎず、関連項目をグループ化し(近接)、テキストの左端をそろえ(整列)、見出しの書式を全ページで統一する(反復)だけでも、見やすさは大きく変わります。

A

代表的なのは、4原則を体系化したロビン・ウィリアムス著『ノンデザイナーズ・デザインブック』です。デザイナー以外の人が読むことを前提に、豊富な作例で近接・整列・反復・対比を解説しています。まず1冊で基礎を押さえたい場合の定番として知られています。

A

配色やフォントも仕上がりを左右しますが、優先順位としては、まず4原則で構造を整えるのが先です。色数や書体を絞って反復させると、それだけで統一感が出ます。土台となる情報の整理ができてから、色や書体の調整に進むと、迷いが少なくなります。

A

基本は同じですが、Webサイトでは反復の重要度がより高くなります。複数ページにわたって見出しやボタンの見た目をそろえることで、利用者が操作に迷わなくなるためです。一方チラシは1枚で完結するため、対比で視線の入り口を作り、伝えたい順に読ませる設計が効きます。

Contact

制作のご依頼やサービスに関するお問い合わせ、
まだ案件化していないご相談など、お気軽にお問い合わせください。

お問い合わせはこちら→

関連する記事

キャッチコピーの作り方|考え方の5ステップと言葉選びのコツ
制作Tips

キャッチコピーの作り方|考え方の5ステップと言葉選びのコツ

#Web制作

キャッチコピーは、誰に何を約束するかを一言に凝縮する言葉です。本記事では、ターゲット設定から言葉を磨くまでの作り方を5ステップで整理し、刺さる表現のコツとよくある失敗、Webや広告など用途別の考え方まで解説します。自社の言葉を見直したい方に役立つ内容です。

ファーストビューとは|重要性と構成要素・設計のポイント
制作Tips

ファーストビューとは|重要性と構成要素・設計のポイント

#Web制作

ファーストビューはサイトを開いて最初に表示される領域で、読み進めてもらえるかを大きく左右します。本記事では意味と重要性、キャッチコピーやCTAなどの構成要素、成果につながる設計のポイントとよくある失敗を、Webサイトやランディングページの改善に活かせる形で整理して解説します。

名刺デザインの作り方|掲載する情報の整理と入稿までの手順
制作Tips

名刺デザインの作り方|掲載する情報の整理と入稿までの手順

#外注#Web制作

名刺デザインは、掲載する情報の整理から始めると迷わず進められます。この記事では載せる情報の決め方、レイアウトと配色・書体の考え方、印刷入稿データの作り方、自作と外注の判断基準までを手順に沿って解説します。作り始める前の準備にお使いください。

他の記事をみる→