カラーミューズ - パーソナルカラー診断&コーデ・メイク提案スタジオ

【目的・ターゲット】自分に似合う色がわからない、買い物やメイクでいつも失敗する、という10代後半〜50代の男女向けに、写真から肌・瞳・髪色を解析し「春夏秋冬」12タイプのパーソナルカラーを診断、似合う配色とコーデ・メイク提案までリッチな演出で届ける無料ツール。
【主要機能】1) カメラ撮影またはアップロード画像から顔部分をCanvasで解析し肌・瞳・髪の色相/明度/彩度を抽出（外部API不要、端末内処理）。2) 4シーズン×3サブタイプ計12パーソナルカラータイプを判定し、診断中は色パーティクルが渦巻く演出＋専用BGMを再生。3) 結果画面でタイプ名、似合う色パレット20色、避けたい色、コーデ配色サンプル、メイク（口紅・チーク・アイシャドウ）提案をカード表示。4) 結果をPNGカードとして書き出し・SNSシェア。5) LocalStorageで家族分の診断履歴を複数保存・再閲覧可能。6) 任意で結果を公開ギャラリーに投稿し、他ユーザーの診断カードを閲覧・いいねできる（MySQL利用）。
【画面構成】①トップ（ヒーロービジュアルと『診断をはじめる』ボタン）②撮影/アップロード画面（顔位置ガイド枠付き）③診断演出画面（色パーティクルアニメーション＋BGM）④結果画面（パレット・コーデ・メイク提案・共有ボタン）⑤マイ履歴ページ⑥公開ギャラリー一覧・詳細ページ。全てスマホ縦持ち最適・PCでも中央寄せレイアウトで快適。
【データ構造】MySQL: gallery_posts（id, type[春夏秋冬+サブ], palette_json, comment, image_thumb_path, likes, created_at, is_public）、gallery_likes（id, post_id, session_hash, created_at）。診断本体・履歴はLocalStorageに保存し個人情報はサーバー非送信。
【デザイン方向性】パステル×光沢感のある四季モチーフ。春=桜と若葉のライトピンク＆グリーン、夏=海とラベンダーのブルー系、秋=紅葉と琥珀のブラウン系、冬=雪と氷のモノトーン＆ブルー。丸みのあるカードUI、光の粒子演出、Noto Sans JP採用。診断中〜結果表示までシーズンごとに背景・BGMが自動で切り替わる没入感重視の構成。
【BGM仕様】4季節分、各ループ60秒・A/B展開8小節×2。春: BPM100・4/4、鉄琴+アコギ+軽いシェイカー、明るい長調メロディ、4小節毎にフィル。夏: BPM112・4/4、マリンバ+ウクレレ+ハンドクラップ、跳ねるリズム。秋: BPM90・4/4、ピアノ+ストリングスパッド、付点リズムで温かみのある旋律。冬: BPM80・4/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・スマホで画像の欠け、引き伸ばし、文字との重なりがないことを開発完了前に確認する