6-2 Claude Code で社内ツールを作る｜小さな業務アプリを1時間で

このレッスンでわかること

前のレッスンでは「見せるためのページ」である LP を作りました。今回は一歩進んで、「使うためのページ」、つまり動くツールを作ります。

「業務アプリを作る」と聞くと大ごとに感じますが、ここで作るのは HTML ファイル1つだけで動く小さなツールです。サーバーもデータベースも要りません。ファイルをダブルクリックすればブラウザで動き、同僚にファイルを送れば相手のパソコンでもそのまま動きます。

このレッスンで身につくのは次の4点です。

• 単一 HTML で動く「小さなツール」という選択肢があること
• 要件を「最初は1機能だけ」に絞る考え方
• 使いながら改善要望を伝えて育てていく方法
• このやり方の限界（データ保存・複数人利用）と、その先の選択肢

目安として、最初の1個は1時間もあれば完成します。「自分の困りごとを自分で解決する道具」を持つ体験が、このレッスンのゴールです。

単一 HTML のツールとは何か

HTML ファイルには、見た目（HTML と CSS）だけでなく、動き（JavaScript というプログラム）も埋め込めます。これを使うと、「数字を入れたら計算結果が出る」「ボタンを押したら一覧に追加される」といった動きのあるページが、ファイル1つで完結します。

この形式には、業務ツールとして見たときの利点が3つあります。

• 導入の手間がゼロ：インストール不要。ダブルクリックで動く
• 配るのが簡単：メールやチャットでファイルを送るだけ。受け取った人もダブルクリックするだけ
• 安全に試せる：あなたのパソコンの中だけで動くので、社内システムに影響しない。データが外部に送られることもない

たとえばこんなものが作れます。

• 工数計算機：作業時間と時給単価を入れると、人件費の概算が出る
• チェックリスト：定型業務の手順をチェックボックスで消し込む。進捗率も表示
• 簡易フォーム → CSV 出力：入力した内容を一覧にためて、最後に CSV ファイルとしてダウンロードし、Excel で開く

どれも「Excel でもできる」と思うかもしれません。その通りです。ただ、入力欄が決まっていて、誰が使っても同じ操作になり、壊れる数式もないという点で、配って使ってもらう道具としてはツールの方が向いている場面が多くあります。

要件の絞り方：最初は1機能だけ

ツール作りで一番多い失敗は、最初から欲張ることです。「工数も計算したいし、履歴も残したいし、グラフも見たいし、メンバー別の集計も……」と盛り込むと、指示が曖昧になり、できあがったものの確認も大変になります。

そこで鉄則です。最初の指示は「1機能だけ」に絞る。

絞るための問いはシンプルで、「このツールで一番やりたいことを1文で言うと？」です。1文で言えたら、それだけを頼みます。

Bad例：最初から全部盛りで頼む。

工数管理ツールを作って。時間と単価から人件費を計算できて、
履歴が保存できて、月別のグラフが見られて、メンバーごとの集計もできて、
CSVでもExcelでも出力できるようにして

Good例：核になる1機能だけを、入出力を明確にして頼む。

工数の概算計算機を kosu.html として作ってください。
HTML ファイル1つで完結させ、ブラウザで開くだけで動くようにしてください。

- 入力: 作業内容（テキスト）、想定時間（時間単位の数値）、時給単価（円）
- 動き: 行を追加できて、行ごとに「時間 × 単価」の金額が出る
- 出力: 全行の合計時間と合計金額を画面の下に大きく表示する
- 見た目: シンプルで構いません。入力欄が大きく、スマホでも使えること

ポイントは「入力・動き・出力」の3点を書くことです。プログラムの本質は「何を受け取って、何をして、何を返すか」なので、この3点が決まっていれば Claude Code は迷いません。

履歴やグラフが本当に必要なら、1機能版が動いてから追加すればよいのです。順番に足す方が、結果的に早く確実に完成します。

作ったら、まず自分で使ってみる

ファイルができたらブラウザで開き、実際の業務データを1件入れてみてください。テスト用の適当な値ではなく、本物の値を入れるのがコツです。本物を入れると、「あ、ここに備考欄がほしい」「時間は0.5刻みで入れたい」といった本当の要望が見えてきます。

これが「ローカルで動くものから始める」最大の意義です。最初から完璧な要件を書ける人はいません。動くものを触って初めて、本当の要件がわかる。だからこそ、小さく作ってすぐ触れるこの方法が効くのです。社内の正式なシステム開発を依頼する場合でも、この方法で作った試作品を「こういうものがほしい」という見本として見せれば、要件の伝達が圧倒的に速くなります。

改善要望の伝え方：利用シーンごと伝える

使ってみて出てきた要望は、対話で追加していきます。このとき、機能名だけでなく**「どういう場面で困るか」をセットで伝える**と、Claude Code はより気の利いた実装をしてくれます。

使ってみて2つ改善したい点があります。

1. 想定時間を「1.5」のように小数で入れることが多いので、
   0.5 刻みで増減できる上下ボタンを付けてください
2. 計算結果を上司にメールで報告するので、表の内容を
   「作業内容 / 時間 / 金額」のテキストとしてコピーできるボタンがほしいです

