30代エンジニアの備忘録

2026年5月時点、色は読み心地や注目のされ方に影響しやすい要素のひとつです（文化・ディスプレイ・文脈で解釈は変わります）。デザイン担当やフロント実装者向けに、「Web で色をどう決めるか」の論点と実装チェックに絞って整理します。

色は心理や文化で解釈がぶれます。「〜色は必ずこう効く」と断定しにくい範囲で、読み順・安心感づくりのヒントとして使うのが安全です。以降の箇条書きはよく語られる関連づけの例で、自分のコンテンツでは小さく検証する余地を残します。

• 赤：緊急性・情熱のイメージ。CTA やセール表示に使われがち（文脈で印象は変わります）
• 青：信頼・冷静のイメージ。金融・テクノロジー系でよく見かける（例：Facebook、Twitter、IBM）。アンケートでは好まれやすい色の一つとされる
• 緑：自然、安全、成長。環境・健康関連やECサイトの「購入」ボタンに効果的
• オレンジ：親しみやすさ、創造性、行動喚起。CTAボタンに最適と言われる色の一つ
• 黒：高級感、洗練、権威。ラグジュアリーブランドの定番（例：Chanel、Apple）
• 白：清潔感、シンプルさ、余白。ミニマルデザインの基盤色

インテリアデザインに由来する色の配分法則で、Webデザインにも適用できます。3色で統一感のあるカラースキームを構築する際の基本指針です。

• 60%（ベースカラー）：背景色。白やライトグレーが一般的。ユーザーの目を疲れさせない中性色を選択
• 30%（セカンダリカラー）：ナビゲーション、カード、サイドバーなどの補助要素に使用
• 10%（アクセントカラー）：CTAボタン、重要なリンク、強調箇所。最も目を引く色を使用

:root {
  /* 60% ベースカラー */
  --color-bg: #ffffff;
  --color-surface: #f8f9fa;

  /* 30% セカンダリカラー */
  --color-secondary: #495057;
  --color-border: #dee2e6;

  /* 10% アクセントカラー */
  --color-accent: #0d6efd;
  --color-accent-hover: #0b5ed7;
}

.cta-button {
  background-color: var(--color-accent);
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.cta-button:hover {
  background-color: var(--color-accent-hover);
}

美しい色使いだけでなく、すべてのユーザーが読めることが前提です。WCAG 2.2 が定めるコントラスト比の基準を守りましょう。

• AA基準（最低限）：通常テキスト 4.5:1、大きいテキスト（18px以上）3:1
• AAA基準（推奨）：通常テキスト 7:1、大きいテキスト 4.5:1

確認例：WebAIM Contrast Checker でコントラスト比を測れます。

男性の約8%、女性の約0.5%が何らかの色覚異常を持つとされています。色だけに頼らず、アイコンやテキストラベルを併用することで情報のアクセシビリティが向上します。

• 赤と緑の組み合わせだけで状態を表現しない（エラー/成功の表示など）
• グラフでは色に加えてパターン（点線、破線等）を使い分ける
• 色のコントラストチェッカーで確認を習慣化する

ダークモードは目の疲れを軽減し、OLEDディスプレイのバッテリー消費を抑えます。ライトモードの色をそのまま反転するのではなく、専用のカラーパレットを設計することが重要です。

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a2e;
    --color-surface: #16213e;
    --color-text: #e0e0e0;
    --color-text-muted: #a0a0a0;
    --color-accent: #4cc9f0;
  }
}

/* 注意: 純粋な黒(#000)は避ける。
   暗めのグレーやネイビーの方が目に優しい */
/* 純白(#fff)のテキストも避け、#e0e0e0程度に抑える */

• テクノロジー系：青 + グレー（信頼感・先進性）。例：#2563eb, #64748b
• ECサイト：オレンジ + 黒（行動喚起 + 高級感）。例：#f97316, #1e293b
• ヘルスケア：緑 + 白（安心感・清潔感）。例：#10b981, #f0fdf4
• クリエイティブ：紫 + ピンク（創造性・個性）。例：#8b5cf6, #ec4899