卒業制作での疑問点 Reactのコンポーネント洗い出し方法

Question

ただいま最下に記載のシステムを卒業制作で開発しています。
現在UMLで
ユースケース図
ユースケースドキュメント
概念クラス図
画面レイアウト
画面遷移図
を作成しました。
次にコンポーネントの洗い出しのためシーケンス図を書こうとしていますが、どうにも最適な方法が分かりません。
実際にどのような方法を使ったかなど有益な情報をくださるとありがたいです。

回答に際して必要な情報がありましたらその都度付け加えさせていただきます。よろしくお願いします。

---システム要件---
卒業制作として、プログラミング初学後の人が「作りたいもの」から必要な知識や手順を逆算できるようにする、AI活用型の動的教材生成アプリです。
学習者はゴールを設定し、AIがトップダウン／ボトムアップの学習ガイド、教材、進捗支援を生成します。
教材は固定コンテンツだけでなく、利用者の進捗・不足知識・理解度に応じて説明、サンプル、演習、確認観点を個別化します。
主要機能は、認証、プロフィール、学習履歴、教材作成・公開・検索、AIチャット、コード・学習内容のAI評価です。
設計上は React/Vite/Electron、Python/FastAPI、OpenRouter、Supabase、Dev Container、AWS などを候補にしています。

Comments

[blixor]

あなたの卒業制作だったら
まずざっと以下のようなコンポーネントを挙げてみればいい

- 認証関係：ログインフォーム、サインアップフォーム
- プロフィール：プロフィールカード、アバター画像
- 教材関連：検索バー、教材カード、教材表示エリア、演習問題エリア
- AIチャット：チャットウィンドウ、メッセージの吹き出し、コード表示部
- 進捗管理：ダッシュボード（グラフ）、履歴タイムライン

細かくなりすぎないように気をつけて
大きめに始めて、必要なら後で分割すればいい