「デザインってセンスがないとできない」そう思っていませんか？実は、デザインは「センス」や「才能」ではなく、「原則」に基づいて作られています。多くのプロデザイナーが意識的に使っている「デザインの基本原則」を知れば、再現性の高い「良いデザイン」を作ることができます。本記事では、プロデザイナーが実践するデザインの4大原則を、具体例とともに解説します。この原則は、ホームページだけでなく、名刺、チラシ、プレゼン資料、SNS投稿など、あらゆるデザインに応用できます。この記事で分かること：デザインの4大原則（近接・整列・反復・コントラスト）各原則の具体的な使い方とBefore/After例なぜデザインが重要なのか？それは、デザインには人の行動を変える力があるからです。デザインは、単に見た目を良くするためのものではありません。伝えたい情報を整理し、相手に正しく理解してもらい、次の行動へ導くための手段です。デザインが悪いと、商品の魅力や価値、取ってほしい行動が相手にうまく伝わりません。その結果、「何を伝えたいのか分からない」「どうすればいいのか分からない」と感じさせてしまい、成果につながりにくくなります。一方で、デザインが良いと、伝えたい内容が分かりやすく伝わります。発信者の意図と受け手の理解が一致するため、相手は迷わず内容を理解し、購入や申し込みなどの行動へ進みやすくなります。ここからは、良いデザインを作るうえで必ず押さえておきたい4つの基本原則について解説します。デザインの4大原則デザインの基本原則は、以下の4つです。近接 - 関連する要素（テキストや画像）を近くに配置する整列 - 要素の縦横を揃える反復 - 同じ要素は同じデザインルールにして統一感を出すコントラスト - 重要な要素をしっかり目立たせるそれぞれ詳しく見ていきましょう。原則１：近接 - 関連する要素（テキストや画像）を近くに配置する近接の原則とは？近接の原則とは、関連する要素を近くに配置して、そうでない要素は適切な余白を空けることで、ぱっと見てわかりやすくする原則です。人間の脳は近くにあるものを関連していると無意識に判断します。この特性を活かして、情報を整理し、理解しやすくすることができます。具体例：レストランのメニュー表レストランのメニュー表を例に挙げてみましょう。上のスライドの左側には悪い例、右側に良い例が記載されています。左側の悪い例では、画像・名前・説明が左右上下にバラバラに離れすぎています。これら一つの商品に関連する要素として考えたときに、近くにまとめてあげるのが近接の原則では正解となります。また、商品が複数ある場合、例えば商品AとBがある場合を考えてみると、商品AとBは違う要素に分類されるので、それらの間には十分な余白を空けると良いでしょう。具体例：インスタグラム投稿のデザイン次に、チーズケーキのインスタグラム投稿に使うようなデザインを例に見てみましょう。上のスライドでは、テキストが散らばっていて、なんとなくグチャっとしていますね。この理由は、テキストをカテゴリー分けしてみると分かります。上のスライドの右側では、「商品名」と「日付」という２つのカテゴリーに分けて、それぞれをボックスで囲んでみました。商品名のカテゴリー：「New sweets」「Cheese cake」「濃厚バスクチーズケーキ」日付のカテゴリー：「11/15 Start」すると、ボックスが乱雑になっているのがわかりますよね。これが原因です。「商品名」「日付」はどちらもチーズケーキに関する要素ではあるのですが、よりわかりやすくデザインしようと思ったときには、要素をさらに細分化して、商品名のカテゴリー、日付のカテゴリーという形で分類をしてデザインをすると、グッと見やすくすることができます。近接の原則のポイント関連する要素は近くに配置別の要素とは十分な余白をつける余白も「デザインの一部」として意図的に使う原則２：整列 - 要素の縦横を揃える整列の原則とは？要素の縦横（たてよこ）を意図的に揃えることで、デザイン全体に統一感とプロフェッショナルな印象を与える原則です。「なんとなくバラバラ」に見えるデザインは、要素が左右上下に適当に配置されているのが原因です。見出し、本文、画像、ボタンなど、すべての要素を同じ基準線（グリッド）に揃えることで、整理された印象になります。この揃え方には大きく分けて3つのパターンがあります。左端揃え中央揃え右端揃え具体例：横（よこ）の整列まず、縦横のうちの横を揃えることから見ていきましょう。スライド左側の改善前では、3つあるドリンクのイラストが上下にバラバラになっていて、実際に各イラストの中心を通るように線を引くと、線がぐにゃぐにゃと曲がっているのが分かります。右側の改善後では、線を一直線にして、その線上にイラストを配置するようにしました。すると、このように横を揃えるだけでも、デザイン・レイアウトは一気に見やすくなります。縦（たて）の整列次は縦を揃えることを見ていきます。分かりやすいように、それぞれのドリンクに対して、日本語の名前、それから英語の名前、両方をつけてみました。抹茶、カフェラテ、ココアが並んでいます。さきほどと同じように、今度はそれぞれのドリンクに対して縦に線を引いて考えてみます。すると、改善前では線が曲がっているのが分かります。改善後では、まっすぐ引いた線に対して、日本語の名前、それから英語の名前がその縦の線にちゃんと乗っかるように揃えてみました。横と縦、これを揃えるだけでもかなり見やすくなります。整列の原則のポイント迷ったら左揃えたてよこを揃える原則３：反復 - 同じ要素は同じデザインルールにして統一感を出す反復の原則とは？同じ要素に対しては、同じデザインルール（色・フォント・余白・形）を繰り返し使用することで、デザイン全体に統一感を持たせ、分かりやすくする原則です。上のスライドのステップ1、ステップ2、ステップ3についての例を見てみましょう。スライド右側の改善後の方が、パッと見て同じことについて記載されている、手順の説明に関する記載なんだと客観的にパッと見ることができます。一方、スライド左側の改善前だと、中身を読み込むまで、これって手順の説明だったんだということが最後まで分からなかったりします。このように同じデザインルールを適用するということは、パッと見てわかりやすくして、見た人に理解を促す効果があります。反復の原則のポイント「デザインのルール」を最初に決める一度決めたルールは全体で徹底する例外を極力作らない色・フォント・余白・形を繰り返し使用する原則４：コントラスト - 重要な要素をしっかり目立たせるコントラストの原則とは？コントラストの原則とは、重要な要素を目立たせるために、そうでない要素との差をちゃんとつけることで、視覚的な優先順位を作る原則です。読み込まないとわからなかったり、すべて同じに見えてしまうデザインというのは、コントラストが不足しています。テキストのフォントの大小や太い細い、また色の差をつけることで、「ここが重要ですよ」というようなメッセージを視覚的に伝えることができます。具体例：余白のコントラスト上のスライドの左側では、すべてのフォント、サイズ、それから色が一緒で、また余白もほとんどなく窮屈な印象があります。改善した右側では、見出し、小見出し、それから本文というような構成、3つの構成に分けて、それぞれの構成の間に余白を追加します。これは近接の原則とも重なる部分になります。余白をつけてメリハリを作るというのが、余白のコントラストです。具体例：文字サイズのコントラスト次に、余白をつけたものに対して、文字のサイズに対してコントラストをつけていきます。すると、見出しの部分はやはり大きいフォントサイズの方が視覚的にわかりやすいです。一方で、小見出しの方は見出しよりも少し小さくすることで、見出しのサブ、脇役的な立ち位置になるように調整をします。また、本文はさらにそれらよりも小さくすることで、情報の階層が視覚的に理解していただけるかと思います。具体例：色のコントラスト文章の中でキーワードごとに重要だと思うものであったり、背景色をつけて区切った方がメリハリがつくという場合には、色をつけてみることをお勧めします。例えば、「情報」という漢字に対して赤色にしたり、「例えば」というところの背景に赤をつけて、テキストを白にすることで際立たせることができます。元の状態の文章と最後の状態を比較してみると、分かりやすさは一目瞭然です。コントラストの原則のポイント「すべてを強調」=「何も強調していない」重要な要素だけにコントラストをつけるコントラストが弱いと「読みづらい」「分かりにくい」印象になる大小・太細・明暗・色相の差を活用するまとめ：良いデザインは「原則」で誰でも作れる本記事では、デザインの4大原則を紹介しました。デザインの4大原則：近接 - 関連する要素（テキストや画像）を近くに配置する整列 - 要素の縦横を揃える反復 - 同じ要素は同じデザインルールにして統一感を出すコントラスト - 重要な要素をしっかり目立たせる重要なポイント：デザインは「センス」ではなく「原則」で作られます。4原則を守れば必ず良いデザインができると約束できるわけではありませんが、基本的には「悪いデザイン」を避けることができます。4大原則は「デザインの最低限のルール」と考え、まずはこれを守ることから始めましょう。まずは「近接」と「整列」、この2つを守るだけで、デザインの見た目が大きく改善します。関連する情報をグループ化し、すべての要素を意図的に配置することで、情報が整理され、読みやすくなります。その次に「反復」でブランドの統一感を出し、最後に「コントラスト」で重要な情報を目立たせましょう。この順番で取り組むことで、段階的にデザインの質を高めることができます。無料配布資料：デザイン4大原則まとめPDF本資料は、記事内で使用したスライドをまとめた配布資料です。デザインの4大原則を、図解とBefore/After例付きで、あとから見返しやすい形で整理しています。ダウンロードはこちらPDF版の内容：デザイン4大原則の図解各原則のBefore/After実例