AIを使ってWebサイトやアプリを作れる時代になってきました。

最近では、ChatGPT、Claude、Claude Desktop、Claude Code、Codexなど、AIを使った開発ツールも増えています。

ただ、実際に使う前は、

「本当にAIでアプリなんて作れるの？」
「結局、開発者じゃないと無理なんじゃないの？」
「AIがコードを書けると言っても、実用レベルにはならないんじゃないの？」

と思う方も多いと思います。

私自身も、最初から「AIでアプリを作れる」と確信していたわけではありません。

むしろ最初は、

デザインのたたき台くらい作れればいいかな

という感覚でした。

ところが、実際にClaude Codeを使ってみたところ、思っていた以上にアプリの形ができてしまいました。

この記事では、私が Claude Codeで勤怠管理アプリを作ってみた話 を、初心者向けにまとめます。

目次
  1. きっかけは友人からの相談でした
  2. 最初はデザインだけ作るつもりでした
  3. 使ってみたら「これ、コードも書けるのでは？」となった
  4. 勤怠管理アプリで作った主な機能
  5. 1. スマホで打刻できる機能
  6. 2. 現場ごとの管理
  7. 3. GPSを使った打刻チェック
  8. 4. 管理者用の勤怠一覧
  9. 5. CSV出力
  10. Claude Codeを使って感じたメリット
  11. 1. 最初の形を作るのが早い
  12. 2. エラーが出ても相談しながら進められる
  13. 3. 作業内容を整理しながら進められる
  14. 逆に難しかったところ
  15. 1. AIに任せきりだとズレる
  16. 2. セキュリティ面は必ず確認が必要
  17. 3. 途中で仕様が増えすぎる
  18. Claude Desktopと組み合わせると進めやすい
  19. 初心者がClaude Codeでアプリを作るなら意識したいこと
  20. 1. 最初は小さく作る
  21. 2. 先に画面を整理する
  22. 3. 指示は具体的に出す
  23. 4. 修正前に説明してもらう
  24. 5. 最後に作業内容をまとめてもらう
  25. Claude Codeでアプリ開発は現実的なのか？
  26. まとめ

きっかけは友人からの相談でした

きっかけは、友人からの紹介でした。

ある日、

ITのことは詳しくないんですが、勤怠管理のアプリみたいなものって、個人的に作ってもらえたりしますか？

という相談を受けました。

勤怠管理アプリというと、出勤・退勤の打刻、休憩時間の管理、スタッフ管理、現場管理などが関係してきます。

小さな会社や現場仕事の多い業種では、紙やLINE、Excelなどで勤怠を管理しているケースも多いと思います。

ただ、それだと、

  • 打刻漏れが起きる
  • 集計が大変
  • 現場ごとの確認が面倒
  • 不正打刻を防ぎにくい
  • 月末の確認作業が重い

という問題が出やすいです。

そこで、スマホから打刻できるような勤怠管理アプリが作れないか、という話になりました。

最初はデザインだけ作るつもりでした

正直に言うと、最初から本格的にアプリを完成させるつもりだったわけではありません。

私はITには長く関わってきましたが、デザインに関してはそこまで得意ではありません。

なので最初は、

最近よく聞くClaude Codeを使って、アプリの画面デザインだけでも作ってみよう

くらいの気持ちでした。

勤怠管理アプリなら、最低限必要そうな画面として、

  • ログイン画面
  • 出勤・退勤の打刻画面
  • スタッフ一覧
  • 現場一覧
  • 勤怠一覧
  • 管理者用ダッシュボード

などがあります。

まずは、こうした画面のたたき台を作れればいいと思っていました。

使ってみたら「これ、コードも書けるのでは？」となった

Claude Codeを使って画面の相談をしているうちに、ふと思いました。

あれ、これってデザインだけじゃなくて、コードも書けるんじゃないか？

最初は半信半疑でした。

AIにコードを書いてもらえること自体は知っていましたが、実際のアプリとして形にしていけるのかは別問題だと思っていました。

でも、試しにお願いしてみると、想像以上に進みました。

例えば、

スマホで出勤・退勤を打刻できる画面を作ってください。
初心者にも確認しやすいように、ボタンを大きくして、現在の状態がわかるようにしてください。

のように指示すると、画面の構成やコードのたたき台を出してくれます。

さらに、

管理者がスタッフごとの勤怠一覧を確認できる画面を作ってください。
日付、出勤時刻、退勤時刻、休憩時間、勤務時間が見えるようにしてください。

のようにお願いすると、管理画面の形も作れます。

このあたりで、かなり手応えを感じました。

勤怠管理アプリで作った主な機能

実際に作っていく中で、勤怠管理アプリにはいくつかの機能を入れていきました。

主な機能は、次のようなものです。

1. スマホで打刻できる機能

まず必要なのは、スタッフがスマホから打刻できる機能です。

勤怠管理アプリなので、ここが中心になります。

想定した打刻は、

  • 出勤
  • 休憩開始
  • 休憩終了
  • 退勤

です。

スマホで使うことを考えて、ボタンは大きめにしました。

スタッフが現場で迷わず押せるように、画面はできるだけシンプルにする必要があります。

