HIREBASE — 要件定義書 兼 Claude Code 実装指示書

版数 2.0（DBレス構成）／ 作成日 2026-08-13 ／ 発行 ソウゾウ合同会社 用途 「爆速アプリ開発」LP 実演デモ

このドキュメントの使い方（Claude Code へ）

これ1枚が、規約・仕様・タスクのすべて。リポジトリ直下に CLAUDE.md として置き、毎回読み込むこと。

• 実装は「11. 実装タスク」の順に進める。フェーズを飛ばさない。
• 各タスクの括弧内は要件ID。着手前に該当章を読むこと。
• 仕様がここに書かれていない場合は、推測で実装せず質問する。
• スコープ外（3章 Won't have）は、思いついても実装しない。
• 「デモだから」を理由に品質を落とす判断はしない。

目次

1. プロジェクト概要
2. アーキテクチャ方針 — データベースを持たない
3. スコープ定義
4. ロールとデモ切替
5. 画面一覧とユーザーフロー
6. 機能要件
7. データ設計
8. デザイン要件
9. 技術要件・ディレクトリ構成
10. 非機能要件
11. 実装タスク
12. 受入基準

1. プロジェクト概要

背景と目的

「爆速アプリ開発」LPの訪問者は、価格（150万円）に対して「その金額で何がどこまで作れるのか」を判断できないままCTAに到達する。文章と静止画では、実装粒度・デザイン品質・機能密度が伝わらない。

そこで、LPから直接触れる実際に動作するプロダクトを用意し、「この水準のものが、この期間・この金額で出てくる」を体験として提示する。

プロダクト定義

プロダクトコンセプト

「検索する求人サイト」から「届く求人サイト」へ。

求職者は職務経歴を1度書けば、あとは企業からのスカウトを待つだけ。企業は条件に合う候補者を検索し、直接アプローチできる。応募・スカウトの両方向の導線を1つのメッセージ基盤に統合する。

デモとしての成功条件

1. 触った瞬間に「作り込まれている」と分かる — 空の画面が1つもない。全画面にリアルなデータが入っている
2. ロールを跨いだ体験が繋がる — 求職者として応募 → 企業に切り替えると、その応募が届いている
3. 迷わない — 何ができるか、どこを見ればいいかが常に分かる
4. リセットできる — 誰が触った後でも、初期状態に戻せる

2. アーキテクチャ方針 — データベースを持たない

基本方針

バックエンドとデータベースを持たない。すべてブラウザ内で完結させる。

なぜこの構成にするか

• LPデモとして最適 — 訪問者は登録もログインもせずに、全機能を即座に触れる
• 個人情報を一切預からない — 入力されたデータはブラウザから出ない。法令リスクとプライバシーポリシーの負担がゼロになる
• 開発速度 — 認証・RLS・マイグレーション・メール基盤の実装が不要になり、UIと体験の作り込みに全時間を投下できる
• 運用コストゼロ — Vercel の静的配信のみ。DBの月額も、バックアップも、障害対応も発生しない

差し替え可能性の担保（重要）

データアクセスは必ず lib/repo/ のリポジトリ層を経由すること。 コンポーネントからストアを直接触らない。

[ コンポーネント ]
        ↓  呼ぶのはこの層だけ
