# テンプレート機能分析 — 追加候補の優先度評価

作成: 2026-03-10
作成者: Claude Code（世界的ベテランエンジニア兼 UI/UX デザイナー視点）

---

## 判断基準

| 軸 | 説明 |
|----|------|
| **汎用性** | 全アプリで使う可能性が高いか |
| **複雑度** | テンプレートに入れたとき AI が正しく使えるか |
| **UX インパクト** | ユーザー体験への貢献度 |
| **実装コスト** | 追加にかかる工数 |

---

## 即追加すべき（Phase 1 — 今すぐ）

### 1. サイドバーフッター（ユーザー表示エリア）
- **理由**: ほぼ全アプリで「誰が使っているか」の表示が必要になる
- **実装**: シンプルなアバター + 名前 + 設定歯車アイコン
- **複雑度**: 低（静的でよい、API 連携は各アプリが実装）

### 2. 設定パネル（右スライドアウト）
- **理由**: API キー、表示設定、テーマ切替など必ず必要になる
- **実装**: `<aside class="settings-panel">` + toggle ボタン
- **複雑度**: 低〜中（HTML/CSS のみで実現可能）

### 3. accordion ナビセクション
- **理由**: ナビアイテムが増えたとき折りたたみは必須 UX
- **実装**: `<details>/<summary>` で実装するか、`data-accordion` パターン
- **複雑度**: 低

### 4. ページ数バッジ（nav-count）
- **理由**: Brain で実績あり、一覧系アプリ全般で有用
- **実装**: `<span class="nav-count">0</span>` を nav-item に追加するだけ
- **複雑度**: 極低

---

## 中優先（Phase 2 — 次のイテレーション）

### 5. Stale-While-Revalidate API クライアント（`js/api/client.js`）
- **理由**: API を持つアプリには必須パターン。Brain で実証済み
- **実装**: `loadFromStorage()` → render → `fetch()` → 差分更新 → render
- **複雑度**: 中（ただし単体ファイルとして分離すれば AI が使いやすい）
- **注意**: API なしアプリには不要 → オプション扱いにする

### 6. コマンドパレット（Cmd+K）
- **理由**: パワーユーザー向け。全アプリ必須ではないが差別化になる
- **実装**: フローティング `<dialog>` + `keydown` イベント
- **複雑度**: 中
- **推奨**: デフォルト OFF、コメントアウト済みで含める

### 7. Pull to Refresh（モバイル）
- **理由**: PWA + モバイルでは標準的な UX
- **実装**: `touchstart/touchmove/touchend` + CSS アニメーション
- **複雑度**: 中
- **推奨**: `js/utils/pull-to-refresh.js` として分離

---

## 後回しでよい（Phase 3 — 需要が出てから）

### 8. Magic Link 認証（`?init_key=xxx`）
- **理由**: Synology API と組み合わせた Brain 専用の設計
- **推奨**: Brain/Feed 系のアプリのみで使う。テンプレートには不向き

### 9. BroadcastChannel（タブ間同期）
- **理由**: 複数タブを同時に使うアプリのみ必要
- **推奨**: 必要なアプリで個別実装

### 10. PWA Share Target
- **理由**: URL 共有受信が必要なアプリのみ
- **推奨**: `manifest.json` のコメントアウト済みサンプルとして含める

### 11. クリップボード URL 検知スナックバー
- **理由**: Brain の URL 保存フローに特化した機能
- **推奨**: Brain 系のみ

---

## 不要（テンプレートに入れるべきでない）

### Drag & Drop URL 保存
- 保存先（API）が確定してから実装すべき。テンプレートでは過剰

---

## 推奨: テンプレート次バージョンの構成

```
_template/
  index.html          ← Phase 1 追加済み
    ├ header（52px glassmorphism、PC/モバイル自動切替）
    ├ sidebar（accordion nav + count バッジ + フッター）
    ├ settings-panel（右スライドアウト）
    └ main content（card / list-item / empty-state）
  js/
    ├ app.js           ← エントリポイント（最小限）
    └ api/
        └── client.js  ← Stale-While-Revalidate（オプション・コメントアウト）
  manifest.json
  sw.js
  package.json
  README.md
```

---

## アクセントカラー問題への推奨

**推奨**: CSS 変数で抽象化し、アプリごとに 1 行だけ変更可能にする

```css
/* ── アクセントカラー（各アプリでここだけ変える） ── */
--accent: #6EE7B7;   /* Posimai Teal（デフォルト） */
/* --accent: #818CF8; */  /* Indigo（旧 Brain/Feed 系） */
/* --accent: #A78BFA; */  /* Purple（選択肢） */
```

- テンプレートのデフォルトは `#6EE7B7`（Teal）に統一
- 既存の Brain/Feed は当面現状維持（全更新は大工数）
- 新規アプリはすべて Teal を使う
- **Gemini に「どちらが Posimai ブランドに合うか」を確認するのが理想**

---

## まとめ: 今すぐやること

| 順番 | 作業 | 工数 |
|------|------|------|
| 1 | サイドバーフッター追加（テンプレート） | 30分 |
| 2 | 設定パネル追加（テンプレート） | 1時間 |
| 3 | accordion ナビ + count バッジ追加（テンプレート） | 30分 |
| 4 | Gemini にレビュー依頼 | 非同期 |
| 5 | アクセントカラー決定後、テンプレート更新 | 15分 |