一般的な勤怠画面は情報が散らばりやすく、1日の状態が直感的に把握しづらい。また、会社ごとの休憩ルールや有給条件に合わせた運用がしにくいことが多い。
昭和商会のHPの契約サーバー上に組み込み、データベースはGoogleスプレッドシートを活用して無料で継続運用しやすい構成を実現。打刻情報を1日1本のバーとして視覚化し、勤務状況を直感的に把握できるUIを設計した。PCとスマホそれぞれで見やすく操作しやすいよう最適化し、ユーザー管理、打刻、出張申請、終日出勤申請などの機能も実装。さらに、管理者アカウントから休憩時間や有給条件を調整できるようにし、長期運用にも対応できる設計にした。
会社ルールに応じて休憩の時間の取り扱いや、有給の扱い条件などを管理者側で設定可能にし、長期的な運用変更にも対応しやすい構成にしている。
- 1日を1本のバーで可視化する直感的なUI
- PCとスマホそれぞれに最適化された画面設計
- 打刻だけでなく申請機能も含めて整理された情報設計
- 管理画面で運用ルールを調整できる柔軟性
背景
勤怠画面は要素が多くなりやすく、1日の状態がひと目でつかみにくいことが少なくありません。さらに、休憩ルールや有給条件のような運用要件が会社ごとに異なるため、画面だけ整っていても実務に合わないことがあります。
設計の考え方
この案件では、勤務状態を直感的に理解できるUIと、会社ルールの変更に追従できる管理設計を重視しました。打刻情報は1日1本のバーとして見せ、PCとスマホの両方で見やすく操作しやすいように最適化しています。
実装と運用
既存の契約サーバーに組み込み、Google スプレッドシートをデータベースとして活用することで、無料で継続運用しやすい構成にしています。ユーザー管理、打刻、出張申請、終日出勤申請に対応し、管理者側で休憩時間や有給条件を調整できるため、長期運用にも適しています。