[ lib/repo/*.ts ]   ← 全メソッドを async にしておく
        ↓
[ lib/store/*.ts ]  ← Zustand + persist（localStorage）
        ↓
[ lib/seed/*.ts ]   ← 初期データ

リポジトリの各メソッドは、中身が同期処理でも async で定義し、await で呼ぶ。実案件へ転用する際、リポジトリの実装だけを Supabase 呼び出しに差し替えれば、UI層は一行も変更せずに済む。この構造自体が、営業時の説明材料になる。

// lib/repo/jobs.ts — 中身は同期でも async にする
export async function findJobs(query: JobQuery): Promise<JobSearchResult> {
  const jobs = useJobStore.getState().jobs
  return filterAndSort(jobs, query)   // 将来ここが supabase.from('jobs')... に変わるだけ
}

永続化の範囲

擬似的な非同期を必ず入れること。 リポジトリの各操作に 200〜600ms のディレイを挟み、ローディング状態（スケルトン）を実際に見せる。即座に返ると、かえって作り物に見える。

3. スコープ定義

求職者向け機能

企業向け機能

運営向け機能

共通・基盤

対象外（Won't have）

スコープリスク： 「AIによる求人推薦」は要望として挙がりやすいが、精度の合意形成に時間がかかりスコープが膨張しやすい。スキルタグの一致数によるマッチ度％表示という説明可能なルールで実装し、体験としての「賢さ」を担保する。

4. ロールとデモ切替

ロール定義

認証は行わない。ロールはストアの状態として保持し、切替バーから即座に変更できる。

デモ切替バー（F-S01）

画面上部に常時表示する固定バー。以下を持つ。

• 現在のロール表示と切替（4ロール）
• 求職者ロール時：ペルソナ選択（例「佐藤 遥（Webディレクター・31歳）」）
• 企業ロール時：所属企業の選択（シードの30社から）
• 「デモをリセット」ボタン（確認ダイアログ付き）
• 「これはデモです」の明示

デザイン上の扱い： このバーはプロダクト本体のUIではない。プロダクトのデザイントークンとは意図的に異なる扱い（ダークな帯 + 小さめのタイポ）にして、「アプリの外側にある操作パネル」であることを視覚的に区別する。プロダクト内に紛れ込ませない。

ロールを跨ぐ体験（デモの肝）

以下が繋がっていることが、このデモの説得力そのもの。必ず動くようにする。

1. 求職者として求人に応募 → 企業に切替 → カンバンの「新規応募」にそのカードが増えている
2. 企業として候補者にスカウト送信 → 求職者に切替 → スカウト一覧に届いている
3. 求職者が「興味あり」 → 企業に切替 → メッセージスレッドが生成され、氏名が開示されている
4. 企業が求人を掲載申請 → 運営に切替 → 審査待ちに並んでいる → 承認 → 求職者側の検索結果に出る

5. 画面一覧とユーザーフロー

全34画面。画面IDはディレクトリ構成と 1:1 で対応させる。

公開・求職者画面

企業管理画面

運営管理画面

主要フロー

フローA：求職者の応募

SC-001 トップ or 検索エンジン流入想定
   ↓
SC-002 求人検索 ── ファセットで絞り込み
   ↓
SC-003 求人詳細 ── 「応募する」
   ↓
SC-010 応募フォーム
   ├ Step1 送信内容の確認（プロフィール差分の編集可）
   ├ Step2 志望動機の入力
   └ Step3 最終確認 → 送信
   ↓
応募完了 ─┬→ 通知センターに「応募を受け付けました」
          ├→ 企業側の通知・ダッシュボード・カンバンに反映
          └→ SC-023 応募履歴に「応募済み」で追加

【体験の確認ポイント】ロール切替バーで企業に切り替えると、
カンバンの「新規応募」列に、今応募したカードが増えている。

フローB：企業のスカウト

SC-130 候補者検索 ── スキル「React」× 経験3年以上 × 東京
   ↓
SC-131 候補者詳細（匿名）── 氏名・現職企業は非表示
   ↓
SC-132 スカウト作成 ── テンプレ選択 + {{職種}}{{経験年数}}差し込み → 送信（残枠 -1）
   ↓
【ロール切替：求職者へ】
SC-024 スカウト一覧に着信 ─┬→「辞退」で終了
                          └→「興味あり」
   ↓
メッセージスレッド自動生成（この時点で企業側に氏名・連絡先が開示される）
   ↓
SC-026 / SC-140 メッセージ ── 企業が日程候補を3つ提示（日程調整カード）
   ↓
求職者が候補日を選択 → 確定 ─┬→ 双方の通知センターに配信 + ics ダウンロード
                             └→ SC-120 カンバンが「面接調整中」→「面接設定済」へ自動遷移

フローC：求人の掲載

SC-111 求人作成ウィザード
   Step1 基本情報（職種・雇用形態・タイトル）
   Step2 仕事内容（業務内容／変更の範囲）
   Step3 応募資格（必須・歓迎スキル）
   Step4 労働条件（勤務地／変更の範囲・時間・給与・休日・保険・受動喫煙対策）
   Step5 企業アピール（画像・社員の声）
   Step6 掲載設定（掲載期間・応募設定・担当者）
   ↓  ※各ステップで30秒ごと自動下書き保存
プレビュー（求職者から見える実画面）→ 掲載申請
   ↓
【ロール切替：運営へ】
SC-201 求人審査 ── NGワード自動検出（年齢制限／性別限定／必須項目の欠落）
   ├ 承認 → published → 求職者側の検索結果に出現
   └ 差戻し → 理由付きで企業の通知へ → SC-112 で修正 → 再申請

6. 機能要件

各要件は判定可能な粒度で記述している。テスト項目と 1:1 で対応させる。

6.1 ロール・デモ基盤

6.2 求人検索

6.3 求人詳細・応募

6.4 プロフィール・Web履歴書

6.5 スカウト・メッセージ

6.6 企業側 求人・応募者管理

6.7 運営・審査

6.8 通知

7. データ設計

型定義（lib/types/）

すべての型を先に定義し、これを唯一の真実とする。シードもストアもコンポーネントもこの型を参照する。

// ---- マスタ ----
type JobCategory = { id: string; parentId: string | null; name: string; slug: string; sortOrder: number }
type Prefecture  = { code: string; name: string; region: string }
type City        = { code: string; prefCode: string; name: string }
type JobFeature  = { id: string; name: string; icon: string }   // リモート可, 未経験歓迎 等
type Skill       = { id: string; name: string; categoryId: string }

// ---- 企業 ----
type Company = {
  id: string
  name: string
  logoUrl: string
  coverUrl: string
  industry: string
  employeeCount: number
  foundedYear: number
  address: string
  description: string          // リッチテキスト（サニタイズ済みHTML）
  benefits: string[]
  voices: { name: string; role: string; avatarUrl: string; body: string }[]
  planId: 'light' | 'standard' | 'premium'
  scoutQuota: number           // 月間スカウト枠
  scoutUsed: number
  members: CompanyMember[]
}
type CompanyMember = { id: string; name: string; avatarUrl: string; role: 'admin' | 'recruiter' | 'viewer' }

// ---- 求人 ----
type Job = {
  id: string
  companyId: string
  title: string                        // 60字まで
  categoryId: string
  employmentType: '正社員' | '契約社員' | 'パート・アルバイト' | '業務委託'
  // --- 労働条件（すべて必須。掲載申請のバリデーション対象） ---
  description: string                  // 業務内容（50字以上）
  descriptionScope: string             // 業務の変更の範囲
  workLocation: string                 // 就業場所
  workLocationScope: string            // 就業場所の変更の範囲
  prefCode: string
  cityCode: string
  salaryType: '年俸' | '月給' | '時給'
  salaryMin: number
  salaryMax: number                    // 上限も必須。片側のみは不可
  fixedOvertime: { enabled: boolean; amount?: number; hours?: number }  // enabled時は内訳必須
  workHours: string                    // 始業・終業・休憩・所定外労働の有無
  holidays: string
  insurances: ('健康保険' | '厚生年金' | '雇用保険' | '労災保険')[]
  smokingPolicy: string                // 受動喫煙防止措置
  contractPeriod: string               // 有期の場合は更新上限を含む。無期なら「期間の定めなし」
  trialPeriod: string                  // 試用期間の有無・期間・条件
  // --- 応募資格 ---
  requiredSkills: string[]
  welcomeSkills: string[]
  features: string[]                   // JobFeature.id[]
  // --- 掲載管理 ---
  status: 'draft' | 'under_review' | 'published' | 'rejected' | 'closed' | 'expired'
  rejectReason?: { codes: string[]; note: string }
  publishedAt?: string
  expiresAt?: string
  viewCount: number
  assigneeId?: string                  // 企業側担当者
  createdAt: string
  updatedAt: string
}

// ---- 候補者 ----
type Candidate = {
  id: string
  // 匿名ビューから除外される項目
  lastName: string; firstName: string
  lastNameKana: string; firstNameKana: string
  email: string
  phone: string
  birthDate: string
  currentCompanyName: string
  // 公開可能な項目
  avatarUrl: string
  prefCode: string
  currentCategoryId: string
  experienceYears: number
  currentSalary?: number
  desiredSalaryMin?: number
  desiredPrefCodes: string[]
  desiredEmploymentTypes: string[]
  selfPr: string                       // 3000字まで
  careers: Career[]
  educations: Education[]
  skills: { skillId: string; level: 1|2|3|4|5 }[]
  certifications: { name: string; acquiredAt: string }[]
  scoutEnabled: boolean
  blockedCompanyIds: string[]
  profileCompletion: number            // 算出値
}
type Career    = { id: string; companyName: string; role: string; from: string; to: string | null; isCurrent: boolean; body: string; sortOrder: number }
type Education = { id: string; schoolName: string; faculty: string; from: string; to: string }

// 候補者検索で使う匿名型。Candidate から機械的に導出する
type AnonymousCandidate = Omit<Candidate,
  'lastName'|'firstName'|'lastNameKana'|'firstNameKana'|'email'|'phone'|'birthDate'|'currentCompanyName'|'careers'
> & {
  ageDecade: 20 | 30 | 40 | 50          // 年代のみ
  careers: Omit<Career, 'companyName'>[] // 企業名を伏せた職歴
}

// ---- 応募・スカウト・メッセージ ----
type Application = {
  id: string
  jobId: string
  candidateId: string
  status: 'new' | 'screening' | 'scheduling' | 'scheduled' | 'offer' | 'rejected' | 'withdrawn'
  motivation: string
  profileSnapshot: Candidate           // 応募時点のプロフィールを凍結（FR-515）
  assigneeId?: string
  evaluations: { memberId: string; score: 1|2|3|4|5; comment: string; createdAt: string }[]
  internalNotes: { memberId: string; body: string; createdAt: string }[]
  threadId: string
  appliedAt: string
}

type Scout = {
  id: string
  companyId: string
  candidateId: string
  jobId: string
  body: string
  status: 'sent' | 'opened' | 'interested' | 'declined'
  threadId?: string                    // interested になった時点で生成
  sentAt: string
  openedAt?: string
}

type Thread = {
  id: string
  type: 'application' | 'scout'
  companyId: string
  candidateId: string
  jobId: string
  messages: Message[]
  lastReadByCandidate?: string
  lastReadByCompany?: string
}
type Message = {
  id: string
  senderType: 'candidate' | 'company' | 'system'
  senderId: string
  body: string
  attachments: { name: string; size: number; objectUrl: string }[]
  isInternalMemo: boolean              // trueなら求職者に表示しない
  interviewSlot?: InterviewSlot
  createdAt: string
}
type InterviewSlot = {
  id: string
  proposedAt: string[]                 // 最大5件
  selectedAt?: string
  status: 'proposed' | 'confirmed' | 'declined'
}

// ---- その他 ----
type Notification = {
  id: string
  targetRole: 'candidate' | 'company' | 'ops'
  targetId: string
  type: 'application_received'|'application_submitted'|'scout_received'|'message'|'status_changed'|'interview_confirmed'|'review_result'
  title: string
  body: string
  link: string
  emailPreview?: { subject: string; html: string }   // FR-704
  readAt?: string
  createdAt: string
}
type SavedSearch = { id: string; candidateId: string; name: string; query: JobQuery; createdAt: string }
type Report      = { id: string; targetType: 'job'|'company'; targetId: string; reason: string; status: 'open'|'in_progress'|'closed'; createdAt: string }

シードデータ（lib/seed/）

シード作成のルール（品質を左右する）

• 実在企業名・実在人名を使わない。 架空のものを使う
• 画像はライセンス確認済みの素材のみ。人物写真は取得元を記録する
• 求人票の本文はテンプレの繰り返しにしない。 職種ごとに書き分ける。ここが手抜きだとデモ全体が安っぽくなる
• 年収・勤務地・スキルの分布に偏りを持たせる。均等分布は不自然
• 日付は現在日時からの相対で生成する（3日前『2週間前』等）。固定日付を埋め込むと、時間が経つと古びる
• 応募・スカウトのステータスは全種類を含める。どの画面を開いても空にしない

ストアとリポジトリ

lib/
├── types/          # 上記の型定義
├── seed/           # シードデータ
├── store/          # Zustand + persist(localStorage)
│   ├── session.ts  # 現在のロール、ペルソナ、企業
│   ├── data.ts     # jobs / candidates / applications / scouts / threads / notifications
│   └── ui.ts       # ガイドツアーの表示済みフラグ等
└── repo/           # ★ コンポーネントが触るのはここだけ
    ├── jobs.ts
    ├── candidates.ts
    ├── applications.ts
    ├── scouts.ts
    ├── threads.ts
    └── notifications.ts

リポジトリ層の規約（厳守）

• 全メソッドを async で定義する。中身が同期でも例外なく
• 200〜600ms の擬似ディレイを挟む（lib/repo/_delay.ts に共通実装）
• 戻り値は { ok: true; data: T } | { ok: false; error: string } に統一する
• コンポーネントから Zustand ストアを直接参照しない。 読み取りも書き込みもリポジトリ経由
• 匿名化（Candidate → AnonymousCandidate）は repo/candidates.ts の内部で行う。コンポーネントに Candidate 型を渡さない（FR-401）

// lib/repo/candidates.ts
export async function searchCandidates(q: CandidateQuery): Promise<Result<AnonymousCandidate[]>> {
  await delay()
  const { candidates } = useDataStore.getState()
  const companyId = useSessionStore.getState().companyId
  const visible = candidates.filter(c =>
    c.scoutEnabled && !c.blockedCompanyIds.includes(companyId)   // FR-305, FR-306
  )
  return { ok: true, data: filterAndSort(visible, q).map(toAnonymous) }  // 匿名化はここで
}

8. デザイン要件

アートディレクション

「書類の重さを、紙のような静けさで扱う」

求人・履歴書・選考は本質的に「書類」の世界。多くの求人サイトは情報量に負けて、彩度の高いバッジとカードが乱立する。HIREBASE は逆に、余白・罫線・タイポグラフィの階層だけで情報を整理し、色は意味のあるところにしか使わない。アクセントカラーは「今あなたが取れる行動」にのみ与える。

カラートークン

app/globals.css に CSS 変数で定義し、tailwind.config.ts の theme から参照する。直書きの色指定を禁止する。

:root {
  --ink-900: #131A24;   /* 見出し・本文 */
  --ink-600: #4A5566;   /* 補助テキスト */
  --ink-400: #8B94A3;   /* ラベル・非活性 */
  --brand-700: #1B4D3E; /* 主要CTA・ブランド */
  --brand-500: #2E7D64; /* ホバー・アクティブ */
  --brand-50:  #E8F0EC; /* 選択状態の背景 */
  --accent:    #C2703B; /* スカウト・注目のみ */
  --surface:   #FBFAF8; /* ページ背景 */
  --card:      #FFFFFF;
  --border:    #E6E3DC;
  --success: #2E7D64; --warning: #B4741C; --danger: #A83A3A; --info: #33608F;
}

