UI/UX ガイド
画面設計、コンポーネント指針、デザインルールをまとめたドキュメントです。
UI/UX デザインガイド
デザインシステム
カラーパレット
--primary: #e94560 /* メインアクション、ロゴ */
--primary-dark: #d63a54
--secondary: #1a1a2e /* ヘッダー、見出し */
--bg: #f5f5f7 /* 背景 */
--surface: #fff /* カード背景 */
--border: #e0e0e0
--text: #1a1a1a
--text-muted: #6b7280
--success: #16a34a
--warning: #b45309
--danger: #dc2626コンポーネント
- ヘッダー: 固定、ダークネイビー背景、ロゴ「M」+ タイトル
- カード: 白背景、角丸12px、影付き、ホバーで影拡大
- ボタン: 角丸8px、primary色、disabled時opacity 0.5
- バッジ: 角丸999px（ピル型）、カテゴリ色分け
レスポンシブ
- メイン一覧: CSS Grid、4列 → 3列 → 2列 → 1列
- 管理画面: max-width 1100px
- 分析ページ: max-width 960px
- エージェント進捗: 4列 → 2列（640px以下）
ページ構成
| ページ | テンプレート | 特徴 |
|---|---|---|
| プロジェクト一覧 | index.html | 左サイドフィルター + グリッド表示 |
| ログイン/登録 | login.html, register.html | センター配置フォーム |
| 課金 | billing.html | プラン比較 + サブスク管理 |
| API キー | apikeys.html | キー一覧 + 発行フォーム |
| AI分析 | trends.html | エージェント進捗 + タブ切替結果 |
| 管理画面 | admin*.html | 統一ナビゲーション + カード/テーブル |
フロントエンド技術
- Jinja2 テンプレート（サーバーサイドレンダリング）
- バニラ JavaScript（フレームワークなし）
- インラインCSS（各テンプレートに
<style>）+ 共通style.css - SSE (EventSource) でリアルタイム更新（分析ページ）
- fetch API でJSON通信