はじめに

海外に長期滞在することになり、現地がフランス語であったため、「レシートを撮って送るだけで家計簿が完成する仕組み」が欲しくなったので、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を利用しています。