円グラフは、「全体に対する割合」を直感的に見せるためのグラフです。
ただし配色を間違えると、ごちゃごちゃしてどこが重要か分からなくなってしまいます。
この記事では、
をまとめて紹介します。
円グラフ配色の基本ルール

円グラフは3~4色が最も読みやすい色数。
6色以上になる場合は、その他でまとめたり、棒グラフへ変更することを検討しましょう。
隣り合う色は明度・彩度に差をつけた色を使い、一番伝えたい項目は違う色を使用します。
円グラフ配色パターン集
ここからは、円グラフ配色パターン集を5つご紹介していきます。
モニター環境や印刷条件によって、色味が多少異なって見える場合があります。
あくまで参考値としてご活用ください。
① 王道ビジネス型

ビジネスでのブルーは安定カラーで鉄板。
市場シェア・構成比レポートなど、どんな項目でも向いています。
| カラー | カラーコード | RGB |
| メイン | #004090 | 0, 64, 144 |
| サブ | #5DE0E6 | 93, 224, 230 |
| その他 | #D1D5DB | 209, 213, 219 |
| その他 | #E5E7EB | 229, 231, 235 |
② 強調1項目型

「1つだけ色を変える」最強パターン。
問題点を可視化したいときや、注力領域の説明に最適。
| カラー | カラーコード | RGB |
| 注目項目 | #FF6F3A | 255, 111, 58 |
| その他 | #E5E7EB | 229, 231, 235 |
| その他 | #D1D5DB | 209, 213, 219 |
③ 成長・ポジティブ系

信頼感のあるダークグリーンは、円グラフにも相性がいいです。
グリーンにはポジティブなイメージがあるので、成果内訳や改善結果の説明資料におすすめ。
| カラー | カラーコード | RGB |
| メイン | #01564C | 1, 86, 76 |
| サブ | #3BB1A2 | 59, 177, 162 |
| その他 | #DDE3E3 | 221, 227, 227 |
④ 多項目でも見やすい配色

色相を近づけて“うるささ”を防止したデザイン。
年代別構成・カテゴリ別割合など、他項目の円グラフ向きです。
| カラー | カラーコード | RGB |
| ブルー | #3355B3 | 51, 85, 179 |
| ミント | #77E8C6 | 119, 232, 198 |
| ピンク | #FF9DD5 | 255, 157, 213 |
| グレー | #E5E7EB | 229, 231, 235 |
⑤ プレゼン・講演向け

他と差をつけたい・目立たせたい資料には、パープルが◎。
セミナー・スライド発表などで活躍できる組み合わせです。
| カラー | カラーコード | RGB |
| メイン | #7C3AED | 124, 58, 237 |
| サブ | # | 196, 181, 253 |
| アクセント | # | 250, 204, 21 |
| その他 | #E5E7EB | 229, 231, 235 |
円グラフ配色のNG例
カラフル過ぎる虹色グラフは、重要な数値が分からなくなるのでやめましょう。
同じ濃さの違う色を並べるのではなく、コントラストを変えます。
割合の大小と色の強さが逆転すると失敗の原因に。
まとめ|円グラフは「色を減らすほど伝わる」
円グラフは、足し算ではなく引き算の配色。
色を減らして、主役を決めるだけで、一瞬で理解できるグラフになります。


コメント