ChatGPTを活用したAIチャットアプリの開発 – 要件整理編

ChatGPT X Web App creation ChatGPT
2025.06.19

ChatGPTと対話を繰り返して、要件の整理から実際のコード生成をしてもらい、AIチャットアプリを開発してみました。ChatGPTが一度に生成できるプロンプトには制限があるため、要件の整理も少しずつ整理していき、開発につなげていきました。

まずやりたいことを洗い出しました。

  • UIはChatGPTと同じ。ただし音声入力できるボタンがある。
  • 音声ボタンを１回押すと音声受付を開始。もう一度押すと音声受付を停止して、入力音声に対して応答の音声生成を開始する。
  • 音声から返答(音声)を生成
  • 返答の文字も生成
  • 会話内容をいつでも参照できるように会話履歴をDBに保存
  • 会話の開始前に言語設定が可能
  • 返答文字に対する翻訳機能＋翻訳する言語の設定

追加としてあったらいい機能

  • 前の会話内容をAIが忘れた場合、過去の会話履歴を参照する
  • カスタムインストラクションをテンプレートとして設定できる
  • →設定したら、その指示に従った上で回答を生成するようになる

この記事はその要件定義編になります。

 

初回プロンプト

AI会話アプリを作りたいです。
以下は要件です。 

- UIはChatGPTと同じ。ただし音声入力できるボタンがある。
- 音声ボタンを１回押すと音声受付を開始。もう一度押すと音声受付を停止して、入力音声に対して応答の音声生成を開始する。
- 音声から返答(音声)を生成
- 返答の文字も生成
- 会話内容をいつでも参照できるように会話履歴をDBに保存
- 会話の開始前に言語設定が可能
- 返答文字に対する翻訳機能＋翻訳する言語の設定

まず必要なテックを選定したいです。backend はPythonがいいです。Frontendは何がいいか教えてください。またDBを利用するので、どのような無料サービスが利用できるか教えてください。(SQL, NoSQL)
サーバーの選定ですが、なるべく無料がいいです。vercelなど。

Frontendも何がいいかと聞いていますが、Next.jsを使用する想定でいました。

あとBackend側でホスティングサイトの候補を知りたかったので、上記のような感じで聞いてます。

以下ChatGPTからの回答です。

✅ フロントエンド技術選定

オススメ：Next.js (Reactベース) + Tailwind CSS

  • 理由
    • ChatGPTのようなUIを簡単に構築できる
    • Vercelにそのままデプロイできる（無料枠あり）
    • クライアントサイドで音声入力/Web Speech APIが使える
    • 翻訳設定などのステート管理もReactでやりやすい

✅ バックエンド技術（Python）

  • FastAPI を推奨
    • 非常に高速
    • OpenAPI対応（APIドキュメント自動生成）
    • WebSocket対応 → チャットリアルタイム化も可能
    • Vercelには直接載せられないが、Render や Railway で無料運用可能（後述）

✅ 音声機能（Speech-to-Text / Text-to-Speech）

  • 音声入力（Speech-to-Text）
    • フロントでブラウザの Web Speech API を使う（Chromeなら高精度）
    • または、バックエンドで Whisper (OpenAI) を使う（高精度、マルチ言語対応）
  • 音声出力（Text-to-Speech）
    • フロント側で Web Speech API（無料、簡単）
    • あるいはバックエンドで gTTS（Google Text-to-Speech、無料、音質OK）

✅ 会話履歴保存（DB）

選択肢1：SQL（構造化された履歴管理がしやすい）

  • SQLite（ローカル用） → 開発時に便利
  • PostgreSQL
    • 無料クラウド：Supabase、Render、Railway
    • SupabaseはNext.jsとの相性も◎

選択肢2：NoSQL（柔軟なスキーマ）

  • Firebase Firestore
    • リアルタイム同期もできる
    • Next.jsとの統合も簡単
  • MongoDB Atlas
    • 無料枠あり（512MB）
    • Python（Motor / PyMongo）で簡単に扱える

