自社製品のUIデザインを改善した話【Pleasanter】 #CSS

概要

自社製品「プリザンター(Pleasanter)」のUIデザインを改善して先日無事にリリースすることができたので、新旧UIデザインの比較やプロジェクトの振り返りをざっくりまとめました。「プリザンターはデザインがちょっとダサいから敬遠していた」という方は、改めて利用をご検討いただければと思います。（無料で始められます！）

はじめに

プリザンターは業務システムとして多くの現場で活用されており、これまではユーザ業務を実現するための機能開発が優先して行われていました。UIデザインについては情報システム部門のユーザには好評な一方で、「レガシーである」「ダサい」といった意見もありました。こういったモダンなUIデザインを期待するユーザの声を受けて、UIデザインの改善を行いました。

そして、2024/4/9にリリースされたプリザンターver.1.4.3.0にてデザインが新UIにリニューアルされました！

バージョンアップ情報については、以下をご確認ください。
プリザンターの直近のバージョンアップ情報 | Pleasanter

4/9 リリース情報(ver.1.4.3.0)
・デザインを新UIにリニューアル。
・テーマの既定値を「sunny」から「cerulean」に変更。

5/14 リリース情報(ver.1.4.4.0)
・第2世代ユーザインターフェースのテーマに「green-tea」「mandarin」「midnight」を追加。

画面イメージ

とりあえず結果からということで、画面イメージはこんな感じになりました。

トップ画面

Before：

After：

一覧画面

Before：

After：

編集画面

Before：

After：

ログイン画面

Before：

After：

2024/5/14にリリースされたver.1.4.4.0では、第2世代ユーザインターフェースの新テーマとして「green-tea」「mandarin」「midnight」が追加されました。
また、新UIのナビゲーションメニューを拡張ナビゲーションに対応する機能が追加されました。

新テーマ（第2世代ユーザインターフェース）

cerulean（既定値）：

green-tea：

mandarin：

midnight：

開発の流れ

自分が発注者（兼プロジェクト責任者、開発者）の立場で発注先の選定から行い、プロジェクト関係者（発注先のデザイナー、開発者）とプリザンターで課題管理を行いました。デザインについて大枠の方向性を整合したのち、発注先のデザイン案（画面イメージ）をもとに協議を行い、サーバ側（C#）を自社、クライアント側（CSSをメインにJavaScriptが一部）を発注先とする分担で実装を進めました。限られた予算や期間を考慮して、既存の利用技術であるjQuery UIは変更せず、CSSでの調整をメインに実装を行う方針としました。

特に配慮した点

業務システムとしてのUIデザイン改善であることを念頭に、「おしゃれなデザイン」「かわいいデザイン」ではなく、「視認性を上げるために文字サイズを大きくしながらも、画面に表示できる情報量をなるべく維持する」といった業務を遂行する上での機能性を重視しました。また、「旧デザインも利用できる」「UXとしての動線を大きく変えない」など既存ユーザを混乱させない設計を検討しました。

特に工夫した点

1. サイドメニューの動きについて

メニューについては、もともと右上に配置されていたものを一般的なWebシステムと同じように左サイドに配置することで、マウス操作の移動距離が短くなるよう動線(UX)を改善しました。サイドメニューの動きについては、なるべく少ないクリック数でユーザが実現したい動作を行えるようにハンバーガーメニューやアイコンをクリックした際の動きを検討しました。

Before：

After：

2. トップ画面などのアイコンについて

プリザンターのサイトの種類「フォルダ」「期限付きテーブル」「記録テーブル」「Wiki」「ダッシュボード」がオブジェクトの形で表現されており、これがデザイン上の「ダサい」要因となっているのでは？という仮説を立てました。

プリザンターのサイト機能については、以下をご確認ください。
サイト機能 | Pleasanter

Before：

そして、「オブジェクトの形で表現するのはやめて、アイコンをメインに表示することで識別しやすくなるのでは？」と考えて、以下のようなデザイン案を作成しました。

このデザイン案をもとによりシンプルな表示となるように調整して、発注先のデザイナーさんにオリジナルのアイコンをデザインしていただきました。

After：

上記イメージのうち、「サイト画像の設定」のアイコンだけは製品に組み込まれたものではなく、下記サイトよりお借りしたものです。
FLAT ICON DESIGN -フラットアイコンデザイン- | フラットデザインに最適！WEBサイトやDTPですぐ使える商用利用可能なフラットアイコン素材がフリー（無料）ダウンロードできるサイト『FLAT ICON DESIGN』

プリザンターにはサイトにオリジナルの画像を設定できる機能があり、ユーザが任意に設定することができます。
サイト機能：サイト画像の設定と削除 | Pleasanter

3. ボタンの色分けについて

新テーマではボタンの表示色を以下の基準で色分けを行いました。

データ更新系：青（#106EBE）：「作成」「更新」ボタンなど
データ削除系：赤（#E16A6A）：「削除」「パスワードリセット」ボタンなど
キャンセル系：黒（#444444）：「戻る」「キャンセル」ボタンなど
その他操作系：白（#FFFFFF）：「前」「次」「今日」ボタンなど

Before：

After：

ソースコードをgrepした結果をベースに、画面のどこに表示されるボタンなのかを資料にまとめて、それぞれに対しての仕様（ボタン色）を決定しました。下記は抜粋ですが全体で464行あり、ソースコード単位でのプリザンターのボタン数はだいたいこれくらいあるということになります。（地道に仕分けをするのがなかなか大変でした…）

User's voice

IT製品のレビュー・比較サイトのITreviewでは、プリザンター(Pleasanter)の製品レビューとして以下のご意見をいただきました。
モダンな感じになったが前の方がいいかも
 モダンな新デザインで新規ユーザにお勧めしやすく！

その他、弊社の主催するイベントなどでも好評とのご意見を多数いただきました。
みなさま、貴重なご意見ありがとうございます！

おわりに

プロジェクト開始時はデザイナーでない自分がUIデザイン改善を行えるのか不安もありましたが、プロジェクト関係者と協議しながらうまく分担して理想的なUIデザインを実現することができました。プライマリーカラーやテーマの名前をみんなで決めたり、表現方法としてアイコンで識別させるなどクリエイティブなアイデアも出しながら進めることができたと思います。新しくなったUIデザインのプリザンターで、みなさまの業務がより快適になれば幸いです。

自社製品のUIデザインを改善した話【Pleasanter】

概要

はじめに

画面イメージ

トップ画面

Before：

After：

一覧画面

Before：

After：

編集画面

Before：

After：

ログイン画面

Before：

After：

新テーマ（第2世代ユーザインターフェース）

cerulean（既定値）：

green-tea：

mandarin：

midnight：

開発の流れ

特に配慮した点

特に工夫した点

1. サイドメニューの動きについて

Before：

After：

2. トップ画面などのアイコンについて

Before：

After：

3. ボタンの色分けについて

Before：

After：

User's voice

おわりに

参考リンク