デザインの基本原則は、**誰でもデザインが上手に見えるための「土台」**になるルールです。
センスに依存しないので、エンジニアでも非デザイナーでも、これを理解すれば UI の質が一気に上がります。
ここでは「UIデザインで最も重要な5つ」に絞って、例つき・実践的に説明します。
🎨 デザインの基本原則（UIデザイン版）
1️⃣ コントラスト（Contrast）
「違いを強調してメリハリをつける」こと。
✔ 良い例
重要なボタンだけ濃い色
タイトルは太字、大きめ
背景が薄い → テキストは濃い
✘ 悪い例
背景#FFFFFF に #F5F5F5 の薄いグレー文字
ボタンの色が全部同じでクリック先が分からない
テキストの階層がどれも同じ大きさ
使い方（Figma）
文字の「大・中・小」の階層をつける
Primary ボタンはブランドカラーで統一
余白でもコントラストを作れる（→後述）
2️⃣ 整列（Alignment）
「要素の位置を揃える」こと。
UIの「高級感」と「プロっぽさ」は整列で決まると言っても過がありません。
✔ 良い例
テキスト左揃え
アイコンと文字の中央揃え
要素の開始位置が1列のガイドに沿っている
✘ 悪い例
テキストが微妙にズレている
ボタンの幅がバラバラ
カードの余白が整っていない
使い方（Figma）
Option + Click で整列ツール
Layout Grid を ON（8pt/4pt）
Auto Layout を使えばほぼズレない
3️⃣ 反復（Repetition）
「同じルールを繰り返す」こと。
✔ 良い例
ボタンの丸みは全て 8px
同じ色・フォントを繰り返す
カードUIのパターンを統一
✘ 悪い例
あるページだけボタンの角丸が違う
フォントが3種類以上ある
余白ルールがバラバラ
使い方（Figma）
Color Style / Text Style を使う
Auto Layout で間隔を固定（8/12/16 など）
Components と Variants で統一感を出す
4️⃣ 近接（Proximity）
「意味が近いものは近くに、違うものは離す」。
✔ 良い例
タイトルと説明文を近づける
セクションごとにまとまっている
ボタン → 前後の要素と十分な距離
✘ 悪い例
タイトルと関係ないテキストが近くにある
セクションの境目が分からない
使い方（Figma）
Auto Layout の「Padding / Gap」で距離を一定に
セクションごとに余白を大きくつける
→ 例：同じグループ「16px」、違うセクション「32px」
5️⃣ 余白（Whitespace）
「空間はデザインの一部」。
優れたデザインほど余白が広い。
✔ 良い例
ボタンの内側がしっかり余白
セクションの外側に大きな余白
縦の間隔を揃える（例：8/16/24）
✘ 悪い例
全部の要素がぎゅうぎゅう
見出しと本文が近すぎる
カードが狭くて読みにくい
使い方（Figma）
Auto Layout の「Padding」「Gap」を積極的に使う
余白にも階層を作る（例：8 → 小、16 → 中、32 → 大）
📘 これらを使って「良いUI」はこう作る
Before（悪い例）
フォントサイズが全部同じ
ボタンの色がバラバラ
余白が不揃い
テキストがズレている
After（良い例）
タイトル → 24px / Bold
本文 → 16px
ボタン → Primary Color
余白 → 16/32 で統一
整列 → Auto Layout + Grid
🎯 最重要ポイント（覚えるだけで UI が変わる）
1. 大事なものは大きく＆濃く（コントラスト）
2. 全部きっちり揃える（整列）
3. 同じルールを繰り返す（反復）
4. 近い意味のものはくっつける（近接）
5. 迷ったら余白を増やす（Whitespace）
