SnapSplit — 割り勘・精算を一瞬で完結する無料かんたん割り勘ツール

## 1. アプリの目的・ターゲットユーザー
飲み会・旅行・ランチ・合宿など複数人でお金をまとめて払う場面で「誰が誰にいくら払えばいいか」を瞬時に計算し、最小送金回数で精算案を提示する無料Webツール。
ターゲット：学生、社会人、主婦、幹事担当者全般。スマホで使えることが最重要。
SNSで「これ神ツール」とシェアされることを最優先に設計する（シェアカード自動生成・URLコピー機能付き）。

## 2. 主要機能
- **かんたん割り勘モード**：合計金額と人数を入力→1人あたりの金額を即表示。端数は「1人に集中」「人数で分散」「切り上げ全員」から選択可能。
- **立替精算モード**：メンバー名と各自の立替額を入力し、最小送金回数アルゴリズム（債務圧縮）で「AはBに〇〇円払う」の送金リストを自動生成。
- **アイテム別割り勘**：料理・ドリンクなどの品目ごとに「誰が食べたか」をチェックし、品目別に負担額を自動計算。飲まない人は飲み代を払わなくてよい本格案分に対応。
- **精算カード共有**：精算結果を見やすいOGP風カード画像（PNG）としてワンタップでダウンロード＆SNSシェア。LINEで送れる文字列テキストも自動生成。
- **QRコード付き公開URL**：精算内容をURLパラメータにシリアライズしてサーバーレスで共有。DBなしで実現（LocalStorageとURL Paramsのみ）。
- **履歴保存**：過去10件の計算履歴をLocalStorageに保存し、再開・修正が可能。

## 3. 画面構成
### トップページ（index.html）
- ロゴ＋キャッチコピー「割り勘、これで終わり。」
- 3モードのカード型ボタン（かんたん / 立替精算 / アイテム別）
- 直近の履歴一覧（最大3件をカード表示）

### かんたん割り勘画面
- 合計金額入力（テンキー大きめ）
- 人数スライダー＋ステッパー（2〜20人）
- 端数処理選択ラジオ
- 結果：1人あたり金額を大きなフォントで表示
- シェアボタン（テキスト / PNG / URL）

### 立替精算画面
- メンバー名追加（＋ボタンで最大10人）
- 各メンバーの立替金額入力欄
- 「精算する」ボタン→送金リスト表示（アニメーション付き）
- 送金リスト：「田中 → 山田：1,500円」形式でカード表示
- 各カードにチェックボックス（支払い済みフラグ）
- シェアボタン

### アイテム別割り勘画面
- 品目追加（名前・金額・対象者チェックボックス）
- リアルタイムで下部に「各自の負担額」を更新表示
- 最終精算への連携ボタン（立替精算モードへデータ引き継ぎ）

### 結果シェアモーダル
- プレビューカード（Canvas描画）：背景色・テーマ3種類
- PNG保存ボタン
- LINEシェアテキストコピーボタン
- X(Twitter)シェアボタン（テキスト付きURL）
- QRコード表示（URL Paramsエンコード済み）

## 4. データ構造
DBは使用しない。すべてLocalStorageとURLパラメータで完結。

### LocalStorage キー設計
```
snapsplit_history: [
{
id: "uuid",
mode: "simple" | "settle" | "item",
title: "〇〇飲み会",
date: "2025-06-01",
members: [{name: "田中", paid: 3000, owed: 1500}],
result: [{from: "山田", to: "田中", amount: 1500}],
items: [{name: "焼肉", price: 4000, members: ["田中","山田"]}]
}
]
```

### URLパラメータ（共有用）
精算データをBase64エンコードしてURL末尾に付加し、受け取り側でデコード・表示。サーバーへの通信なし。

## 5. デザインの方向性
- **テーマカラー**：ミントグリーン（#3DD598）× ホワイト × チャコール（#2D2D2D）。明るく清潔感があり、金融系の堅さを排除したポップなトーン。
- **フォント**：日本語は Noto Sans JP（Google Fonts）、数字は大きめのタブラー数字。
- **UI**：マテリアルデザイン寄りのカード型レイアウト。ボタンは大きくタップしやすい（最小高さ48px）。
- **アニメーション**：精算結果の送金カードが下からフェードインで登場。数字は0からカウントアップするアニメ。
- **シェアカード**：グラデーション背景（3テーマ：ミント・サンセット・ネイビー）にメンバーと金額を配置。インスタ映えを意識したデザイン。
- **レスポンシブ**：モバイルファースト。スマホ1カラム、PCは中央max-width 480pxの縦長カード型。