はじめに
海外に長期滞在することになり、現地がフランス語であったため、「レシートを撮って送るだけで家計簿が完成する仕組み」が欲しくなったので、Claude(Anthropicの生成AI)を使って構築してみました。
やったことをざっくり言うと:
- レシートの写真をClaudeに送るだけで、内容を読み取ってスプレッドシートに記録
- 銀行(Wise)の取引履歴も送ると、レシートと重複しないように自動で突き合わせて追記
- 「家計簿見せて」と言うと、スプレッドシートの内容をもとにHTMLの家計簿ダッシュボードをその場で生成
- ダッシュボードのデザイン・予算のルールはClaudeの「メモリ」機能に保存し、次回以降は同じ見た目・同じ計算ロジックで再生成される
この記事では、その構築過程と、途中でハマったポイント(iOSでダッシュボードが真っ黒になるバグなど)を共有します。
全体の構成
[レシート写真 / Wise取引履歴のスクショ]
↓ Claudeに送る(画像認識)
[Google スプレッドシート「家計簿」] ← 生データの正本
↓ 「家計簿見せて」
[Claudeが最新データを読み込み]
↓
[HTMLダッシュボード(Claudeのアーティファクト機能で生成)]
役割分担がポイントで、
- 生の取引データ(いつ・どこで・いくら使ったか) → Googleスプレッドシート
-
予算のルールやダッシュボードのデザインテンプレート → Claudeの「メモリ」機能
に分けています。スプレッドシートは「その時々の事実」を蓄積する場所、メモリは「毎回変わらないルール・見た目」を覚えておく場所、という使い分けです。
1. レシート画像からスプレッドシートへ
レシートの写真を複数枚まとめてClaudeに送ると、
- 店名・日付・合計金額
- 商品ごとの品目・単価(必要な場合)
- 割引やクーポンの適用状況
を読み取り、あらかじめ決めておいたフォーマット(日付, 内容, カテゴリ, 金額, メモ)でスプレッドシートに追記してくれます。
銀行やWiseなどの決済アプリの取引履歴のスクリーンショットも一緒に送ると、Claudeが「これはさっきのレシートと同じ取引だな」と判断して重複を除外しつつ、レシートには写っていない取引(交通費や年間パスの購入など)だけを追加してくれるのが便利でした。
⚠️ Google スプレッドシートを操作するツールには「特定の行だけ追記する」機能がなかったため、実装上は「シート全体を読み込み→内容を追加→シートを作り直す」という力技で更新しています。件数が増えると多少非効率ですが、家計簿用途では問題になりませんでした。
2. HTMLダッシュボードを自動生成する
「家計簿を見せて」と言うと、スプレッドシートの最新データをもとに、Claudeが1枚のHTMLファイル(単一ファイル、外部依存なし)を生成してくれます。構成は以下の4セクションです。
Section 1: Total Budget(月の予算の全体感)
月の予算合計に対して、今どれくらい使っていて、残りいくら使えるかをヒーロー表示。計算に何を含めて何を除いているか(一時費用の扱いなど)を短い注記で明記し、末尾にClaudeからの一言コメント(気づきや来月への示唆)を追加。
Section 2: カテゴリ別の使用状況
固定費(食費・家賃・通信費など)と裁量支出をフラットなリストで表示。各行は「名前+残り金額」→「進捗バー」→「予算/消化率/実績」の順で完全に統一したフォーマットにしています。カテゴリごとにバーの色を変えることで、予算オーバーの項目がひと目でわかるようにしました。
!
Section 3: 商品カテゴリ別の内訳(概算)
レシートの品目データから「肉・魚」「調味料」「惣菜」「日用品」などにジャンル分けし、実際に何にお金を使っているかを可視化。ここは概算である旨を明記しています。
Screenshot 2026-08-27 at 7.35.38.png
Section 4: 取引一覧(タップで内訳表示)
<details><summary> を使い、普段は「日付・店名・カテゴリ・金額」だけを表示、タップすると品目ごとの価格まで展開されるようにしました。JavaScriptを使わずCSSだけで実装できるのがポイントです。
3. ハマったポイント:iOSで背景が真っ黒になる
ダッシュボードをiPhoneのClaudeアプリで開くと、カード部分は正しく表示されるのに、その周りの背景だけが真っ黒になる現象が発生しました。
原因は、CSS変数(var(--paper))経由で背景色を指定していたところ、iOS側のダークモード判定がうまく効かず、背景だけデフォルトの黒にフォールバックしてしまっていたことでした。
対策として、
html {
color-scheme: light only;
background-color: #F6F1E4 !important;
}
body {
background-color: #F6F1E4 !important;
background-image: repeating-linear-gradient(...) !important;
}
のように、color-scheme: light only を明示した上で、背景色をCSS変数ではなく直接16進数で指定し、!important を付けることで解決しました。保険として画面全体を覆う position: fixed の背景レイヤーも追加しています。
生成AIにHTMLを作ってもらう場合、こうした「特定の環境(iOSのWebView)固有の癖」は一発で当たらないことが多いので、実機で確認しながら何度かフィードバックを返す、というやり取りが有効でした。
4. デザイン・ルールをメモリに保存する
何度かデザインを修正した後、最終的に決まったテンプレート(配色・フォント・レイアウト・インタラクション)を、Claudeの「メモリ」機能にテキストで保存しました。これにより、
- 新しいチャットで「家計簿見せて」と言うだけで
- 同じデザイン・同じ計算ロジックのダッシュボードが
- スプレッドシートの最新データを反映して
再生成されるようになりました。「HTMLファイルそのもの」を保存しているわけではなく、「どう作るかの仕様」をテキストで覚えさせている、というのがポイントです。
まとめ
- レシート画像 → スプレッドシート → HTMLダッシュボードという流れを、生成AIとの対話だけで構築できた
- 「生データはスプレッドシート」「ルール・デザインはメモリ」と役割を分けたことで、再現性のある運用になった
- モバイル実機でのCSSの癖など、生成AI任せにできない細かい調整は複数回のフィードバックで詰めていく必要がある
家計簿に限らず、「定型フォーマットへの記録」と「見せ方の自動生成」を分離するこの構成は、他の用途(タスク管理、読書記録など)にも応用できそうだと感じました。
備考
本記事は執筆支援にClaudeを利用しています。