デザインは一見センスが必要な分野に見えますが、実は「原則」を押さえるだけでぐっと良くなるとしたらどうでしょう？私も以前までは、デザインはプロの仕事だと思っていました。でも、日常の仕事で資料を作成したり、ブログを書いたりしていると、どうしても「見た目がイマイチ」と感じることが多々ありました。
そんなときに出会ったのが「ノンデザイナーズ・デザインブック」です。この本は、素人でも取り組めるデザインの基本をわかりやすく解説してくれます。その中でも特に重要なのが「4原則」。
本書では、「近接」「整列」「対比」「反復」という4つのシンプルなルールを紹介しており、これを実践するだけで驚くほどデザインが良くなるのです。ここでは、それぞれの原則と、私が実際に使って感じた変化について具体的にお伝えします。
ノンデザイナーズ・デザインブックの4原則
1. 近接（Proximity）：関連要素をまとめて整理整頓
「近接」とは、関連する情報を近づけることで、情報のまとまりを作ることです。デザインでよく見られる問題の一つは、情報が散らばりすぎて、どこを見れば良いのかわからないこと。この原則は、そんな混乱を防ぎます。
悪い例
トマトパスタ
野菜たっぷりのミートソースがたっぷり。
￥800
チーズトッピング +￥100
ピザ もちもちの生地が特徴。
Mサイズ ￥1,200
Lサイズ ￥1,500
- 料理名、説明、価格、トッピングがバラバラに配置されていて、関連情報が近くにありません。
- 「トマトパスタ」と「チーズトッピング」の関係が見えにくい。
- 論点が上下左右に広がり、情報が探しにくい。
良い例
トマトパスタ ￥800
野菜たっぷりのミートソースがたっぷり。
トッピング: チーズ +￥100
ピザ
もちもちの生地が特徴。
Mサイズ ￥1,200
Lサイズ ￥1,500
- トッピング情報も料理名近くに配置して、関連性が一目でわかります。
- 料理名、価格、説明文を近くに考えることで議論が自然に流れる。
2. 整列（Alignment）：一貫性を持たせる
整列は、要素を揃えることで視覚的な秩序を生む原則です。左揃え、右揃えといった基本的な整列を使うだけでも、デザインが劇的に改善されます。この原則を知らなかった私は、文字や画像を適当に配置していました。その結果、どこか散らかった印象を与えてしまっていたのです。
悪い例
トマトパスタ ￥800
野菜たっぷりのミートソースがたっぷり。
トッピング: チーズ +￥100
ピザ
もちもちの生地が特徴
M: ￥1,200
L: ￥1,500
- パスタの説明文とトッピングが中央揃えで位置がずれている。
- ピザのサイズと価格が右揃えで統一されていません。
- 全体的に情報の配置がランダムで迷いが定まらない。
良い例
トマトパスタ ￥800
野菜たっぷりのミートソースがたっぷり。
トッピング: チーズ +￥100
ピザ
・Mサイズ ￥1,200
・Lサイズ ￥1,500
もちもちの生地が特徴。
- 「料理名」「説明」「価格」を左揃えに統一。
- サイズごとの価格を箇条書きにして考えてみましょう。
- 情報が整理され、色彩が自然と流れるデザインに。
3. 対比（Contrast）：強調ポイントを作る
対比は、もっとも効果的でわかりやすいデザインの原則です。視覚的に強弱をつけることで、見る人の注意を引きつけ、重要な情報を強調します。対比を作る方法としては、フォントの種類やサイズ、色などがあります。
悪い例
新商品発売！
スマートウォッチ
多機能＆軽量モデル
価格：25,000円
今なら割引価格で販売中！
- 「新商品発売！」価格やその他の重要情報が全て同じフォントサイズ・色で記載されており、目が離せません。
- 割引の強調が弱く、購入を刺激しません。
良い例
✨ 新商品発売！ ✨
🚀 スマートウォッチ
多機能＆軽量モデルが登場！
💰 特別価格: ¥25,000 → ¥20,000 🎉
🕒 期間限定！今すぐお買い求めを！
- 割引価格を太字かつ目立つ色（例: 赤）で強調。
- 元の価格を取り消し線で表示し、割引の効果を伝えます。
- 段落の配置や絵文字で視覚的に情報を整理。
4. 反復（Repetition）：統一感を演出する
反復とは、デザインの中で特定の要素を繰り返すことで、全体に一貫性をもたせることです。フォントの種類やサイズ、ラインのスタイルなどを統一するだけで、デザインの完成度が大きく向上します。
悪い例
スライド1: フォントはゴシック、タイトルは左揃え、色は青
スライド2: フォントは明朝体、タイトルは中央揃え、色は赤
スライド3: フォントはカジュアル、タイトルは右揃え、色は緑
- スライドごとにフォントや揃えが異なり、一貫性がない。
- どこを見れば重要かわかりにくい。
- 全体が統一感に欠け、視覚的に不安定な印象を抱く。
良い例
スライド1: タイトルは左揃え、フォントはゴシック、色は青
スライド2: 同じフォント、左揃え、色は青
スライド3: 同じフォント、左揃え、色は青
- 全スライドで同じフォント、同じタイトルの配置、同じところを繰り返し使用。
- 一貫したデザインが視覚的なその姿を生み、メッセージが伝わりやすくなります。
4原則を実践してみて感じたこと
「ノンデザイナーズ・デザインブック」を読んで実践してみて気づいたのは、デザインにセンスは不要だということです。むしろ、大事なのは「基本ルールを知っているかどうか」。4原則はどれもシンプルですが、意識して使うだけで、デザインが見違えるように変わります。
特に、「自分はデザインが苦手」と感じている人ほど、この本に救われるはずです。私も最初は、「素人の自分がこれを使っても変わらない」と思っていました。しかし、4原則を取り入れると、ブログや資料が「読みやすい」「伝わる」と言われるようになり、自信がつきました。
まとめ
デザインは奥が深い分野ですが、「ノンデザイナーズ・デザインブック」は、素人にもわかりやすく、すぐに実践できる内容が詰まった名著です。この4原則をマスターするだけで、日常のデザイン作業が劇的に改善されます。私のようにデザインに自信がない方でも、この本を読めば、きっとその考えが変わるでしょう。
ぜひ、あなたも「近接」「整列」「対比」「反復」の4原則を試してみてください。そして、あなたのデザインがどれほど良くなるか、体感してみてください！
近接（近接）
- 関連する要素を近くに配置し、視覚的なところを作る。
- 情報が整理され、見る人が内容を直感的に理解できるようになる。
整列（Alignment）
- 全ての要素を意識的に揃えることで、全体に統一感を持てるデザイン。
- 左揃え、中央揃えなど、一定のルールに沿って秩父
対比（コントラスト）
- 強調したい要素を目立たせるため、色、フォント、サイズ、形などで違いを作ります。
- 重要な情報を強調し、見る人の注意を引く
反復（Repetition）
- 同じデザイン要素（フォント、色、ラインなど）を繰り返し使うことで、継続性を持てる。
- デザイン全体が見て、プロフェッショナルな印象を考える。
おまけトーク
おまけトーク🎨✨
デザインってセンスだけだと思ってたんですよね。
でも、この4原則を知ったら世界の見え方が変わりました！
街中の広告やポスターを見ると、『あ、この整列が綺麗！』とか『この対比、目立つなぁ！』って気づくように👀💡。
デザインの裏にこんなルールがあったなんて感動です！✨
これを知るだけで、見え方も作り方もぐっと変わりますよ🎶
んじゃ、またねー！
