02. デザインの4原則
デザインの4原則とは？
「デザインの4原則」は、 わかりやすく・見やすいデザインをつくるための基本的なルール です。
これらの原則を意識することで、視覚的な整理がされ、ユーザーにとって使いやすいデザインになります。グラフィックデザインだけでなく、WebやUIデザイン、スライド作成など、あらゆる場面で役立ちます。
✴️ 4つの原則
| 原則 | 説明 |
|---|---|
| 近接（Proximity） | 関連する情報は近くにまとめ、関係のないものとは距離を取る |
| 整列（Alignment） | 要素を見えないラインにそろえて、レイアウトに統一感を持たせる |
| 反復（Repetition） | 同じ要素は同じスタイルで繰り返し使い、デザインに一貫性をもたせる |
| 対比（Contrast） | 強調したい部分は、色やサイズなどで他と明確に差をつけて目立たせる |
✅ なぜ大事なの？
- ごちゃごちゃした印象を防ぎ、スッキリとした見た目になる
- 情報の優先順位が伝わりやすくなる
- 統一感と信頼感のあるデザインになる
- 使いやすいUIや伝わる資料が作れる
この4原則は、 プロのデザイナーも常に意識している基本中の基本 です。
初心者の方も「デザインが苦手…」と感じたときは、この4つに立ち返ると良いでしょう。
01. Proximity（近接）
ボタンとか文字って、近くにくっつけた方がいいのかな？
うん！それが「Proximity（近接）」っていうルールだよ。 **関連する情報は近づけて配置** すると見やすくなるんだ。
たとえば、ラベルと入力欄はくっつけておくと「セットだな」ってわかるよね。
そのとおり！逆に、関係ないものは少し距離をとっておくと、グループがわかりやすいよ。
解説
- 「近接」は、意味のつながりがあるものはまとめて配置するという考え方。
- 関係のある要素同士を近づけ、視覚的にグループ化することで、情報が整理されて伝わりやすくなる。
よくある場面での例
| 悪い例 | 良い例 |
|---|---|
| ラベルと入力欄が離れている | ラベルと入力欄が隣接している |
<label for="name">お名前</label>
<input type="text" id="name" name="name">02. Alignment（整列）
このページ、なんかバラバラで読みにくいかも…。
それは「Alignment（整列）」ができてないからかもね！
文字とかボタンがバラバラだと、見てるほうが迷子になるんだね。
そう！ **左揃え、中央揃え、右揃えなどをきちんと統一** して、要素をそろえると、 **安心感のあるレイアウト** になるんだ。
解説
- 要素の位置をきちんとそろえることで、ページ全体に統一感を生む。
- ガイドラインやグリッドを使うと効果的。
- 視線の流れもスムーズにできる！
よくある場面での例
| 悪い例 | 良い例 |
|---|---|
| 要素がバラバラの位置にある | すべて左揃えで並んでいる |
<div style="text-align: left;">
<h2>お問い合わせ</h2>
<label for="email">メールアドレス</label><br>
<input type="email" id="email"><br>
<button>送信</button>
</div>03. Repetition（反復）
このボタン、ページごとに見た目がバラバラだよ？
それは“反復”が足りてないかも！ **同じパーツは同じデザイン** で使い続けるのが「Repetition（反復）」のルールだよ。
見出しやボタンのデザインが統一されてると、どこに何があるか分かりやすいよね！
そう！見た目がそろってると、 **一貫性が出て信頼感** もアップするんだ。
解説
- 同じ種類の要素は同じスタイルで統一する。
- フォント、色、ボタン形状などを 繰り返すことで一貫性 を持たせる。
- ユーザーにとってわかりやすく、 安心感のあるUI に。
よくある場面での例
| 悪い例 | 良い例 |
|---|---|
| ボタンの形や色が毎回違う | 全ページで統一されたスタイルを使う |
<style>
.button {
background-color: #4CAF50;
color: white;
padding: 0.5em 1em;
border: none;
border-radius: 4px;
}
</style>
<button class="button">送信</button>
<button class="button">登録</button>04. Contrast（対比）
このボタン、なんか背景と同化してて目立たないな〜。
それは「対比（Contrast）」が足りないからかも！ **伝えたいことを目立たせるために、色や大きさに差をつける** んだよ！
なるほど〜。目立たせたいものは、ドーン！って強調するんだね。
そう！ **「違いをはっきりさせる」ことが、分かりやすさのカギ** なんだ。
解説
- 強調したい部分を目立たせるために、明確な差をつける。
- 色・サイズ・太さ・形などで「はっきりとした差」を出す。
- 弱い差では伝わらない。思い切った対比が重要！
よくある場面での例
| 悪い例 | 良い例 |
|---|---|
| グレー文字が背景と同化して読みにくい | 色の差が強く、目立つ |
<!-- 悪い例 -->
<div style="background-color: #f0f0f0; padding: 1em;">
<button style="background-color: #e0e0e0; color: #ccc;">クリック</button>
</div>
<!-- 良い例 -->
<div style="background-color: #f0f0f0; padding: 1em;">
<button style="background-color: #007BFF; color: white;">クリック</button>
</div>デザインのスキルを身につける方法
デザインってセンスがないと無理かな…？
そんなことないよ！**デザインは「学べる技術」**だから、正しい方法で練習すれば誰でも上達できるよ！
✨ ステップ①：デザインの原則を理解する
まずは「なぜこの配置？」「なぜこの色？」という理論の土台を学ぶことが大事！
- デザインの4原則（近接・整列・反復・対比）
- 視線の流れ（Z型・F型）
- 色の組み合わせ（補色・類似色）
- 文字のルール（ジャンプ率、行間、読みやすさ）
📘 おすすめ教材：
- 書籍『ノンデザイナーズ・デザインブック』
- 無料講座：YouTube や Adobe Learn
✨ ステップ②：良いデザインを「観察」する
プロのデザインを「見るだけ」でも学びになります。
- WebサイトのLPや広告バナーを収集
- 雑誌やパッケージ、チラシなど紙モノも参考に
- 観察ポイント：
- 余白の使い方
- 配色のバランス
- フォントの種類と大きさの組み合わせ
👀 参考サイト：
✨ ステップ③：実際に真似して作ってみる
「いいな」と思ったデザインを模写（トレース）すると、観察が深まります。
- FigmaやIllustrator、Photoshopを使って模写
- 最初は全く同じにすることを目指してOK
- 作ってみることで「見えなかった工夫」に気づく
✨ ステップ④：課題に取り組む・アウトプットする
- 架空のバナー、チラシ、LPなどを作って練習
- 無料のお題集・課題サイトを活用
- 仲間に見せてフィードバックをもらうのも効果的
🧩 お題例：
- 架空カフェの新メニュー紹介バナー
- 自分のポートフォリオサイトのトップページ
- 地元のイベントチラシ
✨ ステップ⑤：フィードバックを受けて改善する
- SNSで公開してプロから意見をもらう
- スクールや職業訓練で講師に添削してもらう
- デザイン添削サービスも活用できる
📣 ポイント：
- 「なんとなく良さそう」から脱却するためには、他人の目が必要！
❗ よくある誤解：「センスがないと無理？」
デザインは“アート”じゃなくて“論理”と“反復練習”が大事な技術だよ！
- センスは経験から育つ
- 練習と観察を続ければ、目が鍛えられて判断力もつく
- 「見る・真似る・作る・直す」を繰り返そう
✅ まとめ：スキルを身につけるための行動
| 行動 | 効果 |
|---|---|
| 原則を学ぶ | 判断基準ができる |
| デザインを観察する | 視点が増える |
| 模写する | 手を動かして実感できる |
| 自分で作る | 応用力がつく |
| フィードバックを受ける | 課題に気づける |
なるほど、練習の積み重ねで上手くなっていけるんだね！
そう！焦らずコツコツ、ステップを踏めば誰でもデザイン力は伸ばせるよ！