# Misao 院長 Dashboard — 0 ベース UX/UI 再設計

> Status: **設計のみ (実装しない)** — 2026-04-27
> Author: gyoza (発注: Kosuke / 伊藤)
> Scope: 既存 dashboard (`misao-task.pages.dev`) を一旦白紙にして、ユーザー視点から要件を洗い直し、UX / UI / IA / 実装方針を再提案する。**実装も deploy も行わない**。
> 対象置き換え: `pages/louis-kano/task-dashboard.html` (~2200 行 monolithic)

---

## 🎯 事業目的 (Kosuke 確定 2026-04-27)

> **県内および商圏内で SEO / AIEO / MEO 圧倒的 1 位のコンテンツサイトになる**
> ただし「正確な情報発信」を絶対条件として。

### 戦略階層

```
[最上位ゴール]
県内・商圏内 SEO/AIEO/MEO 1位 (岐阜市 + 周辺、産婦人科領域)
    ↓
[必要条件]
正確な医療情報 + 医師による監修 = E-E-A-T (Experience, Expertise, Authoritativeness, Trust)
    ↓
[手段]
AI 生成 draft → 専門医が監修 → WP draft → 院長承認 → publish → AIEO で「権威ある source」として認識
    ↓
[本 dashboard の役割]
監修フローのボトルネックを解消し、医師の監修負荷を最小化する
```

### 院長 dashboard が果たす役割
- 医師が **監修コメント** を残すことで AIEO (AI Engine Optimization) で評価される
- 監修者情報 (医師名 / 専門 / コメント) を構造化データ化 → Google / AI が「権威ある source」と認識
- 結果として SEO / MEO 順位向上、商圏での 1 位獲得

### 「監修者は誰?」の答え (公式サイトから取得済、2026-04-27 確認)

公式 https://www.misao-ladies.jp/doctors/ で **常勤医 10 名** が公開済:

| # | 役職 | 氏名 | 適合する記事カテゴリ (推定) |
|---|---|---|---|
| 1 | **病院長** | **高野 恭平** | 全領域の最終監修責任 |
| 2 | 副院長 | 森下 重雄 | 産婦人科一般 |
| 3 | **生殖医療統括部長** | **松原 寛和** | **不妊治療 / AMH 検査 / 体外受精** ← F-1〜F-3 の最適 supervisor |
| 4 | 産婦人科 | 操 良 | 産婦人科一般 |
| 5 | **ルイかのう院 院長** | **森 美奈子** | ルイかのう院記事 (`louis-kano/` 配下) |
| 6 | 産婦人科 | 鈴木 秀文 | 胎児スクリーニング (data 確認済) |
| 7 | 産婦人科 | 操 暁子 | 産婦人科一般 |
| 8 | 産婦人科 | 伊藤 敬佑 | 産婦人科一般 |
| 9 | 泌尿器科 (男性不妊) | 増田 裕 | 男性不妊記事 (article-male-infertility) |
| 10 | 小児科 | 矢嶋 茂裕 | 小児領域 |

→ **記事カテゴリごとに最適な医師が異なる**。dashboard で「医師選択 dropdown」が必要。
→ **医師プロフィール master を院長が登録する設計は不要** (公式サイトに既にある、それを fetch する)。

---

## ⚠ Source of Truth — 何に基づいて書いたか (2026-04-27 検証 / 訂正)

### 事実 (確認済、出典あり)
| 項目 | 値 | 出典 |
|---|---|---|
| 事業目的 | SEO/AIEO/MEO 1 位 (商圏内) | Kosuke 確定 2026-04-27 |
| プロジェクト名 | 操レディスホスピタル + ルイかのう院 (分院) | `~/Projects/misao-delivery/CLAUDE.md` |
| 本院公式 URL | https://www.misao-ladies.jp/ | `MISAO_WP_BASE_URL` |
| 医師一覧 page | https://www.misao-ladies.jp/doctors/ | 公式サイト fetch (2026-04-27) |
| 常勤医 10 名 | 上 §「事業目的」の表 参照 | 同上 |
| **本院院長 (病院長)** | **高野 恭平** | 公式 doctors page |
| ルイかのう院 院長 | **森 美奈子** | 公式 doctors page + brand-identity.md |
| 生殖医療統括部長 | **松原 寛和** | 公式 doctors page |
| F-1 task | TASK-CONTENT-F-1-20260423 / amh-check-guide / 本院 articles 配下 | `data/doctor-review-tasks/...` |
| F-1 院長 approve 日時 | 2026-04-26T02:55Z | 同 JSON `doctor_action_log` |