✅ 個人的おすすめ：Supabase（PostgreSQL） or Firebase（簡単さ重視）

✅ サーバー / デプロイ

  • フロントエンド（Next.js）
    • Vercel（最適、無料枠で十分）
  • バックエンド（FastAPI）
    • Render（無料枠：Webサービス＋DB）
    • Railway（PostgreSQL含めて無料枠あり）
    • Fly.io（軽量アプリに向いている）

✅ 翻訳機能

  • DeepL API（高精度・有料プランあり）
  • Google Translate API（無料枠あり）
  • OpenAI GPTで翻訳も可能（プロンプトで簡単に実装可）

技術スタック

分類 技術 補足
フロント Next.js (Vercel) Tailwind CSS、Web UI
バックエンド FastAPI (Render or Railway) Whisper API, 会話履歴保存, 翻訳処理
音声入力 Whisper API（OpenAI） 高精度、マルチ言語
音声出力 gTTS（Google Text-to-Speech） 簡単＆高品質、日本語もOK
データベース Supabase（PostgreSQL） 会話履歴保存、ユーザー情報など
翻訳 OpenAI（GPT API） プロンプトで翻訳可能
デプロイ先 Frontend：VercelBackend：Render or Railway 両方無料で運用可能（VercelではFastAPIは基本不可）

 

２回目プロンプト

DBは候補のものならどれでも良さそうですが、Supabaseにしました。

OpenAI の Whisperは音声をテキストにしてくれるもので、精度はいいので、Whisperを利用することにしています。

frontend, backendは提案のものでよいです。
音声入力は、Whisper APIを利用したいです。
音声出力も、Whisperでできないのでしょうか？できないなら、gTTSでよいです。
DBですが、Supabaseがいいです。それかRailwayを使った方が楽であれば、それでもいいです。
Serverですが、frontendとbackendどちらもVercelにデプロイできないですか？(２つのvercelプロジェクトを作る)
backendができないのであれば、RenderかRailwayを使う方向でよいです。
翻訳もOpenAI を利用して翻訳したいです。

上記を検討した上で、最適な案を提示ください。
また構成図も作成してくれるんですか？

以下ChatGPTからの回答です。

✅ 最終決定された要件に基づく技術スタック

分類 技術 補足
フロント Next.js (Vercel) Tailwind CSS、Web UI
バックエンド FastAPI (Render or Railway) Whisper API, 会話履歴保存, 翻訳処理
音声入力 Whisper API（OpenAI） 高精度、マルチ言語
音声出力 gTTS（Google Text-to-Speech） 簡単＆高品質、日本語もOK
データベース Supabase（PostgreSQL） 会話履歴保存、ユーザー情報など
翻訳 OpenAI（GPT API） プロンプトで翻訳可能
デプロイ先 Frontend：VercelBackend：Render or Railway 両方無料で運用可能（VercelではFastAPIは基本不可）

❓補足ポイント

  • Whisperは音声→テキスト（音声認識）のみ対応で、音声生成は不可です。
  • VercelではPython（FastAPI）をネイティブにはサポートしていません。
    • したがって、バックエンドはRender または Railwayにデプロイする必要があります。
  • SupabaseはNext.jsとの相性抜群、ログイン機能なども拡張しやすいです。

構成図

┌──────────────┐
│  ユーザー    │
└────┬─────────┘
     │
     ▼
┌──────────────┐
│ フロントエンド │ Next.js (Vercel)
│ - UI (ChatGPT風) │
│ - 録音ボタン      │
│ - 翻訳UI / 言語選択 │
└────┬─────────┘
     │ 音声ファイル(Blob)
     ▼
┌──────────────┐
│ バックエンド   │ FastAPI (Render/Railway)
│ - Whisper API呼び出し  │
│ - GPTで返信生成       │
│ - gTTSで音声生成       │
│ - 翻訳API（OpenAI）    │
│ - Supabaseに会話保存   │
└────┬─────────┘
     │
     ▼
