今回は勤怠管理をAIを使って作っていきます。

僕がこれを作った背景としては、元々サイト制作をしていた飲食店様がおりまして、僕が遊びに行った際にちょうど新しく勤怠管理の機能を購入しようとしてたんですよね。月額約2000円〜。

しかしこのAI時代。AIを追ってる身からすると
「自分で作ればいいのに」

と思うわけです。しかし案外そうもいかないらしいので、今回は作り方の手順と方法、そして一番重要な実用するには何が必要なのかを紹介していきます。

SNSシェアで無料にしているので是非Xでシェアして無料で読んでってください。

ちなみに当社Web春ではこの勤怠管理アプリを販売することにしました。
さらにアプリ開発事業も小さく始めていきます。

ーー

この記事はAI経験が薄い方のために作成するので

最も簡単でわずわらしい設定など不要な方法で進んでいきます。
そのためClaude Codeを使ったライブコーディングは今回は使いません。
理由はセットアップが面倒だから。

今回はセットアップなしでClaude Codeを使用でき、尚且つ品質の高いFigma Makeを使って作成してきます。

ーー

Figma Makeとは

ひと言でいうと、Figmaにサイト公開機能＋AIのバイブコーディングがついたやつです。僕らWebデザイナーが普段使ってるFigmaに、今度はサーバー機能も付いてきました。さらにバイブコーディングの機能も追加。つまりデザイン→公開の二度手間が一気になくなり、さらに開発がAIでやってくれるようになりました。まだまだ

実はこれ、僕が予想していた未来そのものでした。前回のメルマガでも書きましたが、「Figmaにサーバー事業を付ける」この流れはWebflow含むノーコード業界全体を揺らす革命だと思っています。

Figmaは全世界でユーザー数No.1のデザインツール。そこに公開機能がつけば、わざわざWebflowやWordPressに移行する必要がなくなる。デザインのまま即サイト公開。これが現実になりました。

そして今、最も暑いのがFigma Make。このFigmaの中で動くバイブコーディングが

チャットで要望のアプリを作成

1勤怠管理アプリ作成してと注文

チャットで「勤怠管理アプリを作って」と普通に話しかけるだけです。本当にこれだけ。ChatGPTに話しかけるのと変わりません。

僕の場合は「シンプルな出勤・退勤ボタンだけの勤怠管理を作って。社員リストも管理したい。」みたいに具体的に伝えました。

2運用のために以下を追加

実際に使い始めると「あーこの機能も欲しいな」って部分が出てきます。その都度チャットで追加注文。

例えば僕は「管理者画面で全員の勤務時間を一覧で見れるようにして」「月末にデータをエクスポートできる機能も」って感じで追加しました。

以下を実施してください：

• データベース統合
• 認証・ログインシステム
• 給与計算ロジック (残業代、深夜手当、休日手当)
• 有給休暇管理
• データエクスポート/インポート (CSV, JSON)
• 法的チェック機能 (労働時間制限等)
• 通知システム (ブラウザ通知)
• 印刷機能 (PDF生成)
• データ分析・レポート機能
• モバイル対応 (レスポンシブデザイン)

3エラーが出たらとにかく修正してもらう

これ重要です。最初から完璧なものは作れません。エラーが出たり、レイアウトが崩れたりしたら、そのまま「エラーが出てる。修正して」とチャットで投げます。

プログラミングの知識は一切不要。普通に日本語で「このボタンが効かない」とか「文字が見えない」とか伝えれば直してくれます。

追加で連携したいアプリや機能を開発する

勤怠管理の基本ができたら、次は実用性を上げるための連携機能です。

• LINE連携：出勤・退勤をLINEから送信できるように。社員のスマホから手軽に打刻可能。
• 外部アプリ連携：給与計算ソフトとの連携。データのやり取りが自動化されて経理業務が楽になりました。
• PDF出力：月次レポートを自動でPDF化。社労士さんに提出する資料作成が一瞬で終わります。

全てチャット指示で実現できました。「LINEと連携して出勤報告できるようにして」「PDFで勤務表を出力する機能追加して」これだけです。

注意点：いいところ程度まで作ったらコードを保存しよう

ここ、マジで重要です。僕は最初これをやらずに痛い目にあいました。

Figma Makeは便利ですが、AIなので時々記憶がリセットされたり、大幅な変更で以前のバージョンに戻れなくなったりします。「80%完成した！」って段階で必ずコードをダウンロードして保存しておくこと。

僕の場合、動物占いサイトを作ってる時に「最後にちょっとデザイン変更」って思って指示したら、なぜか全部ゼロから作り直しになってしまいました。3時間の作業が水の泡...

それ以来、「これいいじゃん」って思った段階で必ずコードを保存するようにしています。そうすれば万が一の時でも、そこから再開できます。

まとめ

実際にやってみた感想としては、これまでの「AIでサイト作成」とは全く別次元でした。構成から管理まで考えられたちゃんとしたアプリケーションが完成するレベル。しかも手動でかかった時間は本当に5分程度。

Figmaに全ベットしている僕としては、この流れがさらに加速することを確信しています。特にフリーランスや小さな会社なら、もうFigma Makeだけで十分なレベルのものが作れる時代が来ました。