Creators - Portfolio

出退勤と各種申請を“迷わず”完了できる勤怠UI

1 Month 2025/08

Introduce

打刻・勤怠確認・各種申請と承認をひとつに。

誰でも迷わず最短で完了できる勤怠Webサービス。

Background

勤怠データの分散

打刻・申請・承認が紙/Excel/メールに散らばり、二重入力や記載ミスが発生。

申請状況の不透明さ

承認待ち・差し戻し・期限超過が把握しづらく、対応が遅れやすい。

ルール運用の属人化

残業・遅刻/早退の判定が手作業に依存し、ばらつきと処理負荷が発生。

Approach

「複雑な業務情報を整理し、誰でも迷わず使えるプロジェクト管理体験へ」

情報の一元管理

出退勤・申請状況・今月の実績を1画面に集約し、出勤/退勤・打刻修正・申請を最短導線で実行。

状態の見える化とその場対応

リスト/カレンダーで未打刻・遅刻・申請中をチップとアイコンで表示し、異常日は詳細から該当申請をその場で起票。

迷わない申請・承認フロー

プリセット入力と承認ルート表示、現在の処理担当の明示でミスを減らし、権限に応じたCTAで承認/差し戻しをスムーズに。

User Task

本サービスで想定する主要なユーザータスクは、次の4つです。

出退勤を打刻する

その日の勤務開始／終了を記録する。

申請を提出する

勤務に関する各種申請を適切な承認ルートで起票する。

勤務履歴を確認する

実績と異常（未打刻／遅刻／残業など）を早期に把握する。

申請状況を確認する

自分の申請の進捗を把握し、必要なアクション（再申請／取消）に即応する。

Object & View Design

1. オブジェクトの抽出

業務フローや要件から名詞を抽出し、UIを構成するオブジェクト候補を洗い出します。

2. オブジェクト定義と属性設計

抽出したオブジェクトごとに、必要な属性（プロパティ）と操作（アクション）を定義し、構造を明確にします。

2. ビューとナビゲーションの設計

オブジェクトを一覧で表示する「コレクションビュー」と、詳細を表示・操作する「シングルビュー」を設計します。

Key UI Screens

ダッシュボード

今日の勤務と申請の“いま”を
1画面で把握。

今日の勤務と申請の“いま”を1画面で把握。

出退勤カードで“今”を即把握

現在の打刻と時刻を大きく表示。出勤/退勤はワンタップ、不要側は非活性で誤操作防止。

申請状況カードで滞留を可視化

承認待ち/差し戻し/承認済みを件数で集約。件数タップで該当一覧へ直行。

勤務状況カードで傾向を把握

出勤日数・平均時間・残業・遅刻/早退を要点表示。詳細は勤怠記録へ。

勤怠記録（リスト）

大量の勤怠から“対応が必要な日”を
最短で特定し、
詳細確認・申請へ一直線。

大量の勤怠から“対応が必要な日”を最短で特定し、詳細確認・申請へ一直線。

期間・状態で素早い絞り込み

対象日とステータスで一覧を即抽出。絞り込みボタンから詳細な絞り込みが可能。

色付きステータスで異常を発見

遅刻あり／未退勤／残業あり／申請中などをバッジ表示。重要度が色で一目で分かる。

詳細へワンクリック＋表示切替

リストをクリックで勤怠詳細へ。条件は保持したままリスト⇄カレンダーをワンタップ切替。

勤怠記録（カレンダー）

月の状況をひと目で把握し、
気になる日に最短到達。

月の状況をひと目で把握し、気になる日に最短到達。

月表示で全体俯瞰

出勤／休暇／未打刻などを日セルで区別、今日をハイライト。

注意アイコンで強調

遅刻・未退勤・申請中を色付きアイコン／バッジで即判別。

日付セルをクリックで詳細へ

クリックでその日の勤怠詳細へ。リストと同じフィルタを保持。

勤怠詳細

その日の状況確認から
申請まで一気通貫。

その日の状況確認から申請まで一気通貫。

実績をカードで一望

出退勤・休憩・実働・残業・ステータスを整理して表示。

警告で次の対応を提示

遅刻／未打刻を検知し、打刻修正など必要な処理を警告。

申請履歴から即対応

当日の申請一覧を見ながら、その場で対応判断と申請処理が可能。

申請詳細

流れと担当を可視化し、
その場で承認・差し戻しまで完了。

流れと担当を可視化し、その場で承認・差し戻しまで完了。

要点サマリで即把握

種別・対象日・対象時間・理由などを上段に集約し、「何の申請か」を一目で把握。

フローと現在担当を見える化

申請者→一次→二次のタイムラインで進捗を表示。今どこで止まっているか、誰の担当かを明確化。

役割別アクションのみ表示

申請者には修正して再申請／取下げ、承認者には承認／差し戻しだけを提示し誤操作を防止。

UI Design

Kinful UI for Figma

open_in_new