配色ルール： アクセントカラー --accent は1画面につき最大2箇所まで。「スカウトが届いている」「応募する」など、ユーザーが今取るべき行動にのみ使う。装飾目的の使用を禁止する。

タイポグラフィ

本文の1行あたり文字数は日本語で 36〜42文字に収まるようコンテンツ幅を制御する。

レイアウトとスペーシング

主要コンポーネント仕様

モーション

prefers-reduced-motion: reduce 時は全アニメーションを無効化する。スクロール連動アニメーションは使用しない — 求人検索は目的をもって使う画面であり、演出は操作の妨げになる。

アクセシビリティ（WCAG 2.1 AA）

ライティング規約

9. 技術要件・ディレクトリ構成

技術スタック（固定・勝手に変更しない）

上記以外のライブラリを入れる前に必ず提案し、承認を得ること。

ディレクトリ構成

/
├── CLAUDE.md                  # このファイル
├── app/
│   ├── layout.tsx             # デモ切替バーをここに配置
│   ├── page.tsx               # SC-001
│   ├── jobs/
│   │   ├── page.tsx           # SC-002
│   │   ├── [id]/page.tsx      # SC-003
│   │   ├── [id]/apply/page.tsx# SC-010
│   │   ├── category/[slug]/page.tsx  # SC-005
│   │   └── area/[pref]/page.tsx      # SC-006
│   ├── companies/[id]/page.tsx# SC-004
│   ├── mypage/                # SC-020〜029
│   ├── admin/                 # SC-100〜160
│   ├── ops/                   # SC-200〜203
│   └── dev/components/        # コンポーネントカタログ（本番では非公開）
├── components/
│   ├── ui/                    # shadcn/ui プリミティブ
│   ├── domain/                # JobCard, ApplicantKanban, ChatThread, ConditionChips 等
│   ├── demo/                  # RoleSwitcher, ResetButton, GuideTour, EmailPreviewModal
│   └── layout/
├── lib/
│   ├── types/  seed/  store/  repo/   # 7章参照
│   ├── search/                # 検索・ファセット・マッチ度のロジック
│   ├── validation/            # Zod スキーマ
│   └── utils/
├── e2e/                       # Playwright
└── public/                    # 画像素材