┌──────────────┐
│ Supabase DB  │ PostgreSQL
│ - ユーザーID   │
│ - 会話ログ     │
│ - 言語設定     │
└──────────────┘

アプリ起動の流れ

  1. ユーザーが言語を選択してアプリを開始
  2. 録音ボタンを押すと、音声を録音（Blobとしてバックエンドへ送信）
  3. バックエンドで Whisper API を使って音声をテキスト化
  4. GPTで返答テキストを生成
  5. 返答テキストを gTTS で音声化して返却（音声＋テキスト）
  6. 返答テキストの翻訳が必要であれば、OpenAIで翻訳してフロントに返却
  7. Supabaseに会話履歴を保存
  8. フロントで全履歴・翻訳結果を表示

サービス構成まとめ

項目 サービス 無料枠備考
Frontend Vercel + Next.js 月100GB転送
Backend Render / Railway 無料WebサービスOK
DB Supabase (PostgreSQL) 月500MB・1万行程度
音声認識 OpenAI Whisper API OpenAI API利用量に応じて課金
音声合成 gTTS（無料） ローカル or サーバー実行可
翻訳 OpenAI API GPTの料金と共通課金

✅ ご希望あれば…

  • 構成図をビジュアル（画像）で生成することもできます
  • API設計（エンドポイント一覧、リクエスト/レスポンス例）
  • DBスキーマ設計（Supabase）
  • GitHub用READMEテンプレート

必要なものを教えてください。順番に作っていきましょう！

 

3rd prompt (system diagram image)

構成図の作成を依頼してみました。

>構成図をビジュアル（画像）で生成することもできます
はい、ではお願いいたします

以下、ChatGPTが生成してくれたイメージ図。

図の中に文字を表示するのが難しいみたいで、漢字があやしいですが、簡易構成図のイメージとしては結構いい感じです。

ChatGPT image system duagram

 

4th prompt(API設計)

>API設計（エンドポイント一覧、リクエスト/レスポンス例）
こちらもできますか？

以下、ChatGPTからの回答。後で修正はしていくことになります。現状の段階では要件の整理なので、必要そうなメソッドを洗い出してくれているので、一旦OKとして次に進めています。

1./transcribe

  • 目的：ユーザーの音声ファイルを Whisper API で文字起こしする
  • メソッド：POST
  • リクエスト（multipart/form-data）:
Content-Type: multipart/form-data

{
  "audio_file": "<音声ファイル（.wav, .mp3など）>",
  "language": "ja"  // オプション（Whisperに言語を指定）
}
  • response:
{
  "transcription": "こんにちは、調子はどう？"
}

2./chat

  • 目的：GPTで返答を生成
  • メソッド：POST
  • リクエスト:
{
  "message": "こんにちは、調子はどう？",
  "history": [
    {"role": "user", "content": "こんにちは"},
    {"role": "assistant", "content": "こんにちは、どうしましたか？"}
  ],
  "language": "ja"
}
  • response:
{
  "reply": "元気ですよ、ありがとう！"
}

3. /tts

  • 目的：返答テキストを音声化（gTTS）
  • メソッド：POST
  • リクエスト:
{
  "text": "元気ですよ、ありがとう！",
  "language": "ja"
}
  • response:
Content-Type: audio/mpeg
Content-Disposition: attachment; filename="response.mp3"
<MP3バイナリ>

4. /translate

  • 目的：返答テキストを翻訳（OpenAI）
  • メソッド：POST
  • リクエスト:
{
  "text": "元気ですよ、ありがとう！",
  "target_language": "en"
}
  • response:
{
  "translated_text": "I'm doing well, thank you!"
}

5. /history

  • 目的：会話履歴の保存 or 取得（Supabase連携）
  • メソッド：
    • POST（保存）
    • GET（取得）