勤怠アプリは、見た目のおしゃれさよりも、

現場で迷わず使えること

が大事だと感じました。

2. 現場ごとの管理

清掃業や派遣業のように、スタッフが複数の現場に行く仕事では、現場管理が重要になります。

そこで、現場ごとに情報を登録できるようにしました。

例えば、

  • 現場名
  • 住所
  • 打刻できる範囲
  • 担当スタッフ

などです。

現場が複数ある場合、誰がどの現場に入るのかを管理できるだけでも、かなり便利になります。

3. GPSを使った打刻チェック

勤怠管理でよくある問題が、不正打刻です。

例えば、現場に着いていないのに出勤を押してしまうようなケースです。

そこで、スマホの位置情報を使って、現場の近くにいるかを確認する仕組みも入れました。

もちろん、GPSは環境によって多少のズレがあります。

そのため、完全に厳密にするというより、

現場から一定範囲内なら打刻できる

という考え方にしました。

このあたりは、実際の業務に合わせて調整が必要です。

4. 管理者用の勤怠一覧

スタッフが打刻した情報は、管理者が確認できる必要があります。

そこで、管理者用に勤怠一覧画面を作りました。

確認したい情報は、例えば次のようなものです。

  • スタッフ名
  • 日付
  • 出勤時刻
  • 退勤時刻
  • 休憩時間
  • 勤務時間
  • 現場名

管理者が一覧で確認できるようになると、月末の集計や確認作業がかなり楽になります。

5. CSV出力

勤怠データは、あとからExcelなどで確認したい場合もあります。

そのため、CSV出力も必要になります。

CSVで出せれば、

  • Excelで集計する
  • 給与計算用に加工する
  • バックアップとして保存する
  • 別システムに取り込む

といった使い方ができます。

小さな会社向けの業務アプリでは、最初から何でも自動連携するよりも、CSV出力があるだけでかなり実用的になることがあります。

Claude Codeを使って感じたメリット

実際にClaude Codeを使って勤怠管理アプリを作ってみて、かなり可能性を感じました。

特に大きかったメリットは、次の3つです。

1. 最初の形を作るのが早い

アプリ開発で大変なのは、最初の形を作るところです。

何もない状態から、

  • どんな画面にするか
  • どんな機能が必要か
  • どのファイルを作るか
  • どういう構成にするか

を考えるのは大変です。

Claude Codeを使うと、この最初のたたき台をかなり早く作れます。

最初から完璧ではなくても、動くものや画面の形があると、そこから改善しやすくなります。

2. エラーが出ても相談しながら進められる

開発では、必ずエラーが出ます。

AIを使っていても、エラーは普通に出ます。

ただ、Claude Codeを使うと、エラーが出たときにそのまま相談できます。

このエラーの原因を調べてください。
初心者にもわかるように説明してください。
修正する前に、どのファイルを変更するのか教えてください。
修正後に確認するポイントを教えてください。

このように聞きながら進めることで、完全に一人で検索して悩むよりも進めやすくなりました。

3. 作業内容を整理しながら進められる

AI開発で意外と大事なのが、作業内容の整理です。

作っているうちに、

「今どこまで終わったのか」
「何を修正したのか」
「次に何をすればいいのか」

がわからなくなることがあります。

Claude Codeに、

今回変更した内容をまとめてください。
次にやることも整理してください。

とお願いすると、作業の振り返りがしやすくなります。

これはかなり助かりました。

逆に難しかったところ

もちろん、Claude Codeを使えば何でも簡単に完成するわけではありません。

実際にやってみて、難しいと感じたところもあります。

1. AIに任せきりだとズレる

AIは便利ですが、こちらの指示があいまいだと、思っていたものと違うものを作ることがあります。

例えば、

勤怠管理アプリを作ってください。

だけだと、人によって必要な機能が違います。

清掃業向けなのか、飲食店向けなのか、派遣業向けなのか。

スタッフが使うのか、管理者が使うのか。

GPSが必要なのか、CSV出力が必要なのか。

このあたりを具体的に伝えないと、ズレやすいです。

2. セキュリティ面は必ず確認が必要

勤怠管理アプリは、スタッフ情報や勤務時間などを扱います。

そのため、セキュリティや個人情報の扱いには注意が必要です。

AIが作ったコードをそのまま信じて、本番で使うのは危険です。

特に、

  • ログイン機能
  • パスワード管理
  • 権限管理
  • 個人情報の保存
  • データベースの扱い
  • 管理者画面のアクセス制限

などは、人間がしっかり確認する必要があります。

AIは開発を助けてくれますが、最終確認まで任せきりにはできません。

3. 途中で仕様が増えすぎる

アプリを作っていると、

「これもできた方がいい」
「あれも追加したい」
「この画面も必要かも」

と、どんどん機能を増やしたくなります。

でも、初心者が最初から機能を増やしすぎると、途中で複雑になります。

最初は、

最低限使える形を作る

ことを優先した方がいいです。

勤怠管理アプリなら、まずは、

  • スタッフが打刻できる
  • 管理者が確認できる
  • 勤怠データを一覧で見られる

