DeadlineBoard - チーム共有タスク期限カウントダウン管理ボード

## 1. アプリの目的・ターゲットユーザー

プロジェクトの締め切り・マイルストーン・提出期限を「残り時間」として視覚的に把握し、チームや個人でリアルタイムに共有できる期限特化型タスクボード。

**ターゲット:** フリーランサー・中小企業のプロジェクト担当者・受発注が多い制作会社・イベント運営チーム・学生グループ。「Googleカレンダーでは期限の切迫度が見えにくい」「タスク管理ツールが高機能すぎて使いこなせない」という層を狙う。

---

## 2. 主要機能

- **カウントダウンカード:** タスク名・担当者・期限日時を登録すると、残り日数・時間・分をリアルタイムにカード形式で表示。残り3日以内は黄色、残り24時間以内は赤でカードが点滅ハイライト。
- **ボード共有URL発行:** ボードごとにランダムなURLスラッグを生成し、そのURLを知っている人全員が閲覧・編集できる（パスワード保護オプション付き）。登録不要でチーム共有が可能。
- **ステータス管理:** 「未着手 / 進行中 / レビュー待ち / 完了」の4ステータスをワンクリック切替。完了済みカードは折りたたんでアーカイブ表示。
- **優先度ソート & フィルター:** 残り時間順・担当者別・ステータス別で並び替え・絞り込みが可能。
- **リマインダーメモ:** 各カードにメモ欄（最大300文字）を追加でき、URLや注意事項を記録できる。
- **完了率ゲージ:** ボード上部に全タスクの完了率をプログレスバーで表示。締め切りを過ぎた未完了タスク数も赤バッジで警告。

---

## 3. 画面構成

### トップページ（/）
- キャッチコピーと「新しいボードを作成する」ボタン
- 「既存のボードを開く（スラッグ入力）」テキストフィールド
- 機能紹介の3ステップ説明（作成→共有→管理）

### ボード画面（/board/{slug}）
- **ヘッダー:** ボード名・共有URLコピーボタン・パスワード設定ボタン・完了率ゲージ
- **タスク追加フォーム（常時表示）:** タスク名・担当者名・期限日時・優先度（高中低）・メモを入力してEnterまたはボタンで即追加
- **カードグリッド:** PC=3カラム、タブレット=2カラム、スマホ=1カラム
- 各カード: タスク名（大）・担当者アイコン（イニシャル丸）・残り時間カウントダウン（日時分秒）・ステータスバッジ・優先度ドット・メモ折り畳み・削除ボタン
- 残り時間は1秒ごとにJS更新
- **フィルターバー:** ステータス・担当者・ソート順のプルダウン
- **アーカイブセクション:** 完了タスクを折りたたみ表示

### パスワード入力モーダル
- パスワード保護ボードにアクセスした際に表示

---

## 4. データ構造（MySQLテーブル概要）

```sql
-- ボードテーブル
boards (
id INT AUTO_INCREMENT PRIMARY KEY,
slug VARCHAR(16) UNIQUE NOT NULL, -- ランダム英数字8〜12桁
name VARCHAR(100) NOT NULL,
password VARCHAR(255) DEFAULT NULL, -- bcryptハッシュ、NULLなら公開
created_at DATETIME NOT NULL,
updated_at DATETIME NOT NULL
)

-- タスクテーブル
tasks (
id INT AUTO_INCREMENT PRIMARY KEY,
board_id INT NOT NULL REFERENCES boards(id) ON DELETE CASCADE,
title VARCHAR(200) NOT NULL,
assignee VARCHAR(50) DEFAULT '',
deadline DATETIME NOT NULL,
priority TINYINT DEFAULT 1, -- 1=低 2=中 3=高
status TINYINT DEFAULT 0, -- 0=未着手 1=進行中 2=レビュー待ち 3=完了
memo VARCHAR(300) DEFAULT '',
created_at DATETIME NOT NULL,
sort_order INT DEFAULT 0
)
```

サーバーサイドはPHPのシンプルなREST風エンドポイント（JSON返却）を用意。ボード取得・タスクCRUDをAjaxで処理。セッション不要・ログイン機構なし。古いボード（180日間タスク更新なし）は自動削除対象フラグを立てるcronを想定。

---

## 5. デザインの方向性

- **カラー:** ダークネイビー（#1a1f2e）背景 × カードはチャコール（#252b3b）× アクセントカラーは電光ブルー（#3b82f6）
- **フォント:** 見出しはメイリオ/Noto Sans、カウントダウン数字はmonospace系（Roboto Mono）で大きく表示
- **緊急度の色分け:** 余裕あり=グリーンバッジ、3日以内=アンバー、24時間以内=レッド点滅
- **アニメーション:** カード追加時のスライドイン、カウントダウン更新時の数字フリップ風トランジション（CSSのみ）
- **モダンだが無駄のないUI:** 余白を広めに取り、カード間の視認性を確保。ビジネスツールとして落ち着きがあるが、デジタル時計風のカウントダウン表示でスタイリッシュに仕上げる。
- **スマホ優先:** ハンバーガーメニューなし・シングルカラムで上から下に流れる構成、タップしやすいボタンサイズ（44px以上）