POST /history

{
  "user_id": "abc123",
  "original": "こんにちは",
  "response": "こんにちは、どうしましたか？",
  "translated": "Hello, how can I help you?",
  "language": "ja"
}

GET /history?user_id=abc123

[
  {
    "timestamp": "2025-04-09T10:22:00",
    "original": "こんにちは",
    "response": "こんにちは、どうしましたか？",
    "translated": "Hello, how can I help you?"
  },
  ...
]

✅ 認証（今後オプション）

  • SupabaseのAuthと連携可能
  • APIにAuthorization: Bearer <token>をつければ制限可能

🔜 次ステップ

  • 上記のAPIベースでFastAPI実装を始める準備ができます
  • 必要ならFastAPI側の**プロジェクト構成（main.py / routers / servicesなど）**もご提案できます！

作っていきましょうか？それともこのAPI設計に何か追加したい点ありますか？

5th prompt (テーブル定義)

実装する前にuser, conversation or history テーブルを定義してください。

以下、ChatGPTからの回答。

✅ ER図のイメージ（簡易）

user (1) ── (多) conversation (1) ── (多) message
  1. user テーブル
CREATE TABLE "user" (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  email TEXT UNIQUE,
  name TEXT,
  preferred_language TEXT DEFAULT 'ja',
  created_at TIMESTAMP DEFAULT now()
);
  • id は UUID（SupabaseのAuthと連携しやすい）
  • preferred_language: 初期設定としてユーザーが選ぶ言語
  1. conversation テーブル
CREATE TABLE conversation (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id UUID REFERENCES "user"(id) ON DELETE CASCADE,
  title TEXT,
  created_at TIMESTAMP DEFAULT now()
);
  • 会話単位でログを分けられる（会話ごとにタイトルなどを付ける場合も対応）
  • 会話削除時にメッセージも削除されるよう親子関係構築可能
  1. message テーブル
CREATE TABLE message (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  conversation_id UUID REFERENCES conversation(id) ON DELETE CASCADE,
  role TEXT CHECK (role IN ('user', 'assistant')),
  content TEXT NOT NULL,
  translated_content TEXT,
  created_at TIMESTAMP DEFAULT now()
);
  • role: user or assistant
  • translated_content: 翻訳機能で表示する内容（任意）

✅ 利用例：1ユーザーの会話フロー

  • ユーザーがアプリを起動 → user に登録 or 取得
  • 新しい会話が始まる → conversation に追加
  • 発言があれば message テーブルに user → assistant で1セット記録
  • 翻訳も必要なら translated_content に追加保存

✅ オプションで入れてもよいカラム

テーブル カラム名 用途例
user avatar_url プロフィール表示
conversation language 会話単位の言語設定
message audio_url gTTS音声の保存URL（S3等）

この構成で、会話の履歴・多言語・翻訳・ユーザー管理すべてに柔軟に対応できます。

このまま SupabaseのSQLエディタに貼って実行可能です。

必要であれば、この構成に基づいて FastAPI 側の ORM モデル（SQLAlchemy or Tortoise）も作成できます。進めましょうか？

ここまでのまとめ

ChatGPTを用いて、AIチャットアプリを開発するための要件を整理してきました。

どんな技術スタックを使うかと、簡易的なシステムの構成図の作成、そしてどんな機能を実装しないといけないか、アプリに必要なテーブルを定義してもらいました。

次回以降のプロンプトでは、実際にコードの生成をしてもらいます。

ChatGPTに生成してもらい、Backendを実装していった記事

ChatGPTを活用したAIチャットアプリの開発 - Backend開発編
前回、ChatGPTと対話を繰り返して、AIチャットアプリの要件整理を行いました。 使用するテックスタックの整理、簡易システム構成図の作成、API設計、テーブル設計。 この記事では、実際にbackend側のコードをChatGPTに生成してもらいます。
masa-engineer-blog.com
2025.06.20

スポンサー広告