データ分析ツールのデザイン改善

既存画面の課題分析

リリース直前のデータ分析ツールに対し、既存実装への影響を抑えながら、画面全体のデザイン改善を行いました。

単なる見た目の更新ではなく、配色やサイズの利用規則を整理し、他関連サービスにも展開しやすいルールとして整備しています。

主な目的は、情報過多に見える印象や過剰な装飾を見直し、画面の優先度やまとまりを把握しやすくすることでした。

既存画面の課題分析

リリース直前の対応だったため、大きな構造変更を避けつつ、見え方を改善する必要がありました。

既存画面は、テキスト量の多さや装飾の強さによって、情報の優先度やまとまりが伝わりにくい状態でした。加えて、一部のグラフや配色は警告色のように見え、意図しない強調が生じていました。

そこで本件では、以下の3点を主要課題として整理しました。

◇　視認性の改善：見やすさと読み取りやすさの向上

◇　意味の整理：優先度やグルーピングの明確化

◇　再利用性の確保：他サービスにも流用できるルール化

色の役割を整理する

赤 / 橙 / 黄 などのアラートカラーは、必要な箇所に限定して使用しました。色の意味を明確にし、不要な強調を減らしています。

着色量とコントラストを抑える

全体のコントラストやオブジェクト量を調整し、画面ノイズを軽減しました。重要な情報だけが自然に目に入る構成を目指しています。

レイアウトで関係性を伝える

配色だけでなく、近接やまとまりによって情報の関係性を示しました。画面構成と遷移の流れを整理し、理解しやすさを高めています。

単発対応で終わらせない

今回の改善内容は、カラー利用規則やサイズ規則として整理し、他サービスにも展開できる抽象度で整備しました。

既存画面の検証と改善

改善では、複数画面の before / after を比較しながら、視認性や操作性を調整しました。

たとえば、警告色のように見えていた配色の整理、日付移動のしやすさの改善、数値情報のグラフ化やサマリ情報の強調などを行い、情報の理解しやすさを高めました。

外部記事でも、時間外労働や打刻差分を、グラフや表で直感的に把握しやすい点が評価されています。

短期間かつ制約の大きい状況の中で、実装影響を抑えながら、画面全体の視認性と理解しやすさを改善できました。特に、プライマリカラーの彩色面積を、従来比で約3割程度まで抑えたことで、瞬時に重要な情報を識別しやすい構成を実現しました。

また、個別画面の調整に留まらず、配色やサイズのルールを整理し、他サービスにも展開しやすい形で残せた点に価値がありました。

この経験を通じて、UI改善は見た目の刷新ではなく、情報の意味や関係性を整理する設計であると再認識しました。