• Home
• コーポレートブログ
• Redmine 7.0で進む画面デザイン改善

前田です。最近は週末の午前中は松江市内某所のフードコートでコーヒーを飲みながらRedmineの開発をしていることが多いです。

オープンソースのプロジェクト管理ソフトウェアRedmineでは、これまでデフォルトテーマの画面デザインに対して改善を求める声が挙がることがよくありました。もちろん、サードパーティーの見栄えのよいテーマを利用することで見た目を改善できますが、Redmineの普及のためには標準状態での使いやすさや見た目の向上も重要です。

デフォルトテーマは長年大きな変化がありませんでしたが、2024年11月リリースのRedmine 6.0以降、段階的に改善が進められています。Redmine 6.0では、フォントサイズの見直しやNoto Sansの導入による可読性の向上、ビットマップアイコンからベクターアイコンへの移行が行われました。続く2025年9月リリースのRedmine 6.1では、チケット履歴のデザインが見直されています。

現在開発中のRedmine 7.0でも画面デザインの改善は続いていて、私は現行バージョンのRedmine 6.1と比べるとかなり良くなったと感じます。本記事ではRedmine 7.0でどのような改善が行われるのか紹介します。

ヘッダデザインの改善

最も目立つ変更はヘッダデザインの刷新です。これまでヘッダの青い背景がメインメニューにも適用されていたため青い領域が広く、視覚的に重たい印象がありました。新デザインではメインメニューにヘッダとは異なる淡いインディゴブルーの背景色となり、両者が視覚的に分離されました。これによりヘッダ周辺の重さが緩和されたと感じています。

また、メインメニューはタブ形式からナビゲーションバー形式へと変更され、より現代的なアプリケーションに近い外観となりました。アクティブな項目は背景が白になるほかインディゴブルーの下線が表示され、デザイン上のアクセントとしても機能しています。

OpenColorパレットの導入による色彩の統一・改善

Open Colorというオープンソースのカラーパレットを導入し画面内で使われている色を整理しました。

これまでは、似ているものの微妙に異なる色が各所で使われていました。CSSで使用する色を原則としてOpen Colorで定義されている130色のいずれかに統一することで、色のばらつきを抑え、整理・統合を行いました。これにより、画面全体の色彩に一貫性が生まれています。

また、一般的にカラーパレットで定義されている各色はUIで使いやすいよう調整されています。Redmineの画面で使われる色をそれらに置き換えたことで、これまでよりもきれいな印象になったと感じています。

以下の表は、Redmine 6.1で使われていた30個近くのグレー系の色がRedmine 7.0ではどのようにOpen Colorの10個のグレーに集約されるのかをまとめたものです。機械的に近似色に置き換えたのではなく、用途ごとに整理しながら置き換えが行われています。

Open Color	集約された旧グレー系カラーコードの例	主な用途の例
--oc-gray-9	#333	本文テキスト
--oc-gray-8	#404040	濃い境界線など
--oc-gray-7	#555, #505050, #606060	見出し、通常の補助テキスト、濃い枠線
--oc-gray-6	#999, #888, #777, #666, #8e8e8e, #959595, #b0b0b0	無効状態、注記、時刻表示、ミュート文字
--oc-gray-5	#aaa, #bbb, #bbbbbb	さらに弱い補助テキスト、点線・細い境界
--oc-gray-4	#ccc, #d0d7de, #ddd, #e4e4e4, #c0c0c0	標準的な境界線、罫線
--oc-gray-3	#e0e0e0, #ddd, #eee	やや目立つ淡色の境界や progress の未完了色
--oc-gray-2	#eeeeee, #ebebe4, 一部の #eee	テーブルヘッダ、薄い背景面
--oc-gray-1	#f6f7f8, #f1f1f1	ストライプ行、カレンダーの非当月背景
--oc-gray-0	#f9fafb, 一部の #f6f6f6	サイドバーやパネルのごく薄い背景

区切り線・境界線を減らしてシンプルに

区切り線や境界線の必要性を見直し、情報の識別に支障がないものについては取り除かれました。視覚的ノイズが減り、よりシンプルで整理された印象になりました。

余白の調整

見やすさの改善を目的としていくつかの場所で余白をわずかに大きくする調整が行われました。画面全体の圧迫感が減りました。

添付ファイルの一覧でクリップアイコンの代わりにファイル種別アイコンを表示

チケットやWikiなどに表示される添付ファイル一覧では、従来はファイル名の先頭にクリップアイコンが表示されていました。このアイコンは添付ファイルであることは示していましたが、ファイルの種類までは分かりませんでした。

今回の変更により、クリップアイコンの代わりにファイル種別を示すアイコンが表示されるようになり、一覧からファイルの種類を直感的に把握できるようになりました。

チケットの前・次リンクのスタイルとクリックしやすさ改善

チケットの右上に表示される「前」「次」リンクはこれまでは通常のテキストリンクでした。これを、チケット一覧画面や活動画面で使われているページネーションと同じスタイルとしました。これにより前・次リンクが視覚的に認識しやすくなるとともに、クリック可能な領域が広がり操作性が向上しました。

まとめ

Redmine 7.0では、ヘッダデザインの刷新やOpen Colorの導入をはじめとして、画面全体にわたる見直しが行われています。これにより、現行のRedmine 6.1と比べて色彩やレイアウトの一貫性が高まり、全体としてより軽く、整理された印象のデザインへと改善されます。

また、区切り線の削減や余白の調整、アイコンやリンクの見直しといった細かな改善も積み重なり、視認性や操作性の向上にもつながっています。これらは一つ一つは小さな変更ですが、全体として見るとユーザー体験の改善に確実に寄与しています。

Redmine 6.0以降の継続的な改善により、デフォルトテーマは標準状態でも十分に見やすく、使いやすいものへと進化しつつあります。

Redmine 7.0のリリースにぜひご期待ください。

---