thebotch ワイヤーフレーム — スマホビュー (375px)

Screen 01 / 05

ダッシュボード

これから

春の飲み会

未来

2026/05/20 — 渋谷

予算 ¥8,000〜

BBQ 2026

未来

2026/06/07 — 多摩川

予算 ¥5,000〜

誕生日会 (山田)

未来

2026/06/14 — 恵比寿

予算未定

直近終了

4月飲み

終了

2026/04/25 — 新宿

計 ¥42,000

花見 2026

終了

2026/04/05 — 上野

計 ¥28,500

新年会

終了

2026/01/10 — 銀座

計 ¥65,000

月次推移

11月

12月

1月

2月

3月

4月

← 横スクロール対応 →

男気割り勘

未精算割り勘 3件 ▶

設計上のポイント

未来イベント3件→直近終了3件の順で縦スタック。スクロールを最小化するため件数を6件に絞る。
月次推移チャートは横スクロール方式（overflow-x: auto）。375px に収まらない月数でも破綻しない。
未精算リストは折りたたみ表示でデフォルト非表示。件数バッジで存在を通知しつつ、初期ビューをすっきりさせる。

Screen 02 / 05

イベント詳細

/events/[id]

‹

4月飲み

日時 2026/04/25 (土) 19:00〜

場所新宿 × × × 居酒屋

合計 ¥42,000

男気

割り勘

田

田中さん奢り

2026/04/25 · 田中

¥18,000

佐

二次会

2026/04/25 · 佐藤

¥12,000

鈴

タクシー代

2026/04/25 · 鈴木

¥8,000

設計上のポイント

イベント情報はカードで上部に固定表示し、タブ切り替えで男気/割り勘の記録を切り換える。
FABはコンテンツに重ならない位置（右下固定）に配置。新規追加の主動線を1アクションに収める。
タブをスティッキーにするかは議論ポイント参照。リスト件数が多い場合はスティッキーが有効。

Screen 03 / 05

男気新規作成 / 詳細

/otokogi/new | /otokogi/[id]

— 新規作成フォーム —

‹

男気を追加

支払人

メンバーを選択

金額

¥ 0

日付

2026/05/12

参加者

田中

佐藤

鈴木

高橋

伊藤

写真

📷

カメラで撮影 / ライブラリから選択

input type="file" accept="image/*" capture="environment" multiple

🖼 レシート1.jpg

🖼 レシート2.jpg

長押しで削除

保存する

キャンセル

— 詳細表示 —

‹

田中さん奢り

支払人田中

金額¥18,000

日付2026/04/25

参加者田中・佐藤・鈴木 (3名)

添付写真

🖼タップで全画面

設計上のポイント

写真は capture="environment" で背面カメラを即起動、multiple で複数選択対応。ライブラリ選択も同一 input で可能。
アップロード済みサムネは2列グリッド表示。長押しイベントで削除確認ダイアログを出す設計（実装詳細は coder に委ねる）。
詳細表示のライトボックスは JS が必要な唯一の箇所。サードパーティライブラリ（Fancybox, Viewer.js 等）使用可。

Screen 04 / 05

男気統計本流

/otokogi/stats

‹

男気統計

フィルタタップで折りたたむ ▲

期間プリセット

直近3ヶ月

今年

昨年

全期間

メンバー（複数選択可）

全員

田中

佐藤

鈴木

高橋

月別推移

1月

2月

3月

4月

5月

男気総額ランキング

田中

¥98,000

佐藤

¥68,000

鈴木

¥46,000

高橋

¥31,000

メンバー別収支

← 横スクロール →

名前	払い出し	負担額	収支	参加回
田中	¥98,000	¥52,000	−¥46,000	12回
佐藤	¥68,000	¥52,000	−¥16,000	11回
鈴木	¥46,000	¥52,000	+¥6,000	10回
高橋	¥31,000	¥52,000	+¥21,000	9回

