TeamTree - 組織図ビジュアルデザイナー

【目的・ターゲット】中小企業・スタートアップの総務/人事担当者、経営者向けに、Excelやパワポでの手作業組織図作成から脱却し、常に最新で見やすい組織図をブラウザだけで作成・共有できるツール。登録不要、6桁コードで編集/閲覧を分離できる。

【主要機能】
1. ドラッグ&ドロップで社員ノードを追加し、上司ノードへ線を引いて階層構造を作成。ワンクリックでツリー状に自動整列。
2. 部門ごとにカラーテーマとアイコンを設定し、色分けで視覚的にグループ表示。部門フィルターで絞り込み表示可能。
3. 各ノードに8種のアバター画像・氏名・役職・連絡先・メモ・空席バッジを設定でき、クリックで詳細カードを展開。
4. 編集用コードと閲覧専用コードを分けて発行。閲覧側は検索・部門フィルター・印刷用A4レイアウトのみ利用可能。
5. 異動シミュレーション：ノードをドラッグして配置変更すると変更履歴が自動記録され、いつでも一覧確認できる。
6. PNG画像出力・A4印刷プレビュー・全体スクリーンショット保存に対応。

【画面構成】(1)トップ：新規作成／共有コード入力 (2)エディタ：中央キャンバス＋左に部門管理パネル＋右にノード詳細パネル＋上部にテーマ・BGM切替 (3)閲覧専用ページ：検索バー・部門フィルター・印刷ボタン (4)変更履歴パネル（モーダル）。

【データ構造】boards(id, edit_code, view_code, name, theme, created_at) / departments(id, board_id, name, color_hex, icon_key, sort_order) / members(id, board_id, department_id, parent_member_id, name, title, avatar_key, email, memo, is_vacant, pos_x, pos_y) / change_logs(id, board_id, member_id, change_type, before_json, after_json, created_at)。

【デザイン方向性】クリーンなコーポレートフラットデザイン。ネイビー×パステル(ミント・コーラル・イエロー)の配色、丸角カード、柔らかい影、統一アイコンセット。キャンバス背景は淡いグリッド柄。

【BGM仕様】エディタ画面でON/OFFできる軽いコーポレートアンビエントBGM。テンポ80BPM 4/4拍子、ピアノの分散和音＋パッド＋ソフトなブラッシュドラムでA(8小節)/B(8小節)構成、Bで音数を減らし静かな展開に。Web Audio APIでAudioContext.currentTime基準に先読みスケジューリングし、BGM/SE音量を別スライダーで管理、ミュートボタンと画面遷移時のノード解放を実装。

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

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