Claude Codeで業務アプリを作る手順【非エンジニア向け】

手順1：繰り返している確認作業を題材にする

「便利そう」より、今日も手で探したものを選ぶ

題材の選び方で僕が使う言葉は「ビタミン剤よりも鎮痛剤を作れ」です。 あればうれしい機能を集めるより、いま困っている作業を取り除く。営業なら返答待ちの案件探し、事務なら未提出書類の確認、企画なら原稿の締切確認が候補になります。 まず、直近の仕事で「同じ条件で探した」「同じ場所へ写した」操作をメモしてください。

候補は、入力するものが手元にあり、判定ルールを説明でき、出てきた答えを自分で確認できるものに絞ります。 「部署の仕事を全部自動化」は大きすぎます。「案件一覧から期限切れの未対応案件を取り出す」なら、何ができれば完成かを決められます。 既存の表計算ソフトのフィルターで十分なら、まずそれを使ってください。自作する意味があるのは、毎回条件を設定し直すなど、同じ操作が残る場合です。

最初は判断や送信を任せず、一覧を作る

本記事の題材は「期限切れの未対応案件を表示するアプリ」です。読み込むのはCSV、つまり表を文字のファイルにしたデータ。 アプリが候補を並べ、人が元の一覧と照合してから連絡します。自動メール送信、案件の削除、会社のシステムの更新は、今回の完成条件に含めません。 間違いが起きたときに、出力を使わず元の手順へ戻れる範囲です。

題材選びで止まりやすいのは、作る途中で欲しい機能を増やす場面です。「担当者別の集計も」「通知も」と思ったら、追加候補のメモに残して、いまの試作品とは分けます。 作りながら何を学ぶかはシステム開発の学び方で整理しています。販売するサービスを考えたい場合は個人開発の始め方が別の入口です。

手順2：入力・処理・出力を日本語で決める

「業務を効率化して」を、答え合わせできる依頼に変える

Claude Codeは、作業フォルダのファイルを読み、編集し、コマンドを実行する開発ツールです（公式の概要）。 ただし、どの案件を期限切れとするかは、仕事を知る人が決める必要があります。悪い依頼は「営業の仕事を効率化するアプリを作って」。入力も、処理の範囲も、完成の判定もAIの推測に委ねてしまいます。

伝える型は「使う人／入力／処理／出力／今回はしないこと」です。要件とは、このアプリに求める条件のこと。 今回は、期限が基準日より前で、状況が未対応の行だけを抽出します。基準日当日は含めません。この境界を先に書くと、画面ができたあとに判定の意味で迷いにくくなります。

営業担当が自分の案件一覧を確認するためのアプリを作りたいです。
入力：案件ID、担当者、期限、状況の列があるCSV。
処理：期限が基準日より前、かつ状況が「未対応」の行を抽出。
出力：該当する行の一覧と件数。基準日は画面で指定する。
今回はしないこと：メール送信、元CSVの上書き、データの保存、外部サービスとの接続。
日付の欠損や実在しない日付、想定外の状況は行番号付きで表示し、結果を出さない。
状況は「未対応」「完了」のみ。案件IDは必須で、重複はエラーにする。
実装前に、画面の構成と不明点を日本語でまとめてください。

返ってきた計画を、普段の仕事の順番で読む

計画を受け取ったら「CSVを選ぶ→基準日を選ぶ→結果を見る」という順番になっているかを確認します。 ログインや共有データベース、つまり複数人の情報を保存する仕組みが提案されたら、今回は不要と返してください。公式のベストプラクティスでも、探索・計画と実装を分け、具体的な条件を伝える進め方を説明しています。

つまずくのは、AIが使う専門用語を理解したふりで進むことです。「その機能がないと、今回のどの操作ができませんか」と聞けば、必要性を仕事の言葉で確認できます。 自分で選んだ題材でも、どこまで作れば仕事に役立つかは判断が難しいところです。AIシフトコースでは、今の業務を題材にして、作る範囲や学ぶ順番を相談できます。

手順3：Claude Codeで小さな試作品を動かす

空の作業フォルダで、計画から実装へ進む

準備するのは、Claude Codeを利用できるアカウントと、試作用の空フォルダです。 導入から始める人はClaude Codeの使い方でインストールと最初の会話を済ませ、そのフォルダで上の依頼を送ってください。 本記事では画面と処理をまとめた index.html というファイルを作ります。HTMLはブラウザに画面を表示するための形式です。

計画だけを確認したい間はPlanモードを使えます。これはソースファイルを編集せずに調べるための権限モードです（公式の権限設定）。 内容を確認したら通常の編集可能なモードへ戻し、次の依頼を送ります。以下のプロンプトはこの記事用の試作例で、特定の会社への導入実績ではありません。

確認した条件で、index.html を作成してください。
HTML・CSS・JavaScriptだけで動かし、外部ライブラリや通信を使わないでください。
CSVは画面で選んだファイルだけをブラウザ内で読み込みます。
UTF-8のCSVに対応し、先頭のBOM、引用符付きの値、値の中のカンマも扱ってください。
CSV列名は指定どおりに確認し、期限の形式はYYYY-MM-DDに限定してください。
読み込みエラーや入力エラーがあったら、前の抽出結果を消してください。
基準日を変えたら再計算し、入力ファイルと抽出結果は保存しないでください。
架空のサンプルCSVと、起動方法・確認方法を書いたREADME.mdも作ってください。
index.htmlをブラウザで開く方法を、私のOSに合わせて説明してください。

