6-2 Claude Code で社内ツールを 1 時間で作る

このレッスンで身につくこと

前のレッスン 6-1 では 外向け の LP を 30 分で形にしました。今度は 内向け、つまり社内で毎日のように動かす 業務 Web ツール を 1 時間で立ち上げます。LP が「見せる」ためのものだったのに対し、社内ツールは「使ってもらう」ためのもの。設計の優先順位がまったく違う ところが面白いポイントです。

所要時間 — 約 60 分（読むだけなら 25 分） 難易度 — ★★☆☆☆

なぜ社内ツールは Claude Code の最良の戦場なのか

外向けプロダクトには デザイン・SEO・ブランド・スケール など満たす基準が山ほどありますが、社内ツールに求められるのは 「明日の業務を 30 分短くする」 の一点だけ。綺麗じゃなくていい・SEO もいらない・ユーザーは 5 人 — この緩い制約こそが、Claude Code が最も力を発揮する条件です。

LP と社内ツールの違い

データを溜める と 長く使われる の 2 つが、LP との決定的な違いです。

「自分で作る」威力

外注では小さすぎる、Excel では限界がある 絶妙な隙間 を、自分で 1 時間で埋められる というのが Claude Code 時代の最大の変化です。仕様を伝えるコストが消える のが本質。「自分の頭の中の業務知識」がそのまま動くアプリになります。

社内ツールのよくあるユースケース 5 つ

「うちにも 1 つあるな」と思える例が必ず混ざっています。

1. 帳票生成ツール — 見積書 / 請求書 / 領収書 / 納品書。Excel テンプレ運用の Web 化候補 No.1
2. CRUD 管理ツール — 問い合わせ / 顧客 / 商品マスタ / 案件。「作成・閲覧・更新・削除」の 4 操作で成立
3. 集計レポートツール — 売上 / 工数 / 在庫の月次レポートをボタン 1 回で
4. 外部 API ラッパー — Slack 通知 / メール一斉 / 配送追跡を GUI から
5. ルール自動判定ツール — 経費チェック / 与信判定 / 価格設定。if 文の塊 + 入力フォーム 1 つ

技術スタックの選択 — 4 つの選択肢

データを 1 人だけが触る なら HTML + localStorage で十分。2 人以上が同時編集 するならサーバ + DB が必須。ここを誤ると、3 ヶ月後に「誰かが上書きしてデータが消えた」事件が必ず起きます。

実例 1 — 見積書作成ツール（HTML 単体）

「1 ファイルで動く・社内共有フォルダに置くだけで使える」見積書ツールを 30 分で立ち上げます。

Step 1 — 業務要件を 1 枚に

誰が使う: 営業 5 名
今の作業: Excel テンプレを毎回コピーして、宛名と品目を手入力
所要時間: 1 件あたり 15 分（年間 200 件 → 50 時間）
問題: 計算ミス、体裁崩れ、PDF 化が手作業
ゴール: 入力 → ボタン 1 回で PDF

所要時間と件数を数字で書く のがコツ。「半日で作って投資回収」の一言で上司にも通せます。

Step 2 — 初回プロンプト

> 見積書作成ツールを 1 ファイル HTML で作って。
>
> 入力: 発行日 / 宛先（会社名・担当者・敬称） / 件名 /
>      品目テーブル（品名・数量・単価、行追加削除可） / 備考
> 自動計算: 行金額 / 小計 / 消費税（10% / 8%）/ 合計
> 操作:
>   - 印刷プレビューで A4 縦に切替、@media print で装飾を消す
>   - 下書き保存 / 読込 (localStorage)
>   - 過去宛先のサジェスト
> 制約:
>   - Tailwind CDN、PC 中心で OK
>   - 自社情報は HTML 上部の変数として

==@media print== を必ず指定するのが社内ツール特有のコツ。「印刷時は入力フォームを隠して見積書ブロックだけ表示」の挙動が出ます。

Step 3 — 確認ポイント

• 行を 5 つ追加・削除しても小計と税が正しい
• 数量や単価を空にしたとき NaN が出ない
• 印刷プレビューが A4 1 枚に収まる
• リロード後も下書きが復元される
• 計算結果を手で 1 件は検算 する（絶対）

Step 4 — 改善ラウンド

