ID:84837さん

## プロジェクト概要 店舗のシフト作成業務において、従業員の勤務時間内に「どの時間帯に、どの業務を担当するか」を設定するワークスケジュールの登録UXを改善したプロジェクト。 従来は、スケジュールを登録するために複数の操作が必要で、従業員1名分のワークスケジュールを設定するだけでも約10秒かかっていました。 特に、多数の従業員について繰り返しスケジュールを作成する店舗管理者にとって、この操作時間の積み重ねがシフト作成業務全体の負担となっていました。 そこで、単に画面の表示速度を改善するのではなく、スケジュール上で直感的にワークスケジュールを設定できる操作UXへ見直し、登録に必要な操作そのものを削減することで、シフト作成業務の効率化を図りました。 - **チーム規模**：7名程度（開発2名） - **役割**：開発メンバー／フロントエンドエンジニア - **担当工程**：設計／フロントエンド開発／テスト／UX改善 - **主な技術**：TypeScript / React / Jotai / Vitest ## 取り組んだ課題 ### 繰り返し発生するシフト登録操作の負荷を削減 従来のUIでは、ワークスケジュールを登録するために複数の入力・選択操作が必要であり、1件あたりの操作時間は短くても、多数の従業員について繰り返すことで大きな業務負荷になっていました。 そこで、シフト作成時の実際の操作フローを整理し、「登録処理を速くする」のではなく、「そもそも登録に必要な操作を減らせないか」という観点からUXを見直しました。 時間帯別のスケジュール上で、勤務時間に対して直感的にワークスケジュールを設定できるUI・操作ロジックを設計・実装し、従来より少ない操作で登録を完了できるようにしました。 ### 複雑なスケジュール操作を扱いやすい状態管理へ整理 スケジュール上では、勤務時間、業務内容、選択中の時間帯など複数の状態が連動するため、操作UXを改善するだけでなく、それを支えるフロントエンドの状態管理も整理する必要がありました。 そこで、Jotaiを用いてワークスケジュール編集に必要な状態とデータフローを設計し、UI操作と状態更新の責務を整理。 スケジュール操作に応じて必要な状態が一貫して更新される構成とし、複雑な編集操作でも実装を追いやすく、継続的に機能改善しやすい構成を意識しました。 また、PdM・デザイナーを含む関係者と、実際の店舗管理者がどのようにシフトを作成するかを確認しながら、操作方法や画面仕様を調整しました。 ## 取り組みの成果 - ワークスケジュールの登録UXを見直し、従業員1名あたり約10秒かかっていた登録操作を **約1秒で完了できるよう改善** - 登録処理そのものの高速化ではなく、スケジュール上で直感的にワークスケジュールを設定できる操作UXを提供することで、ユーザーの操作工程を削減 - 多数の従業員について繰り返し発生する操作時間を短縮し、店舗管理者のシフト作成業務の負担軽減に貢献 - Jotaiを用いてスケジュール編集時の状態管理・データフローを整理し、複雑な操作を扱いやすいフロントエンド構成を構築 - 技術的な高速化だけではなく、実際のユーザー業務を起点に操作方法そのものを見直すことで、シフト作成体験を改善