この記事はSafie Engineers' Blog! Advent Calendar 24日目の記事です。
はじめに
こんにちは、セーフィー 企画本部 デザインセンターの碇石（いかりいし）です。
2024年10月30日、デザインシステムを用いたUIリニューアルがついに公開されました。対象プロダクトは、エンタープライズ向けに多台数のカメラを統合管理できるSafie Manager（セーフィーマネージャー）です。
まず、デザインシステムについては、2019年12月頃から開発を進めていました。2023年に入ってからSafie Managerを含む管理ツールの開発を行っている開発チーム内でフレームワーク移行の話が上がり、そのタイミングに乗せる形でデザインシステムを用いたUIリニューアルプロジェクトが始動。
手探りでスタートしたこのプロジェクトは約1年10ヶ月の開発期間を経て無事公開となりました。
最適なUXを考える上で、デザインセンターでは日頃からJesse James Garrett 氏が提唱する5段階モデルを用いる事が多く、今回のプロジェクトもこちらをベースにデザイン制作までを振り返ってみようと思います。
開発体制
フレームワーク刷新を含む大型リニューアルはセーフィーとしても初めての試みとなるのですが、このプロダクトは初期リリースの後デザイナー不在となり開発チームのみで守っていたプロダクトなのです。
そういった背景もあり、このチームにおいてはエンジニアとデザイナーの共同開発は実質初めての状態。今回のプロジェクトのためにディレクターとデザイナーをアサインしました。
- PdM 1名
- フロントエンドエンジニア 9名
- デザインディレクター 1名
- デザイナー 2名
戦略：手探り感満載の初動期
日頃から使い勝手に関する足元の課題感は多く、この機会にしっかり解決していきたい意志をエンジニアと共に意識を合わせ、再設計に当たり、ターゲットユーザーのすり合わせと目的、現状のUX課題の抽出を行いました。
ターゲットユーザー
- 企業の管理者
- 情報システム部など会社のシステムを管理する人物
- スーパーバイザーやマネージャーなど、現場の監督責任者にあたる人物
- 利用用途
- 複数店舗を跨いで多台数カメラの設定および操作権限を管理する
目的
- フレームワークの刷新（Nuxt2→React）
- デザインシステムの適用
- 【ポイント】UXの改善（あるべきを考え、使い勝手の負を解消する！）
今回のリニューアルのポイントは、最適なUXの実現です。ユーザビリティ*1を担保することはもちろんのこと、複雑な仕様に対しユーザーがストレスなく利用できる状況を目指します。
UX課題
- 一貫性が無く、学習コストの高い操作体験
- 予測しづらい機能名称
- つぎはぎ的に追加されたナビゲーションメニュー
- 生かされていない一等地のホーム画面
具体方針
- 構造の最適化
- 骨格の最適化（ナビゲーション）
- 機能名称の最適化
今回はUIのリニューアルなので、機能要件はそのままに、ユーザーニーズに則したUXの検討に向けて構造〜骨格の再設計を実施します。
構造：オブジェクト指向（OOUI）で再設計
その一方で複雑な機能にインターフェースが追いついておらず、例えばオブジェクトが選ばれていないのにタスク選択のUIが出っ放しになっており、実行ボタンはdisableになっている、、
実行不可の理由が分からないというストレスをユーザーに与える可能性のある箇所や、操作画面の初期状態から「この操作は無効です」というようなエラー表示がされているなど、散見していました。
また、一覧上の操作においては単一の場合でも一時的にオブジェクトを選択状態にしなくてはならず効率の面で課題がありました。
設計の基本思想としてオブジェクト指向（OOUI）を意識し、オブジェクトを選択→タスクの選択→結果という流れに調整しながら、インタラクションを含めた形で基本的な負を改善する事ができました。
サイトマップとデータ管理の流れの型化
仕様理解もかねて、現行の構造も明らかにしながらデータ管理の流れを型化。全体像でBeforeAfterのイメージをすり合わせ、ナビゲーション構造はこのサイトマップを元に再設計を行いました。
この辺りは、今後画面を作っていく中での指針となる部分なので細かく確認を交えながら設計していきました。
骨格〜表層：作っては壊しを繰り返して磨き上げるUX
型化したデータ管理の流れを元に各画面を制作していきます。このフェーズになってくるとイメージが具体化していくので、実装に向けた細かい調整に移っていくところではありますが、画面構成をユーザーニーズに立ち戻り一度壊して再考するといった場面も多く発生しました。
画面構成（ゾーニング）
画面構成はプロダクト全体で統一されるため、デザイン主体で設計しています。
- ヘッダー
- プロダクト共通で固定化されています。デザインシステムがまだ反映されていないプロダクトにも既に展開されているUIになります。
- ナビゲーションメニュー
- プロダクト固有のメニューが並びます。作成したデータなど可変するものをメニューに並べることはNGというルールを設けています。
- コンテンツエリア
- 制約は特にないですが、横幅指定が画面幅100%を基準値とし、設定画面など横幅の長さによりコンテンツが見づらい、使いづらい場合に1040pxを最大値とするルールを設けています。
WF〜デザインカンプ
UIComponentがある事で、より具体的な形で情報設計をする事ができます。見た目がデザインカンプなので、この段階で作って壊してっていうのは大変なのでは、、と思われるかもしれませんが、実際の作業負荷はそこまででもなかったりします。
ただ、エンジニア側からのFBや提案の際、現状の制作環境としてFigmaの編集権限をもっていないエンジニアにとっては改めてWFを作って伝えなければいけない環境だったので、画面要件を決めるまでのラリーが何度も繰り返されたのは、今回のプロジェクトの中でも一番大変だった部分なのではないかと思います、、
マイクロインタラクション
disable時にリストをhoverすると、選択不可の理由がToolTipにより表示されるなどの細かいインタラクションを検討しながら最後の仕上げを行なっていきました。全ての画面に行き届いていない状況ではありますが、このToolTipが出ることで安心感が高まったように思います。
まとめ
今回はデザインを作るまでの話を5段階モデルに沿って振り返ってみました。改めて振り返ってみると、初動の「ユーザーを知る」ここの紐解きが甘すぎた事が今回の一番の反省点です。 実はこの5段階モデルの考え方もOOUIも、エンジニアには全く共有していないまま進めており、前提となる意識の部分で噛み合わない瞬間がしばしばあったように思います。
一方で、プロジェクトやデザインに対するエンジニアの思いの強さを肌で感じルことができ、プロジェクトが進行するにつれてプロジェクトメンバーの一体感が強くなったように思うのはすごく嬉しかったです。
現在、絶賛プロジェクトメンバーと振り返りを行っており、ユーザー理解が十分にできていればプロダクト特性を捉えた大胆な操作体験も実現できたかも？などなど後悔することもありますが、運用フェーズではデザイナーとエンジニアの連携強化に向けた相互理解の場や勉強会の実施など、前向きな取り組みを始めようとしています。
手探り感のある進行に全力で頑張っていただいたプロジェクトメンバーには感謝しかありません、、今後のエンハンス開発に向けて今回の反省を活かした共創体制を築いていきたいと思っています。
さいごに
デザインセンターでは、今回のプロジェクトのキーとなるデザインシステム「Pantograph」を順次主要プロダクトに反映しています。
デザインシステムの全体像や、開発秘話を掲載しておりますので、よろしければ合わせてご覧ください。
セーフィーではデザイナー3期生を募集中です。 safie.co.jp
*1:ユーザビリティ＝「使いやすさ」ではなく「利用可能性」と考え、有効さ、効率、満足度の度合いで判断しています。