コーディング規約

• TypeScript strict。any 禁止。やむを得ない場合は unknown + 型ガード
• ファイル名は kebab-case、コンポーネントは PascalCase
• 1ファイル300行を超えたら分割を検討する
• コンポーネントから Zustand ストアを直接参照しない。必ず lib/repo/ 経由
• 検索・マッチ度・バリデーションなどのロジックは lib/ に置き、コンポーネントに埋め込まない（テスト対象にするため）
• コミットは1タスクごと。メッセージに要件IDを含める 例：feat(jobs): 求人検索のファセット絞り込みを実装 (FR-102, FR-103)

10. 非機能要件

実案件への転用時の注意（デモ本体の要件ではない）

将来この構成を実サービスへ転用する場合、以下が追加で必要になる。LP や商談でこの点に触れられた際に説明できるよう、記録として残す。

• 求人票は職業安定法上の労働条件明示義務の対象。本デモの Job 型は明示必須項目を網羅済み（業務の変更の範囲・就業場所の変更の範囲・受動喫煙防止措置を含む）
• 求職者情報を収集して企業に提供する場合、募集情報等提供事業者としての届出が必要になる可能性がある
• 年齢制限・性別限定の禁止（労働施策総合推進法／均等法）。本デモは候補者検索の条件から性別・年齢・国籍を除外済み（FR-402）
• 個人情報保護法に基づく利用目的の明示、開示・削除請求への対応
• 本デモは個人情報をサーバーに送信しないため、これらの義務は発生しない。 ただし「デモである」旨は画面上に常時明示する

