📑

AI開発ツール（Replit Agent, v0, chatGPT, Felo）をフル活用してWebアプリを爆速開発しました

2024/11/18に公開

AI開発ツールをフル活用してアプリを爆速で開発したので過程をシェアします。
ReplitはReplit Agentを使うために課金が必要です。
開発したアプリは「Youtube超まとめ&質問に答えてくれるアプリ」です。
このようなWebアプリです。
YoutubeのURLを入力して「決定」ボタンをクリック
LLMが内容を要約してくれます。
知りたいことを質問すると動画の内容から回答してくれます。
開発手順は以下の通りです。

①Felo：アイデア出しと要件定義書を作成

②v0：要件定義書を元にUIデザイン作成

③ChatGPT：要件定義書とUIデザインを元に画面設計書を作成

④Replit Agent：要件定義書・画面設計書・UIデザインを元に開発
詳しく見ていきましょう。

 ①Felo：アイデア出しと要件定義書を作成まずはアイデア出しです。
Feloにアクセスして以下のプロンプトを実行します。
https://felo.ai/search
プロンプト
今から生成AIを利用したプロダクトを開発します。
世界のAI動向を踏まえてどのようなAIプロダクトを作ると有益でしょうか？
売れるアプリ・システムを提案してください
この結果の中に「生成AIによるパーソナライズド動画フィード」というアイデアがあり、そこから着想を得て今回のアプリ「Youtube超まとめ&質問に答えてくれるアプリ」を作ることにしました。
次は要件定義書作成
プロンプト
今から以下のアプリを開発します。UXに優れたアプリにしたいです。
完璧な要件定義書を作成してください。
またこの要件定義書はv0に読み込ませてアプリをAIで自動生成する予定なので、AIが理解しやすいプロンプトになるように生成してください。

- **AI Youtube動画 超まとめアプリ**
- ユーザーはまとめを見たいYoutubeのURLをテキストBOXに入力する
- すると長いYoutubeをLLMがポイントを箇条書きでまとめてくれる
- また、まとめを表示している画面にはテキストボックスが配置されていて、知りたいこと（結局、今後アメリカ経済はどうなるの？など）を問いかけると、その動画の知識を使ってLLMが回答してくれる
結果、このような要件定義を作成してくれました。

 ②v0：要件定義書を元にUIデザイン作成次にUIデザインを作成します。

こちらからv0にアクセスして以下のプロンプトを実行します。
https://v0.dev/
プロンプト
以下の要件定義に従ってモダンで洗練されたデザインのWebアプリを作成してください。
ヘッダーには、サイトロゴ、ユーザーアイコンを配置します。
メインセクションは要件定義を参照して作成してください
フッターには、会社情報、お問い合わせ、SNSリンクを含めてください。
カラーパレットは、ブランドカラーを使用し、全体的に統一感のあるデザインにしてください。
ブランドカラー：#91DFF1

# 要件定義書
{Feloで作成した要件定義書}
UIデザインを作成してくれました。
このUIデザインをFigmaで修正。（すみません、ここだけ手作業です。そのままでも動くアプリを作成することは可能だと思います🙏）

 ③ChatGPT：要件定義書とUIデザインを元に画面設計書を作成ChatGPTにアクセスして以下のプロンプトを実行します。
プロンプト（＋ UIデザインの画像を添付）
以下の要件定義書に従って、添付画面の画面設計書を作成してください
画面設計書には各画面の要素とアクション（ボタンクリックなど）に対するUIとバックエンドの動作を記載してください。

#要件定義書
{Feloで生成した要件定義書}
画面設計書を作成してくれました。

 ④Replit Agent：要件定義書・画面設計書・UIデザインを元に開発Replitにアクセスします。
https://replit.com/
左メニューの「Repls」をクリックして「Create with Replit Agent」タブで以下のプロンプトを実行します。（2024/11/16 現在 こちらの機能を使うには課金が必要です）
プロンプト（＋UIデザインを添付）
以下の設計書に従ってアプリを生成してください

# 要件定義書
{Feloで生成した要件定義書}

# 画面設計書
{ChatGPTで生成した画面設計書}

# UIデザイン
添付画像を参照してください
これでアプリの大枠は作ってくれるのですが細かい修正をしていきます。
以下のようなことが問題だったので修正してもらいました。
当初ローカルLLMを使用する想定だったが、精度に問題があったのでGeminiを使用するよう修正。これは「please use Gemini insted of local LLM」のような一言で迅速に対応してくれました。
日本語のYoutubeで動作したが英語のYoutubeで動作しなかった
ボタンをクリックしたBad Requestになる
「要約に失敗しました」というエラーが発生する
などなど様々なエラーが発生しました。
時にはConsoleのエラーを確認してエラーメッセージをコピペしたり、「I'd like to check text from Youtube API.Please output logging on console」などでデバッグコードを仕込んでもらったりしてエラーを潰していきました。
とにかく対話つづけることで修正を重ねアプリは無事に完成しました！
ランニングコストが発生するので実際には試していないのですがDeployもこのままできるようです。

 まとめ色々と使い方などキャッチアップしながら試行錯誤しつつでも業務の合間に作業して2日くらいで完成したので相当爆速で開発できました。感動モノです。
何よりも自分が欲しかったアプリなので利用しまくっています。
10分以上の動画をみるとなるとなかなか時間が捻出するの難しいので重宝しています。

 おまけ
株式会社MAKE A CHANGEはAIシステム・アプリ開発とソリューションを提供する専門企業です。
お気軽にご相談ください。
また、生成AIに関わる仕事がしたい仲間（AIエンジニア、PM、UIUXデザイナーなど）も募集中です。
https://makeachange.co.jp/