社内システム向けデザイン - Part1

こんにちは。メタサイトエンジニアのSMです。

クロス・マーケティンググループ（以下CMG）には多くの社内システムがあります。 今回はそれらのシステムのデザイン面の課題や取り組みについて語ろうと思います。

社内システムについて

CMGの社内システムとは従業員が業務を円滑に行うために利用する社内独自のシステムで、 日々の案件を管理するものや、社内の在席状況を確認するものなど様々なシステムがあります。

システムの多くは、CMGのシステム開発部のエンジニアにて作られてきましたが、 開発時にデザイナーが入ったケースはなく、UI/UXは担当したエンジニアのセンスでもって作られてきました。

筆者もデザインについて特別な知識があるわけではない中で、いくつかのシステムの画面設計・デザインを担当してきましたが、その際に難しさを感じた点を共有したいと思います。

一般的なWEBサイトのデザインとの違い

社内システムのデザインは、ECやLPといったサイトのデザインとは違った難しさがあります。 例をあげます。

• 毎日使うのでどんなに複雑な導線でも慣れてしまう => 改善案がユーザから出てきにくい
• 慣れているシステムが結局使いやすい => 改善に抵抗が生まれる
• 性質上、参考にできるお手本が少ない => WEB上にサンプルも少ないし、業務に密接に関わるサービスなので参考にしづらい
• 見た目や使いやすさよりも、機能性・ミスしない導線が重視される => 一般的には悪いUI/UXと言われているものを是とするケースがある などです。

以下は弊社特有かもしれませんが、他にもこんな難しさを感じています。

• チーム内にUI/UXに興味のある開発者が少ない
• ユーザとなる部署・会社の特性が多種多様で意見がばらばら

UI/UXの課題例

と、そんな難しさを抱えつつも苦労して作ってきたシステムたちですが、 問題に目をつむってきた結果として現在、以下のような課題があります。

• システム間でデザインに一貫性がなく直感的に使えない 　

• ミスを誘発してしまうようなボタン配置（戻るボタンを押し遷移した先が保存ボタン） 　

• 使い勝手が悪くあまり使ってくれなくなり、結局社外の製品を使う

折角作ったシステムが、機能としては優れていても、見た目や使い勝手で原因で社外製品に置き換わっていくのは、モチベーションが下がってしまう！ので、積極的に改善の取り組みを行っていきます。

最近改善したこと

一部プロジェクトでUI/UXデザインツールであるAdobeXDを利用して、事前に関係者間で合意をとるようにしました。

以前はエクセルやパワーポイント、一般的なワイヤーフレームをかけるツールなどで、簡単に作成したもので会話をしていました。 それだとやはり、フォントや各パーツのサイズ感・余白・動きなどに認識の差が生まれやすく、 結果ちょっとイメージと違うけれどリリースすることを優先して細部に目をつぶったシステムが生まれてきました。

導入後はデザインを描くのも楽になりましたし、プロトタイプ機能を使ってボタンクリックでのページ遷移なども体験できるようになりました。 開発前にリンクでの共有機能を使ってユーザに画面を共有し、より具体的な修正依頼をだしてもらうことができるようになりました。 また、コンポーネントのサイズや、カラーコードなども確認できる共有タイプもあるので、開発者にとってもコードベースで会話ができるようになり、確認時に起きる認識の差がほとんどなくなりました。

これからの取り組み

今後も以下のような改善を進めていく予定です。

自作にこだわらず、便利なUIコンポーネントを活用も検討しています。 弊社ではまずmaterial-ui を試していますが、 執筆中にAWSが Cloudscape Design System を公開したので、そちらも注視していきたいと思います。 機会があれば、このブログで使い方や感触をお伝えできればと考えています。

他にも例えば、

• 外部UXデザイナーの活用
• UI/UXに興味を持ってもらうための勉強会の開催 などを考えています。

改善の過程について今後こちらのブログを通じてご紹介していこうと思います。