### 訂正 (前版の誤り)
- ❌ **前版 §1.1 で「主ペルソナ: 院長 (森美奈子)」と書いた** → これは **ルイかのう院 (分院) の院長**、本院 (操レディス) 院長は **高野 恭平先生**
- ❌ supervisor master を「院長 1 名のプロファイル」として設計していた → 実際は **常勤医 10 名 + 記事カテゴリで担当が変わる**
- ❌ 医師情報を院長が dashboard に手入力する設計 → 公式サイト doctors page に既にある、**fetch すれば済む**
- ❌ 戦略目的 (SEO/AIEO/MEO 1 位) を doc に明記していなかった → 今追加

### Kosuke へ確認すべき項目 (残)
1. 各記事カテゴリの **監修担当割当ルール** (本表は推定、Kosuke 確認/修正お願い)
2. 院長 dashboard の主視聴者は **誰か**
   - 案 A: 院長 (高野先生) のみ
   - 案 B: 各監修担当医師 (10 名それぞれログイン)
   - 案 C: gyoza/operator が代理入力
3. AIEO 評価で重要な構造化データ要素 (JSON-LD `Person` schema 等) を採用するか
4. 「3 秒で判断」目標と院長の体感の合意

---

## 0. なぜ 0 ベースが必要か (現状の総括)

### 0.1 これまで起きていたこと
過去 1 〜 2 週間、ユーザーの個別指示に対して逐次対応してきた:
- 「Slack 廃止だから Discord に」 → 文言修正
- 「dashboard が接点」 → リンク修正
- 「supervisor 入力 UI を追加」 → form 1 つ追加
- 「公開済みは見たくない」 → 折り畳み追加
- 「設定 modal が欲しい」 → modal 1 つ追加

→ **結果**: 機能が積み上がっただけで、**全体構造はそのまま**。
- ヘッダーに「監修者プロファイル: 未登録」が突然出る → 文脈不在
- summary cards が 5 個フラットに並ぶ → 重要度が見えない
- カテゴリタブ + filter + 横断ビュー + 公開済み toggle + 設定 modal → **画面要素が多すぎる**
- 院長は「3 秒で何をすべきか」が分からない (= UX 失敗)

### 0.2 根本問題
- **「誰が何のために使うか」を再定義していない**
- 院長 / operator / harness の 3 主体の役割境界が曖昧
- 機能を足し算してきた結果、画面に「使わない情報」が大量
- 「3 秒で判断」ゴールが守られていない

---

## 1. ユーザーとペルソナ

### 1.1 主ペルソナ: 監修医 (常勤医 10 名から記事カテゴリ別に選任)

| 項目 | 値 | 出典 |
|---|---|---|
| 視聴者 | 監修担当医師 (10 名のうち、その記事の監修を担当する医師) | 公式 doctors page |
| 病院長 / 最終責任者 | **高野 恭平 先生** | 公式 doctors page |
| 不妊治療系の主担当 (推定) | 松原 寛和先生 (生殖医療統括部長) | 同上 |
| ルイかのう院記事の主担当 | 森 美奈子先生 (ルイかのう院 院長) | 同上 |
| 男性不妊系 | 増田 裕先生 (泌尿器科) | 同上 |
| 利用頻度 | 【Kosuke 確認待ち】 推測: 担当医師により異なる、週 1 回程度? | 出典なし |
| 利用デバイス | 【Kosuke 確認待ち】 推測: PC 主、診療合間にスマホ補助? | 出典なし |
| 最も知りたいこと | 推測: 「自分の専門で監修すべき記事 / 内容が医学的に正確か」 | 業界一般推測 |
| 最もしたくないこと | 推測: 自分の専門外の記事も全部見る / 何度も同じ情報を入力 | 業界一般推測 |

→ **dashboard 設計の前提**:
- 「医師全員が見るリスト」ではなく、**「自分の担当記事だけが見える」 personalized view** が望ましい (将来的に)
- 当面は 10 名共通の dashboard で運用、各 card に「監修依頼先医師」 label を付ける