11. 実装タスク

この順に進める。フェーズを飛ばさない。 完了時は [x] に更新する。

Phase 0 — 基盤とデザインシステム（3日）

0-1. 初期化

• Next.js 15 / TypeScript strict / App Router / Tailwind で初期化
• ESLint / Prettier / husky（pre-commit で lint + typecheck）
• 9章のディレクトリ構成を作成

0-2. 型とシード

• lib/types/ に7章の型定義をすべて実装
• lib/seed/masters.ts（職種8→60、都道府県47、市区町村、こだわり条件20、スキル200）
• lib/seed/companies.ts（架空30社。ロゴ・カバー画像含む）
• lib/seed/jobs.ts（300件。職種ごとに本文を書き分ける。テンプレの使い回し禁止）
• lib/seed/candidates.ts（200名。うち3名は操作用ペルソナとして詳細に作り込む）
• lib/seed/{applications,scouts,threads,stats}.ts（各ステータスに分散配置）
• 日付は現在日時からの相対で生成する

0-3. ストアとリポジトリ

• lib/store/{session,data,ui}.ts を Zustand + persist で実装
• lib/repo/ の全モジュールを実装。全メソッド async、擬似ディレイ、Result型で統一
• toAnonymous() を repo/candidates.ts 内に実装（FR-401）
• リポジトリ層の単体テストを書く（この時点で書く。後回しにしない）

