Works — In-house system

i7

自動車販売会社の社内システム。紙と Excel で回していた業務を、全員がリアルタイムで同じ情報を見られる仕組みにしました。

  • React
  • Tailwind CSS
  • Cloud Firestore
  • Firebase Authentication
  • Firebase Hosting
  • 社内システム
  • 内製

Tech stack

技術スタック

UI ライブラリ
  • React画面を部品（コンポーネント）に分けて組み立て、機能追加に強い構成
スタイル
  • Tailwind CSSスマホでも PC でも使いやすい画面を、デザインのルールを守って素早く
データベース
  • Cloud Firestoreリアルタイム同期の NoSQL データベース。更新が全員の画面に即反映
認証
  • Firebase Authentication社員だけがログインできる仕組み
ホスティング
  • Firebase HostingSSL 標準対応・CDN 配信で、社外からも安全に利用
開発体制
  • 内製現場の声を直接聞きながら、企画・開発・運用まで一貫して担当

Architecture

システム構成

データが共有されるまで
  1. Authentication社員がログインFirebase Authentication。事務所の PC からも、現場のスマホからも
  2. React画面から入力・確認Firebase Hosting から配信。Tailwind CSS で画面幅に合わせたレイアウト
  3. Firestoreデータを保存・同期Cloud Firestore。アクセス権はセキュリティルールで制御
  4. Everyone全員の画面に即反映「だれか開いてる？」の待ち時間がなくなる

Results

導入の成果

確認・転記にかかる時間
25% 削減
紙の書類
25% 削減
導入までの期間
2か月

※ 導入先での実績値です。

Decisions

なぜ、この構成にしたのか

  1. 01

    「Excel ファイル、だれか開いてる？」をなくす

    共有の Excel は、誰かが開いていると他の人が編集できません。Cloud Firestore のリアルタイム同期を使い、全員が同時に同じ最新データを見て、そのまま更新できる仕組みにしました。

  2. 02

    サーバーを持たない（Firebase にまとめる）

    社内にエンジニアがいない会社では、サーバーの保守が大きな負担になります。データベース（Firestore）・ログイン（Authentication）・公開（Hosting）をすべて Firebase にまとめることで、障害対応やアップデートの心配を減らし、ランニングコストも利用量に応じた小さな金額に抑えています。

  3. 03

    現場の画面は React で部品化

    一覧・入力フォーム・検索など、同じ部品を画面をまたいで使い回しています。要望を受けて画面を足すときも、既存の部品を組み合わせて素早く対応できます。

  4. 04

    スマホでも使える画面を Tailwind CSS で

    事務所の PC だけでなく、現場でスマホからも確認・入力できるように、画面幅に合わせて組み替わるレイアウトにしています。

  5. 05

    小さく作って、使いながら育てる

    最初から全業務をシステム化せず、一番困っている業務から使える形にしました。実際に使っていただきながら、声を聞いて改善を重ねています。