6-2 社内ツールプロトタイプ

社内ツールの需要

「エクセルでやってるけど非効率」「専用ツールを買うほどでもない」— そんな社内作業は、Claude Code でサクッとWebツール化できます。

このレッスンでは、見積書ジェネレーターを例に社内ツールの作り方を学びます。

Before / After：社内ツール開発

社内ツールを作る従来の方法との比較です。

Before（従来の方法）

• 外部に開発委託 → 数百万円 + 数ヶ月
• ノーコードツール → 月額費用 + 学習コスト
• IT部門に依頼 → 他の案件との優先順位で後回し

After（Claude Code）

• 「見積書ジェネレーターを作って」→ 30分で完成
• 追加費用ほぼゼロ
• 自分で修正・改善できる

プロトタイプとして試してから本格開発を検討する、という進め方が最もリスクが少ないです。

実践：見積書ジェネレーター

品目と金額を入力すると、PDF形式の見積書が生成される Web ツールを作ります。

> 見積書ジェネレーターの Web アプリを作って。
> 
> 機能:
> - 宛先（会社名、担当者名）の入力
> - 品目の追加（品名、数量、単価）— 動的に行追加
> - 小計・消費税・合計の自動計算
> - 「PDF出力」ボタンで印刷用レイアウトを表示
> 
> HTML + JavaScript のみで、ライブラリは不要。
> 見た目はシンプルで業務用途に耐えるデザイン。

期待される出力

Claude Code は以下のような Web アプリを生成します。

• 宛先入力フォーム（会社名、担当者名、日付）
• 品目テーブル（品名、数量、単価、小計が自動計算）
• 「行を追加」ボタンで品目を動的に追加
• 消費税10%の自動計算と合計表示
• 「印刷」ボタンで印刷用レイアウトに切り替え

ブラウザの印刷機能（Ctrl + P）で PDF として保存できます。

Created: estimate-generator.html

> ブラウザで estimate-generator.html を開いて確認して。

Opening estimate-generator.html in default browser...

改善を重ねる

プロトタイプができたら、実際に使ってみて改善点を見つけます。

• 「有効期限を追加して」
• 「備考欄をつけて」
• 「前回の入力を localStorage に保存して」

プロトタイプ → フィードバック → 改善のサイクルが高速に回るのが Claude Code の強みです。

> 見積書に以下の改善を加えて。
> - 有効期限フィールド（デフォルト: 発行日から30日後）
> - 備考欄（自由記述テキストエリア）
> - 入力内容を localStorage に自動保存して復元できるように

他の社内ツール例

見積書以外にも、Claude Code で作れる社内ツールの例です。

• タイムカード — 出退勤を記録してCSVで出力
• 会議室予約 — カレンダー形式で予約管理
• 経費精算 — レシートの内容を入力して月次レポート生成
• 日報ツール — テンプレートに沿って日報を作成・蓄積

いずれも HTML + JavaScript で、30分〜1時間で作れます。

> 日報入力ツールを作って。
> - 日付（自動で今日の日付を入力）
> - 今日やったこと（テキストエリア）
> - 明日やること（テキストエリア）
> - 所感（テキストエリア）
> - 「保存」ボタンで localStorage に保存
> - 過去の日報を一覧表示

よくある失敗と対処法

社内ツール作成でよくあるトラブルです。

機能を詰め込みすぎる → まずは核となる1機能だけ作り、使いながら追加していきましょう。

データが消える → ブラウザの localStorage はブラウザを変えると消えます。本格利用するならデータベース連携を検討。

社内ネットワークでしか使えない → HTMLファイルをそのまま共有フォルダに置けば社内で使えます。外部公開が必要なら次のレッスンで学ぶデプロイを検討。

> localStorage のデータをJSON形式で
> エクスポート・インポートできるボタンを追加して。
> データのバックアップ用。

まとめ

このレッスンのポイントを振り返ります。

• 社内の「ちょっとした不便」はWebツールで解決できる
• HTML + JavaScript で30分〜1時間で作れる
• プロトタイプ → フィードバック → 改善のサイクルが重要
• まず核機能1つに絞って作るのがコツ

次のレッスンでは、作ったWebアプリを公開する方法を学びます。