積み上げ棒グラフは、「全体量」と「内訳構成」を同時に伝えるグラフです。
便利な反面、配色を間違えると項目の内訳や変化が伝わらない…
という失敗が起きやすいグラフでもあります。
この記事では、
をまとめてご紹介いたします。
積み上げ棒グラフ配色の基本ルール

積み上げ棒は3〜4色が最も見やすく、それ以上はグラフを分割したり、その他でまとめると◎。
積み上げ棒では、割合が多いものが下=濃い色が鉄板構成です。
また、色相を揃えることで、「内訳感」が自然に伝わります。
積み上げ棒グラフ専用 配色パターン集
ここからは、積み上げ棒グラフ専用 配色パターン集を5つご紹介していきます。
モニター環境や印刷条件によって、色味が多少異なって見える場合があります。
あくまで参考値としてご活用ください。
① 王道ビジネス型

ビジネスカラー王道のブルーグラデーションは、見やすさが抜群。
定番の売上内訳・部門別構成はもちろん、どんな用途でも使いやすいデザインです。
| カラー | カラーコード | RGB |
| メイン | #0048A2 | 0, 72, 162 |
| サブ | #10A7FF | 16, 167, 255 |
| サブ | #9FDBFF | 159, 219, 255 |
| その他 | #DDE3E3 | 221, 227, 227 |
② 成長・改善訴求型

フレッシュなミントカラーが、好印象なグリーン系。
成果内訳・改善要素の構成など、成功例に用いると相性がいいです。
| カラー | カラーコード | RGB |
| メイン | #38B1A4 | 56, 177, 164 |
| サブ | #AAE19F | 170, 225, 159 |
| その他 | #EEFFA8 | 238, 255, 168 |
③ 強調1項目型

注目項目以外はを無彩色で統一することで、一目で伝わるグラフになります。
アクセントは他の色でも代用可能で、注力分野の比率・問題点の可視化にぴったりです。
| カラー | カラーコード | RGB |
| 注目項目 | #E8604E | 232, 96, 78 |
| その他 | #B3B9C3 | 179, 185, 195 |
| その他 | #DDE3E3 | 221, 227, 227 |
④ 多カテゴリでも見やすい型

カラフルに見えるのに、統一感のある組み合わせで、項目が多くても見やすい◎。
カテゴリ別構成・年度比較などにおすすめです。
| カラー | カラーコード | RGB |
| ブルー | #1A2F81 | 26, 47, 129 |
| ライトブルー | #12C2D4 | 18, 194, 212 |
| イエロー | #FFE929 | 255, 233, 41 |
| グレー | #D1D5DB | 209, 213, 219 |
⑤ プレゼン・講演向け

落ち着いたパープルに、ネオン系ピンクのやさしいデザイン。
セミナー・社外向け資料や、女性向けプレゼンにおすすめです。
| カラー | カラーコード | RGB |
| パープル | #8E6ECA | 142, 110, 202 |
| ラベンダー | #E9D5FF | 233, 213, 255 |
| ピンク | #D62EB6 | 214, 46, 182 |
| グレー | #E5E7EB | 229, 231, 235 |
積み上げ棒グラフ配色のNG例
カラフルすぎて「内訳が比較できない」は、失敗配色です。
コントラストを気にしつつ、統一感のあるグラデーションを目指しましょう。
まとめ|積み上げ棒は「順番×色」が命
積み上げ棒グラフは、色選び以上に「配置順」が重要。
重要項目は下にし、同系色で統一するだけで、理解しやすいグラフになります。


コメント