ガイド
サイト配色でよくある失敗
デザインの一貫性を崩す典型的なミスを防ぐためのガイドです。
色自体が良くても運用ルールがないと全体は崩れます。
Mistake: too many accents
Multiple bright accents compete for attention and weaken hierarchy.
Choose one main accent and use it consistently.
Mistake: weak neutral system
Without stable neutrals, spacing and typography feel noisy.
Define neutral shades for text, borders, and surfaces.
Mistake: no state planning
Colors may look fine in default state but fail in hover, active, or disabled states.
Plan interaction states before shipping.
- Test button states.
- Test links on light and dark backgrounds.
- Check form states and alerts.
Mistake: skipping contrast checks
Palette decisions without contrast validation hurt readability.
Verify text/background pairs before final rollout.
Common during
- Fast redesigns.
- Campaign page launches.
- Design-to-code handoff.
Set simple rules early
Clear color roles and light QA checks prevent most palette-related rework.