メインコンテンツまでスキップ
バージョン: design-archive

画面設計

本システムは、ユーザーが直感的にグラフの可視化とLLMとの対話を行えるよう、シンプルかつ機能的な画面設計を目指す。

1. 主要画面一覧​

  • ログイン/登録画面: ユーザー認証を行うための画面。
  • ダッシュボード/プロジェクト一覧画面: ユーザーが自身のプロジェクトを管理し、新規プロジェクトを作成する画面。
  • グラフ分析画面: グラフの可視化、LLMとのチャット、各種設定を行うメイン画面。

2. 画面構成​

2.1. ログイン/登録画面​

  • ユーザー名/メールアドレス、パスワード入力フィールド。
  • ログイン/登録ボタン。
  • パスワードリセットリンク。

2.2. ダッシュボード/プロジェクト一覧画面​

  • ヘッダー: ロゴ、ユーザー情報、ログアウトボタン。
  • サイドバー: プロジェクト一覧、新規プロジェクト作成ボタン。
  • メインコンテンツ: 選択されたプロジェクトの詳細、グラフデータアップロードエリア。

2.3. グラフ分析画面 (メイン画面)​

2.3.1. 全体レイアウト​

  • ヘッダー: ロゴ、プロジェクト名、ユーザー情報、ログアウトボタン。
  • サイドバー (左):
    • チャット履歴: LLMとの対話履歴を表示。
    • チャット入力エリア: ユーザーが自然言語で指示を入力するフィールド。
    • 設定/オプション: グラフの表示設定（例: ノードのラベル表示/非表示）や、LLMの挙動に関する設定。
  • メインコンテンツエリア (中央):
    • グラフ可視化エリア: D3.jsによってグラフが描画される領域。ズーム、パン、ノードのドラッグなどのインタラクションが可能。
    • 情報パネル: 選択されたノードやエッジの詳細情報を表示。

2.3.2. グラフ可視化エリアのインタラクション​

  • ノード/エッジの選択: クリックで詳細情報を表示。
  • ズーム/パン: マウス操作でグラフの表示範囲を調整。
  • ノードのドラッグ: ノードを移動させ、レイアウトを微調整。
  • コンテキストメニュー: 右クリックでノード/エッジに対する操作（例: 隣接ノードの表示、プロパティの変更）。

2.3.3. チャット入力エリア​

  • テキスト入力フィールド。
  • 送信ボタン。
  • ファイルアップロードボタン（グラフデータ用）。

3. 画面遷移​

  • ログイン成功後 → ダッシュボード/プロジェクト一覧画面。
  • プロジェクト選択/新規作成後 → グラフ分析画面。
  • グラフ分析画面からダッシュボードへ戻るボタン。

4. レスポンシブデザイン​

  • 主要な画面は、デスクトップブラウザでの利用を想定するが、将来的なモバイル対応も考慮した設計とする。