• Home
• コーポレートブログ
• Redmine 7.0に向けたOpen Color導入によるUI配色改善

前田です。

Redmineの次期新バージョンであるRedmine 7.0に向けた改善の一つとして、画面の配色が見直されました。この改善は実は私が担当して進めたものです。以下はこの改善に関する www.redmine.org のチケットです。本記事ではこの改善について、背景と改善内容を紹介します。

この改善では、Open Colorというカラーパレットを導入し、画面内で使われている色を整理しています。これまで「似ているが微妙に違う色」が多く使われていたため、それらを統合し、使用する色を118種類から66種類まで削減できました（シンタックスハイライト用の色を除く）。その結果、画面全体の色に統一感が生まれています。

Open Colorは、一つ一つの色の美しさと調和に配慮されて設計されたパレットです。その特性もあり、今回の見直しによって、Redmineの画面が従来よりも少し洗練された印象になりました。

現在のRedmineのUI配色の課題

現在のRedmineは、長年にわたり多数の機能が多くの貢献者によって追加されてきました。その過程でスタイルシートに対して新しいスタイルが追加されてきましたが、同系色だが微妙に違う色が追加されたり、同じ役割のUI要素であっても画面によって色が少し異なったりといった状況が発生しています。

Open Color導入による解決

微妙に異なる色が多数使われていて統一感にやや欠けるという問題を解決するために、Open Colorというオープンソースライセンスのカラーパレットを導入して、スタイルシート内の色は一部の例外を除きOpen Colorの色を使うこととしました。

現状の多数の色を、一つ一つOpen Colorで定義されている130色のいずれかに置き換えることで、似たような色はOpen Colorの特定の色に集約されます。

Open Colorの導入はRedmineの開発ブランチ（trunk）ではすでに完了していて、次期新バージョンであるRedmine 7.0に含まれる予定です。

Open Colorとは

Open Colorはユーザーインターフェイス用に開発されたカラーパレットです。

OpenColorでは13種類の色系統（GRAY、RED、PINK、GRAPE、VIOLET、INDIGO、BLUE、CYAN、TEAL、GREEN、LIME、YELLOW、ORANGE）に対して0から9までの10段階の明るさの色、合計130の色が定義されています。

それぞれの色は --oc- という名前で始まるCSS変数で定義されています。例えば最も明るいグレーと最も暗いグレーはそれぞれ --oc-gray-0 と --oc-gray-9 です。以下はスタイルシート内でのOpen Colorの色の使用例です。リンクの色として最も暗い青である --oc-blue-9 を使用しています。

a, a:link, a:visited { color: var(--oc-blue-9); text-decoration: none; }

Open Colorの実体は色名に対応するCSS変数を定義したファイル open-color.css です。スタイルシート内で open-color.css を読み込むことでOpen Colorを利用できるようになります。Redmineでは application.css の冒頭で以下のように読み込んでいます。

@import url('/open-color.css');

既存CSS内で使用されている色の置き換え

RedmineへのOpen Colorの導入は、複数のスタイルシートで使われているそれぞれの色を一つ一つOpen Colorの近似色に置き換えていくという地道な作業を行いました。

Open Colorの近似色の特定にはAIを使用しました。ChatGPTはOpen Colorの色の情報も把握しているので「#d0d7de のOpen Colorの近似色は?」といったプロンプトを入力することで、Open Colorの近い色の候補が複数提示されます。提示された色でスタイルシートを更新したら実際にRedmineの画面を目視で確認し、必要に応じて調整をしました。

Redmine 6.1で使われている色の中には似た色がOpen Colorの色の中にないものがあります。それらの色は全く別の色を割り当てたり、無理にOpen Colorに置き換えずにそのまま維持したりしました。例えばロードマップ画面の進捗バーの淡い緑は緑系の全く別の色に置き換えて、アプリケーションのヘッダーの青はそのまま残しました。

改善の効果

スタイルシート内で使われている色の多くをOpen Colorの色に置き換えた結果、application.css で使用している色を前述の通り118種類から66種類に集約できました（シンタックスハイライトの色は除く）。実は色を集約したことの効果は派手さがないので大変わかりにくいのですが、色の一貫性が欠けていたことによる微妙な違和感を除く効果があるのではないかと思います。

また、私の個人的な感想としては、既存の色をOpen Colorの注意深く選択された色に置き換えたことで、画面全体がきれいになったと感じます。実は色の統一よりもこちらのほうが画面から受ける印象の改善効果が大きいと思います。

見た目以外の点では、今後のRedmineの開発にも役立ちます。

新たな機能を追加するときにUI要素のための色が必要になったとき、Open Colorの色から選ぶことになるので、微妙に異なる統一されていない色が使われることを防ぐ効果が期待できます。

開発者が色を決めるときの負担も減らせます。1677万もの色を指定できる16進数のカラーコードで色を指定するのではなくOpen Colorの130色のパレットから色を選択することになるので、適切な色を素早く決定できます。

結び

今回行ったOpen Colorの導入は、目立つ改善ではありません。しかし、Redmineのように日々長時間触れるツールでは、こうした細かな調整が使い心地に影響すると思います。小さな改善を積み重ねることで、Redmineの画面から受ける印象をより良いものに変えていきたいと考えています。

Open Colorが導入されるRedmineのバージョンは、来年リリースされるであろうRedmine 7.0です。

なお、当社が独自にリリースしているファーエンドテクノロジー版Redmine「RedMica」では11月にリリース済みのRedMica 4.0で既にOpen Colorが導入済みの状態です。また、当社が提供しているRedmineのクラウドサービス「My Redmine」では「2026新春アップデート」によりOpen Colorが導入済みの状態になります。

将来Redmine 7.0を使ったときに、あるいは2026新春アップデート適用済みのMy Redmineを使ったときに、「色が変わった？」と思ったらこの記事を思い出していただければ幸いです。

---