Web UI デザイン改善提案¶

現在のWeb UI (static/index.html) の課題と改善案をまとめる。

現状の課題¶

レイアウト¶

全カードが1つの grid に並んでおり、重要度の区別がない
Setup/配信開始ボタンが小さく目立たない
OBSカードにアバター位置・ターミナル位置が詰め込まれて長い
キャラクター設定が画面下部に追いやられて見つけにくい

操作性¶

接続状態が小さいドットだけで分かりにくい
スライダーが多く、使用頻度の低いものも常に表示されている
ログが画面最下部で見にくい

視覚¶

全体的に暗く、カード間の差がない
ボタンが全て同じサイズで優先度が伝わらない
フィードバック（成功/エラー）がトーストのみ

改善案¶

1. ヘッダー + ステータスバー¶

┌──────────────────────────────────────────────────┐
│  AI Twitch Cast                                  │
│  [Setup]  [配信開始]  [配信停止]                    │
│                                                  │
│  OBS: ● 接続中  VSF: ● 接続中  配信: ● 停止中     │
└──────────────────────────────────────────────────┘

Setup/配信ボタンを最上部に大きく配置
全接続状態を1行のステータスバーにまとめる（ドット+テキスト）
配信中はステータスバーの背景色を変える（赤系）

2. タブ or セクション分割¶

カードを機能グループに分割:

タブ名	内容
ダッシュボード	TODO、配信情報、ログ
OBS	OBS接続、シーン切替、Setup/Teardown
アバター	VSF/VTS接続、Idle、BlendShape、位置調整
オーバーレイ	字幕・TODOパネル設定
キャラクター	名前・プロンプト・ルール・感情設定

3. TODOカード強化¶

┌─ TODO ────────────────────────────┐
│  ▶ WEB UIのデザインを修正    [作業中] │
│  □ Twitch配信時のコメント削除  [開始] │
│  □ 配信のネタを設定           [開始] │
│                                   │
│  完了: 63件                        │
└───────────────────────────────────┘

作業中タスクを上部にハイライト表示
完了数の表示

4. OBSカードの分割¶

現在1つのカードに詰め込まれている内容を分割:

OBS接続 — 接続/切断、Setup/Teardown、シーン切替
アバター位置 — スライダー、取得/保存（折りたたみ可能）
ターミナル位置 — スライダー、取得/保存（折りたたみ可能）

5. カラーパレットの整理¶

用途	現在	提案
背景	`#1a1a2e`	`#0f1117`（より暗く）
カード	`#16213e`	`#161b22`（GitHub風）
プライマリ	`#7c4dff`	`#7c4dff`（維持）
成功/接続中	`#69f0ae`	`#3fb950`
エラー/切断	`#e53935`	`#f85149`
テキスト	`#e0e0e0`	`#e6edf3`
サブテキスト	`#9e9e9e`	`#8b949e`
ボーダー	なし	`#30363d`（カードに薄い枠）

6. レスポンシブ改善¶

モバイルでも最低限の操作（Setup、配信開始/停止、TODO確認）ができるよう
カード幅の最小値を 300px に縮小

優先度¶

優先度	項目	理由
高	ステータスバー	現在の接続状態が分かりにくい
高	TODOカード強化	配信中に頻繁に使う
中	OBSカード分割	カードが長すぎて使いにくい
中	カラーパレット整理	視認性向上
低	タブ分割	大規模な変更、段階的に実施
低	レスポンシブ	モバイルは補助用途

実装方針¶

static/index.html を段階的に修正（一括リライトは避ける）
CSSフレームワークは導入しない（現在のインラインCSS方式を継続）
各改善は独立したコミットで実施し、リグレッション確認しやすくする