SaaSコストレーダー - サブスクリプション支出最適化ダッシュボード

【目的】複数のクラウドサービス(チャット・会議・デザイン・開発・営業支援等)を契約する中小企業やスタートアップの管理部門・経営者向けに、乱立しがちなSaaS支出を一元管理し「使っていないのに払い続けている費用」を発見・削減するダッシュボードアプリ。ワークスペース単位で共有コードを発行し、チームで同じ台帳を編集できる。

【主要機能】
1. SaaSツール登録: ツール名・カテゴリ(6種)・提供会社・月額単価・契約席数・実利用席数・契約更新日・担当部門をカード/テーブルで管理
2. コストダッシュボード: 総月額/年額支出、カテゴリ別ドーナツグラフ、直近6ヶ月推移の折れ線グラフを自動集計
3. 利用率アラート: 実利用席数÷契約席数が閾値以下のツールを信号機色(赤/黄/緑)バッジで警告表示
4. 重複検出: 同一カテゴリに複数ツールがある場合に「重複候補」として自動フラグ
5. 更新日カウントダウン: 契約更新まで30日以内のツールをリマインダーカードで表示
6. 削減シミュレーター: 解約候補にチェックを入れると年間削減額と残存コストをリアルタイム再計算し、レポート印刷・CSV出力が可能
7. 集中作業用アンビエントBGM: ダッシュボード閲覧・整理作業中に任意でON/OFFできる背景音楽

【画面構成】(1)ワークスペース作成/参加画面 (2)ダッシュボード(サマリーカード・グラフ・アラート一覧) (3)ツール一覧(カード/表切替・フィルタ・追加編集モーダル) (4)ツール詳細(利用率入力・更新日・メモ) (5)削減シミュレーター (6)印刷用レポート画面

【データ構造】workspaces(id, name, share_code), saas_tools(id, workspace_id, name, category, vendor, monthly_cost, seats, active_seats, renewal_date, department, notes, status), usage_history(id, tool_id, recorded_at, active_seats) をMySQLで管理。PHPでCRUD APIを実装しJS側でグラフ描画。

【デザイン方向性】コーポレートネイビー×ミントグリーンを基調にした清潔感あるフラットデザイン。カード型UIに丸みを持たせ柔らかい影を付け、カテゴリごとに専用アイコンを配置。スマホでは縦積みカード、PCでは3カラムダッシュボードに切替。

【BGM仕様】Lo-fiアンビエント、BPM70、4/4拍子。コード進行はCmaj7→Am7→Fmaj7→G7を8小節ループしA(穏やかなピアノ主旋律)/B(パッドとベースが厚みを増す展開)を交互再生。ドラムはブラシ質感の軽いキックとハイハットのみで休符を多用、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・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する