Design Prototype ・ HTML / CSS / JS

給与計算・シフト管理ツール

A&B商事様の打合せ資料(2026年7月)でいただいたご要望①〜⑧を、実際の画面に起こしたデザインプロトタイプです。 現在 kintone 3アプリ+Excel で分かれているシフト作成・給与計算・明細発行を1つのツールにまとめ、 紙の回収から kintone への手入力までの工程をなくすことを中心に設計しています。

画面は管理画面(PC)スタッフ画面(スマホ)内職スタッフ画面(スマホ)の3種類。 スタッフの方は追加のアプリを入れずに、スマホのブラウザからそのまま使えます。 表示されている氏名・金額はすべて架空のサンプルです。

アクセント
#40605A
サーフェス
#FFFFFF
角丸
2 / 3 / 5 / 6px
変更は1箇所
shared/theme.css
フォント
Noto Sans JP + Inter

ご要望と画面の対応

8件すべて

打合せ資料のご要望①〜⑧が、どの画面で実現されるかの一覧です。

要望内容プロトタイプでの実現該当画面
シフト入力のオンライン化 スタッフが自分のスマホから出勤希望を直接入力。紙で出す方のために、写真をアップロードしてAIが読み取る枠も残しています。 シフト希望を出す
希望の回収
スタッフ向けシフト確認 スクリーンショットの共有をやめ、スタッフが自分のシフトをいつでもスマホで確認できます。 わたしのシフト
入力チェック機能 未入力・異常値・前月比の大幅増減などを支払前に自動検知し、該当画面へ直接飛べます。 給与計算
共有カレンダーの自動生成 シフトを確定した時点で共有用カレンダーへ自動反映。「シフト管理へコピー」の手作業がなくなります。 シフトカレンダー
特殊な給与計算日の自動認識 祝日は暦から自動判定。スーパーセール対象日は4期間を毎年自動認識し、年ごとの変更は手で直せます。 計算ルール設定
残業時の自動加算 スタッフごとの基本勤務時間を超えた分を自動で残業と判定し、時給+50円を自動加算します。 勤怠管理
内職業務の明細管理 内職スタッフがその場で作業を記録。月末の Excel 提出と Chatwork での個別返送をなくし、毎月7日に自動公開します。 作業を記録する
内職明細
パートの有給残日数管理 シフト希望の有給申請から自動で消化・年1回の自動付与。取得状況はご本人と管理者だけが見られます。 有給管理
有給休暇

管理画面

12 画面

PC中心・レスポンシブ。現在 kintone の3アプリ(スタッフ管理・シフト管理・勤怠管理)で分かれている作業を1画面群にまとめています。

スタッフ画面(パート)

5 画面

スマホのブラウザで開くだけ。アプリのインストールも、LINE などの追加サービスも不要です。PCで開くと中央にスマホ枠として表示されます。

内職スタッフ画面

3 画面

日々の作業をその場で記録し、月次の明細は毎月7日に自動公開。Excel の提出と Chatwork での個別返送がなくなります。

このプロトタイプの前提

・表示されている氏名・時給・控除額・金額はすべて架空のサンプルです。実際のデータは含まれていません。

・見た目の確認用で、ボタンを押しても保存・計算は行われません。画面遷移のみ動作します。

・kintone の3アプリと Excel(有給管理・内職明細)はすべてこのツールに移行する前提で作っています。

・スタッフの方の利用はWebブラウザ1本で完結します(アプリのインストール・LINE などの追加サービスは不要)。

給与計算・シフト管理ツール デザインプロトタイプ ・ 表示内容はすべてサンプルです