SalesBoost Mini

営業パイプラインをExcel感覚でドラッグ&ドロップ管理できるWebアプリ。スタートアップ・中小製造業の5〜20名営業チームが、複雑なCRM導入なしに案件進捗を可視化・共有。オンプレ/クラウド両対応で初期導入ハードル低く、月額コスト最小限。

MVP のスコープ

MUST(必須・これが無いとサービスが成立しない)

• カンバン式パイプライン表示: 営業段階(初期接触→提案→交渉→受注)を列として、案件カードをドラッグ&ドロップで移動
• 案件基本情報管理: 顧客名、金額、担当者、期限、メモをシンプルに入力・編集
• 複数ユーザー対応: 5〜20名が同時アクセス、リアルタイム更新(WebSocket または定期ポーリング)
• チーム全体の売上予測: 各段階の案件金額を集計し、月別・段階別の売上見込みを表示
• シンプルな認証: チーム内での基本的なログイン(メール+パスワード)

SHOULD(あれば良いが MVP では入れない)

• 案件の詳細履歴・コメント機能
• メール通知・リマインダー
• CSVインポート/エクスポート
• ロールベース権限管理(管理者/営業/閲覧のみ)

WON'T(今回は作らない)

• 顧客管理DB統合: 顧客情報は案件ごとに入力。別システム連携は後発。(統合開発が複雑化し、MVP リリース遅延)
• メール送受信機能: 外部メールサービス連携は初期段階では不要。(API 設定・エラーハンドリングが重い)
• 高度な権限・監査ログ: エンタープライズ向け要件。スタートアップは全員信頼ベース。(実装コスト > 初期需要)
• モバイルアプリ: Web レスポンシブで対応。ネイティブアプリは後発。(iOS/Android 両対応の保守負荷が大きい)
• 複数チーム・組織管理: 単一チーム専用。マルチテナント化は拡大後。(テナント分離・課金ロジックが複雑)

削るべき機能と理由

1. リアルタイム通知・Slack 連携

   • 理由: WebSocket 実装 + 外部 API 連携で工数 2 倍。MVP では定期ポーリング(5秒)で十分。ユーザーが常時監視するサービスではない。

2. 高度なレポート・グラフ機能

   • 理由: 初期段階では「今月の売上見込み」1つで足りる。複数グラフ・フィルタ・ドリルダウンは後発。

3. オンプレミス専用インストーラー

   • 理由: Docker Compose で十分。ワンコマンドで起動可能にすれば、ユーザーは自社サーバーで動かせる。セットアップスクリプト作成は後発。

画面一覧と遷移

flowchart LR
    A["ログイン"] -->|認証成功| B["ダッシュボード<br/>カンバン表示"]
    B -->|カード選択| C["案件詳細<br/>モーダル"]
    C -->|保存| B
    B -->|ドラッグ&ドロップ| B
    B -->|売上予測タブ| D["売上予測<br/>ビュー"]
    D -->|戻る| B
    B -->|管理者| E["チーム管理"]
    E -->|ユーザー追加| E

データモデル

技術スタック前提: Node.js + Express + PostgreSQL + Prisma ORM

// prisma/schema.prisma

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

generator client {
  provider = "prisma-client-js"
}

model Team {
  id        String   @id @default(cuid())
  name      String   // チーム名
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  users  User[]
  deals  Deal[]
  stages Stage[]

  @@map("teams")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  password  String   // bcrypt hash
  name      String
  role      String   @default("user") // "admin" or "user"
  teamId    String
  team      Team     @relation(fields: [teamId], references: [id], onDelete: Cascade)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  deals Deal[]

  @@map("users")
}

model Stage {
  id    String @id @default(cuid())
  name  String // "初期接触", "提案", "交渉", "受注"
  order Int    // 表示順序
  teamId String
  team  Team   @relation(fields: [teamId], references: [id], onDelete: Cascade)

  deals Deal[]

  @@unique([teamId, name])
  @@map("stages")
}

model Deal {
  id            String   @id @default(cuid())
  title         String   // 案件名
  customerName  String   // 顧客名
  amount        Int      // 金額(円)
  description   String   @default("") // メモ
  dueDate       DateTime? // 期限
  stageId       String
  stage         Stage    @relation(fields: [stageId], references: [id], onDelete: Restrict)
  ownerId       String
  owner         User     @relation(fields: [ownerId], references: [id], onDelete: Restrict)
  teamId        String
  team          Team     @relation(fields: [teamId], references: [id], onDelete: Cascade)
  position      Int      @default(0) // カード順序(同一段階内)
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt

  @@map("deals")
}

主要 API エンドポイント

技術スタック推奨

外部サービス・API と想定コスト

合計月額: 無料〜10 ドル(クラウド前提)。オンプレ対応なら 0 円。

Claude Code 向け実装プロンプト

以下の仕様に従い、SalesBoost Mini の MVP を実装してください。

【プロジェクト構成】
- フロントエンド: React 18 + TypeScript + Tailwind CSS
- バックエンド: Node.js + Express + TypeScript
- DB: PostgreSQL + Prisma ORM
- ホスティング: Vercel(フロント) + Railway(バック)

【実装タスク】

1. **バックエンド初期化**
   - `backend/` ディレクトリを作成
   - `package.json` に Express, Prisma, bcrypt, jsonwebtoken, dotenv を追加
   - `src/server.ts` を作成し、Express サーバーをポート 5000 で起動
   - `.env.example` に DATABASE_URL, JWT_SECRET を記載

2. **Prisma スキーマ定義**
   - `prisma/schema.prisma` を上記データモデルに従い作成
   - `npx prisma migrate dev --name init` で初期マイグレーション実行
   - PostgreSQL 接続確認

3. **認証エンドポイント実装**
   - `src/routes/auth.ts` を作成
   - POST `/auth/register`: チーム初期登録(メール, パスワード, チーム名) → JWT 発行
   - POST `/auth/login`: ログイン(メール, パスワード) → JWT 発行
   - POST `/auth/logout`: JWT 無効化(セッション管理)
   - `src/middleware/auth.ts` で JWT 検証ミドルウェア実装

4. **案件管理エンドポイント実装**
   - `src/routes/deals.ts` を作成
   - GET `/api/deals`: チーム内全案件取得(段階ごとにグループ化)
   - POST `/api/deals`: 案件作成(顧客名, 金額, 担当者, 期限, メモ)
   - PATCH `/api/deals/:id`: 案件情報更新
   - PATCH `/api/deals/:id/stage`: 案件の段階変更(position も更新)
   - DELETE `/api/deals/:id`: 案件削除
   - 全エンドポイントに認証ミドルウェア適用

5. **売上予測エンドポイント実装**
   - `src/routes/forecast.ts` を作成
   - GET `/api/forecast`: 月別・段階別の売上見込み集計
   - レスポンス形式: { month: "2025-01", stages: { "初期接触": 500000, "提案": 1000000, ... } }

6. **フロントエンド初期化**
   - `frontend/` ディレクトリを作成
   - `npx create-react-app . --template typescript` で初期化
   - Tailwind CSS をインストール(`npm install -D tailwindcss`)
   - `.env` に REACT_APP_API_URL=http://localhost:5000 を設定

7. **ログイン画面実装**
   - `src/pages/Login.tsx` を作成
   - メール・パスワード入力フォーム
   - POST `/