the-botch UI 改修 ワイヤーフレーム（議論用）

CEO 合意前の叩き台。5画面をまとめて掲載。各画面冒頭に「設計上のポイント」と「CEO に確認したい点」を併記。最後に決定が必要な論点を一覧化。

(i) ダッシュボード

/ トップ画面。現状はリスト2種のみ。直近イベントと月次推移を追加。

設計上のポイント

  • 「直近イベント」は 未来3件 + 過去3件 = 計6件。日付昇順、未来→過去の境界に区切り線。
  • 月次推移は 1チャートに統合（推奨: 男気と割り勘を積み上げ棒）。総額の規模感と内訳を同時に伝える。
  • 既存「未精算割り勘」「直近男気5件」は 右カラムに縮小 し、上段（イベント＋チャート）を主役にする。
  • 未精算割り勘の件数は上部に 赤バッジで件数表示。0件なら非表示。

CEO に確認したい点

  • 月次推移チャートは「男気＋割り勘の積み上げ棒」「男気のみ」「両方の重ね合わせ折れ線」のどれにするか（推奨: 積み上げ棒）
  • 直近イベントの件数（未来3+過去3）は適切か。もっと多く見たいか
  • 右カラムの既存リスト2種は残すか・完全に外すか
the-botch ダッシュボード イベント 男気 割り勘 統計 ● 未精算割り勘 3件

直近イベント

▼ これから（未来）
05/18(日)
月例飲み会＠新宿
参加予定 5名 / 紐付け: 男気0・割り勘0
予定
05/25(日)
BBQ＠等々力
参加予定 8名 / 紐付け: 男気0・割り勘0
予定
06/01(日)
ライブ後打ち上げ
参加予定 6名 / 紐付け: 男気0・割り勘0
予定
▼ 直近終了
05/05(月)
GW打ち上げ
紐付け: 男気2件・割り勘1件 / 未精算 1
完了
04/29(火)
焼肉会
紐付け: 男気1件・割り勘2件 / 全て精算済
完了
04/20(日)
花見
紐付け: 男気3件・割り勘0件
完了

月次推移 推奨: 男気＋割り勘 積み上げ棒

過去12ヶ月 / 縦軸: 金額（円）/ 横軸: 月
[ 積み上げ棒グラフ: 下層=男気, 上層=割り勘 ]
男気総額 割り勘総額

サマリー（縮小版）

未精算割り勘
● 5/5 GW打ち上げ — 未精算 1名
● 4/13 花見二次会 — 未精算 2名
直近男気 5件
● 5/5 田中 → 全員 ¥12,000
● 5/2 山田 → A,B ¥6,400
● 4/29 鈴木 → 全員 ¥18,000
● 4/22 田中 → C ¥3,500
● 4/13 山田 → 全員 ¥9,200

(ii) イベント詳細ページ（新設）

/events/[id] 1つのイベントに紐付く男気・割り勘を集約表示。

設計上のポイント

  • 上部にイベントメタ（日付・タイトル・参加メンバー・メモ）。
  • 紐付け表示は タブ切替ではなく1画面に縦並び（男気→割り勘）。件数が少ない想定なので全体俯瞰を優先。
  • イベントサマリー: 男気合計・割り勘合計・未精算件数の3指標を上部にカード表示。
  • 各行から男気・割り勘の詳細ページに遷移可能。「このイベントに男気を追加」「割り勘を追加」ボタンを各セクション末尾に。

CEO に確認したい点

  • イベント編集（タイトル・日付の修正）はこの画面に置くか別画面か
  • イベント削除時、紐付く男気・割り勘の扱い（連動削除 / 紐付けのみ解除 / 削除禁止）
  • 「参加メンバー」を Event モデルに持たせるか、紐付く男気・割り勘から自動抽出するか
the-botch ダッシュボード イベント 男気 割り勘 統計

GW打ち上げ 2026/05/05

場所: 渋谷 / 参加: 田中・山田・鈴木・佐藤・高橋（5名）
男気 合計
¥24,500 / 2件
割り勘 合計
¥18,000 / 1件
未精算
1件 / 割り勘

紐付く男気

日付奢った人奢られた人金額写真
05/05田中全員¥12,0003枚詳細
05/05山田佐藤・高橋¥12,500—詳細
＋ このイベントに男気を追加

紐付く割り勘