0-4. デザインシステム

• app/globals.css にカラートークンを CSS 変数で定義
• tailwind.config.ts から CSS 変数を参照するよう theme を拡張（スペーシング・角丸・影・ブレークポイント）
• フォント（Zen Old Mincho / Noto Sans JP / Roboto Mono）を next/font で最適化
• タイプスケールをユーティリティクラスとして定義
• shadcn/ui を導入し、トークンに合わせて Button / Input / Select / Checkbox / Radio / Dialog / Sheet / Toast / Badge / Tabs / Tooltip / DropdownMenu を上書き
• 共通コンポーネント：EmptyState / Skeleton / PageHeader / Pagination / FileUploader / TagInput / StatusBadge / ConditionChips
• prefers-reduced-motion の全体対応
• /dev/components にコンポーネントカタログを作成し、全バリアントを一覧できるようにする

0-5. デモ基盤

• RoleSwitcher（4ロール切替、ペルソナ選択、企業選択）(FR-001, FR-002)
• デモ切替バーを app/layout.tsx に固定配置。プロダクトのトークンとは別扱いのデザイン
• 「デモをリセット」（確認ダイアログ + localStorage クリア）(FR-003)
• ロール権限外アクセス時の案内画面（素の404を出さない）(FR-007)

Phase 0 完了チェック

• /dev/components で全コンポーネントがトークン通りに表示される
• ロール切替が動作し、リロードしても状態が保持される
• リポジトリ層のテストが通る

Phase 1 — 求職者体験（4日）

1-1. 求人検索

• lib/search/ に検索・ファセット・マッチ度のロジックを実装（テスト付き）
• 表記ゆれ吸収（ひらがな／カタカナ／半角全角）(FR-101)
• SC-002 検索結果。URLクエリと状態を完全同期 (FR-104)
• ファセットサイドバー。ヒット件数表示、0件は選択不可 (FR-102, FR-103)
• 適用条件のチップ表示と個別解除 (FR-110)
• 並び替え3種 (FR-105)
• モバイル無限スクロール／デスクトップページネーション (FR-109)
• 0件時の条件緩和サジェスト (FR-106)
• マッチ度計算と内訳表示 (FR-107)
• JobCard コンポーネント（8章の仕様に準拠）

