011 発注センターUIを全面ブラッシュアップ｜CLINデザインシステム始動
発注センターのUIを大幅に改善しました
本日は、開発中の発注センターのUIを細かく見直しました。
実際に画面を操作しながら、
「毎日使う管理画面として、本当に使いやすいか？」
という視点で改善を進めています。
発注候補を見やすく改善
右側の「発注候補」エリアをリニューアルしました。
改善内容
- ヘッダー直下へ隙間なく配置
- スクロール追従（Sticky表示）
- 発注先名を1行表示
- 金額を1行表示
- 画面右端まで広げて表示
- レイアウトを整理
発注候補が常に表示されることで、一覧を確認しながらそのまま発注できるようになりました。
Amazonを参考にしたレイアウト
今回参考にしたのは、Amazonのショッピングカートです。
商品一覧を見るたびに、
- 合計金額
- 購入ボタン
がすぐ目に入る構成になっています。
CLINでも同じ考え方を採用し、
画面上部に
- 合計金額
- 発注書を作成
- すべてクリア
を配置。
商品一覧よりも先に重要な操作が目に入る構成へ変更しました。
角丸デザインを見直し
開発を進める中で、
「角丸が少し大きすぎるのでは？」
という意見が出ました。
そこで今回から、
CLIN全体のデザインを見直し、
丸みを抑えた業務システムらしいデザインへ変更しています。
これにより
- 落ち着いた印象
- 高級感
- 信頼感
を感じられるUIになりました。
CLINデザインシステムを開始
今回の改善をきっかけに、
CLIN専用のデザイン基準を作り始めました。
今後は
- カード
- ボタン
- 入力フォーム
- タブ
- モーダル
- 余白
- 角丸
をすべて共通ルールで設計します。
これにより、新機能を追加しても統一感のある画面を維持できるようになります。
今後の予定
次回はさらに、
- 発注先ごとの折りたたみ表示
- 発注候補の視認性向上
- 発注操作のさらなる高速化
を進める予定です。
毎日利用する管理画面だからこそ、
「迷わず、すぐ使えるUI」
を目指して改善を続けていきます。
CLINは、ホテル・宿泊施設・定期清掃・退去清掃・就労支援事業所など、さまざまな清掃業務をひとつにつなぐクラウドサービスを目指して開発を進めています。