生成AIアプリ開発～第3回ClaudeのProjectsを用いたユースケース作成～

あなたは生成AIアプリを作成する際に、どのようなに開発を進めますか？

私はこれまで、本を読み漁り「開発の流れはわかったけど、これが必要かな？あれが必要かな？」ととりあえず要件を列挙。

その後、お客さんと一つ一つ要件に対して優先度をつけて確認してました。

しかし近年では生成AIの登場により、やり方は変わりつつあると思ってます。

特に要件整理やプロトアプリ構築の段階は省力化が見込めると思ってます。

そのため、これから紹介する生成AIツールを使用してアプリを作成する流れを解説します。

全7回の投稿を見終わった時には、ほぼほぼ一人でプロト構築、要件定義を実施できます。

全7回連載記事の構成

生成AIアプリの駆動開発

第１回：Feloを用いたユースケース洗い出しの最新情報リサーチ術
第２回：Claude projectsを用いたユースケースプロンプト作成
第３回：Claude projectsによるユースケース化(ユースケースクリエーター)
第４回：Claude projectsによる業務要件整理(業務要件サポーター)
第５回：Claude ProjectsによるUI・機能・非機能要件整理(要件定義サポーター)、V0を用いたUIコード化およびFigmanによる画面UI調整
第６回：FigmaからPDF出力を行いClaude projectsによる要件定義の叩き台作成(要件定義サポーター)
第７回：GEAR.indgoを用いた基本設計書作成(フロー図/DB設計/コード設計)
番外編①：Cursor/Clineを用いた設計書に基づく本番開発
番外編②：Claude Projectsによる最新技術動向を考慮したユースケースリストの作成

本記事のスコープ

今回は連載記事、第3回のclaudeのprojectsを用いてユースケースを定義して精緻化し、それを元にclaudeで画面UIを作成する箇所までを実装します。

流れとしては以下の通りです。

• ユースケース作成を支援するclaudeのprojectの作成

• 作成したprojectを元に、ユースケース作成

今回作成するアプリ

すでに作られている、「コエテコStudy byGMO」を参考に作らせていただきます。

なお、ここは大事なので言っておきますが、画面UIを作成する上で絶対に既存のコエテコ画面は読み込ませません。

その上で、どこまで精緻化して画面UIを近づけられるのか等を検証していければなと思います。

※あくまで近づいたから良いというわけでもなく、あくまで指標の一つとして見ておいていただければ幸いです。

前提(使用するアプリ)

• Claudeの有料プランを登録(無料でも可能ですが、claudeのartifact機能が使えないため、画面要件はv0で主に作成する必要があり非効率)

• v0、figmaは無料プランで作成可能

前提(言葉の棲み分け)

これから技術検証を行う際のユースケース、業務要件、機能要件・非機能要件といった言葉を頻繁に用いるため、ここであらかじめ整理させていただきます。
※GPTを用いて言葉を使用させていただきます。

---

ユースケース

定義:
ユースケースとは、システムを利用するユーザーがどのようなシナリオで、どのような目的でシステムを使用するかを記述したものです。ユーザーの視点から見た「具体的な使用シーン」を明らかにします。

特徴:

• ユーザーの目的と行動を中心に描写される。

• 「As-Is（現状）」と「To-Be（目指す姿）」を基に、ユーザーの課題と解決策の流れを示す。

• システムを利用する場面やその背景、期待される成果を示す。

• 開発者とステークホルダーがシステム利用の全体像を共有するために利用される。

例:

• 場面: 教員が授業準備として、小テストを作成する必要がある。

• 課題: 現状では問題作成や採点に多くの時間がかかる。

• 解決策: システムを使って問題作成と採点を自動化し、成績管理を効率化する。

---

業務要件

定義:
業務要件とは、システムを利用するユーザーが「どのような操作を行い」、その結果として「どのような状態を達成するか」を記述するものです。業務プロセスをシステムに反映し、ユーザーの業務を円滑に進めるためのシナリオを具体化します。

特徴:

• ユーザー操作とその結果、期待される効果を明確に示す。

• システム導入後の業務フローや利用シナリオを定義する。

• ユーザー視点で操作の目的やシステムが提供する価値を記述する。

• 機能要件や非機能要件の土台となる。

例:

1. ユーザー操作: 教員が教科書の目次からページを選び、小テスト作成ボタンをクリックする。

2. 操作結果: 教科書準拠の問題が自動生成され、小テストとして保存される。

3. 期待される効果: 作問時間が大幅に削減され、授業準備が効率化する。

---

機能要件

定義:
機能要件とは、業務要件をシステムとして実現するために必要な「具体的な機能や動作」を記述したものです。業務要件で定義された操作や結果を技術的に支える内容を細分化して説明します。

特徴:

• システムが「何をするべきか」を詳細に記述する。

• ユーザーインターフェース（UI）、データ処理、ワークフローなど具体的な実装内容を含む。

• ユースケースと業務要件に基づいて設計される。

例:

• 小テスト作成ボタンを押すと、教科書の目次に基づいて問題が自動生成される。

• 生徒がCBT形式で回答を入力すると、即座に自動採点が実行される。

---

非機能要件

定義:
非機能要件とは、システムが「どのように動作するべきか」を定義するものです。システムの性能、信頼性、拡張性、セキュリティなど、品質面の要件を記述します。

特徴:

• システムの「動作の質」に関する要件を記述する。

• パフォーマンス、可用性、ユーザビリティ、スケーラビリティなどを含む。

• ユーザー体験や技術基盤を支える要素。

例:

• システムのレスポンス時間は1秒以内とする。

• 同時接続ユーザー数は1,000人を想定する。

• データは暗号化され、セキュリティ標準（例: GDPR）に準拠する。

---

システムプロンプトを作成

今回ユースケース詳細化に用いる、システムプロンプトです。