1-2. 求人詳細

• SC-003 求人詳細。労働条件の全項目を構造化テーブルで表示 (FR-201)
• モバイル固定応募CTA (FR-202)
• 類似求人 最大6件 (FR-209)
• 掲載終了求人の表示 (FR-210)
• SC-004 企業ページ
• SC-005 職種別 / SC-006 エリア別一覧

1-3. プロフィール

• SC-021 プロフィール編集（6セクション、セクション単位保存）(FR-301)
• 完成度％の算出と未入力セクションへの導線 (FR-302)
• SC-022 職務経歴（D&D並び替え、在職中フラグで終了年月を無効化）(FR-303)
• スキルタグ入力（マスタサジェスト + フリー入力）(FR-304)
• 2秒後の自動保存と保存状態表示 (FR-307)
• SC-029 設定：スカウト受付 ON/OFF (FR-305)、企業ブロック (FR-306)

1-4. 応募

• SC-010 応募フォーム3ステップ。入力内容を保持 (FR-204)
• 離脱確認ダイアログ (FR-205)
• repo/applications.submit()：重複チェック → profileSnapshot 凍結 → 通知配信 (FR-206, FR-207, FR-515)
• ゲストロールからの応募時のロール切替誘導と復帰 (FR-203)
• SC-023 応募履歴（ステータス別タブ、選考ステップ、辞退）(FR-208)
• SC-020 マイページ
• SC-027 お気に入り・保存検索 (FR-108)
• SC-028 通知センター (FR-701, FR-702)

1-5. トップ

• SC-001 トップページ

Phase 1 完了チェック

• フローAが完走する（検索 → 詳細 → 応募 → 応募履歴に反映）
• リロードしても応募が残っている
• どの画面にも空の状態がない

Phase 2 — 企業体験（4日）

2-1. 求人管理

• SC-111 求人作成ウィザード6ステップ、30秒ごと自動下書き保存 (FR-501)
• 必須項目バリデーション。未入力では掲載申請不可。不足項目をステップ単位で提示 (FR-502)
• 固定残業代 ON で内訳・時間数を必須化 (FR-503)
• 有期雇用選択時に契約期間・更新上限を必須化 (FR-504)
• 求職者視点のプレビュー (FR-505)
• SC-110 求人一覧（ステータス別タブ、複製）(FR-506)
• 掲載期限アラート (FR-507)
• SC-112 求人編集。公開中の編集は再審査対象であることを明示

2-2. 応募者管理（ATS）

• SC-120 応募者カンバン6列 (FR-508)
• dnd-kit による D&D ステータス変更 (FR-509)
• キーボードでのステータス変更代替 (FR-510, A11Y-02)
• 「見送り」移動時の不採用通知選択 + テンプレート編集 + メールプレビュー (FR-511, FR-704)
• SC-121 応募者詳細（履歴書ビュー、5段階評価、社内メモ）(FR-513)
• 担当者アサインと絞り込み (FR-512)

2-3. ダッシュボード・企業ページ

• SC-100 企業ダッシュボード
• SC-101 企業ページ編集（画像アップロード、リッチテキストはサニタイズ）(NFR-10)
• SC-102 メンバー管理
• SC-160 プラン画面

Phase 2 完了チェック

• フローCの前半（求人作成 → 掲載申請）が完走する
• 必須項目が1つでも欠けていると掲載申請できない
• 求職者ロールで応募 → 企業ロールに切替 → カンバンにそのカードがある
• カンバンがキーボードのみで操作できる

Phase 3 — スカウトとメッセージ（3日）

3-1. 候補者検索・スカウト

• SC-130 候補者検索。AnonymousCandidate のみを扱う (FR-401)
• 絞り込み条件に性別・年齢・国籍を含めない (FR-402)
• SC-131 候補者詳細（匿名）
• SC-132 スカウト作成。テンプレート + 差し込み変数の置換 (FR-403)
• repo/scouts.send()：残枠検証 (FR-404)、30日再送制限 (FR-405)
• SC-024 スカウト一覧（求職者側）。「興味あり」でスレッド生成 + 氏名開示 (FR-406)
• SC-133 スカウト管理（開封率・返信率、テンプレート管理）

3-2. メッセージ

• SC-025 / SC-026 求職者側メッセージ
• SC-140 企業側メッセージ（2ペイン）
• チャットバブル4種（自分／相手／内部メモ／システム）(FR-410)
• 既読表示と求職者側の OFF 設定 (FR-408)
• ファイル添付（Object URL、10MB×3件まで）(FR-409)
• 連絡先らしき文字列の検出と注意表示 (FR-413)
• ロール切替でメッセージが双方向に反映されることを確認 (FR-407)