ファイルの編集やコマンドの実行を求める画面が出たら、対象が試作用フォルダか、何を実行するかを見て進めます。 指示文に「通信しない」と書くこと自体は、通信を技術的に禁止する設定ではありません。会社のデータを扱う段階では、後述の確認が必要です。

表示された画面と、操作する場所を確かめる

完了の返答が来たら、ファイル管理画面で index.html をブラウザで開きます。 CSVを選ぶ欄、基準日を入れる欄、結果を表示する場所があることを確認してください。画面が開かない場合は、ファイルが作られた場所と、開いたファイル名をClaude Codeに伝えます。 サーバーの起動を求められたら、まず外部ライブラリなしでファイルを直接開く条件に戻せるか聞きます。

READMEは、起動や操作の手順を記した説明書です。生成された説明を読み、実際に自分で同じ操作をしておきます。 「動きました」というAIの返答だけでは、自分のパソコンで動くことは分かりません。次の工程で、入力から結果までを通して確かめます。

手順4：正解が分かるデータで確かめる

正常な例と、止めてほしい例を用意する

まず下の文字列をClaude Codeに渡し、sample.csv として保存してもらいます。 これは答え合わせ用の架空データです。基準日を 2026-09-09 にすると、抽出対象はA01だけ。 A02は基準日当日、A03は完了済み、A04は未来の日付なので対象外です。

案件ID,担当者,期限,状況
A01,担当A,2026-09-07,未対応
A02,担当B,2026-09-09,未対応
A03,担当A,2026-09-08,完了
A04,担当B,2026-09-12,未対応

ファイルを選び、基準日を変えて、次の件数と合うか見ます。「正解」はサンプルと抽出条件から決まる値で、業務改善の実測値ではありません。 各ケースは元のサンプルから試してください。

次に、A04の期限を空欄にしたファイルと、実在しない 2026-02-30 にしたファイルを別々に作ります。 この場合は行番号と理由を表示して止まり、以前の抽出結果が残らないことが完成条件です。「0件」と「読み込めなかった」を同じ表示にすると、確認すべき案件がないと誤解します。 担当者名にカンマを含めて引用符で囲む例や、案件IDを重複させる例も試し、ずれた列や重複を見逃さないかを確かめます。

修正は「入力・操作・期待・実際」をセットで伝える

結果が違ったら、見た目の要望と計算の修正をまとめて頼まず、原因を追える単位で伝えます。 たとえば「元のsample.csv、基準日2026-09-09、期待はA01だけの1件、実際はA02も含む2件。基準日当日を除外して」と書きます。 エラー文に本物の情報が含まれる場合は、その部分を架空の値に置き換えます。

修正後は、失敗した例と、さきほど通った例の両方をもう一度試します。日付の修正で完了済みの行まで出る、といった別の不具合を見つけるためです。 公式ガイドも、テスト出力や実行結果などの証拠を確認する進め方を勧めています。人が表の答えと照合する作業を残すと、AIと同じ思い違いをしたまま進むのを防げます。

自分の画面で正しく動くと、同僚にも使ってもらいたくなります。その段階では、保存先や利用者の範囲も説明できることが必要です。 動く試作品を、仕組みを理解して仕事に使えるものへ育てたい人は、AIシフトコースの無料相談会で次に学ぶ内容を整理してください。

手順5：使う人と戻し方を決めて社内で試す

架空データの操作確認から、社内の試用へ進む

最初に同僚へ見せるのは、架空データを読み込み、結果を見て元の一覧と照合する操作です。 結果の件数が合うだけでなく、「この一覧があれば普段のどの操作を減らせるか」を聞いてください。新しい画面への入力が増えるだけなら、読み込むデータや出力形式を見直します。

実データで試す前に、会社の担当者とAI利用・ソフト導入・データの扱いを確認します。 この設計では作成中のClaude Codeへの入力と、完成後のブラウザでのCSV処理は別です。AIに社内CSVを渡してよいかと、作ったアプリで処理してよいかを分けて確認してください。Claude Codeの公式セキュリティ説明も確認できますが、生成したアプリの通信や保存方法は、そのコードの確認が必要です。

技術担当者には、外部への通信、データの保存、読み込んだ文字列の画面表示の扱いを見てもらいます。 配布するファイルを確認してから、社内で認められた方法で渡してください。この試作条件では読み込みデータを保存しないため、ページを再読み込みしたらCSVの選択からやり直します。 同僚と同じファイルを持っても案件データが同期する設計ではありません。共有編集が必要になった段階で、認証や保存先を含めた次の設計に進みます。

元の手順と、次に直す場所を残す

試用時は元の一覧を残し、結果が違うときは従来の確認手順に戻します。使う人、問い合わせ先、変更を頼む相手を説明書に書いておけば、作った本人だけが操作できる状態を避けられます。 効果を知りたいなら、同じ範囲の確認作業について、操作の開始から照合の終了までを従来の方法と試作品で記録します。修正や準備の手間も含めて、続けて使うかを判断してください。

決めた抽出条件と確認用データは作業フォルダに残します。Claude Codeに継続して伝えるルールは CLAUDE.md に、利用者の操作手順はREADMEにまとめます。公式ドキュメントでは、CLAUDE.mdは会話に読み込まれる指示として説明されています。書いたルールへの完全な準拠を保証する仕組みではないので、変更後の答え合わせは続けます。

次に学ぶ内容は、今回つまずいた場所から選べます。CSVの列がずれたならデータ形式、日付が合わなければ条件分岐、同僚と共有したければ保存と権限です。 今日の仕事から確認作業を選び、「何を入れ、何が出れば完成か」を書いてみてください。その条件をAIに渡し、答えを自分で確かめるところから、業務アプリの自作を始められます。