設計上のポイント

フィルタはアコーディオン折りたたみ式。デフォルト展開状態でフィルタ内容を可視化しつつ、折りたたんで画面を広く使える。
収支テーブルは列数が多いため横スクロール強制。名前列は sticky にする実装も検討可（coder 判断）。
グラフ3つは全て画面幅100%のカード。スクロールで自然に流れる縦スタック構成。

Screen 05 / 05

男気統計お遊び

/otokogi/stats/playground

‹

お遊び統計

🎲

お遊び統計

深読みしすぎ厳禁。遊び心でどうぞ

← 本流の統計に戻る

男気偏差値

田中

72.4

佐藤

58.1

鈴木

47.2

高橋

34.5

平均50・標準偏差10 で換算

累積レース

田中佐藤鈴木

月×メンバーヒートマップ

← 横スクロール →

1月

2月

3月

4月

5月

6月

7月

8月

9月

10月

11月

12月

田中

佐藤

鈴木

少

多

設計上のポイント

お遊びページとして軽いトーン（絵文字・サブコピー）を持たせ、本流統計との差別化を図る。ヘッダー内に本流へ戻るリンクを常設。
累積レース（折れ線）はインラインSVGで表現。ライブラリ不要のためバンドルサイズゼロ。実装時はChart.jsでもよい。
ヒートマップは12ヶ月×N人のグリッド。列数が多いため横スクロール必須。濃淡のカラースケールはグレースケールで統一。

議論ポイント

1. スマホ first にするか、PC/SP 両対応 (レスポンシブ) にするか

A. スマホ first (375px 設計→デスクトップは最小限の拡張)

メリット: 実際の利用シーン（精算は飲み会当日・その場でスマホ入力）に完全最適化。設計・実装コストが低い。Tailwind の sm: ブレークポイントをほとんど使わなくて済む。
デメリット: デスクトップで余白が広がるだけ、または横幅が余る。PC で細い列表示になる。
推奨: 利用実態がスマホ中心であれば A が合理的。PC は「ついでに見られる」程度で十分。

B. レスポンシブ (PC/SP 完全両対応)

メリット: PC からもフルに使える。統計グラフや収支表はPC幅のほうが見やすい。
デメリット: 各ページに PC レイアウトを別途設計する工数が2倍。特にダッシュボードはPCで2カラム化が必要。

2. 写真撮影は capture="environment" で直接カメラを開く設計でよいか

A. capture="environment" を使う (現設計)

メリット: ネイティブアプリに近い体験。レシート撮影が1タップで起動。追加ライブラリ不要。
デメリット: iOS Safari では capture 属性の挙動がバージョンにより微妙に異なる（撮影後すぐ次の処理へ進む）。複数枚の連続撮影には手間がかかる。
推奨: シンプルさ優先で A。問題が出たら B へ切り替え。

B. カスタムカメラUI (PWA + MediaDevices API)

メリット: UI 完全制御。連続撮影・即時プレビュー・トリミングも可能。
デメリット: 実装コストが大幅増。WebRTC の許可フローが煩雑。Next.js での SSR 回避も必要。

3. イベント詳細画面のレイアウト: タブ vs 縦並び

A. タブ切り替え (現設計: 男気タブ / 割り勘タブ)

メリット: 1画面あたりの情報量を抑えられる。スクロール不要で素早く切り替え可能。男気と割り勘のレコード数が多い場合に有利。
デメリット: 両方を同時に見られない。タブのスティッキー実装が必要（スクロール時にタブが流れると使いにくい）。
推奨: レコード件数が多い想定なら A が使いやすい。

B. 縦並び (男気セクション → 割り勘セクションを1ページにまとめる)

メリット: シンプル実装。両セクションを一覧できる。ジャンプリンクを上部に置けば使いやすい。
デメリット: 合計レコード数が多いとスクロールが長くなる。セクション間の視認性を担保するデザインが必要。