BeatCraft ドラムマシン＆ビートメーカー - ブラウザで作るリズムトラック

## 1. アプリの目的・ターゲットユーザー
ブラウザだけで本格的なドラムビートを打ち込み・再生・保存・共有できる無料ビートメーカー。音楽初心者から中級者まで、DAWソフトなしに気軽にリズムトラックを作りたいユーザーが対象。スマホでも操作できるタッチ対応UIで、電車の中や休憩中にさっと使える。

## 2. 主要機能
- **ステップシーケンサー**: 16ステップ × 8トラック（キック・スネア・ハイハット・クラップ・タム・シンバル・パーカッション・ユーザー定義）のグリッドボタンをON/OFFしてビートを打ち込む
- **内製音源再生**: Web Audio API で生成したシンセドラム音（外部ファイル不要）を各トラックに割り当て。3ジャンル（HipHop／EDM／Rock）のプリセット音色セットを選択可能
- **BPM・スウィング調整**: BPM 40〜200のスライダー＋スウィング量(0〜50%)のスライダーでグルーヴを調整
- **パターン管理**: 最大8パターンを保存してパターンチェーン再生（A→B→A→Cなど順番指定）
- **プリセットビート**: HipHop・EDM・Bossa Nova・ロック・レゲエの5ジャンル×各3種の計15プリセットを内蔵し、ワンクリックで読み込んで改変できる
- **共有機能**: 現在のビートをURL化（ステップ状態をBase64エンコードしてクエリパラメータに格納）してコピー＆共有

## 3. 画面構成
### メイン画面（1ページ完結）
- **ヘッダー**: アプリロゴ、ジャンルプリセット選択ドロップダウン、URLシェアボタン
- **コントロールバー**: 再生/停止ボタン、BPMスライダー＋数値表示、スウィングスライダー、マスターボリューム
- **シーケンサーグリッド**: 縦8トラック × 横16ステップのボタングリッド。左端にトラック名と音色選択アイコン、各ボタンは打ち込みON(明るい色)／OFF(暗い色)をトグル。現在再生中のステップ列をハイライト
- **パターンバンク**: P1〜P8の8スロットをボタンで切り替え。「コピー」「クリア」ボタン付き
- **パターンチェーンエディタ**: ドラッグ＆ドロップまたは番号クリックでパターンの再生順を設定するミニUI（最大16ステップのチェーン）
- **トラック設定パネル（各トラック左クリックで展開）**: 音色選択（HipHop/EDM/Rockの音色から選択）、音量スライダー、パン（左右定位）スライダー、ミュート/ソロボタン
- **フッター**: キーボードショートカット一覧（Space:再生停止 / 1〜8:パターン切替）

## 4. データ構造
### ローカルストレージ（DB不要、完全クライアントサイド）
```
beats_save: {
patterns: [
{
id: 1,
name: "Pattern A",
bpm: 120,
swing: 10,
tracks: [
{ name: "Kick", sound: "kick_hiphop", volume: 80, pan: 0, steps: [1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0] },
{ name: "Snare", sound: "snare_hiphop", volume: 75, pan: 0, steps: [0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0] },
... // 8トラック分
]
},
... // 8パターン分
],
chain: [1,2,1,3], // パターンチェーン順
activePattern: 1
}
```
- DBサーバー不要。全データはlocalStorageに保存。URLシェアはBase64エンコードのクエリパラメータで完結
- PHPは静的ページ配信のみ使用（index.phpでHTMLを返すだけ）

## 5. デザインの方向性
- **テーマカラー**: ダークモード基調（背景 #0d0d0d〜#1a1a2e）、アクセントに電子音楽らしいネオングリーン(#39ff14)とパープル(#7c3aed)
- **グリッドボタン**: ONセルは各トラックごとに異なるネオンカラー（キック=オレンジ、スネア=シアン、ハイハット=黄色など）、OFFセルはグレー(#2a2a2a)
- **再生中ハイライト**: 現在のステップ列全体に白い縦線が走るアニメーション
- **フォント**: 英語ラベルはモノスペース系（JetBrains Mono or Courier相当のシステムフォント）
- **スマホ対応**: グリッドは横スクロール可能にし、各セルは最低44×44pxのタップ領域を確保
- **アニメーション**: 再生中はヘッダーのロゴが音に合わせて小刻みにパルスするCSS animationを付与