QuestJoin - 新入社員オンボーディングRPGクエスト

【目的・ターゲット】中小企業・スタートアップの人事担当者が、退屈な資料読み込み型オンボーディングを『RPGクエスト』体験に変えるWebアプリ。新入社員・中途社員は自分のペースでマップを進み、会社概要・ミッション・組織図・福利厧生・ルールを楽しく理解できる。

【主要機能】
1. HR側の企業作成: 会社名・6桁共有コード・テーマ(ファンタジー城下町/宇宙ステーション/和風城下町)を設定
2. 章(クエスト)エディタ: タイトル・本文・画像・4択理解度クイズをドラッグ並び替えで登録
3. 受講者マップ画面: 章ごとに拠点(城・塔・神社等)としてビジュアル化。前章クリアで次拠点が光って解放、Web Audio APIによるファンファーレSE再生
4. クイズ判定: 正答でスター・バッジ獲得、誤答は解説表示後に再挑戦可
5. 完了証生成: 全章クリアで称号入り『入社証明カード』をPNG保存・SNS共有
6. 管理者ダッシュボード: 受講者別進捗率・クイズ正答率一覧、CSV出力

【画面構成】①管理者トップ(会社作成・テーマ選択・共有コード発行) ②章編集画面 ③受講者コード入力・名前登録画面 ④マップ画面(拠点アイコン・進捗ライン・BGM) ⑤章詳細画面(本文+クイズ) ⑥完了証カード画面 ⑦管理者ダッシュボード

【データ構造】companies(id,name,share_code,theme,created_at) / chapters(id,company_id,order_no,title,content,image_key) / quiz_questions(id,chapter_id,question,choices_json,answer_index) / learners(id,company_id,name,access_code,created_at) / progress(id,learner_id,chapter_id,completed,quiz_score,completed_at)

【デザイン方向性】丸みのある暖色パステルUI、拠点アイコンが光る演出、テーマ切替でマップ背景と配色が一変。ファンタジー=金と紫の魔法光、宇宙=紺と青の星光、和風=朱と藍の提灯光。

【BGM仕様】Web Audio API、AudioContext.currentTime基準で先読みスケジューリング。ファンタジー:BPM100・4/4拍子、パッド+ベルメロディ、I-V-vi-IVコード進行、8小節A(パッド主体)+8小節B(ベルメロディ加算)ループ、4小節毎にハイハット風フィル。宇宙:BPM90・4/4、シンセアルペジオ+ドローンベース、Ambientコード(Imaj7-IVmaj7)、休符多めのB展開。和風:BPM80・4/4、五音音階の箏風メロディ+太鼓ベース、A(箏単音)B(太鼓+装飾音)展開。BGM/SE別音量スライダー、ミュート、章遷移時のノード停止・disconnect処理を実装。

## BGM品質要件
- アプリの雰囲気に合うジャンル・BPM・拍子を定め、ドラム、ベース、和声、メロディの4層で構成する
- 最低8小節またはA/Bの2展開を作り、休符、アクセント、フィル、フレーズ変化を入れる
- Web Audio APIはAudioContext.currentTime基準で先読みし、BGM/SE別音量・ミュート・停止処理を実装する
- 単一オシレーターの持続音や1〜3音だけの反復はBGMとして不可

## ビジュアル品質要件
- 生成済み素材を仕様内の用途・表示場所で実際に使用し、未使用素材を残さない
- 画風・配色・キャラクター比率を全画面で統一し、文字はHTML/CSSで重ねる
- PC・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する