プレセナ・ストラテジック・パートナーズ Advent Calendar 2025 17日目です！
はじめに
こんにちは！株式会社プレセナ・ストラテジック・パートナーズでUI/UXデザイナーをしている yoshi です。 普段は『Precena Nest』という業務系SaaS（研修運営・学習管理システム）のUI/UXを担当しています。
突然ですが、エンジニアの皆さんは「デザイナーって、なんとなくセンス（感覚）で色を決めてるんでしょ？」なんて思ったことはありませんか？
実は、私たちの頭の中はエンジニアリングと同じくらい「理屈」でいっぱいです。 今回は、一見簡単そうに見える「円グラフの配色」ひとつ決めるのに、どんな試行錯誤を重ね、どんなロジックを組み立てたのか。普段あまり見えないデザインの裏側を、少しだけ覗いてみてください。
今回のミッション：円グラフをデザインせよ
今回のお題は、システム内の「アンケート機能」の結果を表示する円グラフです。
なぜそこまでこだわるのか？（UXの話）
「たかがグラフの色でしょ？」と思われるかもしれません。 しかし、私たちが作っている『Precena Nest』は、ユーザーにとっての 「仕事道具」 です。
業務系SaaSのUIデザインは、利用者の 「仕事環境（オフィス）」 を作ることと同義だと私は考えています。 使いにくい、見にくい、なんとなく気分が乗らないオフィスでは、生産性も上がりませんよね。
できればユーザーが仕事をしている時の気分をアゲたい！ そんな想いで、「最高の円グラフ」 を目指す旅が始まりました。
世の中の「円グラフ」事情と課題
まずは競合調査やベストプラクティスを探ります。
- 原色バキバキ系: データの区別はつくけど、美しくない。
- おしゃれワントーン系: 同系色のグラデーションで綺麗！…でも、値の差がパッと見でわからない。
「見やすさ」と「心地よさ」を両立するベストプラクティスが見当たらない…！ これは自分で最適解を見つけるしかありません。
Precena Nestにおける「制約条件」
エンジニアの皆さんが要件定義で頭を悩ませるのと同様、デザインにも制約（要件）があります。
- データ数が可変: 2個の時もあれば、10個以上の時もある。
- アクセシビリティ: 業務系SaaSとして、誰もが見やすいユニバーサルデザインであること。
- ミスの防止: 分析用データなので、変な強調や錯覚によるミスリーディングを起こさない。
- システム負荷（デザイン的な）: 無闇にカラーパレットを増やさず、既存のブランドカラーと調和させる。
これらを全て満たす「魔法の配色」を作る必要があります。
アプローチ1：とりあえず並べてみる（失敗）
使えるカラーはこちら。
左に並んでいる四角がカラーパレットで、右にならんでいる丸が実際にUIで使用しているカラーです。
Primary Color（緑）とSecondary Color（オレンジ）を主軸にとりあえずいろいろ組んでみます。
まずはシンプルに、Primary Colorから順番に割り当てることを検討しました。 Primary（緑） → Secondary → … という順序です。（図の左3つ）
結果：ダメでした。
なぜダメなのか？
Precena NestのUIにおいて 「Primary Color（メインカラー）」 は特別な意味を持っていました。 それは 「クリックできる」「主要な操作ボタン」「重要な情報」 などです。
円グラフの中で一番大きなパイが Primary Color で塗られているとどうなるか？ ユーザーは無意識に 「ここが重要なんだ」 と感じたり、「クリックできるのかな？」 と思ったりしてしまいます。 フラットな分析データなのに、デザインが勝手に意味づけをしてしまう。これは バグ です。
さらに、画面全体を見渡した時、ボタンなどで使われているPrimary Colorがグラフでも大きく使われると、画面全体の配色のバランス（重み）が崩れてしまいました。
アプローチ2：脇役を主役に抜擢（採用！）
そこで、普段はアクセントや背景に使われる Secondary Color をメインに据えてみました。（図の一番右）
結果：いい感じ！
- 画面全体の配色バランスが良い（円グラフだけで見ると分かりませんが、他のUIもある画面全体で見た時に配色バランスが良い）。
- 特別な意味を持たない色なので、データとしてフラットに見られる（ミスリーディングがない）。
その他の色は？
Secondary 以外にも色が必要です。 Error（赤）は「危険」「エラー」という強い意味を持つので除外。 Info（青）や Success（緑）は、特定の条件下（アラート等）でしか出ないので、グラフに使っても画面内でバッティングしません。これらと、グレー系を活用することにしました。
最大の難関：色の「並び順」アルゴリズム
色自体は決まりました。次は 「どう並べるか」 です。ここが一番のパズルでした。
課題：4色の壁
データが10個あるときはカラフルで綺麗に見えます。しかし、データが 「4個くらい」 の時が一番難しいのです。
もし、4色のうち3色が同系色で、1色だけ全然違う色だったら？ 「あ、この1個だけ仲間外れ（特異値）なんだな」 と見えてしまいます。これも意図しないバイアスです。
解決策：分散させる 「上位のデータに同系色を固めない」というロジックを組みました。
次の図はデータが（下から）2つ、3つ、4つの時...と検証しているものです。
真ん中の列は色相をバラバラにしてみたものです。 色覚特性のある方は特定の色を見分けることが難しい場合があるため、明度でコントラストをつけるか、離れた色相をつかう必要があるのですが、このパターンの場合データが増えると実現が難しく不採用としました。
◯ 採用したロジック： セカンダリー系（2色） → プライマリー系（3色） → ブルー系（3色） → レッド系（3色） ...
このように、占有率が高くなる上位のセカンダリー系のみ2色にすることで、全体の色のバランスがとりやすく、3〜5色の時に色相がかたよらない状態を作ることができました。
円グラフの場合、最初と最後のカラーが隣り合うことになるので、そこも明度が違う、もしくは離れた色相になるかも確認しました。
アクセシビリティの検証
最後に、「本当に誰にでも見やすいか？」 の検証です。 特に色覚多様性（色覚特性）をお持ちの方への配慮は必須です。
工夫した点
- 色相（色味）のギャップ: 隣り合う色が似すぎないようにする。
- 明度（明るさ）の差: 色味だけでなく、明るさにも差をつける。色が見分けにくくても「明るい/暗い」で境界がわかるように。
- 上限設定: 10位以降は潔く「グレー（その他）」にまとめる。優先度の低いデータのために色を増やして混乱させない。
そして最終的に出来上がったのがこちら
実際に、色覚特性を持つ社内のメンバーに見てもらいました。
「これくらいのものは、さすがにわかりますよ！」
「これくらいの（簡単な）もの」という最高の褒め言葉をいただき、無事リリース承認です。
円グラフをセカンダリーカラーから始めるとしたことで、他のグラフのキーカラーもセカンダリーカラーのオレンジでうまくハマってくれました。
まとめ
今回の「円グラフ本気出しプロジェクト」の結果です。
- システムカラーを増やさずに対応できた（エンジニアもニッコリ）
- 意味のバッティング（バグ）を回避した
- どんなデータ量でも破綻しないロジックができた
UIデザインは、ただ綺麗に色を塗っているわけではありません。 ユーザーが迷わないように、そしてシステムとして破綻しないように、ロジックを積み上げて設計しています。
もし、あなたのチームのデザイナーがモニターの前でうんうん唸っていたら、「あぁ、また何かと本気で戦っているんだな」 と温かく見守っていただけると嬉しいです。
最後まで読んでいただき、ありがとうございました！