### 1.2 監修先割当ルール (推定、Kosuke 確認待ち)

| 記事カテゴリ | 主監修医 | 副監修医 (代理) |
|---|---|---|
| 不妊治療 / AMH / 体外受精 / 採卵 (`articles/`、`fertility/`) | **松原 寛和** (生殖医療統括部長) | 高野 恭平 (病院長) |
| 産婦人科一般 / PMS / HRT (`articles/g-*`) | 操 良 / 操 暁子 / 伊藤 敬佑 / 鈴木 秀文 のいずれか | 高野 恭平 |
| ルイかのう院記事 (`louis-kano/`) | **森 美奈子** (ルイかのう院 院長) | 高野 恭平 |
| 男性不妊 (`articles/article-male-infertility`) | **増田 裕** (泌尿器科) | 松原 寛和 |
| 胎児スクリーニング | 鈴木 秀文 | 松原 寛和 |
| 小児領域 | 矢嶋 茂裕 (小児科) | 高野 恭平 |
| 全般最終承認 | **高野 恭平** (病院長) | — |

→ Kosuke がこの割当を確認 / 修正してから dashboard に組み込む。

### 1.2 副ペルソナ: operator (伊藤 / Kosuke)
| 項目 | 値 |
|---|---|
| 役割 | コンテンツ運営、harness 管理 |
| 利用頻度 | 毎日 |
| 利用デバイス | PC 主、スマホ補助 |
| 知りたいこと | 「制作中の進捗、院長承認の状況、publish タイミング」 |
| 同 dashboard への関わり | 監視のみ (操作は別 dashboard `itochaso-gundam-dashboard` で実施) |

### 1.3 副ペルソナ: harness (gyoza 自動)
| 項目 | 値 |
|---|---|
| 役割 | AI 記事生成 / WP draft 投稿 / supervisor 反映 / publish 自動化 |
| 関わり | **dashboard に状態を書き込む側**、画面操作はしない |

---

## 2. 「3 秒で判断」のジョブ分解

院長の操作を **時系列ジョブ** に分解:

```
[ジョブ 1] dashboard を開く
  3 秒以内: 「今、自分が見るべきものはあるか？」が分かる

[ジョブ 2] 確認待ちの記事を選ぶ
  10 秒以内: タイトル / カテゴリ / 期日 / preview の有無を判断

[ジョブ 3] preview を読む
  数分: WP preview を別タブで読む (dashboard を離れる)

[ジョブ 4] 判断を返す
  30 秒: 承認 or 修正依頼 or 監修コメント入力

[ジョブ 5] 完了状態を確認
  5 秒: 「自分は今やるべきことを全部やったか？」を確認

[ジョブ 6] 一旦離脱
```

→ **dashboard はジョブ 1, 2, 4, 5 を支援する**ツール。
→ **ジョブ 3 は WP preview に任せる** (dashboard で記事本文を見せる必要なし)。

---

## 3. 機能要件 (must / should / could)

### 3.1 must-have (これが無いと院長 dashboard として成立しない)

#### 3.1.a 院長 自身の判断機能
| ID | 機能 |
|---|---|
| M1 | 「自分が今判断すべき記事 N 件」を 3 秒で見せる |
| M2 | 各記事の preview 導線 (WP preview URL を新タブで開ける) |
| M3 | 承認ボタン |
| M4 | 修正依頼ボタン (理由を 1 段階で入力) |
| M5 | 監修者選択 (常勤医 10 名から記事ごとに dropdown) — 公式 doctors page 由来 |
| M6 | 各記事ごとに監修コメント + 日時を入力 (publish 必須) |
| M7 | 完了後の「✅ 全部終わった」状態を明示 |
| M8 | mobile (375px) で破綻しない |

#### 3.1.b 院長が hub として **院内に仕事を振る** 機能 (2026-04-27 追加)
| ID | 機能 |
|---|---|
| M9 | **監修依頼の振り分け**: 院長が記事を見て「これは松原先生に監修して」と他医師に assign できる |
| M10 | **新規記事作成依頼の起票**: 院長から「○○ の記事を作ってほしい」を新 task として登録 |
| M11 | **既存記事の修正依頼の起票**: 院長から「○○ の記事のここを直して」を修正 task として登録 |
| M12 | **具体箇所の指摘**: 「この段落の○○という記述を△△に変えて」のような **箇所限定コメント**で修正依頼 (記事本文の編集はしない、コメントだけ残す) |

