デザインの基本原則
デザインには「原則」があります。これを知っているだけで、素人っぽさを脱却し、プロ品質のサイトが作れます。
デザインの4原則
📐
1. 近接（Proximity）
関連する要素は近くに、関連しない要素は離す
例：見出しと本文は近く、セクション間は広く空ける
📏
2. 整列（Alignment）
要素を見えない線で揃える
例：テキストは左揃えに統一、画像も端を揃える
🔄
3. 反復（Repetition）
同じスタイルを繰り返し使う
例：見出しは同じ色・サイズ、ボタンは同じデザイン
⚡
4. コントラスト（Contrast）
重要な要素は目立たせる
例：見出しは大きく太く、CTAボタンは派手な色に
配色の基本
色の役割
メインカラー
ブランドを象徴する色（60%）
サブカラー
補助的な色（30%）
アクセントカラー
目立たせたい箇所に（10%）
60-30-10の法則：メイン60%、サブ30%、アクセント10%のバランスが美しい配色の基本です。
余白の重要性
「余白」はデザインの質を決める最も重要な要素の一つです。
❌ 余白が少ない
見出し
テキストテキストテキスト
見出し2
テキストテキストテキスト
窮屈で読みにくい
✅ 余白が適切
見出し
テキストテキストテキスト
見出し2
テキストテキストテキスト
スッキリして読みやすい
AIにデザインを相談
プロンプト例：
以下のWebサイトの配色を提案してください。 【業種】IT企業のコーポレートサイト 【イメージ】信頼感、先進的、クリーン 【参考】Apple、Slack、Notionのような洗練されたデザイン 提案内容： ・メインカラー（HEXコード） ・サブカラー ・アクセントカラー ・背景色 ・テキスト色 各色の選定理由も教えてください。
まとめ
- ✓ デザインの4原則：近接・整列・反復・コントラスト
- ✓ 配色は60-30-10の法則で
- ✓ 余白を恐れない、むしろ積極的に使う
- ✓ AIに配色やレイアウトの相談ができる