• Home
• コーポレートブログ
• 来るRedmine 6.0でのデフォルトテーマの改善状況：見やすく、読みやすく

前田です。先月の後半からオープンソースのプロジェクト管理ソフトウェアRedmineのデフォルトテーマの改善に取り組んでいます。

さて、Redmineの新バージョン6.0がもうすぐリリースされそうですが、来るRedmine 6.0では、私の成果も含め、デフォルトテーマに対して比較的大きな変更が行われ、見やすく、読みやすく改善されます。

Redmineではこれまで外観の変更はあまり行われてきませんでした。RedmineのChangelogを読む限りでは、デフォルトテーマが現在の風味のものになったのは2007年リリースのRedmine 0.6で、それ以前のRedmine 0.5.1までは現在のClassicテーマ相当のものがデフォルトテーマとして使われていたようです。おそらく今回の改善は、Redmine 0.6以来17年ぶりの大きな変更ということになりそうです。

以下、変更内容を紹介します。

ベクターアイコンへの移行

Feature #23980: Replace icon images with Tabler SVG icons

主にMarius BĂLTEANUさんとTakashi Katoさんが取り組んでいたビットマップアイコンから滑らかなベクターアイコン（Tabler Icons）への移行により、アイコンが今風の印象になりました。

ヘッダの配色調整

Feature #41266: Improve header design with gradient background

少しモダンな雰囲気になるかなと思い、ヘッダにグラデーションを入れました。上部30%は既存の青色（カラーコード #628DB6）を維持し、そこから下に向かってやや濃い青色（カラーコード #356D92）に変化するグラデーションとしました。

ヘッダの下部を濃い色にした副次的な効果として、機能名を表す「Activity」、「Roadmap」、「Issues」などのタブの名称とヘッダ背景とのコントラストが高くなり、名称部分が見やすくなったと感じます。

ボックスとサイドバーの配色調整

Feature #41298: Refine UI with updated box styling and border colors

ボックスとサイドバーの背景はRedmine 5.1では明るい灰色（カラーコード #EEEEEE）ですが、前々からくすんだ色だと感じていました。くすんだ感じを解消するために青みがかった白（カラーコード #F9FAFB）にしました。ヘッダの色と調和するよう、新しい背景色の色相はヘッダの青色の色相約209.3度に近い210度としています。

背景色の変更にあわせて、ボックスのボーダーの色も灰色（カラーコード #DDD）から青みを帯びた灰色（カラーコード #D0D7DE）に変更しました。この色の色相もボックス背景色と同じ210度です。また、わずかなbox-shadowを設定し立体感を出しました。

ボックスのボーダーの新しい色は統一感のためにテーブルなどほかのオブジェクトにも適用しています。

本文フォントサイズを12pxから14pxに引き上げ、欧文フォントをVerdanaとTrebuchet MSからNoto Sansに変更

Feature #41321: Improve readability by refining font sizes and switching to Noto Sans font

本文のフォントサイズを12pxから14pxにしました。12pxというフォントサイズは、おそらくRedmineが最初にリリースされた2006年において広く使われていた1024×768ピクセルの程度の画面解像度で欧文文字を表示するには問題なかったのだと思いますが、現代のディスプレイ環境だと小さく感じます。また、当時であっても日本語を表示するには12pxはかなり小さかったはずです。

また、本文のフォントにはVerdana、見出しのフォントにはTrebuchet MSが使われているところ、いずれもNoto Sansに変更しました。

VerdanaとTrebuchet MSはともに1996年にMicrosoftが発表したフォントです。個人的には、Verdanaは少々古さを感じ、またTrebuchet MSは字形の個性が強く、特に日本語と英数文字が混在したときに違和感が大きいと感じていました。

そこで、本文・見出しともに2012年にGoogleが発表したNoto Sansに変更しました。Verdanaに感じていた古さとTrebuchet MSに感じていた個性の強さが解消され、今風の雰囲気になったのではないかと思います。さらに、読みやすさの改善を狙って行と行の間の余白を確保しました。

新しいフォントとしてはほかにもいくつかのフォントを検討したのですが、最終的にNoto Sansに決めた理由は3つあります。まず横幅が少し広めなので、横幅がかなり広いVerdanaからの切り替えでも違和感が若干抑えられること、"1" と "l" と "I" （それぞれ数字のいち、小文字のエル、大文字のアイ）のように似た形の文字でも識別がしやすいこと、そしてNoto SansはNoto Sans JPを始め多くの言語向けに展開されているため、独自テーマあるいはView Customizeプラグインでそれぞれの言語用のフォントを雰囲気を維持したまま追加するといった対応がしやすそう、ということです。

テーブルのデザイン調整

Feature #41475: Improve table readability by adding row borders

テーブルの行と行と間に線を入れました。さらに上下の余白を確保しました。すっきりとした見た目にするためにテーブル左右のボーダーは消しました。

おわりに

現行のRedmineは、見た目の雰囲気やテキストの読みやすさの観点からデフォルトテーマのままでは使いにくく、別のテーマを追加インストールして使うのが半ば当たり前になっています。しかし、近くリリースされそうなRedmine 6.0では、上記で挙げたいくつかの改善によりデフォルトのままでもそこそこ使えるようになるのではないかと思います。

実は、Redmineのテキストの読みやすさを改善するため私が2010年に公開した「Farend Basic」というテーマがあります。ありがたいことに多くの方にこのテーマをお使いいただいているのですが、デフォルトテーマの改善により、Redmine 6.0のリリース以降はFarend Basicテーマをわざわざインストールする必要性が低くなりそうです。

Redmine 6.0がリリースされたら、ぜひ改善されたデフォルトテーマをご確認いただければと思います。

【スタッフ募集中】
弊社ではAWSを活用したソリューションの企画・設計・構築・運用や、Ruby on Rails・JavaScriptフレームワークなどを使用したアプリケーション開発を行うスタッフを募集しています。採用情報の詳細
弊社での勤務に関心をお持ちの方は、知り合いの弊社社員・関係者を通じてご連絡ください。

---