→ M9-M12 により **院長 dashboard が単なる「自分が承認するだけ」ではなく、院内 work distribution hub になる**。

#### 3.1.c 監修者選択の仕様 (M5 詳細)
- dropdown は **常勤医 10 名** (公式 doctors page から fetch)
- 記事カテゴリにより default が変わる (§1.2 監修先割当ルール)
- 院長は default を上書き可能 (例: F-1 default=松原 寛和、ただし院長判断で他医師に変更可)
- AIEO 構造化データ (`schema.org/Person`) を自動付与

### 3.2 should-have (あると UX が良くなる)
| ID | 機能 |
|---|---|
| S1 | 過去 7 日の自分の活動履歴 (確認した記事一覧) |
| S2 | 確認待ち件数 0 のときの「✨ 全部完了しています」表示 |
| S3 | 期日が近い記事の優先表示 |
| S4 | 修正依頼の reasons template (「文言調整」「数値再確認」「画像差し替え」等) |

### 3.3 could-have (将来的に検討)
| ID | 機能 |
|---|---|
| C1 | LINE 通知連携 (新着確認待ち、3 件以上で通知) |
| C2 | 監修コメントテンプレート保存 (よく使う表現を再利用) |
| C3 | 制作中の進捗 (operator 視点) を院長にも一部開示 |
| C4 | 公開済み記事の検索 (タイトル / slug) |
| **C5** | **画像自動はめ込み** (既存 image inventory 676 枚を使う、後述 §3.5) |
| C6 | 監修者の負荷可視化 (どの医師に多く監修依頼が集中しているか) |
| C7 | 「過去の自分の監修コメント」を参考表示 (再利用しやすく) |

### 3.4 won't-have (今回は実装しない、または永続的に不要)
| ID | 機能 | 注 |
|---|---|---|
| W1 | 院長が記事本文を dashboard 内で **直接編集** する (HTML エディタ機能) | WP の役目。**ただし「具体箇所を指摘して修正依頼」(M12) は OK** |
| W2 | 院長が他の operator / 編集者を管理する (= 別 admin tool の役目) | |
| W3 | コメント chat / DM 機能 (= Discord/LINE の役目) | |
| W4 | analytics / アクセス数 / SEO 順位 (= operator 用 dashboard の役目) | |

→ W1 は「**直接編集**」だけが won't、修正依頼コメントは must-have (M12)。

### 3.5 画像 inventory 連携 (C5、将来実装)

#### 既存資産 (確認済 2026-04-27)
- ファイル: `~/Projects/misao-delivery/data/hospital/images/inventory/image-inventory.json`
- 総数: **676 枚**
- 各画像のメタデータ: `category` / `subcategory` / `description` / `alt_text_ja` / `people` / `people_count` / `identifiable` / `quality`
- AI 生成済 (model field 付与、2026-03-05 generated)

#### 想定フロー (C5、将来)
1. AI 生成 draft の本文を解析 (どの段落で何の画像が必要か推定)
2. image-inventory から最適候補を **複数提示** (人物識別 / 品質 / カテゴリ matching)
3. 院長 dashboard 内で「この画像で良いか」 院長が確認 (1 click)
4. 承認後、harness が WP draft の HTML に `<img>` を埋め込む
5. alt_text_ja を自動付与 (AIEO 評価向上)

→ **676 枚の inventory が「ある」のは確認済**。将来 C5 で活用可。

---

## 4. 非機能要件

| 観点 | 要求値 |
|---|---|
| 初回ロード | 2 秒以内 (Cloudflare Pages CDN) |
| インタラクション応答 | 100ms 以内 (localStorage) |
| Supabase 経由保存 | 3 秒以内、失敗時 retry 1 回 |
| mobile (375px) | 横スクロール無し、ボタン押しやすい (44x44 タッチターゲット) |
| offline | localStorage で過去状態を表示 (Supabase 失敗でも UI は動く) |
| アクセシビリティ | WCAG AA 相当 (色のみで情報を伝えない、focus ring) |
| 安全 | secret 露出なし、F-1 publish flow には触らない |

---

## 5. 情報アーキテクチャ (IA)

### 5.1 全体構造 (3 階層、shallow に保つ)

