posimai-root/docs/template-features-analysis.md

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

作成: 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 行だけ変更可能にする

/* ── アクセントカラー（各アプリでここだけ変える） ── */
--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分