気になる場合は、価格と販売条件を公式ページで確認してください。

このページは公開情報ベースの事前チェックです。購入前に、価格・紹介条件・向いていない人をもう一度確認してください。

[PR] 一部リンクにはアフィリエイトを含みます。未購入・公開情報ベースの事前チェックです。

本記事は2026年5月の方針転換前に書かれた過去記事です。当メディアは現在「AI副業の現実を数字で検証するウォッチドッグ」へ路線を変更し、有料商品はすべて販売停止しました。技術的な実装ログとして残しつつ、収益化の再現条件は順次追記します。転換の経緯はこちら。

🔬 Claude Code研究所📱 生活アプリ化

📂 Claude Code生活アプリ化ログ

📂 この記事のシリーズ: Claude Code研究所 — 記事一覧

Claude Codeで何が作れて、収益化の前にどこで詰まるかを検証する実装ログ。

結論サマリBOX

「Claude Codeに指示したら、支出を入力してカテゴリ別に集計する家計簿ツールが30分で完成しました。」
Excelより手軽、家計簿アプリより自由。必要な機能だけ入れて、自分用にカスタマイズできます。
このツール自体が「Claude Codeで作れるもの」の実証デモとして副業に使えます。

項目	内容
作ったもの	支出カテゴリ分けツール（HTML/CSS/JS）
所要時間	約35分（修正3回含む）
保存方式	localStorageに自動保存
副業転用	「Claude Codeで何が作れるか」の実証ツールとして活用

今日の面倒ごと

「家計簿アプリを入れているけど、食費・副業ツール費・書籍代・通信費を分けて把握したい。アプリは機能多すぎてどこに入力するかわからない。Excelは起動が重い。シンプルに『支出を入力したら自動でカテゴリ別合計が出る』だけでいい。」

Claude Codeで何を作るか

ゴール: シンプルな支出カテゴリ分けツール

機能:
– 日付・金額・説明・カテゴリを入力して追加
– カテゴリ：食費 / 副業ツール費 / 書籍代 / 通信費 / 交通費 / その他
– カテゴリ別の月合計を自動計算・表示
– 一覧表示（日付・金額・説明・カテゴリ）
– localStorageに保存（ブラウザ閉じても消えない）
– 1つのHTMLファイルに収める

最初の要件定義プロンプト

支出を入力して、カテゴリ別に集計する家計簿ツールを作ってください。

機能：
1. 日付・金額（円）・説明テキスト・カテゴリを入力して追加できる
2. カテゴリは「食費 / 副業ツール費 / 書籍代 / 通信費 / 交通費 / その他」
3. カテゴリ別の合計金額をカードで表示する
4. 入力した支出の一覧を表示する
5. localStorageで保存（リロードしても残る）
6. 削除ボタンあり
7. 1つのHTMLファイル

デザイン：
- シンプル・スマホ対応
- カテゴリカードは背景色でわかりやすく
- 合計金額は大きめのフォントで

できた画面・機能

入力フォーム（日付・金額・説明・カテゴリのドロップダウン）
カテゴリ別合計カード（横並び / スマホは縦並び）
支出一覧テーブル（日付・カテゴリ・説明・金額）
削除ボタン（各行）
全体合計表示

詰まった点①：「日付を入力しないで追加できてしまう」

日付を空欄のまま「追加」ボタンを押すとエラーが出ずに登録された。

修正プロンプト:

日付が未入力の状態で追加ボタンを押したとき、
「日付を入力してください」というアラートを出してください。
金額が0以下の場合も「金額を入力してください」のアラートを出してください。

→ バリデーション追加で解決

詰まった点②：「カテゴリ別合計カードが金額0でも表示されて見づらい」

まだ入力していないカテゴリも「¥0」と表示され、カードが多くなった。

修正プロンプト:

カテゴリ別合計カードは、そのカテゴリに支出が1件以上ある場合のみ表示してください。
支出がないカテゴリは非表示にしてください。

→ filter条件の追加で解決

詰まった点③：「月ごとの合計が見たい」

入力が増えてきたとき、今月だけの合計を見る方法がなかった。

修正プロンプト:

「今月のみ表示」ボタンを追加してください。
押すと、今月（現在の年月）の支出だけを絞り込んで表示します。
もう一度押すと全期間に戻ります。

→ トグルボタンと日付フィルターで解決

