打刻アプリを内製した理由：現場の勤怠課題をNext.js×Supabaseで解決する
2026/7
現場の勤怠管理は「手入力」か「使いこなせないSaaS」の二択だった
勤怠管理のデジタル化は進んでいるように見えて、実際の中小事業者や福祉・サービス業の現場では、いまだにエクセルへの手入力や紙のタイムカードが主流です。集計のたびに担当者が手作業で転記し、月末には数時間を費やす。ミスがあれば給与計算にまで影響します。
一方で、市販の勤怠管理SaaSを導入しても定着しないケースが後を絶ちません。多機能ゆえに設定項目が多く、現場のスタッフにとっては「打刻するだけ」の行為が複雑になってしまう。結果として、コストをかけたツールが使われず放置される——この二択のあいだで多くの現場が止まっていました。
課題の本質は「機能不足」ではなく「現場に合っていない」こと。必要な機能だけを、迷わず使える形で届けることが定着の条件でした。
なぜ既製ツールではなく内製を選んだのか
Desiaが打刻アプリを内製という判断に至ったのは、コスト面だけの理由ではありません。既製SaaSは汎用的である分、特定の現場が抱える固有の運用ルール——シフト区分、休憩の扱い、拠点ごとの締め日など——に柔軟に合わせにくいという構造的な制約があります。
内製であれば、現場のワークフローを起点に「本当に必要な機能」だけを実装できます。逆に言えば、使われない機能を作らないという引き算の設計ができる。これは運用定着の観点で決定的な差になります。加えて、改修や機能追加をクライアントの要望に応じて機動的に行える点も、伴走型の支援を掲げるDesiaの方針と合致していました。
打刻アプリが解決した3つの業務課題
第一に、集計工数の削減です。打刻データがそのまま構造化されて蓄積されるため、月末の手作業転記が不要になりました。第二に、入力ミスの防止です。手入力を排し、ボタン操作による打刻に統一することで、記録の正確性が担保されます。
第三に、リアルタイムな勤務状況の可視化です。誰がいつ出退勤したかが即座に反映されるため、管理者は現場に行かずとも稼働状況を把握できます。これらはいずれも派手な機能ではありませんが、現場の負担を確実に軽くする「地に足のついた解決」です。
打刻という行為そのものは1秒で終わる。その1秒の裏側で、集計・照合・可視化までが自動的につながる設計を目指しました。
技術構成：Next.js × Supabase を選んだ理由
本アプリはNext.jsをフロントエンド、Supabaseをバックエンド（データベース・認証）として構築しています。Next.jsは高速な画面描画とシンプルなUIの実装に適しており、現場スタッフがストレスなく打刻できる操作性を実現しました。
Supabaseを採用したのは、PostgreSQLベースのデータベースと認証機能を一体で扱え、小〜中規模の業務アプリを短期間で立ち上げられるためです。サーバー管理の負担を抑えつつ、勤怠データという継続的に蓄積・参照されるデータを安全に扱える構成となっています。Vercelへのデプロイと組み合わせることで、保守・更新のサイクルも軽量に保っています。
「作って終わり」にしない運用定着への設計
ツール開発でもっとも見落とされがちなのが、導入後の定着です。どれだけ優れた機能でも、現場が使い続けなければ意味がありません。Desiaでは開発段階から、実際に打刻する人の目線でUIを検証し、迷う余地のない画面設計を心がけました。
また、内製の強みを活かし、運用開始後に上がってきた「ここをこうしたい」という声を継続的に反映しています。勤怠管理は一度作れば終わりではなく、組織の変化に合わせて育てていくもの。この伴走姿勢こそが、既製ツールにはない内製ならではの価値だと考えています。
現場起点のプロダクト開発というDesiaのスタンス
今回の打刻アプリは、単なる勤怠管理ツールではなく、Desiaが一貫して掲げる「現場起点のプロダクト開発」の一例です。技術ありきではなく、現場が抱える具体的な困りごとから逆算して、必要十分な解決策を設計・実装する。
AIやDX、自動化といった手段は、あくまで現場の課題を解くための道具です。Desiaでは、業務フローの理解から要件定義、設計、実装、運用定着まで一貫して伴走することで、「導入したが使われない」を起こさないプロダクトづくりを続けています。勤怠に限らず、現場の非効率にお悩みの事業者の方は、お気軽にご相談ください。
OTHER
その他記事一覧
自律観測型AI開発 プロジェクト Athena_v1.0 開発記 #1
一行もコードを書かないまま1,100行の要件定義を書き切った、自律観測型AI「Project Athena」の開発記。
AIコミュニティRIALAの運営を「実装で」支える ── 自動採点システムと実践ライブのFDE型支援
DesiaはAIコミュニティ「RIALA」の立ち上げ・運営支援に取り組んでいます。運営体制の支援にとどまらず、コンテストの自動採点システム（GAS＋Claude API）の開発やClaude Code実践ライブ会の登壇など、自ら実装・実演するスタイルでコミュニティの価値を作っています。運営支援を「提言」で終わらせないFDE型の実践事例です。
福祉の現場に入り込むプロダクト開発 ── 収支管理アプリ「FUKU-CHI」にFDE型で伴走
Desiaは2024年12月より、福祉施設向け収支管理Webアプリ「FUKU-CHI」のプロダクト開発責任者として、課題定義からUI/UXデザイン、プロトタイプ検証、テストマーケティングまでを一気通貫で担っています。福祉業界という制度知識が不可欠な現場に入り込む、DesiaのFDE型事業開発の代表事例をご紹介します。
自社開発SNS分析ツール「SNS Insight Pro」が完成、クライアントへの無償提供を開始
事業開発事務所Desiaは、Instagram公式APIを活用したSNS分析ダッシュボード「SNS Insight Pro」の開発を完了しました。AIエージェント「Manus」を活用したSNS自動投稿の仕組みとあわせて、FDE（Forward Deployed Engineer）としての実践の一環として、Desiaのクライアントには無償でご提供します。
打刻アプリを内製した理由：現場の勤怠課題をNext.js×Supabaseで解決する
多くの中小事業者やクライアント現場で、勤怠管理は「エクセルへの手入力」「紙のタイムカード」「高機能すぎて使いこなせない既製SaaS」のいずれかに落ち着いています。Desiaでは、こうした現場の実態に合わせた打刻アプリをNext.js＋Supabaseで内製し、必要十分な機能に絞ることで運用定着を実現しました。本記事では、なぜ市販ツールではなく内製を選んだのか、どのような課題をどう解決したのかを、技術構成とあわせて紹介します。
AIの波を乗りこなすコミュニティ戦略。要件定義からプロンプト開発まで、ゼロベースでの事業立ち上げ
AIを「学ぶ」で終わらせず、「実務の成果」に変える場所をどう作るか——AIコミュニティ「RIALA」の立ち上げを伴走支援しました。サービスコンセプトの言語化からLP制作、運用基盤の設計まで、立ち上げの全工程を共に走り抜いたプロジェクトの全貌をご紹介します。
営業組織の解体と再構築。IS/FS分業体制の確立とZoho CRMによる完全自動化プロセス設計
「属人的に売る」から「組織で勝つ」へ——営業組織の解体と再構築を伴走支援したプロジェクトをご紹介します。IS/FS分業体制の構築、人材スペック策定、評価制度設計、Zoho CRMによる完全自動化まで。拡大フェーズに耐えうる強靭な営業マシンを共に作り上げました。
クリエイティブの質を落とさず、時間を創る。AI時代の次世代ディレクション・モデルの実装
「忙殺されるディレクター」を解放し、本来注力すべきクリエイティブな思考時間を確保するために。Web制作の現場へ最新のAIツールを導入し、業務フローを根本から見直すワークショップを展開しました。AI時代の次世代ディレクション・モデルを実証したプロジェクトです。
「現場で通用する」を体系化する。次世代クリエイターを育むオンラインデザインスクールの全貌
ツールの操作方法を教えるだけのスクールではありません。Illustrator、Photoshop、Figmaといった必須スキルに加え、「仕事としてデザインすること」の本質を伝える実践的カリキュラムを開発。未経験者をプロのデザイナーへと変える育成プラットフォームを築き上げました。
55名の組織を率いて市場を切り拓く。総務省での知見に基づく「CX向上」と組織マネジメント論
年商800億円規模の大手企業にて、最大55名の部下を束ねるプレイングマネージャーとして最前線に立ちました。総務省でのプレゼン経験に裏打ちされた「エンドユーザー体験（CX）」視点を組織に浸透させ、新規拠点の開拓と人材育成を同時並行で推進した、組織マネジメントの実践事例です。
ファンを熱狂の渦へ。数秒の遅延も許されない芸能イベントLPにおけるUI/UXと負荷対策
アクセスが爆発的に集中するエンタメイベントにおいて、システムダウンは許されません。サーバーサイドとの連携による負荷分散を前提に、ファンの高揚感を損なわないリッチなビジュアル表現と、迷いなく購買へ導くUI設計を両立。システム要件という制約の中で、クリエイティブの力を最大限に発揮し、興行の成功をデザインの側面から強力にバックアップしました。
データを経営の羅針盤に。SaaSプロダクト開発におけるBI構築とKPI管理の自動化
新規SaaSプロダクトの成否は、データの鮮度が握っています。開発フェーズから参画し、組織データをリアルタイムで可視化するBI環境を構築。KGI/KPIの進捗を一目で把握できるダッシュボードで感覚的な判断を排除し、データドリブンな意思決定を可能にしました。
企業の「核」を視覚化する。要件定義から実装まで、一気通貫で紡ぐブランド・ストーリー
クライアントの中に眠る抽象的なビジョンや想いを言語化し、具体的なデザインへと昇華させるプロセスです。コーポレートサイト、ホワイトペーパー、バナーなど、あらゆるタッチポイントにおいて一貫したブランドメッセージを発信。上流の要件定義から細部のピクセル調整までを一気通貫で担い、企業の信頼性とブランド価値を最大化するクリエイティブを提供しました。
ツール導入で終わらせない「定着するDX」。社内システムリプレイスと現場の意識改革
高価なツールを導入しても、現場が使わなければ意味がありません。システム開発の要件定義から携わりつつ、真の課題である「現場スタッフの意識改革」に注力。丁寧なオンボーディングと業務フローの再設計を通じて、新しいシステムが日常業務に溶け込むまで伴走しました。「やらされるDX」から「自ら活用するDX」へ、組織文化のアップデートを実現した事例です。
熟練の勘をデータという資産へ。製造業の営業ブラックボックスを解き放つ、CRMとBIによる組織変革
「誰が、いつ、どこで売っているのか見えない」——そんな製造業特有の属人化した営業体制にメスを入れました。kintoneによる顧客情報の資産化と、Looker Studioによる「勝てる行動」の可視化を断行。現場の抵抗を乗り越え、データを武器に戦う営業組織へとマインドセットごと変革。結果として、再現性のある成約プロセスと、経営判断に直結するクリアな数値管理体制を確立しました。
国境を越える「直感」を設計する。MaaS事業におけるグローバル・デザインシステムの構築とUX最適化
言語や文化の壁を超え、世界中のユーザーが迷わずに操作できる「共通言語」としてのデザインシステムを構築しました。国内外の多様なステークホルダーが関わるMaaSプラットフォーム開発において、Figmaを中核に据えたデザイン基盤を整備。開発スピードの劇的な向上だけでなく、ユーザーが移動体験そのものに没入できるシームレスなUI/UXを実現し、スマートモビリティの未来をデザインで具現化しました。
美しさだけでは売れない。マーケティング戦略と一体化したECサイトリニューアル・V字回復の記録
単なる「見た目の刷新」はリニューアルではありません。徹底的なアクセス解析と顧客インサイトの分析に基づき、購買意欲を喚起するUX導線をShopify上でゼロから再設計しました。予算管理からSNS広告運用、さらには新商品開発の商談まで、ビジネスの全領域を総指揮。デザインを経営資源として活用し、低迷していたサイトを「売れ続ける収益エンジン」へと生まれ変わらせました。
View more →