識学クラウドのUI　-デザイン改修-

こんにちは、シキラボのデザイナーyuhです。
今回は担当した識学クラウドのUI改修について書いていきたいと思います。

識学クラウドとは

株式会社識学が提供している企業向けのクラウドサービスです。
”成果の上がる組織をつくる”理論、「識学」の理論に基づいた
組織マネジメントツールです。

主な機能として以下のものがあります。

・組織分析と結果の可視化
・動画学習による社員への識学理論の浸透
・企業と候補者のズレをなくす採用ツール

識学をシンプルかつ効果的に実践することで、組織成長の促進を図ることができるのが特徴です。

改修点とその詳細

改修点は以下の3つです。

・画面構成の整理
・デザインルールの徹底
・SP版のデザイン

順番に見ていきましょう！


【画面構成の整理】

改修前の画面ですが、メニュー内のタブの中に更にタブ…という構成。
１つのメニュー項目中に沢山の要素や機能が入っていて、複雑な印象です。

改修後ではメニューの階層を増やし、なるべく画面毎に1つの機能になるよう調整をしました。
こうすることで「この画面で何をするのか」という目的が明確になり、
各要素の優先度も決めやすくなります。

【デザインルールの徹底】

押せる場所がよく分からない、文字が多くて見辛い…などの見た目の問題がありました。そのため、

・ボタンは特定の色で統一し、分かりやすく
・適切な余白を設ける
・アイコンを使用し、見てすぐに伝わるようにする

等々、デザインルールとコンポーネントを徹底して改善することに。
結果とても画面が見やすくなり、使用時の迷いも減りました。

【SP版のデザイン】

旧版のUIもスマートフォンで見ることは出来ました。
ですが、あくまでも表示が可能というだけで、表示が崩れてしまっている部分も多々。
なのでSP版デザインも新たに作成することに。
ボタンを大きめに、リストの表示方法をSP版専用のものに変えるなど、
小さな画面でも操作しやすいように意識しました。

まとめ

今回は、主に大きな3つの部分を改修点として挙げましたが、
UIデザインにおいて情報の整理やデザインルールの作成などは基本的なことだと思います。
ですが同時に難しい部分だなぁと、UI改修を振り返って改めて感じました。
整理整頓があまり得意ではないので、情報の整理に関しては特にそう思ってしまいますね…。

そして、より良いUIにする為には、もっと細かい部分の気配りや気付きが必要かなぁと思っています。
識学クラウドをもっと使いやすいツールに出来るよう、思いやりの心を忘れずに日々精進していきます！