くらいからで十分です。

そこから必要に応じて、GPS、CSV、集計、権限管理などを追加していく方が安全です。

Claude Desktopと組み合わせると進めやすい

今回のようなアプリ開発では、Claude Codeだけでなく、Claude Desktopもかなり役立ちます。

私の感覚では、初心者はまずClaude Desktopで、

  • どんなアプリを作るか
  • 必要な機能は何か
  • どんな画面が必要か
  • どの順番で作るか
  • Claude Codeに何を指示するか

を整理するのがおすすめです。

そのうえで、実際にファイルを作ったりコードを修正したりする段階でClaude Codeを使うと、かなり進めやすくなります。

いきなりClaude Codeに全部任せるより、

Claude Desktopで整理する
↓
Claude Codeで実装する
↓
またClaude Desktopで方針を確認する
↓
Claude Codeで修正する

という流れの方が、初心者にはわかりやすいと思います。

初心者がClaude Codeでアプリを作るなら意識したいこと

今回の経験から、初心者がClaude Codeでアプリを作るなら、次の点を意識した方がいいと思いました。

1. 最初は小さく作る

いきなり完成形を目指さない方がいいです。

最初は、

ログイン画面だけ
打刻画面だけ
スタッフ一覧だけ
勤怠一覧だけ

のように、小さく分けて作るのがおすすめです。

小さく作って、動作確認して、次に進む。

この方が失敗しにくいです。

2. 先に画面を整理する

コードを書く前に、必要な画面を整理しておくと進めやすいです。

例えば、勤怠管理アプリなら、

スタッフ用画面
・ログイン
・今日の打刻
・自分の勤怠履歴

管理者用画面
・ダッシュボード
・スタッフ管理
・現場管理
・勤怠一覧
・CSV出力

のように分けておくと、Claude Codeへの指示も出しやすくなります。

3. 指示は具体的に出す

AIへの指示は、具体的な方がうまくいきます。

例えば、

打刻画面を作ってください。

よりも、

スマホで使いやすい打刻画面を作ってください。
出勤、休憩開始、休憩終了、退勤の4つのボタンを大きく表示してください。
現在の打刻状態が一目でわかるようにしてください。

の方が、求めているものに近づきやすいです。

4. 修正前に説明してもらう

初心者の場合、AIが勝手にどんどん修正すると不安になることがあります。

そのため、最初はこうお願いするのがおすすめです。

いきなり修正せず、まず変更する内容と対象ファイルを説明してください。
その後、私が確認してから修正してください。

このようにすると、何が変わるのかを理解しながら進められます。

5. 最後に作業内容をまとめてもらう

作業が終わったら、必ずまとめてもらうと便利です。

今回の作業内容をまとめてください。
変更した機能、変更したファイル、確認すべきこと、次にやることに分けてください。

これを残しておくと、次の日に作業を再開しやすくなります。

Claude Codeでアプリ開発は現実的なのか？

今回、勤怠管理アプリを作ってみて感じたのは、

AIを使ったアプリ開発はかなり現実的になってきている

ということです。

もちろん、AIに丸投げすれば何でも完成するわけではありません。

本番で使うなら、セキュリティ、データ管理、運用、保守なども考える必要があります。

ただ、以前なら一人ではかなり大変だったことが、AIを使うことでかなり進めやすくなったのは確かです。

特に、

  • 小さな業務アプリ
  • 社内向けツール
  • 管理画面
  • 予約管理
  • 勤怠管理
  • 見積書・請求書管理
  • 作業報告アプリ

のようなものは、AIと相性が良いと感じています。

まとめ

Claude Codeを使って勤怠管理アプリを作ってみたことで、AI開発の可能性をかなり感じました。

最初は、デザインのたたき台だけ作るつもりでした。

でも、実際に使ってみると、画面だけでなくコードも作れて、アプリの形がかなり出来上がりました。

今回感じたことをまとめると、

  • Claude Codeはアプリのたたき台作りに強い
  • 画面作成やコード修正をかなり手伝ってくれる
  • エラー対応も相談しながら進められる
  • ただし、AIに丸投げは危険
  • セキュリティや個人情報の扱いは必ず確認が必要
  • 初心者はClaude Desktopで整理してからClaude Codeを使うと進めやすい
  • 最初は小さく作るのが大事

という感じです。

AIは魔法ではありません。

でも、うまく使えば、今まで一人では難しかったアプリ開発をかなり現実的に進められるようになります。

Sato Labでは、これからもClaude DesktopやClaude Codeを使ったAI開発の実体験を、初心者向けにわかりやすく発信していきます。

AI開発 Claude Code アプリ開発 個人開発 勤怠管理
一人で設定するのが不安な方へ

Claude DesktopやClaude Codeは便利ですが、最初の導入や使い方でつまずく方も多いです。

「どこから始めればいいかわからない」
「黒い画面が怖い」
「自分のパソコン環境で合っているか不安」
「AIにどう指示すればいいかわからない」

そんな方向けに、画面共有で一緒に進めるサポートも準備しています。

まずは無料記事で試してみて、難しそうであれば個別サポートも活用してください。

相談する