AdBudget Compass - 広告予算配分＆費用対効果ダッシュボード

【目的・ターゲット】中小企業のマーケティング担当者・店舗経営者が、リスティング広告・SNS広告・チラシ/ポスティング・看板・紹介口コミなど複数の販促媒体に投下した予算と成果を一元管理し、次月の予算配分を数字で判断できるようにする業務支援ダッシュボード。Excel管理からの卒業を促す。

【主要機能】
1. 媒体マスタ管理：プリセット8媒体(リスティング/SNS広告/チラシ/看板/紹介/DM/展示会/口コミサイト)+カスタム追加
2. 月次実績入力：媒体ごとに予算・実費・問い合わせ数・成約数・売上を入力するとCPA・ROAS・CVRを自動計算
3. 媒体別パフォーマンスカード：信号色(緑=好調/黄=普通/赤=要改善)で瞬時に判断可能
4. 予算配分シミュレーター：総予算をスライダーで入力すると、過去3〜6ヶ月のROAS実績を重み付けし最適配分案を自動提案
5. トレンドグラフ：媒体別ROAS推移(折れ線)、予算配分推移(積み上げ棒グラフ)
6. レポート出力：A4印刷/PNGカード生成、6桁共有コードでチームに配布・閲覧共有

【画面構成】
・ダッシュボード(媒体カード一覧+合計KPIサマリー)
・実績入力ページ(月選択タブ+媒体別フォーム)
・予算シミュレーターページ(スライダー操作+配分結果ドーナツグラフ)
・レポート/履歴ページ(月別一覧、印刷・共有ボタン)
・設定ページ(媒体マスタ、共有コード再発行)

【データ構造(MySQL)】
companies(id, share_code, name, created_at)
channels(id, company_id, name, icon_key, is_preset, sort_order)
monthly_records(id, company_id, channel_id, year_month, budget, actual_cost, inquiries, conversions, sales_amount, created_at)

【デザイン方向性】ネイビー基調+オレンジ/ターコイズのアクセントで信頼感とポップさを両立。媒体ごとにフラットなアイソメトリック風アイコンイラストを使用し、丸みのある線・柔らかい影・左上45度の統一光源でシリーズ感を演出。作業用に任意再生できるLo-fiチルアウトBGM(BPM75、4/4拍子、Cmaj7-Am7-Dm7-G7のコード進行、ソフトなピアノ+ブラシハイハット+ウォームなベース、8小節ループで4小節目にフィルを挿入)を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・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する