> 以下の改善を加えて。
> 1. 過去宛先一覧（localStorage 蓄積）をドロップダウン化
> 2. 最近使った品目 5 件をチップ表示、クリックで行追加
> 3. 見積番号 "Q-YYYYMMDD-連番" を自動採番
> 4. 有効期限（発行日 + 30 日デフォルト）
> 5. 必須項目チェック — 未入力なら印刷ボタン非活性

1 回の指示で 3〜5 個まで が安全。それ以上は劣化します。

完成した mitsumori.html を 共有フォルダ（Drive / NAS / SharePoint） にコピーして配布完了。ダブルクリックで動く のが HTML 単体の最大の強み。

実例 2 — 問い合わせ管理ツール（CRUD + DB）

「複数人で同時編集する」前提の CRUD ツール。データを DB に置くのが大きな違いです。

CRUD の 4 操作

「画面 4 つ + API 4 つ」を 1 セットで作るのが定型。これが体に染みつくと、どの管理ツールも 2 時間で立ち上がります。

Claude Code への初回プロンプト

> 問い合わせ管理ツールを React Router v7 で作って。
>
> データモデル (tickets):
>   id / subject / from_name / from_email / body /
>   status (open/in_progress/resolved/closed) /
>   assignee / priority (low/normal/high) /
>   created_at / updated_at
>
> 画面 4 つ:
>   /tickets       一覧（status/assignee/priority フィルタ + 検索）
>   /tickets/new   新規
>   /tickets/:id   詳細 + コメントタイムライン
>   /tickets/:id/edit 編集
>
> 機能:
>   - 一覧からステータス変更ワンクリック
>   - 担当割当ドロップダウン
>   - 対応コメント追記
>
> 技術:
>   - React Router v7、Tailwind
>   - SQLite + Drizzle（./data/tickets.db）
>   - loader/action で DB を触る、認証は後で追加

データモデルと画面数を最初に明示 するのが CRUD でブレない最大のコツ。「問い合わせ管理を作って」だけだと毎回出力がバラバラになります。

追加要求の典型

> 以下を追加して。
> 1. CSV エクスポート — 現在の絞り込みで出力
> 2. CSV インポート — 既存 Excel から取り込み
> 3. Slack 通知 — 新規 + high 優先度変更時
> 4. 一括ステータス変更 — チェックボックスで複数選択
> 5. ダッシュボード — 担当別・ステータス別件数

認証・データ保存の最小設計

社内ツールで一番つまずくのが 認証 と データ保存。軽く扱うと半年後に事故になります。

データ保存の 3 段階

Lv.1 → Lv.3 のジャンプは必ず発生 するので、初めから ORM（Drizzle / Prisma）を入れておけば DB 移行は 30 分で終わります。

認証の 3 段階

本番デプロイするなら最低 Basic 認証。「社内 IP からしかアクセスできない」は危険な思い込みです（VPN・退職者問題）。

監査ログは必須

誰が何を変えたか を追えないとトラブル時に原因究明できません。

> operations ログテーブルを追加。
> id / operation / target_id / actor / changed_at / diff(JSON)
> すべての mutation で自動記録、詳細画面に変更履歴を表示

3 ヶ月後の「誰が消したの」がゼロ秒で解決します。

デプロイか、ローカル運用か

パターン A — ローカル運用（共有フォルダ配布）

HTML 単体を Drive / OneDrive / NAS に置く運用。

向く: 個人ツール、ネット遮断環境、今日中に配りたい 向かない: 同時編集、データ集約、履歴・監査

パターン B — サーバ運用

React Router / Next.js を Vercel / Cloudflare Pages / Cloud Run にデプロイし、社内 URL で公開。

向く: 複数人同時編集、データ集約、履歴・監査、スマホ対応 向かない: ユーザーが 1 人

失敗パターン

社内ツール固有の地雷 8 つ。

1. 機能盛りすぎ — まず 1 機能だけ配って、使いながら追加が鉄則
2. セキュリティ無視 — Basic 認証 1 つで 99% のリスクは消える
3. メンテ放棄 — README + CLAUDE.md + チーム共有リポジトリ + 環境変数ドキュメント化
4. バックアップなし — 週次ダンプ Cron を最初から仕込む
5. エラー無視 — エラー時に Slack 通知
6. Excel との二重管理 — CSV インポート/エクスポートで「戻れる安心感」を担保しつつ移行期限を切る
7. 同時編集の衝突 — updated_at 楽観的ロックで防げる
8. モバイル対応忘れ — 外回りの営業がスマホから見たがる

