オンボードクエスト OnboardQuest ― RPG風・新人研修クエストマップ

【目的】新入社員研修の形骸化を防ぎたい中小企業の人事担当者と、受け身になりがちな新人本人向けの、ファンタジーRPG風オンボーディング支援アプリ。会社紹介・規則理解・社内ツール操作などの研修コンテンツを『クエスト』として冒険マップ上に配置し、新人がキャラクターを育てながら能動的に学べるようにする。

【主要機能】
1. 管理者用クエストエディタ：エリア(村/森/城など)ごとにクエストを追加。説明文＋4択クイズ(複数問)、必要EXP、バッジ付与を設定。
2. 受講者用冒険マップ画面：Canvasで描く2.5D俯瞰マップ上の拠点アイコンをタップしてクエスト開始。クリアでEXP・ゴールド獲得、レベルアップ演出。
3. 進捗ダッシュボード：管理者が受講者ごとの完了率・正答率・所要日数を一覧・グラフで確認、遅延者を強調表示。
4. キャラクター育成：レベル、称号、獲得バッジを蓄積し装備アイコンが変化。
5. 全クエスト完了で修了証をPNG自動生成、ダウンロード可能。
6. エリアごとに変化するBGMとSEで没入感を演出、BGM/SE個別音量とミュート対応。

【画面構成】(1)会社コード発行・管理者ログイン (2)クエスト管理画面(一覧/追加/編集/エリア割当) (3)受講者ダッシュボード(棒グラフ・進捗バー) (4)受講者入室画面(会社コード+氏名) (5)冒険マップ画面 (6)クエストモーダル(説明+クイズ+結果演出) (7)キャラクターステータス/バッジ一覧 (8)修了証発行画面。

【データ構造】companies(id, code, name, admin_pass) / quests(id, company_id, area, title, description, quiz_json, order, required_exp, badge_id) / employees(id, company_id, name, level, exp, current_area) / progress(id, employee_id, quest_id, status, score, completed_at) / badges(id, name, icon_key)。

【デザイン】温かみある絵本風ファンタジー、パステル×暖色ライティング、丸みのあるキャラクター、2.5D俯瞰マップ。

【BGM仕様】Web Audio APIでエリア別に生成。村:90BPM 4/4 長調、アコギ風アルペジオ+ベース+軽打楽器、8小節でA(穏やか)/B(明るいフィル)展開。森:100BPM 短調寄り、木管風メロディ+低音ドローン、4小節ごとにアクセント休符。城(最終):110BPM 荘厳な弦・金管風和声、8小節ごとにファンファーレ的フィル。クエストクリア時・レベルアップ時に短いSE。AudioContext.currentTime基準で先読みスケジューリングし、BGM/SE別ボリューム、ミュート、画面遷移時のノード解放を実装。

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

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