「勤怠管理くん」は、スマートかつ直感的に勤怠を打刻・申請・管理できる、デモ用勤怠管理ツールです。
モバイルでの実用性と管理者の視認性にこだわった設計で、現場目線の使いやすさを追求しました。
目次
🚀 特徴・コンセプト
- デモアカウントで誰でもすぐに体験可能
- データベース不要（デモ時は localStorage 使用）
- モバイルとPCそれぞれの役割に最適化されたUI
- QRコード打刻＋位置情報対応（本番時）
- 将来的には Supabase を使って本番環境にも対応可能
- Slack風コメントボットでUXもやさしくサポート予定
👨💼 管理者モードの特徴（PC利用想定）
📊 トップページに表示されるサマリー情報
- 残業時間が月160hを超えているユーザー一覧
- 出勤・退勤の未打刻があるユーザー一覧
- 未承認の休暇申請一覧（ワンクリックで承認ページへ）
🛠 打刻画面（管理者）
- 「出勤」or「退勤」を選ぶと対応するQRコードが表示
- PC画面に表示しておくことで、社員がスマホでスキャンして打刻可能
📝 レポート修正機能
- 管理者モードのときのみ、出勤・退勤時刻を直接編集可能
- 打刻漏れや申請ミスの柔軟な対応が可能
📱 一般ユーザー向けモバイルUI
🔄 初期表示は「打刻」画面
- スマホでアクセス時は最初に打刻画面が表示
- ワンタップでカメラを起動してQRコードを読み取るだけ
🧭 固定ナビでスムーズな導線
画面下に常時表示される4つのナビゲーション：
📸 打刻 📊 ダッシュボード 📄 申請 📁 レポート🧘♂️ ジオフェンス対応（本番想定）
- デモでは常に打刻可能（位置情報不要）
- 本番環境では、Supabase + 位置情報により勤務先周辺でのみ打刻可能に（不正防止）
📋 休暇申請・承認フロー
- ユーザーはカジュアルに「5/18 午前休」などと自然に申請可能
- 管理者はトップページから承認待ちを即確認・対応できる
- 承認忘れを防止するためのUX設計済み
📦 技術構成
| 項目 | 内容 |
|---|---|
| Frontend | React + Vite + Tailwind CSS + shadcn/ui |
| 状態管理 | Zustand |
| データ保存（デモ） | localStorage |
| データ保存（本番） | Supabase 予定 |
| QR対応 | カメラAPI + QRコード生成 |
| デプロイ | Netlify で公開中 |
✍️ まとめ
「勤怠管理くん」は、
“誰でもすぐに試せて、現場でも本番でもそのまま使える”
そんなリアルな勤怠体験をデモ環境で提供するプロトタイプです。
UI/UXの最適化と、不正打刻防止や管理者機能の強化まで見据えた構成で、
開発者・現場担当者・経営者まで、幅広く体験いただけます。