勤怠管理アプリをノーコードで作る！生成AIがサポート
特別な契約をせずに、月額費用0円で、導入時間30分で
ノーコードで事務アプリを作る＆使う方法のご紹介です。この記事で紹介するアプリは、中小企業・個人経営などの方に「ちょうどいい」サイズ感の機能となります。
前回はGoogle系のサービスを使い、Gemini（Googleの生成AI）と会話しながら作る勤怠管理Webアプリの作り方をご紹介しました。使ったのはGoogleスプレッドシートとGAS（Google Apps Script）です。
今回は別の生成AI「Claude（クロード）」を使った方法をご紹介します。
会話1ラリーで勤怠管理アプリ作れました！
使うのは、Claude（クロード）という生成AIです。
2025年6月、ノーコードで簡単にアプリが作れる新機能が紹介されました。
チャットGPTが使えるなら
同じ感覚でClaudeも使えます
これから「チャットGPTとClaudeの違い」や、でき上がった勤怠管理アプリのイメージ、使い方などをご紹介したいと思います。
なぜClaude？ チャットGPTでも作れる？ 違いは？
さて、こちらがClaudeと会話しながら作ったノーコード勤怠アプリです。右画面と左画面に分かれています。
左の画面：チャットGPTと同じ、生成AIと会話する画面です。
右の画面：完成イメージが表示されています。
また下記の赤枠部分をクリックすると、コードが表示されます。
これがClaudeの大きな特徴です。完成図を見ながら修正依頼ができ、修正を依頼するとClaudeは右画面の中で書き換え作業をしてくれます。
【ChatGPTのコード修正】
お願いすると一から全文を書き直してくれます。長いコードになると、時折ちょっと間違えます（^^;
【Geminiのコード修正】
こちらもコードを書き直してくれますが、途中に「※※※ここは元のまま。コード省略※※※」などがコード内に盛り込まれ、コピペするのに慎重な作業が必要です。
Claudeは画面が分割しています。これをArtifacts（アーティファクツ）機能と言うそうです。人間がチャットで注文をつけると、Claudeは右画面で表示しているコードに対して修正作業を行います。
完成図がプレビューされ
修正の注文がしやすい！
Claude（クロード）は
部分的な修正に優れています
Claudeの特徴は、まさにここ！（完成イメージが表示される、コードが部分修正できる）にあります。
勤怠アプリをClaudeが作るプロンプト
さてClaudeを開きます（登録している前提で進めますね。登録のしかたはChatGPTと同じです）
今回はClaudeのバージョン「Sonnet4」を選択しました。Claudeのバージョン選択画面は下記の部分になります。
「勤怠管理アプリを作って」と生成AIに依頼した依頼文（プロンプト）は以下になります。
中小企業の勤怠webアプリをclaudeに作って欲しいです。ちょっと気を効かせた仕様で、維持管理が楽な仕様を考えてもらえませんか。そして作ってみてもらえますか。手順も教えて下さい。
🎯 基本機能
- ワンクリック出退勤: 大きなボタンで簡単打刻
- リアルタイム勤務状況: 現在の勤務時間を常時表示
- 月次勤怠一覧: カレンダー形式で見やすく表示
- CSV出力: 給与計算ソフトに簡単インポート
🔧 維持管理が楽な設計
- ブラウザ完結: サーバー不要、HTMLファイル1つで動作
- ローカルストレージ: データはブラウザに保存（個人情報漏洩リスク最小）
- バックアップ機能: データのエクスポート/インポート可能
- レスポンシブ対応: PC・タブレット・スマホ対応
📱 使いやすさ重視
- シンプルUI: 必要最小限の機能に絞り込み
- 直感的操作: 説明書不要の分かりやすいデザイン
- エラー防止: 二重打刻防止、不正な時刻入力チェック
🛠️ 気の利いた機能
- 自動休憩時間計算: 8時間超過時に自動で休憩1時間を差し引き
- 残業時間の自動計算: 所定労働時間を超えた分を自動算出
- 打刻忘れ防止: 前日の打刻忘れをアラート表示
- 簡易レポート: 月次の労働時間サマリー
この計画で進めてよろしいでしょうか？
仕様を考えてみました。
アプリを作って良いですか？
おっけー！頼む！
できました！
これだけで完成です！
https://claude.ai/public/artifacts/2e0ca498-8590-4f10-ab4d-7eb346e8b699
お分かりの方は「ソースコードを表示」してコピペしてお使い下さい
チャットによりでき上がったコードを、どうすれば良いかClaudeに聞いてみましょう。
生成AIが作ったコードを保存する方法
さてClaudeとのチャットのやりとりででき上がったコード。Claudeは「HTMLファイルで作りました」と返事をくれています。これをどうしたら良いのでしょうか。
Claudeに聞いてみましょう。
この出来上がったHTMLファイルをどうしたらいいですか？初心者にも分かりやすいよう、一つずつ教えて下さい
以下はClaudeが示したやり方について、保存して運用する手順を、ご紹介します。
- Claudeが作ったコード全文をコピー
※コピーボタンは画面の右側上部にあります（下の画像参照）。
2.メモ帳を開く→コピペして保存
- Windowsの場合：スタートメニュー → 「メモ帳」で検索
- Macの場合：「テキストエディット」を開く
3.コードを貼り付け
- メモ帳にコードを貼り付け（Ctrl+V）
4.HTMLファイルとして保存
- 「ファイル」→「名前を付けて保存」
- ファイル名：
勤怠管理.html（拡張子として必ず.htmlをつける） - ファイルの種類：「すべてのファイル」を選択
- 保存場所：デスクトップなど分かりやすい場所
5.おすすめの保存場所…各社員のデスクトップ
- デスクトップに勤怠管理フォルダを作る
- フォルダ内に「勤怠管理.htmlファイルを置く」
勤怠管理.htmlの使い方
1.各PCに保存した 勤怠管理.html をダブルクリック
- ブラウザ（Chrome、Edge、Firefoxなど）で自動的に開きます
2.各社員が、各自のPCで出勤ボタンをクリック
（各社員が全員PCを持っている前提です）
📱 スマホから打刻する方法
Google Drive、OneDrive、Dropboxなどを活用
- HTMLファイルをクラウドにアップロード
Google Drive/勤怠管理/ └── 勤怠管理.html - スマホからアクセス
- Google Driveアプリでファイルを開く
- または、ブラウザで直接アクセス
- データの同期について ⚠️ 重要な注意点：
- PCとスマホは別々のデータになります
- ブラウザごと、デバイスごとに独立してデータが保存されます
🔄 データの保存について
PCブラウザ → PCのローカルストレージに保存
スマホブラウザ → スマホのローカルストレージに保存
※ 別々のデータとして管理される3.締め日にスタッフそれぞれがcsvをダウンロードし、上司または店長などにデータを送信
4.管理者が各CSVを表計算ファイルに統合
Googleで作る？ .htmlファイルで作る？それぞれの違い
さて、前回の方法「Googleスプレッドシート」で作った勤怠管理アプリ（前回記事のリンクです）。そして今回Claudeとの二人三脚で作った「htmlファイル」を使った勤怠管理アプリ。どこが違うのでしょうか。
チャットGPTにまとめてもらいました。結論は表の下に記してあります。
| 比較項目 | HTMLファイル | Googleスプレッドシート＆GAS |
|---|---|---|
| データの保存先 | 各自のPC内に保存 | Googleスプレッドシート（クラウド保存） |
| 複数人での利用 | ✕ 端末ごとに1人ずつ使用 | ◯ 複数人での同時アクセス・記録が可能 |
| バックアップ | ✕ 自分でコピー・管理が必要 | ◯ 自動でクラウドに保存・履歴も残る |
| セキュリティ（権限管理） | ✕ 誰でもファイルを開ける／PC依存 | ◯ Googleアカウント単位で閲覧・編集制限可 |
| オフライン対応 | ◯ オフライン環境でも動作可能 | ✕ インターネット接続が必須 |
| カスタマイズの自由度 | ◯ コードの変更で自在 | △ Googleの制限に従う |
| スマホ対応 | ○ 自作すれば可能 | ◯ デフォルトで可能 |
| 通知機能の追加 | △ コード変更の難易度高 | ◯ GASでメール通知やSlack連携が可能 |
| ログや履歴の管理 | △ 自前実装が必要 | ◯ スプレッドシートの変更履歴が自動保存 |
【どんな会社に適しているか？】
- 個人〜小規模、ネットが不安定な現場 → HTML型が手軽です。
- 中規模以上のチームや、Google Workspaceを活用している会社 → スプレッドシート型がおすすめです。
いずれにせよ結論はこちらです
ノーコード業務アプリは
生成AIで作れます！
試しに話しかけてみてはいかがでしょうか。
コメント