日付タイトル支払者合計1人あたり精算状況
05/05二次会バー鈴木¥18,000¥3,600 × 5未精算 1名詳細
＋ このイベントに割り勘を追加
イベント編集 イベント削除

(iii) 男気 新規作成 / 詳細 — 写真アップロード

/otokogi/new ・ /otokogi/[id] Vercel Blob 想定。drag&drop + 複数枚 + プレビュー + 削除。

設計上のポイント

  • アップロード方式: drag&drop ＋ ファイル選択ボタン併設。複数枚同時。
  • 枚数・サイズ上限の推奨値: 1男気あたり最大10枚 / 1枚3MB / 形式は jpg/png/webp/heic（heic は変換）。
  • アップロード前に クライアント側でリサイズ（長辺2048px に）。Blob コストとロード時間を抑える。
  • 詳細ページ表示: 5列サムネイルグリッド → クリックでライトボックス（左右矢印キー対応）。
  • 削除: 各サムネイルに×ボタン。削除確定後に Blob からも非同期削除。
  • 既存 hasAlbum boolean は、写真が1枚以上ある状態の派生として運用（保存時に自動セット）。

CEO に確認したい点

  • 枚数上限 10枚 / サイズ 3MB は妥当か（多すぎ・少なすぎ？）
  • アップロード対象は男気のみか、割り勘・イベントにも展開するか（今回は男気のみ前提）
  • 写真の公開範囲: 認証無しでアクセス可な現状のままで OK か（Blob URL を知っていれば誰でも閲覧可になる）
  • 削除時の Blob 物理削除タイミング（即時 / 論理削除のみ）
the-botch ダッシュボード イベント 男気 割り勘 統計

男気を記録する

2026/05/12
田中
佐藤・高橋・鈴木
12,000
GW打ち上げ（2026/05/05） ▾
（任意）
📷 ここに画像をドラッグ&ドロップ
または ファイルを選択 ・ 最大10枚 / 1枚3MBまで / jpg・png・webp・heic
IMG_01×
IMG_02×
IMG_03×
＋
3 / 10 枚 — アップロード前に長辺2048pxへ自動リサイズ
保存 キャンセル

男気詳細（表示時）

田中 → 佐藤・高橋・鈴木 ¥12,000
2026/05/05・GW打ち上げ
写真1
写真2
写真3
写真4
+2
サムネイルクリック → ライトボックス（←→キーで送り）

(iv) 男気統計 本流

/otokogi/stats 現状8チャートを3つに集約。フィルタを上部に常駐。

設計上のポイント

  • フィルタバーは 画面上部に sticky 固定。スクロール中も常に見える。
  • 期間プリセット: 今月 / 今年 / 全期間 ＋ カスタム範囲（from-to）。デフォルトは 今年。
  • メンバー絞り込み: チェックボックスで複数選択（全員 / 個別）。
  • 3チャート集約: ① メンバー別収支表 ② 月別推移 ③ ランキング。それぞれフィルタの影響を受ける。
  • 「①収支表」は 表＋スパークライン のハイブリッド（数値とトレンドを同時に）。
  • カテゴリ列は今回追加しない（既存データに無いため）。将来追加する余白は残す。

CEO に確認したい点

  • 期間プリセットのデフォルトは「今年」で良いか
  • メンバー絞り込みで 0人選択時の挙動（全員表示にフォールバック / 空表示）
  • 3チャートの順序（収支→推移→ランキング）は妥当か
  • 既存8チャートのうち外す5つを「お遊び」ページに退避する以外の選択肢は不要か
the-botch ダッシュボード イベント 男気 割り勘 統計

男気統計

期間
今月 今年 全期間 カスタム ▾
メンバー
全員 田中 山田 鈴木 佐藤 高橋
表示中: 2026/01/01 〜 2026/05/12 / 5名

① メンバー別収支

メンバー奢った合計奢られた合計収支件数（奢/奢られ）月次トレンド
田中¥48,000¥12,000＋¥36,0008 / 2
▁▂▃▅▇▆▄
山田¥32,000¥18,000＋¥14,0005 / 3
▁▂▄▃▅▆▇
鈴木¥18,000¥24,000−¥6,0003 / 4
▂▃▂▁▂▃▂
佐藤¥6,400¥28,000−¥21,6001 / 5
▁▁▂▂▁▂▁
高橋¥0¥22,400−¥22,4000 / 4
▁▁▁▂▁▁▁

