Next.js × FastAPIで「脱スプレッドシート」。25新卒研修3ヶ月で作った備品貸出管理システム後編

この記事はSafie Engineers' Blog! Advent Calendar 21日目の記事です。

はじめに

こんにちは。セーフィー株式会社に25新卒として入社した中です。

昨日の記事に引き続き、本日は、新卒研修で開発した備品管理システム「Treasure Collection」の開発を通して我々「宝舟」が学んだこと、そして今後のロードマップについてご紹介します。

はじめに
開発を通して学んだこと
- 配属後に開発したもの
- 現状の課題と対策
Treasure Collection をどう育てていくのか
- 将来的なチャレンジ
終わりに

開発を通して学んだこと

このプロダクト開発では、こちらの記事で触れたタスク管理の難しさや、プロダクトの全体像を常に把握しておくことの重要性など、多くの実務的な学びを得ました。

研修の延長線上にあるこの環境では、PMが軸となってタスク量をコントロールしつつ、メンバーは各自の得意なスタックを飛び越えて、さまざまな領域に積極的にチャレンジしています。通常のプロジェクトでは難しい、大胆な方針変更や開発中のロールチェンジなども経験し、失敗を繰り返しながらチームとして大きく成長しました。

私自身、このプロジェクトでPMを経験しましたが、「プロジェクトをどう進めるべきか」「何を軸に判断すべきか」が分からず大きく失敗しました。しかし、その経験を深く内省し、現在ではその学びを配属先の業務に活かすという良い流れを作れています。

配属後に開発したもの

8月にそれぞれ配属された後も、私たちは「Treasure Collection」の改善を続けてきました。ユーザーの声を反映し、プロダクトを実用的なものにするために実装した機能の一部をご紹介します。

CSVインポート機能で移行を効率化
- もともとスプレッドシートで管理されていた備品の移行を容易にするため、CSVファイルによる一括登録機能を実装しました。これにより、初期の登録作業にかかる労力を大幅に削減しました
ステータスに「紛失」「廃棄」を追加
- 今後の棚卸し機能の実装を見据え、備品の現状を正確に把握するために「紛失」と「廃棄」ステータスを追加。
- 特に「紛失」ステータスは異常値であるため、他よりも彩度を上げて視認性を高める工夫を施しています。
[実装途中] カード形式の表示オプション
- 利用者からの「備品とその写真を紐付けて管理したい」という要望を反映し、写真と備品情報を関連付けて表示するカード形式の追加を進めています

デザインの大幅アップデート（こだわりポイント）
- 特に私が担当したデザインアップデートについて、詳しくご説明させてください
- アップデート後のデザイン

アップデート前のデザイン

アップデート後のデザインの根幹にあるのは、「情報を色、サイズ、太さといった視覚的な要素で明確に区別する」という考え方です。この考えに基づき、以下の3点に特にこだわりました
1. 一覧性・情報量の最大化
  - リスト表示の中で、ユーザーが必要とする情報（備品名、ステータスなど）を漏れなく、かつ整理して表示しました
2. ステータス認識の迅速化
  - 「貸出可」「貸出中」などのステータスを分かりやすい色で表現し、一覧画面で最も目に入りやすい左側に配置しました
3. 情報の優先度の表現
  - 情報には必ず優先度があるため、太字やフォントサイズを使い分け、ユーザーの視線誘導を意識した設計を行いました
これらは全て「ユーザー視点に立って、何がユーザーにとって使いやすいのか」を追求した結果です。この一連のプロセスこそが、研修の本来の目的である「プロダクト視点を身につける」ことに繋がっていると実感しています

現状の課題と対策

チームの課題：本業との両立

課題：各メンバーの配属先での業務が最優先となるため、Treasure Collectionの開発タスクに十分な時間を割くことが難しい状況です
解決策：誰が担当しても同じ品質で実装できることを目指し、チケットの起票時に背景や目的、具体的な仕様をより詳しく記載するように改善しています
↓チケットの一例

私個人の課題：デザイン実装での連携不足

課題：デザイン作成時、フォントサイズやピクセル単位の配置など、細かい仕様を詰め切らないまま実装担当者に渡してしまい、コミュニケーションコストが発生しました
解決策：現在は、デザインファイル内に必要な仕様をメモとして明記することで、この課題の解消を進めています。
↓ヘッダーのデザインをした際のデザインとその細かい仕様メモ

Treasure Collection をどう育てていくのか

本プロジェクトの今後のロードマップは以下の通りです

機能拡張の最優先として、棚卸し機能の実装を考えています

背景：ユーザーから「備品管理には棚卸し（備品の存在・保管場所の確認）が不可欠」との強い要望をいただきました。
意義：棚卸しは大変な労力がかかる作業であり、現状ユーザーはTreasure Collectionと別に棚卸し用のスプレッドシートを運用しています。「棚卸し」機能を実装することで、スプレッドシートからの脱却と作業の簡略化を実現できるため、優先的に対応を進めています。

将来的なチャレンジ

現在のロードマップには含まれていませんが、将来的にこのプロダクトをより大きくするための長期的なビジョンがあります。

Challenge 1：全社展開を見据えたプロダクトへ
- 「とりあえず動けばいい」というフェーズは既に終わりました
- DBの設計を抜本的に見直し、より効率的で拡張性の高いプロダクトを目指します
- UI/UXの改善にも力を入れ、全社員が直感的に使える「迷わせない」デザインを目指します
Challenge 2：デバイス地獄を逆手に取った「最強の安定性」
- 弊社は管理するデバイスの数が非常に多いため、逆に言えば、この環境下で安定稼働を目指せることは最高のテストフィールドであると言えます
- 「自分たちで社内の課題を発見し、ほしいと思ったもの」からスタートしたこのプロダクトを、将来的には様々な企業の課題を解決するソリューションへと育てていきたいと考えています。道のりは険しいですが、最高にワクワクする挑戦です