```
[Home]
  ├─ 🔥 今すぐ判断 (Zone A、最大表示)
  │    ├─ 確認待ち card 1
  │    ├─ 確認待ち card 2
  │    └─ ...
  │
  ├─ 📝 公開前最終チェック (Zone B、表示)
  │    └─ 監修コメント入力 card
  │
  └─ 📋 過去の活動 (Zone C、折り畳み)
       └─ 直近 7 日に自分が確認した記事

[Settings]
  ├─ 🩺 監修者プロファイル
  ├─ 🔔 通知設定 (将来)
  └─ ❓ ヘルプ
```

### 5.2 採用しない要素 (現状から削除)
- ❌ 5 個の summary cards (合計 / 確認待ち / 承認 / 修正 / 公開) フラット並び
- ❌ カテゴリタブ (本院 / LK / 不妊治療 / コラム)
- ❌ filter ボタン群 (全て / 最近更新 / 確認待ち / 修正依頼)
- ❌ 横断ビュー toggle
- ❌ 公開済み toggle
- ❌ doctor-review-queue と SECTIONS の二重管理 (1 つに統合)
- ❌ 不要な情報密度 (院長が見ない情報すべて)

### 5.3 院長専用の情報原則
**「院長が判断するために必要な情報だけを画面に出す」**

| 情報 | 院長は見る? | 表示 |
|---|---|---|
| 自分が判断すべき記事 | ✅ Yes | Zone A、最大 |
| preview URL | ✅ Yes | 各 card にボタン |
| 期日 / 緊急度 | ✅ Yes (あれば) | card に badge |
| 自分が過去に承認した記事 | △ Sometimes | Zone C (折り畳み) |
| 全体の総数 | ❌ No | 表示しない |
| operator が今何をしているか | ❌ No | operator dashboard で |
| カテゴリ別件数 | ❌ No | 表示しない (カテゴリは card 内に label) |
| AI 生成 / 手動 の区別 | ❌ No (内部事情) | 表示しない |
| WP の post_id | ❌ No (内部事情) | 表示しない |
| state machine の状態 | ❌ No (内部事情) | 表示しない |

→ **operator 関連情報は院長 dashboard から完全排除**。operator は別 dashboard (`itochaso-gundam-dashboard`) で見る。

---

## 6. 画面遷移

### 6.1 主要遷移 (院長視点)

```
[初回] Home (profile 未登録)
   ↓ 大きな promotion banner: 「監修者プロファイルを登録してください」
   ↓ click
[Settings modal] profile 登録
   ↓ 保存
[Home] (profile 登録済) ← Zone A に確認待ち N 件
   ↓ 1 件 click
[card 展開 / 別タブ preview]
   ↓ 内容確認後 dashboard に戻る
[Home] 監修コメント入力 (textarea + datetime)
   ↓ [監修して送信]
[Home] その card は ✅ 完了表示に置換
   ↓ 全件完了
[Home] ✨ 全部完了しています (Zone A 空)
   ↓ 離脱
```

### 6.2 修正依頼フロー (副線)

```
[Home] 確認待ち card
   ↓ [✏ 修正してほしい]
[card 内に inline form] 修正理由を 1 textarea で入力
   ↓ [送信]
[Home] その card が「修正依頼済み」表示に置換
```

→ 修正依頼後の operator → harness の処理は院長には見せない。

---

## 7. UI コンポーネント (新設計)

### 7.1 Header (シンプル)

```
┌──────────────────────────────────────────────────┐
│ 操レディスホスピタル                       ⚙️ 設定 │
│ 院長 dashboard                                    │
│                                                   │
│ 監修者: 森 美奈子 / 院長 (or "未登録")           │ ← 控えめ
└──────────────────────────────────────────────────┘
```

### 7.2 Zone A: 🔥 今すぐ判断 (最大表示、center stage)

#### 7.2.1 件数 0 のとき
```
┌──────────────────────────────────────────────────┐
│                                                   │
│            ✨ 全部完了しています                  │
│         確認待ちの記事はありません                 │
│                                                   │
│        次の依頼が来たら通知します                  │
│                                                   │
└──────────────────────────────────────────────────┘
```