② 月別推移

期間内の月ごとの男気総額（人物別 積み上げ棒）
[ 月別 積み上げ棒グラフ ]

③ ランキング

奢ったランキング（金額順）
[ 横棒グラフ Top5 ]
奢られたランキング（金額順）
[ 横棒グラフ Top5 ]

(v) 男気統計 お遊びページ

/otokogi/stats/playground 本流から退避した遊び要素。CEO 個人が楽しむ用途。

設計上のポイント

  • 本流ページ上部から 「お遊びページ →」リンクで導線。逆も同様（戻りリンク）。
  • 3つの遊びチャート: 男気偏差値 / 累積レース（時間経過アニメ可） / 奢りヒートマップ（曜日 × 月）。
  • 「お遊び」と分かる軽い装飾: 上部にアイコン1つ＋短文「本流ではない指標。ネタです」。過剰な絵文字や派手色は使わない。
  • 本流のフィルタとは 独立（このページに来た時点で全期間・全員固定でよい）。

CEO に確認したい点

  • このページを 非ログイン者にも公開するか、CEO 専用 URL（クエリ or 隠しパス）にするか
  • 3つ以外に追加したい遊び指標はあるか（例: 月間 MVP / 連続奢り日数 等）
  • 累積レースをアニメーションさせるか、静的グラフのみで十分か
the-botch ダッシュボード イベント 男気 割り勘 統計

男気統計 / お遊びページ 本流ではない指標 / ネタ

男気偏差値

メンバー別の偏差値（平均=50 / 奢った金額ベース）
[ レーダー or 縦棒 ]

累積レース

時系列での累積奢り金額（折れ線、アニメ可）
[ 折れ線（人物別） ]

奢りヒートマップ

曜日 × 月 のヒートマップ（色が濃いほど奢り頻発）
[ ヒートマップ 7行×12列 ]

議論ポイント一覧（CEO 確定事項）

  1. ダッシュボード月次推移チャートの形式 A) 男気＋割り勘 積み上げ棒 / B) 男気のみ折れ線 / C) 両方の重ね折れ線 推奨: A（規模感と内訳を1チャートで把握できる）
  2. 直近イベントの件数 A) 未来3＋過去3 / B) 未来5＋過去5 / C) 全件スクロール 推奨: A（過密にならず、件数が多ければ一覧ページへ）
  3. 既存リスト（未精算割り勘・直近男気5件）の扱い A) 縮小して右カラムに残す / B) 完全に外す 推奨: A（未精算は重要なアラート）
  4. イベント削除時の紐付け挙動 A) 紐付く男気・割り勘も連動削除 / B) 紐付けのみ解除（eventId を null に）/ C) 削除禁止（紐付けがある場合） 推奨: B（履歴を残しつつイベント単位の整理を可能にする）
  5. 参加メンバーのデータ源 A) Event モデルに participants 配列を持つ / B) 紐付く男気・割り勘から自動抽出 推奨: A（紐付け0件の予定イベントでも参加者を扱える）
  6. 写真アップロードの枚数・サイズ上限 10枚 / 3MB / 長辺2048pxリサイズ 推奨: 上記の値で開始、Blob 利用量見て調整
  7. 写真の公開範囲 A) 認証無し閲覧可（現状踏襲、Blob URL 知っていれば誰でも見れる）/ B) 認証導入 推奨: A（the-botch は身内ツール。認証導入は別議論として切り出す）
  8. 写真削除時の Blob 物理削除 A) 即時削除 / B) 論理削除のみ（一定期間保持） 推奨: A（容量コストを抑える。誤削除リカバリは諦める前提）
  9. 統計フィルタ デフォルト期間 A) 今月 / B) 今年 / C) 全期間 推奨: B（年単位でトレンドを見る用途が多い想定）
  10. 統計フィルタ メンバー0人選択時 A) 全員にフォールバック / B) 空表示 推奨: A（操作ミスでも壊れない）
  11. お遊びページの公開範囲 A) 通常リンクで誰でも到達可 / B) CEO 専用（隠しパス・クエリ） 推奨: A（the-botch は身内のみ。隠す手間に合わない）
  12. 写真機能の対象範囲 A) 男気のみ / B) 割り勘・イベントにも展開 推奨: A（今回スコープを最小化。需要が出てから展開）