AIと個人開発したくなったらまずCursorで要件定義だ！
はじめに
こんにちは！yasunaです！
私は普段は会社員をしていてエンジニアではないのですが、趣味でプログラミングをしています！
今回はAIの力をフル活用しながら個人開発アプリの要件定義を作るまでの流れを記録しておきたいと思います。
今回作ろうとしているアプリケーションについて
「TikTok台本作成支援システム」というアプリケーションを作ろうとしています。ユースケース図はこんな感じになりました。
この図を作るときに役に立ったのがAI搭載エディターのCursorです。
CursorはAIがコードを生成してくれるので、コードを書くのが苦手な私のような人でもAIとチャットしながらコードを書くことができます。
こちらの図もCursorでmdファイルを作成して図に変換しました。
これはPlantUML（プラントユーエムエル）という図表作成用のマークアップ言語です。
UML（Unified Modeling Language：統一モデリング言語）の図を簡単なテキスト記述で作成できます。
@startuml
left to right direction
skinparam packageStyle rectangle
actor クリエイター
actor "TikTok API" as API
rectangle "TikTok台本作成支援システム" {
' 優先度高（MVP）
package "基本機能" {
usecase "TikTokアカウント連携" as UC1 #LightGreen
usecase "既存動画分析" as UC2 #LightGreen
usecase "台本生成" as UC3 #LightGreen
usecase "台本保存/編集" as UC4 #LightGreen
}
' 優先度中
package "分析機能" {
usecase "パフォーマンス分析" as UC5 #LightYellow
usecase "トレンド分析" as UC6 #LightYellow
usecase "類似動画分析" as UC7 #LightYellow
}
' 優先度低
package "拡張機能" {
usecase "台本エクスポート" as UC8 #LightPink
usecase "チーム共有" as UC9 #LightPink
}
}
' 関連性
クリエイター --> UC1
クリエイター --> UC3
クリエイター --> UC4
UC1 --> API
UC2 --> API
UC6 --> API
UC1 ..> UC2 : include
UC2 ..> UC3 : extend
UC5 ..> UC3 : extend
UC6 ..> UC3 : extend
UC7 ..> UC3 : extend
note right of UC3 #LightGreen
優先度高（MVP）
- アカウントデータに基づく台本生成
- トレンドを考慮した構成提案
- テロップ・演出の具体的指示
end note
note right of UC5 #LightYellow
優先度中
- 視聴者層分析
- エンゲージメント分析
- 最適投稿時間帯分析
end note
@enduml
以下のURLでコードを貼ると図表を簡単に作成できます！便利！
要件定義つくっていくぞ！って思ったらはじめになにをするの？
アプリケーションを作りたいと思ったらまずはどんなアプリケーションを作りたいのか、それはどんな問題を解決するのかを考える必要があります。
私はTikTokを運営しているためその運営コストを下げるためのアプリを作ろうと考えました。
今回はアプリケーションの提供価値をしっかりと考えました。
### 2.2 解決したい課題
- [どんな課題を解決したいか]
- TikTokの縦動画を作るのに時間がない
- [なぜその課題に着目したか]
- 縦動画はユーザーの認知を取るために欠かせないもので継続的に出し続ける必要がある
- しかしエンゲージメントの高い動画を作るにはノウハウに沿った台本づくりが必要
- バズを狙うための台本を作るのに一人では時間がかかる
- 現在のバズ動画からノウハウを言語化し学習させ、台本をAIに作ってもらいたい
### 2.2 想定ユーザー
- [どんな人に使ってもらいたいか]
- すでにTikTokをやっている人もしくはこれからやりたい人
- 縦動画を作るのに時間がない人
- バズ動画を簡単に作りたい人
- [その人たちがどんな状況で使うか]
- TikTokで投稿するために台本を作るとき
### 2.3 提供したい価値
- [このアプリで実現したいこと]
- クオリティを担保した台本が作れる
- [ユーザーにとってのメリット]
- 誰でも一定以上バズが狙える縦動画を作成することができるようになる
- [既存の解決方法との違い]
- 既存の解決方法は本を読んだり情報を得て自分で考える工数がかかっている。ノウハウを言語化してAIに学習させることができない
意外と課題について深堀りせずにアプリケーションを作り始めてしまいがちですが、これだけでもアプリケーションの提供価値が整理できるのでおすすめです！
要件定義を生成する
これだけ決まったらあとは「要件定義を作ってください」とプロンプトで指示を出せばば～っとAIが書いてくれます。
できあがったのがこんな感じです。
# 機能要件定義書
## 1. 必須機能（MVP）
### 1.1 台本生成機能
- 基本情報入力
- アカウント連携
- TikTokアカウントの連携
- 既存動画の分析
- 再生数・いいね数・コメント数
- フォロワー層の分析
- 高パフォーマンス動画の特徴抽出
- コメント内容の分析
- トレンド分析
- 同ジャンルの人気動画分析
- トレンドキーワード抽出
- 効果的な演出パターンの特定
- 最適な投稿時間帯の分析
- カスタマイズ設定
- 動画のジャンル（ハウツー、エンタメ、商品紹介など）
- 目的（認知向上、エンゲージメント獲得、コンバージョンなど）
- 動画の長さ（15秒、30秒、60秒）
- ターゲット視聴者層
- ブランドトーン設定
- AI提案機能
- パフォーマンス予測
- 最適な構成提案
- トレンドとの組み合わせ提案
- オリジナリティの確保
- AI生成機能
- 台本のテンプレート生成
- フック（導入）部分の生成
- コール・トゥ・アクション（CTA）の生成
- 台本の構成要素
- セーン情報
- カメラワーク（アップ、ミディアム、ロングショットなど）
- 撮影アングル（正面、斜め、ローアングルなど）
- 撮影場所・背景設定
- 演技指示
- 登場人物の位置・動き
- 表情（笑顔、真剣、驚きなど）
- ジェスチャー・手振り
- 演技のテンポ・間の取り方
- セリフ
- 台詞内容
- 話し方（テンション、スピード、トーン）
- アドリブポイント
- 技術要素
- テロップ・キャプション
- 表示位置（画面上部/中央/下部、左右の配置）
- 表示タイミング（セリフに合わせた出現/消失）
- フォントスタイル（サイズ、色、強調表現）
- アニメーション効果（フェードイン/アウト、ポップアップなど）
- 重要キーワードの強調方法
- 編集上の注意点
- カット間のつなぎ方
- テンポ感（カット継続時間）
- 視線の流れを考慮した配置
- 画面の見やすさ（情報量の調整）
- モバイル視聴を考慮したレイアウト
### 1.2 ユーザー管理機能
- アカウント作成・ログイン
- 生成した台本の保存
- 台本の編集・削除
### 1.3 台本管理機能
- 生成した台本の一覧表示
- 台本の検索・フィルタリング
- お気に入り登録
## 2. オプション機能（将来実装）
### 2.1 分析機能
- 生成した台本の統計情報
- 人気のあるテンプレート分析
- トレンドキーワード表示
### 2.2 共有機能
- 台本のエクスポート（PDF, テキスト）
- チーム共有機能
- コメント・フィードバック機能
### 2.3 高度な生成オプション
- 競合分析に基づく台本生成
- トレンド分析との連携
- カスタムテンプレートの作成
## 3. 技術要件
### 3.1 AI関連
- 言語モデル:
- プロンプトエンジニアリング
- コンテキスト管理
### 3.2 バックエンド
- ユーザー認証
- データベース設計
- API設計
### 3.3 フロントエンド
- レスポンシブデザイン
- 直感的なUI/UX
- リアルタイムプレビュー
## 4. 非機能要件
### 4.1 パフォーマンス
- 台本生成時間: 30秒以内
- 同時接続ユーザー: 50人まで
- API応答時間: 3秒以内
### 4.2 セキュリティ
- ユーザーデータの暗号化
- APIキーの安全な管理
- セッション管理
### 4.3 拡張性
- 新しいテンプレートの追加容易性
- AIモデルの差し替え可能性
- 多言語対応の考慮
そこから画面遷移図を作ってみました。
実はこれもAIにmdファイルを書いてもらって画面遷移図に変換しています。
こちらはmermaidという記法でかかれた図表定義です。
graph TD
Login[ログイン画面] --> Dashboard[ダッシュボード]
Dashboard --> Analysis[動画分析画面]
Dashboard --> Create[台本作成画面]
Dashboard --> List[台本一覧画面]
Create --> Preview[プレビュー画面]
Create --> Save[保存確認画面]
Analysis --> Create
List --> Edit[台本編集画面]
Edit --> Preview
Edit --> Save
classDef primary fill:#93c5fd,stroke:#1d4ed8,stroke-width:2px;
classDef secondary fill:#e2e8f0,stroke:#64748b,stroke-width:2px;
class Login,Dashboard,Create primary;
class Analysis,List,Preview,Edit,Save secondary;
graph TD
subgraph ダッシュボード
A[ヘッダー<br>- アカウント情報<br>- メニュー] --> B[メイン統計<br>- パフォーマンス<br>- トレンド]
B --> C[クイックアクション<br>- 新規作成<br>- 分析開始]
C --> D[最近の台本<br>- リスト表示<br>- 編集リンク]
end
style A fill:#f3f4f6,stroke:#d1d5db
style B fill:#f3f4f6,stroke:#d1d5db
style C fill:#f3f4f6,stroke:#d1d5db
style D fill:#f3f4f6,stroke:#d1d5db
このコードを左のタブに貼り付けるとなんと画面遷移図に変換してくれます！！！感動的！
Mermaid記法は以下のURLで試せます。
v0に要件定義を読ませてUIを作ってみる
要件定義ができたのでモックとしてv0でUIを作ってみました。
さすがv0、なかなかいい感じです！
まとめ
Cursorでアプリケーションについて整理しながら要件定義をつくり、v0でUIを作ってみました。
このままv0からCursorに移行してコードを書き進められるのか！？とReactを書いたことがない私にとってはここからがやや不安ではありますが、わりとスムーズにできたのでこれから頑張っていきたいですね！
Xで個人開発の進捗をつぶやいていますのでぜひフォローして応援よろしくお願いします！
ここまで読んでいただきありがとうございました！
2025.1.7追記
なんと24時間で100いいねいただくことができました！ほんとうにたくさんの方に読んでいただきほんとうにありがとうございます！
最近個人開発VTuberもやっているのでこちらで実際のCursorの画面をお見せしながら解説配信を行ったのでよろしければ合わせてご覧ください～！
Discussion