#### 7.2.2 件数 1 のとき (大カード 1 つ)
```
┌──────────────────────────────────────────────────┐
│ 🔥 1 件、ご確認をお願いします                     │
├──────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────┐ │
│ │ AMH 検査とは｜年齢別基準値と卵巣年齢の読み方   │ │
│ │ カテゴリ: 不妊治療  / 受信: 2 日前              │ │
│ │                                                 │ │
│ │ [ 👁 内容を確認 (別タブ)]                       │ │
│ │                                                 │ │
│ │ 監修コメント (この記事への一言):                  │ │
│ │ [ ___________________________ ]                 │ │
│ │ 監修日時: [今] (default)                        │ │
│ │                                                 │ │
│ │ [ ✅ 監修して送信 ]   [ ✏ 修正してほしい]       │ │
│ └─────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────┘
```

#### 7.2.3 件数 2+ のとき (top 1 大、残り compact)
```
┌──────────────────────────────────────────────────┐
│ 🔥 3 件、ご確認をお願いします                     │
├──────────────────────────────────────────────────┤
│ ┌─ #1 (大カード) ─────────────────────────────┐ │
│ │ AMH 検査ガイド                                  │ │
│ │ ... (上記と同じ)                                │ │
│ └─────────────────────────────────────────────┘ │
│                                                   │
│ ┌─ #2 (compact) ─────────────────────────────┐ │
│ │ 体外受精の費用 2026年版          [ 開く ▼ ]    │ │
│ └─────────────────────────────────────────────┘ │
│ ┌─ #3 (compact) ─────────────────────────────┐ │
│ │ 採卵 当日の流れ                  [ 開く ▼ ]    │ │
│ └─────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────┘
```

→ 院長は **#1 から順に処理**、終わると次が大カードに昇格。

### 7.3 Zone B: 📝 公開前最終チェック (中サイズ、しかし通常は空)

#### 7.3.1 状態説明
- 院長が approve 済 + supervisor 提出済 → harness が HTML 反映 + WP REST update
- このフェーズは **harness が自動で進める** (院長は関わらない)
- ただし harness が失敗した場合の **可視化** だけ Zone B で見せる

#### 7.3.2 表示
```
┌──────────────────────────────────────────────────┐
│ 📝 反映処理中  (harness が自動処理中、院長操作不要)│
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ AMH 検査ガイド  ... ⏳ 反映中 (1 分前)             │
└──────────────────────────────────────────────────┘
```

または **完全に隠す** (院長視点で見る必要なし、operator dashboard に任せる)。

### 7.4 Zone C: 📋 過去の活動 (折り畳み、default 閉)

```
┌──────────────────────────────────────────────────┐
│ ▼ 過去 7 日に確認した記事 (5 件)                  │
└──────────────────────────────────────────────────┘
```

クリックで展開:
```
✅ NIPT ガイド (4/26 承認)
✅ ブライダルチェック (4/24 承認)
✏ マタニティクラス (4/22 修正依頼)
...
```

### 7.5 Settings modal (設定)

```
┌──────────────────────────────────────────────────┐
│ ⚙️ 設定                                      ✕    │
├──────────────────────────────────────────────────┤
│ 🩺 監修者プロファイル                             │
│   氏名:        [ 森 美奈子                    ]   │
│   肩書:        [ 院長 / 産婦人科専門医         ]   │
│   クリニック:   [ 操レディスホスピタル         ]   │
│   [ 保存 ]                                        │
│                                                   │
│ 🔔 通知設定 (将来)                                │
│   □ LINE で新着通知を受け取る                     │
│   □ 3 件以上溜まったら通知                        │
│                                                   │
│ ❓ ヘルプ                                         │
│   ▸ 監修コメントの書き方                          │
│   ▸ よくある質問                                   │
└──────────────────────────────────────────────────┘
```

### 7.6 採用するデザイントークン

| 要素 | 値 |
|---|---|
| primary color | `#1e4259` (操ブランド primary-dark) |
| accent (CTA) | `#10b981` (green、承認系) |
| warning | `#f59e0b` (amber、注意喚起) |
| danger | `#b91c1c` (red、修正依頼系) |
| neutral | `#64748b` (gray、補助情報) |
| 背景 | `#f8fafc` (slate-50、軽やか) |
| card 背景 | `#ffffff` |
| 余白 | 16px / 24px の grid (詰めすぎない) |
| フォント | Noto Sans JP、本文 14px、見出し 18-22px |
| 角丸 | 8px (card)、12px (modal) |
| シャドウ | `0 2px 8px rgba(0, 0, 0, 0.06)` (軽い) |
| ボタン min height | 44px (タッチ対応) |