Claude Code 自身が引き継ぎ資料を書ける ので、これは使わない手はありません。

> このプロジェクトの README.md を書いて。
> - 目的 / セットアップ / データモデル / 改修パターン
> - 環境変数一覧 / デプロイ手順
> 別の人が初見 30 分で立ち上げられるレベルに。

プロンプトテンプレート 3 つ

コピペで使える業務別プロンプト。

テンプレート 1 — 帳票生成（HTML 単体）

> [帳票名] を 1 ファイル HTML で作って。
> 入力: [ヘッダ項目] / 明細テーブル / 備考
> 自動計算: 小計 / 税 / 合計 / [独自ロジック]
> 操作: 印刷プレビュー(@media print, [用紙サイズ]) /
>      下書き保存読込(localStorage) / 過去入力サジェスト
> Tailwind CDN、自社情報は変数化、PC 表示中心

テンプレート 2 — CRUD 管理（React Router）

> [対象データ] 管理ツールを React Router v7 で。
> モデル: id / [フィールド] / status(enum) / created_at / updated_at
> 画面 4 つ: /[resource] (一覧) / new / :id / :id/edit
> CSV エクスポート/インポート、監査ログ
> SQLite + Drizzle（後で Neon に移行できる構造）
> Basic 認証（環境変数 BASIC_USER/BASIC_PASS）
> 全 mutation で operations に自動ログ

テンプレート 3 — 集計レポート（Streamlit）

> [対象データ] の集計レポートを Streamlit で。
> データソース: [CSV / API / DB]
> サイドバー: 期間フィルタ / [カテゴリ] 複数選択
> メイン: KPI カード 3 枚 / 月次推移折れ線 /
>        [カテゴリ] 別棒グラフ / 明細テーブル
> CSV ダウンロード、@st.cache_data でキャッシュ

自分以外の人に使ってもらう工夫

社内ツールを他人に渡すなら、次の手当てでサポートコストが激減します。

1. フィールド名は業務用語 — status ではなく「対応状況」、assignee ではなく「担当者」
2. 空状態の説明 — 「データがありません」ではなく「右上の "新規登録" から追加してください」
3. エラーメッセージを優しく — Validation failed ではなく「メールアドレスを入力してください」
4. キーボードショートカット — / で検索、n で新規、Esc で閉じる、Cmd+S で保存
5. 操作の取り消し — 削除直後に「元に戻す」を 5 秒表示

このレッスンのまとめ

1. 評価軸は 「削った業務時間」の 1 点。見た目より使い勝手
2. ユースケースは 帳票 / CRUD / 集計 / API ラッパー / ルール判定 の 5 つ
3. スタックは 同時編集の有無 で決める。1 人なら HTML、複数人なら React Router + DB
4. 実例 1（見積書）は HTML 単体、実例 2（問い合わせ管理）は CRUD + DB
5. 認証・データ保存は Lv.1 → Lv.3 を意識、本番では最低 Basic 認証 + 監査ログ
6. 共有フォルダ vs サーバ運用 は「同時編集 1 度でもあるか」で判断
7. 失敗パターンは 機能盛りすぎ / セキュリティ無視 / メンテ放棄 の 3 大トップを最優先で潰す
8. 業務別 プロンプトテンプレ 3 種 を CLAUDE.md にストック

<Quiz question="社内ツール開発で「最初に判断すべき」項目はどれ？" options={["同時編集が必要かどうか（HTML 単体か、DB 付きサーバ運用か）","色を青系にするかオレンジ系にするか","Tailwind のバージョンを最新にするか"]} answer={0} />

<Quiz question="問い合わせ管理ツールのような CRUD アプリで必須な「4 操作」とは？" options={["Create / Read / Update / Delete","Login / Logout / Search / Export","Create / Print / Send / Archive"]} answer={0} />

<Quiz question="社内ツールがメンテ放棄される最大の防止策はどれ？" options={["README.md と CLAUDE.md に目的・改修方法・環境変数を書き残す","コードを最新フレームワークで書き直し続ける","作った人が会社に居続ける"]} answer={0} />

次のレッスン 6-3: Vercel 公開 では、ここで作ったツールを 社内に公開 する手順を学びます。GitHub にプッシュして Vercel に繋ぐだけで、https://tools.example-corp.jp のような URL で社内全員が触れる状態を作ります。