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

AI時代。AIを最先端で追ってる身からすると、どんなアプリも「自分で作ればいいのに」と思うわけです。

そのため今回はAIを使った最も簡単なアプリ作成手順とツール、そして一番重要な実用するには何が必要なのかを紹介していきます。

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

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

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

Figma Makeとは

Figmaにサイト公開機能＋AIのバイブコーディングがついたやつです。

僕らWebデザイナーが普段使ってるFigmaに、サーバー機能+AIが付いてきました。つまりデザイン→公開の二度手間が一気になくなり、さらに開発がAIでやってくれるようになりました。（やばすぎ！）

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

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

実際のサイト運用はまだノーコードの方が上ですが、小さいサイトの作成、個人店で使うレベルのアプリなどであればAI作成で充分満足いくようになります。

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

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

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

「勤怠管理アプリ作って」で何できるでしょうか。こちらです↓

たった1文でここまでできます。しかし案外大変なのはここから。データを残す必要があるのでバックエンドを連携させる必要があります。FigmaではSupabaseをバックエンドとして提案されます。おとなしく使っていきましょう。

運用のために以下を追加

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

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

「以下を実施してください」とコピペすればOK

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

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

これが重要です。最初から完璧なものは作れません。AIとはいえ、正直結構時間がかかります。根気が重要です。エラーが出まくったり、手動でやらなきゃいけないこともちょいちょい出てきます。

しかしその都度AIがタスク提示してくるのでレイアウトが崩れたりしたら、そのまま「エラーが出てる。修正して」とチャットで投げ、進めていきましょう。

普通に日本語で「このボタンが効かない」とか「文字が見えない」とか伝えれば直してくれます。

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

勤怠管理の基本ができたら、次は実用性を上げるための連携機能です。まだ僕はやってないですが、作成可能な項目です。

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

全てチャット指示で実現できます。PDFは簡単。連携はちょいムズです。LINEなどは2025年8月8日時点ではLINEなどにはAI作成がないので手動作成になりますね。

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

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

Figma Makeは便利ですが、AIなので時々記憶がリセットされたり、全部ぶち壊れたりします。ただFigma Makeの場合は過去のバージョンをクリックすれば戻ることができます。

しかし戻らなくなったこともあるためファイルごと「コピーを作成」して保存しておきましょう。そうすれば万が一の時でも、そこから再開できます。

まとめ｜Figma makeでアプリ作成

実際にやってみた感想としては、バックエンドや連携周りが難しいと感じました。自由度がMAXな反面AIに依存してしまうので自分で編集できないと厳しい。あと1年ほどかあれば全て完全自動がくるかもですね。その時に期待です。

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