フォーカスハブ - 美しい背景と共に集中を作る多機能スタートページ

【目的・ターゲット】在宅ワーカー・学生・フリーランスが毎日最初に開く「作業の起点ページ」。ブラウザのホームやブックマークに設定し、時計・疑似天気・ToDo・ポモドーロタイマー・名言・クイックリンクを1画面に集約した、美しく実用的なダッシュボード。

【主要機能】
1) 森林・海辺・都市夜景・宇宙の4シーンテーマを選択でき、時間帯自動切替もON/OFF可能
2) 大型デジタル時計＋日付、地域と季節から算出する疑似天気表示（外部API不要の内蔵季節データ）
3) クイックToDo（最大5件、チェック式、LocalStorage保存）
4) ポモドーロタイマー（25/5分などカスタム可、テーマ連動アンビエントBGM再生、開始・終了SE、完了数を記録）
5) 内蔵300句データベースからの日替わり名言カード（シェア用画像生成）
6) クイックリンクランチャー（最大8件、アイコン付きショートカットを保存）
7) 匿名ニックネームで参加できる月間「集中スコア」ランキング（MySQLで集計）

【画面構成】メイン画面＝フルスクリーン背景＋半透明パネルで時計・天気・ToDo・タイマー・名言カード・リンクバーを配置。右上の歯車から設定モーダル（テーマ選択、時間帯自動切替、BGM/SE音量、通知音）を開く。別ページとしてランキング画面（月間トップ20、ニックネーム登録）。

【データ構造】focus_sessions(id, nickname, theme, duration_min, completed_at)／quotes(id, text, author, category)。ランキングはfocus_sessionsをMySQLで月次集計。ToDoやリンクはLocalStorage管理。

【デザイン】セミリアル水彩×デジタルペイント調のパノラマ背景、ガラスモーフィズムの半透明UIパネル、丸みのある読みやすいフォント。森=グリーン、海=ブルー、都市=ネオンパープル、宇宙=ディープブルー×ゴールドの配色で統一。

【BGM仕様】各テーマ専用のアンビエント曲を1曲ずつ用意（BPM60〜70、4/4拍子）。パッドコード（Ⅰ-Ⅴ-vi-IV進行）とロングトーンのベース、まばらなベル/木管系メロディを重ね、8小節をA(4小節)/B(4小節)で構成しループ。4小節目末尾に微細な鈴やノイズフィルを配置し単調さを回避。Web Audio APIでAudioContext.currentTime基準の先読みスケジューリングを行い、BGM/SEを別ゲインノードで音量管理、ミュートボタンと停止時のnode.disconnect()による解放を実装する。

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

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