こんにちは、エスディーテック エンジニアの前田です。

先日リリースされた当社製品の3Dオブジェクト自動配置ツール「3D Object Mapper」について、製品化に向けたUI改善プロジェクトの様子をお話していきたいと思います。

「3D Object Mapper」の紹介はこちら

UI改善のきっかけ

まず以前までのUIは、まるでベータ版のような全体的に仮の状態のUIでした。

処理機能としては十分ですが、

• 操作フローが分かりにくい

• プレビュー状態が分かりにくい

といった、ソフト単体で見た時にユーザーにやさしくない点がいくつかありました。

実は、この製品は初めから製品化を目指して作られたわけではなく、 エンジニアがCarMaker関連のプロジェクト参画中に業務効率の向上を目的に作られたものでした。

使っていくなかで、いくつか機能改修はされたものの、デザイン面に関してはほとんどが初期状態のままで、デザイナによるUI/UXの精査があまり入っていない状態だったのです。

ですが、この機能はツールとして需要があるのでは？ということで、製品化に向けたUI/UXの改善を行うことになりました。

取り組みについて

ここからは実際にUI改善として行った内容を紹介していきます。

デザイン領域

■ 調査、アイディエーション

デザイン作業に入る前に、ユーザーやアプリの仕様など、正しいUI/UXになるよう社内インタビューを通して情報収集を行いました。

• 利用目的

• 現状UIの印象

• 課題に感じること、改善案や追加機能の要望

  
  

これらのインタビューで、開発時では気づけなかった課題を抽出しました。

その後デザイナとエンジニアで、アイディエーションを行いました。

課題整理や改善アイデアをまとめ、イメージマップとしてまとめたり

5W1Hの観点からユーザーの具体化をしたペルソナを作成し、より正しいUXになるよう検討を進めていきました。

■ レイアウトデザイン

調査・アイディエーションで洗い出した課題点をもとに、ワイヤーフレーム・意匠作成に取り掛かりました。

初期の「3D Object Mapper」で挙げられていた主な課題として、操作手順・方法等が直感的ではなくわかりにくいといった点や、ランダムに配置されるオブジェクトのプレビューが確認しづらいといった点がありました。

これに対し、操作フローの見直しを行いつつ、レイアウトの基本原則（「整列」「近接」「反復」「強弱」）を取り入れながらワイヤーフレームで設計することで、課題に対してユーザーの視線誘導に沿ったレイアウトの検討やUIコンポーネントの改善を図りました。

また、デザインツールとしてFigmaを使い、バリアブルやコンポーネントを使用し、作業の効率化・一元的な管理を行い、今後の運用・改修に備えたDesignsystemを構築しました。

■ 意匠デザイン

アイディエーションの段階で検討を行ったコンセプトやペルソナをもとにデザインコンセプトシートを作成し、イメージの共有を行いつつ意匠作成に取り掛かりました。

システムアイコンの作成では、線の太さや、塗とライン、一貫性のある見た目になるようにグリッドを使用しながら、ユーザーにとって認知不可を軽減するように作成に当たりました。

またアプリアイコンに関しては、既存製品とのイメージを作成しつつ、シンプルで装飾を控えたデザインに仕上げ、黄金比率等に配慮しながら仕上げました。

エンジニアリング領域

実装はWPF（Windows Presentation Foundation）で作成していますが、以前まではWindowsFormsのようなイベントコールでの実装だったため、見た目と処理があまり分離できていない状態でした。

これも元の実装背景があるのですが、確かにMVVM（Model-View-ViewModel）などの設計パターンを使用した方が変更に強かったり、保守面で大きく強さを発揮するのですが、その分実装・習得のコストが高く、”見た目は別にいいから処理だけ欲しい”という時にはオーバースペックなことがあります。

最初に作成したときは、製品化にまで発展するとは思っておらず、あまりしっかりとした設計を行わなかったため、製品化にあたり全体のリファクタから始めることになりました。

リファクタとして、WPF開発の主流な設計モデルであるMVVMを採用しました。

前回までは画面そのものに処理を書いていたため画面のみの変更が困難でしたが、MVVMを採用することで、画面そのもの(View)、画面を操作するもの(ViewModel)、データ(Model)の3要素に分離でき、各要素間の依存性が下がることで保守性が向上します。

結果、MVVMの習得と導入で時間はかかったものの、UIとデータの分離がしっかりとできるようになり、今後の修正にも対応しやすくなりました。

設計の切り替えはコストが大きくかかるため避けられがちですが、ソフトの目的にUIも含むようになった今回に合わせて、設計も変えれたのは良かったと思います。

UI改善プロジェクトメンバーの感想

◇ 相原さん（デザイナ）

デザインルールの策定からUIの改善に至るまでのプロセスを通じて、貴重な経験を積むことができたと実感しています。

デザイナとエンジニアが一体となってサービスをつくることには、難しさを感じる場面もありましたが、サービス開発においてプロセスを整理し、それが形になっていく過程に、今回は特に大きなやりがいを感じました。

改めて、チームで検討したサービスが、より多くのユーザーにご満足いただけるものになれば幸いです。

◇ 大藪さん（デザイナ）

今回のUI改善は、デザイナだけでなくエンジニアも巻き込むことで、より質の高い成果につながることが実感できる機会になりました。

専門分野の垣根を越えて議論することで、技術的制約の理解が深まり、より現実的でユーザーに寄り添った解決策を見つけれることを学びました。

今回の経験で得られた学びを活かし、今後のプロジェクトではさらに効率的に、そしてユーザーのニーズを深く理解したデザインを考えていきたいです。

◇ 前田（エンジニア、私）

今回は、実質的にPLという役割でプロジェクトに参画しました。

エンジニアをまとめた経験はありましたが、デザイナをまとめたことはなかったので、都度何が必要で、どうアプローチすればうまく回るのか考えることにとても苦労しました。

不慣れなこともあり迷惑をおかけした箇所もありましたが、最終的に無事にUI改修が一通り終わって安心しました。

自身が作ったソフトが製品化までされ、さらに改善プロジェクト、そのPLロールと、なかなかできない経験ができたのかなと、振り返って感じています。

今後このソフトを使った方が良いと感じてもらえるととても嬉しいです！