UIの配色で自分が決められるのは、色ではなく「役割の数」だった。既製テーマ165種を並べて分かったこと
2026年09月03日 09:00 / - PV
はじめに
配色を決めるとき、私はいつも既存のデザインシステムのパレットを見に行きます。Tailwind の色一覧を開いて、blue-500 はこれか、600 だと少し暗いな、という具合です。
ただ、これをやっていて毎回引っかかることがありました。パレットを見ても「その色をどこに使うのか」は何も書いていないのです。
blue-500 が何色かは分かる。でもそれを画面の背景にするのか、ボタンにするのか、リンクの文字にするのかは、こちらが決めなければならない。素材は手に入るのに、使い方が手に入らない。
そこで思い出したのが、jQuery UI の ThemeRoller でした。
ThemeRoller は何を決めていたのか
2000年代後半に jQuery UI を触ったことがある方なら、ThemeRoller で作られた既製テーマを覚えているかもしれません。ui-lightness、redmond、dark-hive、vader。あのオレンジ色のヘッダーは、当時の管理画面でよく見かけました。
あれはパレットではなく、完成したテーマでした。「ヘッダーの背景はこの色、ボタンの通常時はこの色、マウスを乗せたときはこの色」まで決まっている。つまり、私が欲しかった「使い方」のほうを配っていたわけです。
だとしたら、ああいう既製テーマを集めて横に並べれば、配色の決め方そのものを比べられるのではないか。そう思って作ったのがこのツールです。
集めたもの
オープンソースで、かつ「最初から用意されているテーマ」を配布しているものを集めました。
| プロジェクト | テーマ数 | どういうものか |
|---|---|---|
| Bootswatch | 26 | Bootstrap 用の既製テーマ集。2012年から続いている |
| jQuery UI ThemeRoller | 25 | 今回の出発点。当時のWebアプリの配色がそのまま残っている |
| daisyUI | 35 | Tailwind 用。dracula や nord のような有名配色も入っている |
| Pico CSS | 38 | 主要色だけを差し替えた色違いが19色ぶん、それぞれ明暗の対つき |
| shadcn/ui | 16 | 近年のWebサービスの見た目の標準になりつつあるもの |
| GitHub Primer | 14 | GitHub の画面そのもの。高コントラスト版と色覚配慮版つき |
| Fluent UI | 7 | Microsoft のもの。Windows や Teams の配色 |
| Catppuccin | 4 | エディタから広まって、今はWebのUIにも使われている |
色の値は公式サイトの表を書き写したのではなく、各プロジェクトが npm で配布しているパッケージから機械的に取り出しています。写し間違いが起きないのと、どのバージョンの色なのかを特定できるからです。
ただ、色を並べただけでは結局「どこに使う色か」が伝わりません。なのでテーマの色だけでミニ画面を組み立てて、その形で並べるようにしました。ヘッダー、本文、一段沈めた面、ボタン、状態を表す4色。全部そのテーマの色で塗られています。
並べてみたら、予想が外れた
作る前、私はこう思っていました。「テーマごとに配色は自由に決めているのだから、165も並べればさぞかしバラバラだろう」と。
半分外れました。
バラバラどころか、ある部分はほとんど一致していたのです。
成功・注意・エラーを表す色。これを集計してみると、雰囲気がまるで違うテーマ同士でも色相がほぼ揃っていました。
| 役割 | 色相の中央値 | その帯に収まる割合 |
|---|---|---|
| 成功 | 160°（緑） | 85% |
| 注意 | 38°（黄〜橙） | 92% |
| エラー | 345°（赤） | 90% |
シアン一色で作られた cyborg も、パステル調の cupcake も、Microsoft の Teams も、エラーは赤いのです。ここは誰も動かしていません。動かすと意味が伝わらなくなるからで、実質的に選択肢がない場所だと言えます。
では、テーマごとに違っていたのはどこか。
面（サーフェス）を何段持つかでした。
| プロジェクト | 面の段数 | 持っている役割 |
|---|---|---|
| Bootswatch | 1 | 画面の背景だけ |
| shadcn/ui | 3 | 背景 / カード / 控えめな面 |
| daisyUI | 3 | base-100 / 200 / 300 |
| Catppuccin | 6 | base / mantle / crust / surface0〜2 |
Bootswatch は画面の背景を1色しか持っていません。カードを浮かせたければ、影や枠線で表現するか、自分で色を作ることになります。一方 Catppuccin は6段持っていて、どの深さの面にどの色を置くかが先に決まっています。
同じ「テーマ」と呼ばれているのに、決めている項目の数がまるで違う。これが165種類を並べて一番驚いたことでした。
つまり、配色で本当に自由なのは色ではなく、役割をいくつ持つかのほうだったわけです。色相は共通で動かせない。動かせるのは設計の粒度のほう。私は逆だと思っていました。
既製テーマは、配色見本ではなく設計図
そう考えると、既製テーマの使い方も変わってきます。
dracula の色をそのまま持ってきても、自分のサービスの配色にはなりません。有名なテーマをそのまま使えば見た目が既存のものと似るだけです。参考にすべきなのは色ではなく、その色をどの役割に何個割り当てているかのほう。
- 面は何段必要か（カードを浮かせたいなら最低3段）
- 主要色に対して「その上に置く文字色」を対で持つか（daisyUI と shadcn/ui はこれを徹底しています）
- 状態色を独自に決めるか、緑・黄・赤のままにするか（後者が無難です）
この3つを先に決めてしまえば、あとは自分の色を流し込むだけになります。冒頭に書いた「パレットを見ても使い方が分からない」という引っかかりは、色を見ていたから解けなかったのだと、165種類を並べてようやく腑に落ちました。
役割の名前を見れば、使い方は書いてあったのです。
素材のほうのカラースケールを探している場合は、こちらに 11種類・1952色をまとめてあります。
色相の集計は、各テーマが「成功・注意・エラー」に相当する役割へ割り当てている色をHSLに変換し、彩度の極端に低いものを除いて数えたものです。掲載しているテーマはすべてMITライセンスのオープンソースで、値は各プロジェクトが配布しているパッケージから取得しています。本ツールは各プロジェクトと関係のある公式のものではありません。
この記事が何かのお役に立てれば幸いです。
最後までお読みいただきありがとうございました！
Share Me!