ReactionWave - 会議・研修のリアルタイム空気感可視化ツール

【目的・ターゲット】オンライン会議、社内研修、講演、株主説明会などで「今、参加者がどう感じているか」を進行役がリアルタイムに把握できないという課題を解決する業務支援アプリ。管理職・研修担当者・講師・イベント主催者を主対象とし、登録不要・匿名参加で誰でもすぐ使える公開ツールとして提供する。

【主要機能】
1. ルーム作成:会議タイトル・想定時間を入力するとルームコード(6桁)とQRコードが発行される。
2. ホスト画面:参加者から送られる5種の反応(😊納得/😐普通/😟困惑/💡ひらめき/❓質問あり)をリアルタイム積層エリアグラフで可視化し、直近の匿名一言コメントを流れるティッカーで表示。
3. 参加者画面:スマホでURLにアクセスし、ワンタップで反応送信＋140字以内の匿名コメント投稿。送信後は自分の反応が波にすぐ反映される演出。
4. ポーリング更新(2秒間隔のAjax)でサーバー負荷を抑えつつ準リアルタイムを実現。
5. セッション終了後のレポート:感情比率の円グラフ、盛り上がり/困惑ピーク時刻、コメントログ、CSV/PNG保存、印刷用レイアウト。
6. 過去セッション履歴の一覧・再閲覧(ホストトークンで管理)。

【画面構成】
・トップ:ルーム作成フォーム＋使い方説明
・ホストダッシュボード:QR/コード表示、リアルタイムグラフ、コメントティッカー、終了ボタン
・参加者ページ:大きな反応ボタン5種＋コメント欄(サンクス演出付き)
・レポートページ:サマリーカード、タイムライングラフ、円グラフ、コメント一覧、共有URL

【データ構造(MySQL)】
- rooms(id, code, title, host_token, planned_minutes, status, created_at, ended_at)
- reactions(id, room_id, emoji_type, elapsed_seconds, created_at)
- comments(id, room_id, body, elapsed_seconds, created_at)
実装はPHPでAjaxポーリングAPI(reaction送信/取得)を提供し、素のJS(setInterval)でグラフをCanvas描画する。

【デザイン方向性】ネオンダーク基調に、感情ごとに柔らかいパステル〜ネオンのアクセントカラー(黄・青・紫・緑・橙)を割り当て、丸みのあるフラットイラスト調の表情アイコンで統一。ホスト画面は情報密度が高いダッシュボード風、参加者画面は大きなタップ領域中心のシンプルUIでスマホ操作に最適化する。音楽は業務効率が主目的のため追加しない。

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

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