Newer
Older
TelosDB / docs / specification / 06_ui_design_spec.md
@楽曲作りまくりおじさん 楽曲作りまくりおじさん 19 hours ago 2 KB docs: renumber specifications to ensure continuous sequence

UI デザイン仕様書 (UI Design Specification)

1. コンセプト: High-Contrast Minimalism

TelosDB の UI は、装飾を極限まで削ぎ落とし、情報の「明瞭さ」と「速度感」を重視した 「ハイコントラスト・ミニマリズム」 をテーマにしています。 以前の流行であったガラスモーフィズム(透過・ブラー)を廃し、ソリッドな背景と鋭いエッジ、洗練されたタイポグラフィによって、静謐でプロフェッショナルな道具としての佇まいを目指します。

1.1 デザインの構成要素

  • 背景: 漆黒(#050505)に近い深い黒を基調とし、要素を区別するために深いグレーのソリッドな面を使用。
  • ボーダー: 透過ブラーではなく、非常に細く(1px)彩度の低いグレースケールの境界線を採用。
  • タイポグラフィ: 幾何学的で現代的なサンセリフ体(Outfit)と、情報の視認性に特化したインターフェイスフォント(Inter)。
  • アクセント: 機能的な意味(成功、エラー、ステータス)を持つ要素にのみ、厳選されたアクセントカラーを適用。

2. インタラクティブ・フィードバック

2.1 ステータス・インジケーター

ヘッダー右側に配置されたバッジは、システムの状態をリアルタイムに示します。

  • Running: LSA エンジン(Vibrato 形態素解析 + ndarray 行列演算)および MCP サーバーが待機中または処理中。
  • Stopped: 重大な構成エラーまたはプロセス停止。

2.2 アクティビティ・ログ (SSE Listener)

検索や登録のアクティビティは、画面下部のログセクションに垂直方向に流れます。 ソリッドなデザインに合わせ、カードの浮き上がり(Shadow)ではなく、ミニマルなリスト形式で表示されます。

3. フロントエンド技術スタック

  • Vanilla JS & CSS: 高速な起動と低メモリフットプリントを維持。
  • Desktop First: Tauri 2 による Windows ネイティブの挙動(システムトレイ、イベントループ)に最適化。

4. レイアウト構造

  1. Header (HUD): 常に固定され、モデル名とデータ件数を表示(ヘッドアップディスプレイ)。
  2. Main Content: 検索バーと結果リスト。余白(Negative Space)を適切に取り、情報のノイズを排除。
  3. Footer (Toolbar): 設定へのアクセスと再インデックスボタンを集約。