デザイン初心者が知るべき4つの基本原則｜センスがなくても伝わるデザインの作り方

「デザインセンスがない」と悩んでいませんか？実は、優れたデザインの大部分はセンスではなくルールで成り立っています。デザインの世界には「4つの基本原則」があり、これを守るだけで、資料やチラシ、Webページの見栄えが劇的に変わります。

デザインの4大原則とは

CRAP原則

デザイナーのRobin Williams氏が提唱した4つの原則です。英語の頭文字を取って「CRAP原則」とも呼ばれます。

1. ◆近接（Proximity）
2. ◆整列（Alignment）
3. ◆反復（Repetition）
4. ◆コントラスト（Contrast）

順番に解説していきます。

原則1: 近接（Proximity）

ルール

関連する情報は近くに、関連しない情報は離す。

人間の脳は、近くにある要素を「同じグループ」として認識します。名刺で考えてみましょう。名前、肩書き、会社名が一箇所にまとまり、住所、電話番号、メールが別の場所にまとまっている。これが近接の原則です。

よくある失敗

• ◆すべての要素が均等に配置されていて、グループの区別がつかない
• ◆関連のない情報が近くに配置されていて混乱する

実践のコツ

• ◆見出しと本文の間隔は狭く、セクション間の間隔は広く
• ◆余白の比率は「グループ内:グループ間 = 1:2以上」が目安
• ◆罫線で区切る前に、余白で区切れないか検討する

原則2: 整列（Alignment）

ルール

すべての要素を意図的に配置する。なんとなく置かない。

テキスト、画像、ボタンなど、ページ上のすべての要素は見えない線（グリッド）に沿って配置します。左揃え、中央揃え、右揃えのいずれかに統一し、混在させないことが大切です。

よくある失敗

• ◆テキストが中央揃えと左揃えの混在
• ◆画像の端がテキストの端と揃っていない
• ◆ボタンの位置がページごとに異なる

実践のコツ

• ◆迷ったら左揃え（日本語は左から読むため、最も読みやすい）
• ◆中央揃えは見出しや短いテキストに限定する
• ◆デザインツールのガイド線やグリッド機能を活用する

原則3: 反復（Repetition）

ルール

デザイン要素を一貫して繰り返す。

色、フォント、余白、レイアウトパターンを統一して繰り返すことで、デザインに一貫性が生まれます。ユーザーは無意識にパターンを学習し、情報を予測しながら読めるようになります。

反復すべき要素

• ◆色: メインカラー、サブカラー、アクセントカラーの3色を全体で統一
• ◆フォント: 見出し用と本文用の2種類に限定
• ◆余白: セクション間、段落間の余白を数値で統一
• ◆ボタンデザイン: 色、角丸、サイズを統一
• ◆アイコンスタイル: 線のアイコンと塗りのアイコンを混在させない

よくある失敗

• ◆ページごとにフォントや色が異なる
• ◆ボタンのデザインがバラバラ
• ◆見出しのスタイルが統一されていない

原則4: コントラスト（Contrast）

ルール

異なる要素は明確に異なるように見せる。中途半端な差はNG。

コントラストは「見出しと本文」「背景とテキスト」「重要な情報とそうでない情報」の差を明確にすることです。差を付けるなら大胆に。少しだけ違うのが最も中途半端で効果がありません。

コントラストの付け方

• ◆サイズ: 見出しは本文の1.5〜2倍以上のサイズに
• ◆太さ: 見出しはBold、本文はRegular
• ◆色: 重要な要素にアクセントカラーを使用
• ◆余白: 重要なセクションの周りに大きな余白を取る

よくある失敗

• ◆見出しと本文のサイズ差が小さい（14pxと16pxでは差がわからない）
• ◆背景色とテキスト色のコントラスト比が低く、読みにくい
• ◆すべての要素が同じ大きさで、どこを見ればいいかわからない

実践: プレゼン資料を4原則で改善する

Before（よくあるダメな資料）

• ◆テキストがスライド全体に均等配置
• ◆フォントが3種類以上混在
• ◆見出しと本文のサイズ差が小さい
• ◆情報のグループ分けが不明確

After（4原則を適用）

1. ◆近接: タイトル、本文、図表をグループ化。グループ間に余白
2. ◆整列: すべてのテキストを左揃えに統一。図表もグリッドに配置
3. ◆反復: フォント2種類、色3色に限定。全スライドでスタイル統一
4. ◆コントラスト: タイトルは本文の2倍サイズ、太字。キーメッセージにアクセントカラー

デザインで避けるべき7つの習慣

1. ◆フォントを3種類以上使う
2. ◆色を5色以上使う
3. ◆テキストを詰め込みすぎる
4. ◆装飾を多用する（影、グラデーション、枠線の乱用）
5. ◆低解像度の画像を使う
6. ◆余白を恐れる（空白は「何もない空間」ではなく「デザインの一部」）
7. ◆印刷物とWeb用のデザインを同じ感覚で作る

おすすめの学習リソース

書籍

• ◆「ノンデザイナーズ・デザインブック」Robin Williams著（4原則の原典）
• ◆「なるほどデザイン」筒井美希著（ビジュアルで学べる入門書）

ツール

• ◆Canva: 無料で使えるデザインツール。テンプレートが豊富
• ◆Figma: Webデザイン・UI設計に最適。無料プランあり
• ◆Adobe Color: 配色の組み合わせを自動生成

まとめ

デザインは才能ではなく、ルールです。近接・整列・反復・コントラストの4原則を守るだけで、あなたのデザインは見違えるほど改善されます。

今日から作る資料、チラシ、Webページで、まずは4原則を意識してみてください。1週間も続ければ、「デザインセンスがない」という悩みは過去のものになるはずです。