配色、アクセシビリティ、アノテーション
効果的な配色選択、色覚多様性への対応、チャートへのアノテーション——すべてのオーディエンスに伝わる可視化を作る。
プレミアムコースコンテンツ
このレッスンはプレミアムコースの一部です。Proにアップグレードすると、すべてのプレミアムコースとコンテンツを利用できます。
- すべてのプレミアムコースを利用
- 1,000以上のAIスキルテンプレート付き
- 毎週新しいコンテンツを追加
🔄 前回のおさらい: レッスン5でダッシュボードの情報ヒエラルキーと5秒テストを学びました。ここでは配色、アクセシビリティ、アノテーションでチャートの伝達力を高めます。
配色の原則
効果的な配色パレット
| 用途 | 推奨 | 避ける |
|---|---|---|
| 良い/悪い | 青-オレンジ | 赤-緑 |
| カテゴリ | 5〜7色まで | 10色以上 |
| 強調 | 1色だけ鮮やか+他はグレー | すべて鮮やか |
| 連続値 | 単色のグラデーション | 虹色 |
アクセシビリティ
- 色覚多様性:男性の約8%が赤-緑色覚異常
- 対策1:色+パターンの併用
- 対策2:色+ラベル・数値の併用
- 対策3:青-オレンジなどの安全なパレット
- テスト:グレースケールでも判読可能か確認
アノテーションの技法
チャートに直接コンテキストを記載する:
- ポイント注釈:特定データポイントに説明(「新製品発売」)
- 範囲注釈:期間を示す帯(「COVID-19期間」)
- トレンドライン注釈:傾向の変化点に説明
- 目標ライン:KPI目標を水平線で表示
良いアノテーションの条件
- 簡潔(2〜5語)
- データポイントに近い位置
- チャートの主メッセージを補強
✅ 確認クイズ: 虹色のカラーパレット(赤→橙→黄→緑→青→紫)がデータ可視化で推奨されない理由は?→虹色は直感的な順序がなく(緑は赤より「多い」?)、色覚多様性のあるユーザーに判読が困難で、白黒印刷時に完全に情報が失われます。単色のグラデーションが連続値には最適です。
まとめ
- 赤-緑カラーコーディングは男性の約8%に判読困難——青-オレンジなどの安全な代替を使用
- 1チャートの色は最大5〜7色——それ以上はグループ化やトップN強調で対応
- アノテーションで異常値やトレンドにコンテキストを提供——閲覧者がデータの意味を即座に理解
- グレースケールでも判読可能なデザインがアクセシビリティの基本
次のレッスン: インタラクティブ可視化とプレゼンテーション——インタラクティブ機能の適切な活用とデータプレゼンのコツを学びます。
理解度チェック
まず上のクイズを完了してください
レッスン完了!