---

## 8. 採用しない / 削除する要素

### 8.1 既存 dashboard から削除予定
- ❌ summary cards 5 個 (count-total / count-sent / count-approved / count-revision / count-published)
- ❌ カテゴリタブ (本院 / LK / 不妊治療 / コラム)
- ❌ filter ボタン群 (全て / 最近更新 / 確認待ち / 修正依頼 / 公開済み toggle)
- ❌ 横断ビュー toggle
- ❌ 院長確認 sticky banner (上部固定 0 件 banner)
- ❌ dr-fixed-badge (右下固定件数 badge)
- ❌ doctor-review-queue (separate section、SECTIONS と二重管理)
- ❌ 「お知らせ」永続 banner

### 8.2 移行スコープ
| 既存機能 | 新 dashboard で扱う? |
|---|---|
| 公開済み記事一覧 | ❌ 院長 dashboard から外す (operator dashboard で見る) |
| カテゴリ別 navigation | ❌ 不要 (確認待ちは少数、横断で OK) |
| 制作中ページの可視化 | ❌ 院長は見ない (operator dashboard) |
| 修正完了通知 banner | ❌ 削除済 |
| recentlyUpdated badge | ❌ 削除 (院長は「最近更新」を意識する必要なし) |

→ **画面要素を 80% 削減** が目標。

---

## 9. 実装計画 (直接書き換え方針)

旧 `task-dashboard.html` を **直接置き換える**。並行運用はしない (Kosuke 判断 2026-04-27)。

### 9.1 実装ステップ
| Step | 内容 | 工数 |
|---|---|---|
| 1 | 旧 dashboard の一時退避 (`task-dashboard.html.bak-20260427`) | 5 分 |
| 2 | 新 HTML / CSS / JS を構築 (本 doc §7 通り) | 1 〜 2 日 |
| 3 | ローカル md5 verify、機能確認 | 30 分 |
| 4 | wrangler pages deploy で反映 | 5 分 |
| 5 | 院長運用開始 (旧 URL のまま、内容のみ刷新) | — |
| 6 | フィードバック → 微修正 | 数日 |

### 9.2 触るファイル
| ファイル | 操作 | 内容 |
|---|---|---|
| `pages/louis-kano/task-dashboard.html` | **大幅書き換え (1 file 完結)** | §7 の新 UI を実装 |
| `pages/louis-kano/task-dashboard.html.bak-20260427` | 新規 | 旧 HTML の back-up コピー (rollback 用) |

→ 1 file 内に HTML / CSS / JS 内蔵 (現状方針を維持)。後日 separation of concerns したい場合は別 phase。

### 9.3 harness 側との連携
- AI 生成 → `harness が WP REST で draft 投稿` → `wp_post_id を doctor-review-tasks/<task_id>.json に書き込み`
- 院長が dashboard で承認 → Supabase `doctor_review_actions` に POST
- harness が poll → HTML 書換 + WP REST publish 待ち承認待ちに

### 9.4 ロールバック
万一新 dashboard で重大 bug が出た場合:
```sh
cp task-dashboard.html.bak-20260427 task-dashboard.html
wrangler pages deploy . --project-name=misao-task --branch=main
```
で 5 分以内に旧版へ戻す。

---

## 10. 受け入れ基準

### 機能
- [ ] 院長が dashboard を開いて **3 秒以内** に「自分が今やるべきことが何件あるか」が分かる
- [ ] 確認待ち 0 件のとき「✨ 全部完了しています」が大きく表示される
- [ ] 監修者プロファイルが 1 度の登録で済み、各記事は 2 項目だけ
- [ ] mobile (375px) で破綻しない、横スクロールしない
- [ ] preview URL を押すと別タブで内容が見れる (WP draft 必須)
- [ ] 修正依頼を 1 textarea + 送信ボタンで完結
- [ ] 過去 7 日の自分の操作履歴が折り畳みで見れる
- [ ] 設定 modal が右上 ⚙️ から 1 クリックで開く

### 非機能
- [ ] 初回ロード 2 秒以内
- [ ] localStorage オフラインでも UI が動く
- [ ] secret / token が DOM に露出していない
- [ ] WCAG AA 相当 (色 + 文字 / focus ring / aria-label)

