ShiftMate - シフト表自動作成メーカー

## 1. アプリの目的・ターゲットユーザー
小規模な飲食店・小売店・アルバイト先のシフト管理担当者（店長・バイトリーダー）が、スタッフの希望休・出勤可能時間帯を入力するだけで月間シフト表を自動生成できるWebアプリ。Excelや手書きに頼らず、誰でも5分でシフト表を完成させることを目指す。

## 2. 主要機能
- **スタッフ登録**: 名前・雇用区分（社員/パート/アルバイト）・1週間あたりの希望勤務日数・希望勤務時間帯（早番/中番/遅番）を登録（最大20名）
- **希望休・シフト希望入力**: カレンダーUIでスタッフごとに「休み希望日」「出勤可能日」「希望シフト帯」をセル入力
- **自動シフト生成**: 登録条件をもとに1ヶ月分のシフト表を自動割り当て。1日の必要人数（時間帯別）を設定し、最低限カバーできるよう調整
- **手動修正モード**: 生成されたシフト表のセルをクリックしてドロップダウンで担当者を変更。「人数不足」「連続出勤超過」などの警告をリアルタイム表示
- **印刷・PNG出力**: 完成したシフト表をA4横向きでブラウザ印刷 or PNG画像としてダウンロード
- **ローカル保存**: LocalStorageにスタッフ情報と直近3ヶ月分のシフトデータを保存。DBなし・登録不要で即使用開始

## 3. 画面構成
### ① トップページ / ダッシュボード
- 「スタッフを登録する」「シフトを作る」の2大CTAボタン
- 直近作成済みシフト一覧（月名・ステータス: 作成中/完成）カード

### ② スタッフ管理画面
- スタッフ一覧テーブル（名前・区分・週希望日数・希望時間帯・編集/削除ボタン）
- 「スタッフ追加」モーダル: フォームで各項目入力

### ③ 希望シフト入力画面
- 対象年月を選択するプルダウン
- スタッフ×日付のグリッドテーブル。セルをクリックすると「○（出勤可）」「△（希望）」「×（休み希望）」を3択でトグル
- 右側パネルに日別の必要人数設定（早番/中番/遅番それぞれ何名必要か）

### ④ シフト表表示・編集画面
- 生成ボタン押下で自動割り当てを実行し、結果をカレンダーグリッドで表示
- セルに担当者名を表示。クリックすると登録スタッフのドロップダウンに変更可能
- 上部にアラートバー（人数不足の日・連続7日以上出勤のスタッフを赤ハイライト）
- 「印刷」「PNG保存」「保存して終了」ボタン

## 4. データ構造（LocalStorage）
```json
{
"staffList": [
{ "id": "s1", "name": "山田太郎", "type": "アルバイト", "weeklyDays": 3, "preferredShift": "早番" }
],
"shiftMonths": [
{
"yearMonth": "2025-07",
"requirements": { "1": { "early": 2, "mid": 2, "late": 1 } },
"wishes": { "s1": { "1": "○", "2": "×" } },
"result": { "1": { "early": ["s1", "s2"], "mid": ["s3"], "late": ["s4"] } }
}
]
}
```

## 5. デザインの方向性
- カラー: メインカラーはブルーグリーン (#2A9D8F)、アクセントはオレンジ (#E9C46A)、背景は白〜薄グレー
- フォント: 日本語重視でNoto Sans JP使用
- 雰囲気: 業務ツールらしくすっきり清潔感のあるUI。ただしアイコンや色分けで視認性を高め親しみやすくする
- グリッドは横スクロール対応（スマホでは1週ずつ表示切替も検討）
- シフト帯は色分け（早番=水色・中番=黄緑・遅番=オレンジ）でひと目で把握できるよう配色
- 実装規模: HTML/CSS/JS 単一ディレクトリ構成、PHP不要（全ロジックをJS側で完結）。DB不使用でLocakStorageのみ