モーニングチャイム - 目覚め音風景アラーム

【目的・対象】朝の目覚めをストレスなく快適にしたい全ユーザー向けの多機能アラーム時計アプリ。単調なブザー音ではなく、5種類のプロシージャル生成サウンドスケープが徐々にフェードインし、心地よく起床できることを目指す。

【主要機能】
1. 複数アラーム管理:時刻・曜日リピート・ラベル・有効/無効トグルをカード形式で一覧表示、追加・編集・削除。
2. 5種のサウンドシーン(森の朝/波の音/街の朝/鳥のさえずり/和風の鈴)から選択、各シーンに専用背景ビジュアルが対応。
3. フェードイン式音風景アラーム(下記音楽仕様)、スヌーズ(5/10/15分選択)、フルスクリーン停止画面。
4. 睡眠サイクル計算機:就寝/起床いずれかの時刻を入力すると90分単位で理想の起床・就寝候補時刻をリスト表示。
5. 起床履歴カレンダー:実際に停止した時刻、スヌーズ回数を記録し月間パターンを可視化。
6. ミュート/BGM・SE個別音量調整、テスト再生ボタン。

【画面構成】
・ホーム(アラーム一覧カード+新規追加ボタン)
・アラーム編集モーダル(時刻ピッカー、曜日チップ、シーン選択サムネイル、音量スライダー、スヌーズ設定)
・睡眠サイクル計算ページ(モード切替タブ、時刻入力、候補時刻カード)
・アラーム発火フルスクリーン(シーン背景+徐々に明るくなる演出、停止/スヌーズ大ボタン)
・履歴カレンダーページ(月表示、日別起床時刻・スヌーズ回数)

【データ構造(MySQL)】
- alarms(id, device_token, time, repeat_days JSON, label, sound_scene, volume, snooze_minutes, enabled, created_at)
- alarm_logs(id, alarm_id, triggered_at, dismissed_at, snooze_count)
device_tokenはブラウザ生成の匿名IDでlocalStorageと連携し、ログイン不要で端末内履歴を保持。

【デザイン方向性】水彩風パステルカラー、朝の柔らかい光を基調とした温かみのあるUI。カード型レイアウト、丸みを帯びたボタン、シーンごとに背景色調が変化する統一感あるビジュアル。

【音楽仕様(Web Audio API)】BPM60・4/4拍子。基本形はCメジャー(和風鈴シーンのみ陰音階)のトライアングル波アルペジオ+フィルタ済みホワイトノイズ環境音。8小節を1フレーズとし、1〜4小節目は単音アルペジオのみ、5〜6小節目でベース音(サイン波)が追加、7小節目でパッド和音がレイヤーされ、8小節目末尾に小さなフィル(ベル音のグリッサンド)を挿入して次フレーズへ滑らかに繋げる。シーンごとに音色・SE差別化(森=小鳥のトリルSEをランダムタイミングで散らす、海=低域強調ノイズの波形、街=遠いベル、鈴=和風鈴SE)。AudioContext.currentTimeを基準に0.1秒先読みスケジューリングでノードを生成し、BGM用GainNodeとSE用GainNodeを分離、ミュート時はgain.value=0、アラーム停止時は全ノードをstop()後disconnect()して解放する。

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

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