デスクマップオフィス - フリーアドレス座席予約＆オフィス可視化ダッシュボード

【目的・ターゲット】フリーアドレス制やハイブリッドワークを導入する中小〜中堅企業の総務担当者・一般従業員向けに、座席予約とオフィス稼働状況をひと目で把握できる可視化ダッシュボード。既存の会議室予約系アプリとは異なり「個人デスク」に特化し、アイソメトリックなオフィス俯瞰マップで空席・在席・チームの居場所を直感的に確認できる点が特徴。

【主要機能】
1. アイソメトリック風オフィスフロアマップをCanvasで描画し、座席を緑(空席)/黄(予約済)/赤(使用中)で色分け表示
2. 座席タップで日付・時間帯(午前/午後/終日)を選んでワンタップ予約、キャンセルも即時反映
3. チームメンバー検索：氏名・部署で検索し、地図上に在席ピンを表示
4. お気に入り座席登録と繰り返し予約(曜日固定予約)
5. 管理者向け稼働率ダッシュボード：曜日別・部署別・フロア別稼働率を棒グラフ/ヒートマップで可視化、CSV出力
6. 個人の出社カレンダーで月間出社日数を自己確認

【画面構成】
ログイン(社員名+簡易パスコード)→フロアマップ画面(メイン。フロア切替タブ、日付ピッカー、Canvas俯瞰図)→座席予約モーダル→マイページ(予約履歴・お気に入り・出社カレンダー)→チーム検索画面→管理者ダッシュボード(グラフ・CSV出力)。朝/昼/夕で背景トーンが緩やかに変化する演出を搭載。

【データ構造】
companies(id,name,admin_pass_hash) / offices(id,company_id,name,floor_no,bg_theme) / seats(id,office_id,seat_code,pos_x,pos_y,seat_type) / employees(id,company_id,name,department,avatar_id,pass_hash) / reservations(id,seat_id,employee_id,res_date,time_slot,status,created_at) / favorites(id,employee_id,seat_id)

【デザイン方向性】木目調フロアと観葉植物を配したパステルカラーのアイソメトリックオフィス。丸みのあるフラットデザインのキャラクターアバターが座席に着席するアニメーションで在席感を演出。BGMはWeb Audio APIで生成するローファイ風アンビエント(BPM70、4/4拍子、ピアノ+ソフトドラム+ウォームベース、A(8小節)/B(8小節)展開、4小節毎に軽いフィル、休符を活かした静かなグルーヴ)を集中を妨げない音量でループ再生。AudioContext.currentTime基準で先読みスケジューリングし、BGM/効果音別音量スライダー、ミュート、ページ離脱時のノード解放を実装。

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

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