アロマブレンドラボ - 香りの調香シミュレーター

【目的/ターゲット】アロマ初心者、ハンドメイド石鹸・キャンドル作家、香水好きな人向けに、精油(エッセンシャルオイル)の組み合わせレシピを提案・可視化する調香シミュレーター。実際に嗅げない代わりに、香りの変化をビジュアルとBGMで体感的に表現する便利ツール。

【主要機能】
1. 気分・シーン・好みの系統(シトラス/フローラル/ウッディ/オリエンタル/ハーブ)を選ぶ3ステップ診断で、内蔵50種の精油DBからトップ/ミドル/ベースの滴数比率レシピを3案自動提案
2. カスタムブレンドビルダー:精油を検索・選択して滴数を調整し、香りバランスをレーダーチャート表示、相性スコアをリアルタイム算出
3. 香りの揮発タイムラインアニメーション:トップ→ミドル→ベースへ香りが変化する様子をCanvasの色・粒子演出とBGMのレイヤー変化で表現
4. 用途別希釈計算(ルームスプレー/香水/バスソルト/リードディフューザー)でキャリアオイル・エタノールのml自動算出
5. レシピ保存(LocalStorage)、PNGカード出力、6桁共有コードでMySQLに公開・閲覧可能
6. 精油図鑑ページ:系統・効能・注意事項・相性の良い精油を一覧表示

【画面構成】トップ(ヒーロービジュアル+診断/カスタム導線)、診断ステップページ、レシピ結果ページ(カード3案+タイムラインアニメ)、カスタムビルダー(精油パネル+レーダーチャート+希釈計算)、マイレシピ一覧、精油図鑑。

【データ構造】essential_oils(id, name_ja, name_en, category, volatility, effect_tags, caution_text, image_key), oil_affinity(oil_id_a, oil_id_b, score), recipes(id, share_code, title, mood_tag, scene_tag, oils_json, dilution_type, created_at)。基本操作はLocalStorage優先、公開共有のみMySQL使用。

【デザイン】ボタニカル水彩タッチ、パステルグリーン×アイボリー×ゴールド、ガラス質感カードUI、柔らかい光の演出。

【BGM】系統別4種をWeb Audio APIで生成。共通:60-72BPM、4/4拍子、AudioContext.currentTime基準で先読みスケジューリング。シトラス=長調パッド+アルペジオ、フローラル=柔らかいハープ風分散和音、ウッディ=低音ドローン+木管風メロディ、オリエンタル=エキゾチック音階+パーカッション。各8小節A/Bを交互展開し4小節ごとにフィルや装飾音を挿入、休符でメロディに間を作る。BGM/SE音量別スライダー、ミュート、停止時ノード解放を実装。

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

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