色って、意外とむずかしい！
Webデザインで「色を選ぶ」のって、想像以上に奥が深いもの。
「黄色い背景に白文字を置いたら読めなかった…」なんて経験、ありませんか？
この記事では、デザイン初心者でもすぐに使える「色の基本」や「配色の考え方」をわかりやすく紹介します！
1. 色選びでよくある失敗例
NG配色の代表例
背景が黄色、文字が白 → 読めない！ 彩度が高い色ばかり使ってチカチカする いろんな色を使いすぎて統一感ゼロ
覚えておきたいルール
「明るい背景 × 明るい文字」は基本NG 色は“足す”より“引く”が正解 配色は3色以内が基本（＋白・黒・グレーはOK）
2. 配色の基本は「3つの役割」で考える
メインカラー（主役の色）
サイトの印象を決める大事な色 1つだけ選ぶのがベスト（例：青、ピンク、黒）
サブカラー（補助の色）
メインカラーを引き立てる色 文字色や背景に使われることが多い
アクセントカラー（強調の色）
ボタン・リンク・重要な場所に 少量でOK！入れすぎると逆効果
例：青（メイン）＋グレー（サブ）＋オレンジ（アクセント）
3. 色の選び方のコツ
トーンをそろえるとプロっぽくなる
同じ「赤」でも、暗い赤・明るい赤・くすんだ赤…いろんなトーンがあります。
なるべく同じトーン（明るさ・彩度）でそろえると、まとまりが出ます。
目的に合わせて色を選ぼう
信頼感 → 青系 優しさ・安心感 → 緑系 元気・活発 → オレンジ・赤 高級感 → 黒・紺・ゴールド
4. おすすめ配色ツール・サイト
Coolors：自動でカラーパレットを提案してくれる神ツール Color Hunt：トレンドの配色が一覧で見られる Adobe Color：補色・類似色など、理論ベースで選べる
5. まとめ：色は「少なく、わかりやすく、意味をもたせて」
色をうまく使うと、それだけで「伝わるデザイン」になります。
まずは メイン・サブ・アクセント の3つを意識して、見やすい配色から始めましょう！
関連記事