🍻
飲み会の幹事業務（日程調整/店探し/参加者管理/参加費計算/告知文作成/出欠・支払い管理）をサポートできるWebアプリを作りました
幹事Base（幹事向けイベント管理アプリ）
幹事Base は、飲み会や懇親会などの 幹事業務をまるごと支援する Web アプリ です。
React（Vite + TypeScript）と Firebase（Authentication / Firestore / Hosting）で構成されています
注記： 本記事の文章はAIが作成しています。
🎯 幹事Baseが解決する課題
従来の幹事業務では、以下のような作業を複数のツールで行き来していました：
- 📅 日程調整：外部の日程調整ツール or チャットで個別に連絡
- 🏪 店探し：Google検索やグルメサイトで毎回探す
- 👥 参加者管理：Excelで手入力 or CSVをコピペ
- 💰 参加費計算：Excelで複雑な計算式を組む（一般/幹部、労組割引、交際費・支援費の差し引きなど）
- 📝 告知文作成：手動で作成し、参加費情報を手打ち
- ✅ 当日の出欠・支払い確認：紙やExcelで管理
幹事Baseは、これらの作業をすべて1つのアプリに集約し、複数のツールを行き来することなく幹事業務を効率化します：
- ✨ 認証不要のURL共有で日程調整（参加者回答マトリクスでリアルタイム確認）
- 💰 現場の複雑な参加費計算ルールを自動化（一般/幹部、労組割引、交際費・支援費、硬貨枚数調整まで）
- 📝 Teams向け告知文をワンクリックで自動生成（テンプレート編集可能）
- 🏪 幹事同士で店情報を共有・評価（スレッド形式のコメントでノウハウを残せる）
- 👥 参加者リストの保存・再利用（CSV取り込み、日程確定時の自動生成）
🎯 アピールポイント：1つのアプリで幹事業務を一元管理
✨ 複数のツールを行き来する必要なし
幹事Baseは、幹事業務に必要なすべての機能を1つのアプリに集約しています。
日程調整ツール、店検索サイト、Excel、チャットアプリなど、複数のツールを行き来する必要がありません。
🔥 日程調整機能（認証不要のURL共有 + リアルタイムマトリクス表示）
従来の方法： 参加者に個別に連絡を取るか、外部の日程調整ツールを使う必要がある
幹事Baseでは：
- 認証不要のURLを1つ共有するだけで、全参加者が日程調整に参加可能
- 参加者回答マトリクスをリアルタイムで表示（◯/△/×で一目瞭然）
- 統計機能で「最多◯の候補日」「最多×の候補日」を自動ハイライト表示
- 行と列を入れ替え可能で、参加者視点・日程視点の両方で確認できる
- 日程確定時に自動で参加者リストを生成し、そのままイベント管理に引き継ぎ
- 役職入力の必須/任意を選択可能（幹部の負担額計算に活用）
💰 現場の複雑な参加費計算ルールを自動化
従来の方法： 手計算やExcelで複雑な計算式を組む必要がある
幹事Baseでは：
- 一般社員/幹部の区別と**労組割引（1,000円）**を自動適用
- 交際費・職場支援費を自動で差し引き、補助後の金額を計算
- 幹部の追加負担額を設定可能（幹部が一般社員より多く負担する場合に対応）
- 現金モード：硬貨の枚数を指定枚数以内に収めるよう自動調整（超える場合は1,000円単位に切り上げ）
- PayPayモード：100円単位に切り上げて決済しやすい金額に調整
- 4パターンの金額（一般/幹部 × 労組あり/なし）を自動計算
- 各参加者ごとの支払額を自動表示（当日の徴収がスムーズ）
📝 Teams向け告知文の自動生成（テンプレート編集可能）
従来の方法： 告知文を手動で作成し、参加費情報を手打ちする必要がある
幹事Baseでは：
- 日程調整中でも告知文を作成可能（候補日とURLを含む告知文を自動生成）
- 日程確定後も告知文を作成可能（日時・場所・アクセス・参加費・支払額一覧まで自動挿入）
- テンプレートを自由に編集可能（変数を使ってカスタマイズ）
- 日程調整用と確定後用の2種類のテンプレートに対応（それぞれ独立してカスタマイズ可能）
- コピーボタンでクリップボードにコピー → Teamsにそのまま貼り付け
- 参加費計算結果から自動で「誰がいくら払うか」のリストを生成
🏪 幹事同士で育てる店データベース
従来の方法： 店情報を個人で管理するか、共有ドキュメントで管理する必要がある
幹事Baseでは：
- 幹事同士で店情報を共有（エリア・キャパ・予算・アクセス・電話番号・ビール銘柄・座席タイプなど）
- 評価コメント（★1〜5）と感想を分けて投稿（評価と注意点を整理して残せる）
- スレッド形式のコメントで返信やディスカッションが可能
- 検索機能（エリア・人数・予算・フリーワード）で条件に合う店を素早く発見
- Googleマップ埋め込みで初めての店でも迷わない
- 電話番号ワンクリック発信（スマホからそのまま電話）
👥 参加者管理の効率化
従来の方法： 毎回参加者を手入力するか、Excelからコピペする必要がある
幹事Baseでは：
- CSVから一括取り込み（氏名・所属・役職）
- 参加者リストを保存・再利用（よく使うメンバーセットを名前付きで保存）
- 日程確定時に参加者リストを自動生成（日程調整の回答者から自動で作成）
- 役職・備考・労組申請有無を保持し、参加費計算に自動反映
📋 全機能一覧
1. 店データベース（Store DB）
店情報の管理
- 店の登録・編集・削除
- エリア / 店名 / 最大キャパ / 予算 / 最寄駅・徒歩何分 / 喫煙可否 / 電話番号
- ビール銘柄 / 座席タイプ / コース / 備考
- Googleマップ埋め込み表示
- 電話番号ワンクリック発信（スマホ対応）
店の検索
- エリア・最低人数・上限予算での絞り込み検索
- フリーワード検索（店名・ビール銘柄・座席・コース・備考・アクセス・喫煙/禁煙）
- 複数キーワードのAND検索対応
評価・コメント機能
- 評価コメント（★1〜5）の投稿
- 感想コメントの投稿
- スレッド形式での返信・ディスカッション
- 評価・種別での絞り込み
- 星ごとの本数グラフ表示
2. イベント管理
イベントの作成・編集
- イベント名・日時・会場の登録
- 店DBからの店選択（エリア・キャパ・予算・電話番号が自動反映）
- 日程確定済みイベントと日程調整中イベントの管理
日程調整機能
- 候補日の設定（カレンダーから選択、時刻も設定可能）
- 認証不要のURL発行・共有
- 参加者回答マトリクス表示（◯/△/×）
- 統計表示（最多◯/×の候補日をハイライト）
- 行と列の入れ替え表示（参加者視点・日程視点の切り替え）
- 役職入力の必須/任意設定
- 日程確定時に参加者リストを自動生成
参加者管理
- 参加者の追加・編集・削除
- CSVからの一括取り込み
- 参加者リストからの読み込み
- 役職（一般社員/幹部）の設定
- 備考（部署名など）の設定
- 労組申請有無の管理
- 出欠状況の管理
- 支払い状況の管理
参加者リスト（マイページ）
- よく使うメンバーセットを名前付きで保存
- 参加者リストの作成・編集・削除
- CSV出力対応
- 別イベントへのワンクリック流用
出欠・支払い確認専用モード
- 出欠と支払い状況だけに絞ったシンプルな画面
- 当日のタップ操作だけで管理可能
3. 参加費計算
入力項目
- 店の1人あたり金額
- 一般社員/幹部の人数（自動カウント）
- 幹部の追加負担額
- 交際費 / 職場支援費
- 支払いモード（現金のみ / PayPay可）
- 現金モード時の許容する硬貨の最大枚数
- 労組割引（1,000円）有無
計算ロジック
- 交際費・支援費を店の支払総額から自動差し引き
- 幹部の追加負担額を考慮した計算
- 労組割引の適用
- 一般/幹部 × 労組あり/なし の4パターン自動計算
- 現金モード：硬貨枚数調整（指定枚数以内、超える場合は1,000円単位に切り上げ）
- PayPayモード：100円単位に切り上げ
出力結果
- 一般社員/幹部 × 労組あり/なし の最終支払額
- 店への支払額（補助前・補助後）
- 総回収額
- 余剰金（幹事が受け取る額）
- 各参加者ごとの支払額一覧
4. Teams向け告知文の自動生成
告知文生成
- 日程調整中の告知文生成（候補日一覧とURLを含む告知文を自動生成）
- 日程確定後の告知文生成（日時・場所・アクセス・参加費・支払額一覧まで自動挿入）
- 日時・場所・アクセス・コースの自動挿入
- 支払い方法の表示
- 区分ごとの金額一覧（一般/幹部 × 労組あり/なし）
- 各参加者の支払額リスト
- 店への支払額・総回収額・余剰金の表示
テンプレート機能
- テンプレートの編集・保存
- 変数を使ったカスタマイズ（{eventName}、{dateTime}、{place}、{feeSummary}など）
- デフォルトテンプレートの復元
- 日程調整用と確定後用の2種類のテンプレート
コピー機能
- ワンクリックでクリップボードにコピー
- Teamsのチャットにそのまま貼り付け可能
5. ユーザー管理
認証機能
- メール・パスワードでのユーザー登録
- ログイン・ログアウト
- 認証状態の管理
マイページ
- 自分が登録した店の一覧
- 参加者リストの管理
- ユーザー情報の表示
6. UXの工夫
操作性
- すべてのメイン機能がヘッダーとホーム画面から1〜2クリックで到達
- モーダルやカードを多用した見やすいレイアウト
- スマホ・PC両対応のレスポンシブデザイン
安全性
- 削除操作には必ず確認ダイアログを表示
- 誤操作の防止
入力の改善
- 数値入力の「0を削除できない」問題を解消
- 空欄のままでも扱いやすい設計
📖 幹事業務のフローに沿った使い方
ここでは、実際の幹事業務の流れに合わせて、幹事Baseの使い方を説明します。
ステップ1: アプリの準備（初回のみ）
- アプリにアクセスし、右上からユーザー登録（メール + パスワード）を行います
- ログインすると、ホーム画面から各機能へアクセスできます
- 店DB：店情報の検索・登録
- イベント管理：イベントの作成・管理
- マイページ：自分の店・参加者リストの管理
ステップ2: 日程調整（イベントの企画開始時）
2-1. 日程調整イベントの作成
- イベント一覧から「新規イベント」をクリック
- 「日程調整から」を選択
- イベント名を入力（例：「新年会」）
2-2. 候補日の設定
- 日程調整管理画面で、カレンダーから候補日を選択
- 必要に応じて時刻も設定（全候補日に同じ時刻を適用可能）
- 候補日一覧で確認・削除が可能
2-3. URL発行と共有
- 「URLを発行」ボタンをクリック
- 発行されたURLをコピー
- Teamsやメールで参加者に共有（認証不要なので誰でもアクセス可能）
- 役職入力を必須にするか選択可能
2-4. 参加者の回答確認
-
参加者回答マトリクスでリアルタイムに回答状況を確認
- ◯：参加可能
- △：調整中
- ×：参加不可
- 統計表示で「最多◯の候補日」「最多×の候補日」を自動ハイライト
- 行と列を入れ替えで、参加者視点・日程視点の両方で確認可能
2-5. 日程調整用告知文の作成・共有（任意）
日程調整中でも、告知文を作成してTeamsで共有できます：
- 日程調整管理画面から「告知文作成」ボタンをクリック
- 「文章を生成」ボタンをクリック
- 候補日一覧とURLを含む告知文が自動生成されます
- 「コピー」ボタンでクリップボードにコピー
- Teamsのチャットに貼り付けて共有（参加者に日程調整を依頼）
2-6. 日程確定
- 回答状況を確認して、最適な日程を選択
- 「日程確定」ボタンをクリック
- 参加者リスト名を入力（例：「2024新年会参加者」）
- ◯がついている参加者から自動で参加者リストを生成
- イベントが「日程確定済み」に移行
ステップ3: 店選び（日程確定後）
3-1. 店DBで店を探す
- 店DB画面に移動
-
検索条件で絞り込み
- エリア・最低人数・上限予算
- フリーワード検索（店名・ビール銘柄・座席・コースなど）
- 一覧から気になる店をクリックして詳細を確認
3-2. 店の詳細確認
- 概要：エリア・キャパ・予算・喫煙可否を確認
-
評価・コメント：過去の幹事の評価や注意点を確認
- 評価コメント（★1〜5）で「味・コスパ」を確認
- 感想コメントで「個室の広さ」「アクセスの分かりやすさ」などの注意点を確認
- Googleマップ：場所を確認
- 電話番号：ワンクリックで電話（予約時に便利）
3-3. 店の登録（新規店の場合）
- 「店を登録」ボタンをクリック
- エリア・店名・予算・最寄駅・徒歩何分・喫煙可否・電話番号・最大人数などを入力
- ビール銘柄・座席タイプ・コースは候補ボタンから選択 or 自由入力
- 「登録する」で店DBに追加（他の幹事も使える）
3-4. イベントに店を紐づけ
- イベント編集画面に移動
- 「店を選択」から店DBの店を選択
- エリア・キャパ・予算・電話番号が自動で反映
ステップ4: 参加者の確定・登録
4-1. 参加者の追加方法（3通り）
方法A: 日程調整から自動生成
- ステップ2-5で日程確定時に自動生成された参加者リストを使用
方法B: 参加者リストから読み込み
- マイページで事前に作成した「参加者リスト」からワンクリックで読み込み
方法C: 手動登録 or CSV取り込み
- イベント編集画面の「参加者登録」で手動追加
- またはCSVファイルから一括取り込み
4-2. 参加者情報の設定
- 役職：一般社員 / 幹部（参加費計算に自動反映）
- 備考：部署名など
- 労組申請有無：労組割引（1,000円）の適用に使用
ステップ5: 参加費の計算
5-1. 参加費計算の入力
イベント編集画面の「参加費計算」で以下を入力：
- 店の1人あたり金額：店の予算から設定
- 交際費 / 職場支援費：補助額を入力
- 支払いモード：現金のみ / PayPay可
- 硬貨の最大枚数（現金モード時）：許容する硬貨の枚数を指定
- 幹部の追加負担額（幹部負担モードON時）：幹部が一般社員より多く負担する場合
5-2. 計算実行
- 「計算する」ボタンをクリック
- アプリが自動的に以下を計算：
- 一般社員・幹部 × 労組あり/なし の4パターンの支払額
- 店への支払額（補助前・補助後）
- 総回収額
- 余剰金（幹事が受け取る額）
- 各参加者ごとの支払額（当日の徴収に便利）
5-3. 結果の保存
- 「保存」ボタンでイベントに計算結果を保存
- 告知文生成時に自動で使用される
ステップ6: 告知文の作成・共有
重要：告知文作成は日程調整中と日程確定後の両方で利用可能です
6-1. 告知文の生成
- イベント一覧から「告知文作成」をクリック
- 「文章を生成」ボタンをクリック
日程調整中のイベントの場合：
- 候補日一覧とURLを含む告知文が自動生成されます
- Teamsで共有して、参加者に日程調整を依頼できます
日程確定後のイベントの場合：
- 以下の情報が自動で挿入された告知文が生成されます：
- 日時
- 場所・アクセス
- コース（飲み放題・2時間制など）
- 支払い方法
- 区分ごとの金額（一般/幹部 × 労組あり/なし）
- 誰がいくら払うかのリスト
- 店への支払額・総回収額・余剰金
6-2. テンプレートのカスタマイズ（任意）
- 「テンプレート編集」で告知文のフォーマットを自由に変更可能
- 日程調整用と確定後用のテンプレートを別々にカスタマイズ可能
- 変数を使ってカスタマイズ：
- 日程調整用：{eventName}、{candidates}、{recruitmentUrl}
- 確定後用：{eventName}、{dateTime}、{place}、{course}、{access}、{feeSummary}、{participants}
- デフォルトテンプレートに戻すことも可能
6-3. Teamsへの共有
- 「コピー」ボタンでクリップボードにコピー
- Teamsのチャットにそのまま貼り付け
- 参加者から参加可否と労組申請の有無を返信してもらう
ステップ7: 当日の出欠・支払い確認
7-1. 出欠・支払い確認画面を開く
- イベント一覧から「出欠・支払い確認」をクリック
- 出欠と支払い状況だけに絞ったシンプルな画面が表示
7-2. 当日の管理
- 参加者が到着したら「出欠」をチェック
- 参加費を受け取ったら「支払い済み」をチェック
- タップ操作だけで管理可能（スマホでも簡単）
ステップ8: 店の評価・コメント（イベント後）
8-1. 店詳細画面で評価を投稿
- 店DBから該当店の詳細画面を開く
- 「評価コメント」または「感想」を選択
- 評価コメントの場合は★1〜5を選択
- コメントを入力して投稿
8-2. 次の幹事への情報共有
- 評価コメント：味・コスパなどの評価を★で共有
- 感想コメント：「個室は思ったより狭かった」「駅から少し分かりにくい」などの注意点を共有
- スレッド形式で返信やディスカッションも可能
- 次の幹事が店選びの参考にできる
💡 便利な使い方のコツ
参加者リストの活用
- よく使うメンバー構成を「参加者リスト」として保存しておくと、次回以降ワンクリックで読み込める
- 例：「営業部メンバー」「幹部メンバー」など
店DBの育て方
- イベント後に必ず評価・コメントを投稿することで、幹事同士で「使える店リスト」を育てられる
- 特に「感想コメント」で注意点を共有すると、次の幹事が店選びで失敗しにくくなる
告知文テンプレートのカスタマイズ
- 自分の組織の告知文フォーマットに合わせてテンプレートを編集しておくと、毎回同じフォーマットで告知文を生成できる
- 日程調整用と確定後用の2種類のテンプレートを別々にカスタマイズ可能
Discussion