管理ダッシュボード 概要

コンセプト

投稿内容を 確認・編集・承認してから Xに投稿する管理Webアプリ。全自動投稿ではなく、人間がキャラ設定の品質を確認しながら運用するPhase 1向けのツール。

UI設計思想

参考ツール

ツール	参考ポイント
Typefully	スプリットビュー（左エディタ + 右プレビュー）、ドラフト管理
Buffer	キュー管理、SNSプレビュー
Notion	サイドピーク（右サイドパネル）、クリーンUI

採用パターン

3カラムスプリットビューを基本レイアウトとする:

┌──────┬──────────────────┬───────────────────────────┐
│      │                  │ プレビューパネル           │
│ レース│  投稿エディタ     │                           │
│ 一覧  │                  │ ┌─────────────────────┐  │
│      │  ┌────────────┐  │ │ 競馬予想サイト       │  │
│ 中山  │  │投稿文      │  │ │ レースデータ         │  │
│ 中京  │  │            │  │ │ 予想印・買い目       │  │
│ 阪神  │  │            │  │ └─────────────────────┘  │
│      │  └────────────┘  │                           │
│      │                  │ ┌─────────────────────┐  │
│      │  [投稿] [保存]   │ │ Xポスト              │  │
│      │  [再生成]        │ │ プレビュー           │  │
│      │                  │ └─────────────────────┘  │
└──────┴──────────────────┴───────────────────────────┘

設計原則

1. 画面遷移なし: レース選択→プレビュー→投稿の全フローが1画面で完結
2. 即座のフィードバック: エディタの変更がプレビューにリアルタイム反映
3. 取り消し可能: ドラフト保存、投稿前確認ダイアログ
4. 段階的開示: 基本操作はシンプル、詳細設定は展開式

承認フロー

自動生成 → Draft → 確認・編集 → Approved → Posted
              ↑                      │
              └──── 修正 ────────────┘

技術スタック

カテゴリ	技術	理由
フレームワーク	Next.js (App Router)	React Server Components、API Routes
UI	Tailwind CSS + shadcn/ui	高品質なUIコンポーネント
状態管理	React hooks	シンプルな状態管理
データ通信	Server Actions / API Routes	型安全なバックエンド通信
デプロイ	Cloudflare Pages	既存インフラとの統合