### 削除 (これらが見えていたら NG)
- [ ] summary cards 5 個並び表示なし
- [ ] カテゴリタブなし
- [ ] filter ボタン群なし (sent/approved/revision を分ける UI)
- [ ] 公開済み記事を default 表示しない
- [ ] 古い banner / 通知が永続表示されていない

---

## 11. 制約 (本フェーズ厳守)

- ❌ コード実装はしない (本文書は設計のみ)
- ❌ deploy しない
- ❌ DB / state 変更しない
- ❌ 既存 `task-dashboard.html` を **書き換えない** (新 URL で並行運用方針)
- ❌ F-1 / Misao publish flow / 院長 review 経路に影響を与えない
- ✅ 設計 doc 1 本作成

---

## 12. Kosuke の次の判断

1. 本 doc の **要件 / IA / Zone A-C 構成** で進めて良いか
2. ペルソナ定義 (院長 / operator / harness) の役割境界は妥当か
3. 並行運用戦略 (新 URL `task-dashboard-v2.html`) で進めて良いか
4. デザイントークン (操ブランドカラー基調 + 軽量) で良いか
5. 「won't-have」(W1-W4) の境界線で操作性に問題ないか
6. Phase 2 着手のタイミング (即着手 / 院長リリース後 / 別 task)

→ 全項目承認後に Phase 2 (新 dashboard ゼロから実装) 着手。

---

## 付録 A: 既存 dashboard の機能棚卸し (廃棄/移行/維持)

| 既存機能 | 新 dashboard での扱い |
|---|---|
| header (操デジタルマーケダッシュボード) | ✅ 維持 (簡素化、設定ボタンだけ追加) |
| supervisor-profile-bar (青帯) | ❌ 削除 (settings modal に移行) |
| 院長確認 sticky banner | ❌ 削除 (Zone A の「確認待ち N 件」で代替) |
| dr-fixed-badge (右下固定) | ❌ 削除 |
| summary 5 cards | ❌ 削除 (Zone A タイトルで件数表示) |
| update-banner (修正完了通知) | ❌ 削除済 |
| toolbar (filter ボタン群) | ❌ 削除 (filter 不要、Zone 分けで自然に) |
| カテゴリタブ (本院/LK/不妊治療/コラム) | ❌ 削除 (各 card に label) |
| 全て (横断) tab | ❌ 削除 (デフォルトが横断、選択肢ない) |
| section-group | ❌ 削除 (Zone A/B/C で再構成) |
| page-card (各記事) | ✅ 維持 (デザイン更新、Zone A で大/中/小) |
| dr-card (院長確認 queue) | ✅ 維持 (Zone A に統合、独立 section 廃止) |
| recent-update-badge | ❌ 削除 |
| missing-badge (⚠ 未作成) | ❌ 削除 (Zone B-C に隔離、院長は見ない) |
| pc-supervisor (per-card 入力) | ✅ 維持 (Zone A の card 内に inline) |
| settings-modal | ✅ 維持 (今フェーズで作成済、新 dashboard でも使う) |
| header-profile-status | ✅ 維持 (新 header に表示) |
| comments area (修正依頼テキスト) | ✅ 維持 (Zone A の card 内に inline、簡素化) |
| Supabase fetch (hydrateFromSupabase) | ✅ 維持 (write-only のままで OK) |

---

## 付録 B: 推定工数

| Phase | 工数 |
|---|---|
| Phase 1 設計確定 (本文書のレビュー + 確定) | 1 時間 |
| Phase 2 新 dashboard 実装 | **1 〜 2 日** |
| Phase 3 並行運用 + 院長フィードバック | 1 週間 |
| Phase 4 旧 → 新 redirect 切替 | 30 分 |

合計: 1〜2 日の集中実装 + 1 週間並行 = 約 10 日でフル切替。

---

## 付録 C: 関連 doc

- `misao-task-dashboard-ux-rebuild.md` (旧 3 zone 案、本文書で deprecated → 本文書に統合)
- `misao-supervisor-input-ui-design.md` (supervisor 入力 UI 詳細仕様)
- `misao-supervisor-runbook.md` (運用 runbook、dashboard UI 一本化方針)
- `reference_misao_task_dashboard.md` (memory) — repo / deploy / Supabase 構造