3-3. 日程調整

• 日程調整カード。最大5候補提示 → 1つ選択 (FR-411)
• 確定時に双方の通知センターへ配信 + ics ダウンロード (FR-412)
• 確定でカンバンのステータスを自動遷移

Phase 3 完了チェック

• フローBが完走する（候補者検索 → スカウト → 興味あり → メッセージ → 日程確定）
• 「興味あり」より前に、企業側のどの画面からも候補者の氏名が見えないことを確認する

Phase 4 — 運営・分析（2日）

• NGワード検出エンジン（年齢制限・性別限定・必須項目欠落・曖昧な給与表記）(FR-601)
• SC-201 求人審査（検出結果ハイライト、モーダル完結、次へ自動送り）(FR-603)
• 差戻し理由の定型選択 + 自由記述 → 企業の通知へ (FR-602)
• 承認 → 求職者側の検索結果に即時反映 (FR-604)
• SC-202 通報管理 (FR-605)
• SC-203 マスタ管理
• SC-200 運営ダッシュボード（Recharts で推移グラフ）(FR-606)
• SC-150 企業向け分析ダッシュボード（ファネル、期間指定）(FR-514)
• 通知種別ごとの ON/OFF (FR-703)

Phase 4 完了チェック

• フローCが完走する（求人作成 → 審査 → 承認 → 検索結果に出現）

Phase 5 — 仕上げ（3日）

5-1. 体験の総点検

• 4章「ロールを跨ぐ体験」の4パターンをすべて手動で確認する
• 全34画面を開き、空の画面が1つもないことを確認する
• 全画面の空状態・ローディング・エラー状態を確認する
• ガイドツアーを実装 (FR-005)

5-2. アクセシビリティ監査

• axe-core を全画面に実行し、Critical / Serious を0件に
• キーボードのみで全画面を操作完遂する手動確認
• フォントサイズ200%で横スクロールが出ないことを確認 (A11Y-10)

5-3. パフォーマンス・SEO

• 画像を WebP/AVIF + 遅延読み込み (NFR-06)
• 初期JSバンドルを200KB以下に削減 (NFR-04)
• 全ページに固有の title / description / OGP画像 (NFR-09)
• Lighthouse で Performance 90 / Accessibility 95 / SEO 95 を達成 (NFR-07)

5-4. テストと公開

• Playwright で フローA・B・C の E2E を実装・実行
• Vitest：検索・マッチ度・バリデーション・リポジトリのカバレッジ80%以上
• /dev/components を本番で非公開に
• Vercel へデプロイ
• LP への導線設置
• 各フェーズのキャプチャを整理し、LP掲載用の時系列コンテンツにまとめる

合計 16営業日（約3週間）／1名専任 + レビュー体制。 各フェーズ完了時点でプレビューURLと画面キャプチャを残し、「Day 3 でここまで」「Day 7 でここまで」という時系列コンテンツとして LP に掲載する。爆速であることを、主張ではなく記録で示す。

12. 受入基準

1. 6章の優先度 P1 の要件がすべて実装されていること
2. 5章の主要フローA・B・Cが、エンドツーエンドで完走すること
3. 4章「ロールを跨ぐ体験」の4パターンがすべて動作すること
4. 「興味あり」より前に、企業側から候補者の氏名・連絡先がどの経路からも見えないこと
5. 労働条件の必須項目が未入力の求人は、掲載申請できないこと
6. 全34画面のいずれにも空の状態がなく、リアルなデータが表示されていること
7. リロード後も操作結果が保持され、「デモをリセット」で初期状態に戻ること
8. axe-core で Critical / Serious の指摘が0件であること
9. Lighthouse の基準値を全公開画面で満たすこと
10. データアクセスがすべて lib/repo/ を経由しており、コンポーネントが Zustand ストアを直接参照していないこと

判断に迷ったときのルール

1. 仕様がこの文書にない場合は、実装せずに質問する。 推測で作らない
2. アクセシビリティと「空の画面を作らない」は削減対象外。 速度を出すために削らない
3. スコープ外（3章 Won't have）は、思いついても実装しない
4. 「デモだから」を理由に品質を落とす判断はしない
5. コンポーネントからストアを直接触りたくなったら、それはリポジトリ層に足りないメソッドがあるということ。リポジトリに追加する