2番目の要望に注目してください。「コピーボタンがほしい」だけでなく「上司にメールで報告するので」という場面を添えています。場面が伝わると、Claude Code は「ならばメールに貼りやすい整形にしよう」と先回りした提案をしてくれることがあります。

要望は一度に2〜3個まで。動作確認してから次を頼む、というリズムは LP のときと同じです。

CSV 出力で Excel と連携する

単一 HTML ツールを実用レベルに引き上げる定番機能が、CSV ダウンロードです。ツールで入力したデータを CSV ファイルとして書き出せれば、その先の集計や保管は使い慣れた Excel に任せられます。

入力した行の一覧を CSV ファイルとしてダウンロードできるボタンを
追加してください。

- ファイル名: kosu_日付.csv（例: kosu_2026-06-11.csv）
- 列: 作業内容, 想定時間, 時給単価, 金額
- Excel で開いたときに文字化けしないようにしてください

「Excel で文字化けしないように」の一言は、レッスン3-2で学んだのと同じおまじないです。これで、「ツールで入力 → CSV で出力 → Excel で集計」という小さな業務フローが、あなたの手元だけで完成します。

限界を正直に知っておく：保存と共有の壁

ここまで読んで「これで何でも作れるのでは」と思ったかもしれません。期待値を正しく持つために、単一 HTML ツールの限界を正直にお伝えします。壁は2つあります。

壁1: データ保存。このツールに入力したデータは、基本的にブラウザを閉じると消えます。「ブラウザに記憶させる仕組み（ローカルストレージ）を使って」と頼めば同じパソコン・同じブラウザ内では残せますが、それでもブラウザの履歴データを消すと一緒に消えますし、別のパソコンからは見えません。大事なデータは CSV でダウンロードして保管する運用が現実的です。

壁2: 複数人での利用。ファイルを同僚に配ると、それぞれのパソコンで「別々のコピー」が動きます。Aさんが入力したデータは Bさんからは見えません。「チーム全員で同じデータを見て更新する」には、データを1か所で預かるサーバーとデータベースという本格的な仕組みが必要で、それは単一 HTML の守備範囲を超えます。

つまりこの方法が向いているのは、**「自分（または各自）が使う、計算・変換・チェック系の道具」**です。逆に「チームの共有台帳」「顧客データの管理」のような用途には向きません。そうした要件が出てきたら、社内の情報システム部門に相談するか、kintone や Google スプレッドシートのような共有前提のサービスを検討するのが正しい判断です。限界を知った上で使い分けられることが、このレッスンでいちばん大事な学びです。

なお、次のレッスンで扱う「Web 公開」をすれば配布の手間は減りますが、それでも「データを共有できない」という性質は変わりません。公開はあくまで「ファイルを配る代わりに URL を配る」手段です。

やってみよう

演習1（1機能ツール）：自分の業務で「ちょっと面倒な計算・変換」をひとつ選び、「入力・動き・出力」の3点を書いてツール化してみましょう。例: 税込価格計算、営業日数カウント、文字数チェッカー。

演習2（改善サイクル）：演習1のツールに本物の業務データを入れて使い、出てきた要望を「場面＋要望」の形で2つ伝えて改善させてみましょう。

演習3（CSV 出力）：チェックリストか簡易フォームのツールを作り、入力内容を CSV でダウンロードして Excel で開くところまで通してみましょう。文字化けせずに開けたら成功です。

まとめ

• HTML ファイル1つで「動くツール」が作れる。インストール不要で、配るのも簡単
• 最初の指示は1機能に絞り、「入力・動き・出力」の3点を明確に書く
• できたら本物の業務データを入れて使う。触って初めて本当の要件が見えてくる
• 改善要望は「どういう場面で困るか」をセットで伝えると、気の利いた実装になる
• CSV ダウンロードを付ければ、Excel との連携で実用度が一気に上がる
• 限界も知っておく: データ保存は弱く、複数人でのデータ共有はできない。共有台帳系の用途は別の仕組みを検討する

理解度チェック

Q1. 社内ツールを Claude Code に作らせるときの最初の指示として、もっとも良い方針はどれでしょう？

1. 将来必要になりそうな機能をすべて列挙して、一度に作らせる
2. 一番やりたい1機能に絞り、「入力・動き・出力」を明確にして頼む
3. 機能は指定せず「便利な工数管理ツール」とだけ伝えて任せる
4. まず社内システムと連携する本格的な設計から始める

解答を見る

正解: 2

最初から全部盛りにすると指示が曖昧になり、確認も大変になります。核になる1機能を「入力・動き・出力」の3点で明確に伝え、動くものを触ってから機能を足していく方が、結果的に早く確実に完成します。

Q2. 単一 HTML ツールの性質として、正しいものはどれでしょう？

1. 入力したデータは自動的にクラウドに保存され、どのパソコンからでも見られる
2. ファイルを同僚に配れば、全員が同じデータをリアルタイムで共有できる
3. 各自のパソコンの中だけで動き、チームでのデータ共有には別の仕組みが必要
4. サーバーを用意しないと、そもそもブラウザで開くことができない

解答を見る

正解: 3

単一 HTML ツールはあなたのパソコンの中だけで動きます。配ると各自のパソコンで「別々のコピー」が動くため、データの共有はできません。共有台帳のような用途には、サーバーとデータベースを持つ本格的な仕組みや、共有前提のサービスの利用を検討してください。