当ブログではこれまで「AI（ChatGPT）で勤務（当直）シフト表を作りたい、作れるのか？」という記事を過去2回ご紹介しました。
・初期ChatGPT編…①
・Code Interpreter機能を使った編…②
そして前回の記事では「ノーコード勤怠管理アプリがClaudeで作れた！」という結果をご紹介しました。
Claude（クロード）とは、こちらもChatGPTのような生成AIでChatGPTのライバルAIです。
実際に使ってみると、Claudeを使えばwebアプリが驚くほど簡単に作れた！ということが分かりました。そしてふと思ったのが…
ならばシフト作成するwebアプリも作れるのでは
やってみたらできました。
プログラミング経験ゼロの方でも、無料でシフト作成webアプリが作れる方法を詳しくご紹介します。
実際にできたアプリを使って試せるリンクもご用意しましたので、ぜひ「本当にできるの？」を体験してみてください！
Claude（クロード）を使ったシフト作成webアプリの作り方
Claudeに用いたプロンプトは以下になります。そしてClaudeのバージョンは「Claude Sonnet4」です。
月ごとの当直勤務の当番表を作るwebアプリが欲しくて、Claudeに考えて欲しいです。なお人間側はプログラミング等に詳しい者はいません。PC、スマホは持っています。
・メンバーは「○」「△」「×」と3つから選ぶようにしたいです。
・だれも当直を担当しない日がないようにしたいです。
・すべての人が3回もしくは4回、当直するように当直を割り振りたいです。
・複数回担当する場合、その間隔を3日以上あけるようにしたいです。
上記のルールで動くアプリについて仕様を考えて欲しいです。
そしてwebアプリを作って欲しいです。
でき上がったアプリが以下になります。下の画像をタップしていただくと、できたアプリを使って試していただけます（Claudeのプレビュー画面にリンクしています）
上記スクリーンショットの右下には「Customize Artifact」というボタンがあります。これをタップすると、上記のアプリをベースに変更を加えることができます。
【カスタムの例（プロンプト）】
・条件的に「誰も入れない」場合は空白を表示して下さい
・「この日に入れる人は1人だけ」の場合は結果の色を変更して下さい
・印刷ボタンをダウンロードボタンに変更して下さい
・○印がもっとも少ない日の出勤者をまず決めて、それから他を決めて下さい
するとコードが変更され、あなただけのWebアプリを作れます。
csvファイルをドロップして作るシフト作成アプリも
先ほどClaudeが作ったwebアプリに対して、お願いごとを盛り盛り加えたバージョン（改良完成版）も下にご紹介します。画像をタップしていただくと、試しにClaudeが作ったwebアプリの使用感を試していただけます。
主な変更箇所は「csvファイルをドロップしてシフト表を作る」という作り方に変更した感じです。
送ったcsvデータは以下のような感じです。Googleのスプレッドシートを編集して、ダウンロード→csv（コンマ区切り）として保存しました。
メンバーの要望をcsvにひとまとめする「調整さん」を使った方法を、下記の記事で紹介しています。
Claudeが作ったアプリをローカルで動かす手順
アプリはwebサイト経由（Claude）で使うこともできますが、ご自分のパソコン（またはサーバー）にダウンロードしても使えます。ここでは、ご自分のパソコン内で使う方法をご紹介します。
- Claudeが作ったコード全文をコピーします。
※コピーボタンは画面の右側上部にあります（下の画像参照）。
①を押すと全文コピーです。
②を押すとコード全文が表示されます。それを全選択してコピーする方法もあります
2.メモ帳を開く→コピペして保存
- Windowsの場合：スタートメニュー → 「メモ帳」で検索
- Macの場合：「テキストエディット」を開く
3.コードを貼り付け
- メモ帳にコードを貼り付け（Ctrl+V）
4.拡張子HTMLファイルとして保存
- 「ファイル」→「名前を付けて保存」
- ファイル名：
勤怠管理.html（拡張子として必ず.htmlをつける） - ファイルの種類：「すべてのファイル」を選択
- 保存場所：デスクトップなど分かりやすい場所
5.おすすめの保存場所…デスクトップにフォルダを作る
Claude vs ChatGPT｜webアプリ作成でのメリット比較
Claudeにはできて、ChatGPTにはできないことは下記の３つ（2025年7月現在）です。
【Claudeにはできる】
・画面2分割（トーク画面とプレビュー画面）
・プレビュー画面で使用感を試せる
・コード変更の足跡が全て残る
・作ったwebアプリをwebで公開できる、URLを知る人がアクセスして試せる
Claudeは画面2分割で表示！
Claudeは、プロンプト次第で画面が2分割表示されます。はじめのトーク画面はChatGPTと同じです。プロンプトに「アプリを作って」「コードを書いて」とお願い文を入れた場合、自動的に画面が2分割され、コードが生成され、できたコードが自動プレビューされます（下の図の①と②）。
プレビュー画面で使用感を試せる
「Claude、ゲームを作って」や「Claude、アプリを作って」などお願いした場合、Claudeがコードを書き、その後、どこにも遷移することなくプレビュー画面が表示されます。
早速使って、修正点をお願いすれば良いという訳です。
「ゲームを作って」などの際は、特に便利な機能ですよ。
コード変更の足跡が全て残る
「もっとこうして」など修正をClaudeに依頼すると、Claudeがコードを書き直してくれます。コードの修正履歴はすべて残っています。「やっぱ戻りたい…」という時に便利です。
過去のバージョンに戻るボタンは下図の赤枠部分です。
作ったアプリをwebで公開&URLを知る人がアクセスして使える
Claudeと会話しながら作った成果物は、成果物の部分のみ（チャットは含まず）ネットにUPできます。やり方は下図の通りです。まず、チャット画面右上にご注目を。「公開」というボタンがあります。それをタップします。
公開ボタンを押すと、下図の画面になります。押すと、成果物へのリンクURLが発行されます。
発行されたURLを「社内で共有」「仲間と共有」「みんなに公開」など、できます。
もちろんURLを発行せずに「ローカルで保存（PC内に保存）」も可能です。
結論：ノーコードでシフト作成アプリできた！
2023年5月には、全くできなかった「生成AIでシフト表づくり」。
2025年7月には無料でできるようになってました〜！
生成AIの進歩にはビックリです。触り続けて、変わっていくAIを体感し続けることが大事なのかなと筆者は思っています。
よくある質問｜Claude シフト作成アプリ Q&A
（以下はClaudeが作ったClaudeの使い方に関しての文章です）
Q. Claudeは無料で使えますか？
A. はい、無料版でも十分にwebアプリ作成が可能です！今回ご紹介したシフト作成アプリも、すべて無料のClaude Sonnet4で作成しました。有料版もありますが、まずは無料版で試してみることをおすすめします。
Q. プログラミング経験が全くなくても本当に作れますか？
A. 大丈夫です！プログラミング知識は一切不要です。「こんなアプリが欲しい」という要望を日本語でClaudeに伝えるだけ。あとはClaudeが自動でコードを書いてくれます。筆者も「HTMLって何？」レベルから始めましたが、問題なく作れました！
Q. ChatGPTでも同じようなアプリは作れますか？
A. ChatGPTでもコード生成は可能ですが、Claudeの方が圧倒的に便利です！理由は画面分割でリアルタイムプレビューができること、修正履歴が残ること、そして作ったアプリを簡単に公開・共有できることです。「アプリ作成ならClaude一択」。
Q. エラーが出た時はどうすればいいですか？
A. Claudeに「エラーが出ました」と報告するだけでOK！エラーメッセージをコピペして「これを修正して」とお願いすれば、Claudeが自動で修正してくれます。まさに「AIが秘書」状態です。
Q. もっと複雑なシフト条件（夜勤・日勤・休日出勤など）にも対応できますか？
A. もちろんです！「こんな条件も追加したい」とClaudeにお願いすれば、どんどんカスタマイズしてくれます。今回は基本的なシフト作成でしたが、実際にはかなり複雑な条件にも対応可能です。「まずは基本版を作って、徐々に機能追加」がおすすめの進め方ですよ！
コメント