完成版のコード（Claude Codeが出力したもの）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>支出カテゴリ管理</title>
<style>
  body { font-family: sans-serif; max-width: 720px; margin: 0 auto; padding: 16px; }
  .form-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
  .form-row input, .form-row select { flex: 1; min-width: 120px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
  .add-btn { background: #7c3aed; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
  .toggle-btn { background: #f3f4f6; border: 1px solid #ddd; padding: 8px 16px; border-radius: 6px; cursor: pointer; margin-bottom: 12px; }
  .toggle-btn.active { background: #7c3aed; color: #fff; border-color: #7c3aed; }
  .cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
  .card { flex: 1; min-width: 140px; background: #f9fafb; border-radius: 8px; padding: 12px; text-align: center; }
  .card .cat { font-size: 0.8em; color: #666; }
  .card .amt { font-size: 1.5em; font-weight: bold; color: #7c3aed; }
  .total { text-align: right; font-size: 1.2em; font-weight: bold; margin: 8px 0; }
  table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
  th, td { padding: 8px; border-bottom: 1px solid #eee; text-align: left; }
  th { background: #f3f4f6; }
  .del { background: #ef4444; color: #fff; border: none; padding: 3px 8px; border-radius: 4px; cursor: pointer; }
</style>
</head>
<body>
<h1 style="font-size:1.3em;">💰 支出カテゴリ管理</h1>

<div class="form-row">
  <input type="date" id="date">
  <input type="number" id="amount" placeholder="金額（円）" min="1">
  <input type="text" id="desc" placeholder="説明">
  <select id="cat">
    <option>食費</option><option>副業ツール費</option><option>書籍代</option>
    <option>通信費</option><option>交通費</option><option>その他</option>
  </select>
  <button class="add-btn" onclick="addItem()">追加</button>
</div>

<button class="toggle-btn" id="monthToggle" onclick="toggleMonth(this)">今月のみ表示</button>

<div class="cards" id="cards"></div>
<div class="total" id="total"></div>
<table><thead><tr><th>日付</th><th>カテゴリ</th><th>説明</th><th>金額</th><th></th></tr></thead>
<tbody id="list"></tbody></table>

<script>
let items = JSON.parse(localStorage.getItem('kakeiboItems') || '[]');
let showMonthOnly = false;

function save() { localStorage.setItem('kakeiboItems', JSON.stringify(items)); }

function addItem() {
  const d = document.getElementById('date').value;
  const a = parseInt(document.getElementById('amount').value);
  if (!d) { alert('日付を入力してください'); return; }
  if (!a || a <= 0) { alert('金額を入力してください'); return; }
  items.unshift({ id: Date.now(), date: d, amount: a, desc: document.getElementById('desc').value, cat: document.getElementById('cat').value });
  save(); render();
  document.getElementById('amount').value = ''; document.getElementById('desc').value = '';
}

function deleteItem(id) { items = items.filter(i => i.id !== id); save(); render(); }

function toggleMonth(btn) {
  showMonthOnly = !showMonthOnly;
  btn.classList.toggle('active', showMonthOnly);
  btn.textContent = showMonthOnly ? '全期間を表示' : '今月のみ表示';
  render();
}

function getFiltered() {
  if (!showMonthOnly) return items;
  const now = new Date();
  const ym = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}`;
  return items.filter(i => i.date.startsWith(ym));
}

function render() {
  const filtered = getFiltered();
  const totals = {};
  let grand = 0;
  filtered.forEach(i => { totals[i.cat] = (totals[i.cat] || 0) + i.amount; grand += i.amount; });

  document.getElementById('cards').innerHTML = Object.entries(totals).map(([cat, amt]) =>
    `<div class="card"><div class="cat">${cat}</div><div class="amt">¥${amt.toLocaleString()}</div></div>`
  ).join('');

  document.getElementById('total').textContent = `合計：¥${grand.toLocaleString()}`;

  document.getElementById('list').innerHTML = filtered.map(i =>
    `<tr><td>${i.date}</td><td>${i.cat}</td><td>${i.desc}</td><td>¥${i.amount.toLocaleString()}</td>
     <td><button class="del" onclick="deleteItem(${i.id})">削除</button></td></tr>`
  ).join('');
}

// 今日の日付をデフォルト設定
document.getElementById('date').value = new Date().toISOString().split('T')[0];
render();
</script>
</body>
</html>

完成版の使い方

コードをコピーして kakeibo.html で保存
ブラウザで開く
日付・金額・説明・カテゴリを入力して「追加」
カテゴリ別合計カードで支出構造を確認
「今月のみ表示」で今月だけの集計
ブラウザを閉じてもデータは保存済み

非エンジニアが真似するときの注意点

カテゴリを変えるには: <option>食費</option> の部分を書き換える。Claude Codeに「カテゴリを〜に変えて」と伝えれば対応してくれる
カードの色を変えるには: .card { background: #f9fafb; } の色コードを変更
CSVに書き出したいなら: Claude Codeに「CSVダウンロードボタンを追加して」と指示すれば追加してくれる
データのバックアップ: localStorageはデバイスごとなので、Chromeのエクスポート機能やCSV機能を追加して定期バックアップを取ると安心

これを副業導線に転用するなら？

転用パターン	内容
デモ動画に使う	「Claude Codeで30分で作った家計簿ツール」をX/Shortsで見せる → Claude Code研究所の認知拡大
無料特典として配布	HTMLファイルを無料ダウンロード特典にして LINE登録誘導
副業コスト管理に実際に使う	「副業ツール費」カテゴリで月次の副業支出を管理。利益計算が楽になる
記事ネタ化	「家計簿カテゴリを分けたら副業ツール費が思ったより多かった話」としてXとnoteに投稿

AI自動ハックでの実際の使用: このツールをダウンロード特典の候補として検討中。「Claude Codeが作った」という事実がツールの説得力になる。

今日のミニ課題

コードをコピーして kakeibo.html で保存し、先月の支出を5件入力してみてください。
カテゴリ別合計を見るだけで、「無駄にお金を使っているカテゴリ」が見えてきます。

次回予告

次回は「Claude Codeで冷蔵庫の残り物から献立を出すアプリを作ってみた」です。
より実用的な生活タスクをClaude Codeで解決します。

FAQ

Q. このツールで家族の支出を共有できますか？
A. localStorageは同じデバイス・ブラウザでしか見られません。家族共有するにはGoogleスプレッドシートとGAS連携が必要になります。Claude Codeに「GASと連携してGoogleスプレッドシートに保存する機能を追加して」と指示すれば対応コードを書いてくれます。

Q. スマホで使えますか？
A. レスポンシブ対応済みのため使えます。Google Driveに保存して、スマホブラウザで開いてください。ただしlocalStorageはブラウザごとに別々なので、PCとスマホで同期はできません。