「英会話の練習アプリを作りたい」
という要望から技術検証としてMVPを開発してみました。結論から言うと、技術的には十分に成立します。ただし、ビジネスとして成立するかはまた別の話でした。
この話を聞いた瞬間に、「既存のChatGPTとかのAIと会話すれば十分では?」と思いましたが、興味本位で作ってみました。
この記事では、実際に手を動かしてわかった技術面・コスト面・体験面のリアルな話をまとめます。
作ったもの
空港従業員向けAI英会話ロールプレイアプリのMVP(技術検証版)です。
AIが「乗客役」として英語で話しかけてくるので、ユーザーは「空港スタッフ役」として英語で応対する、というシンプルな構成です。

機能一覧
テキストチャットモード
機能 | 説明 |
|---|---|
シナリオ選択 | チェックイン・搭乗ゲート案内・遅延案内の3種 |
テキスト入力 | 英語で入力するとAI(乗客役)が返答 |
音声入力 | マイクボタンで音声→テキスト変換(OpenAI Whisper) |
AI音声再生 | AI返答を自動で音声再生(OpenAI TTS) |
音声キャッシュ | AI応答時にバックグラウンドで音声を先読み生成 |
会話履歴 | コンテキストを保持した自然な会話(直近20メッセージ) |
会話リセット | いつでも最初からやり直し可能 |
リアルタイム音声モード
機能 | 説明 |
|---|---|
WebRTC接続 | OpenAI Realtime APIとブラウザを直接接続 |
音声会話 | ボタンを押しながら話し、離すと送信 |
リアルタイム応答 | AIが0.3秒以下で音声応答 |
リアルタイム文字起こし | ユーザー・AI双方の発話をリアルタイムでテキスト表示 |


技術構成
フロントエンド: Next.js 16 (App Router) + React 19 + Tailwind CSS 4
バックエンド: Next.js API Routes
AI(チャット): Anthropic Claude Sonnet 4
AI(音声認識): OpenAI Whisper API
AI(音声合成): OpenAI TTS API (tts-1)
AI(リアルタイム): OpenAI Realtime API (gpt-4o-realtime-preview)
ホスティング: Vercel使っているAI:ClaudeとOpenAI
チャット部分はClaude、音声周りはOpenAIという構成です。理由はシンプルで、Anthropicには音声APIがないからです。
テキスト会話の品質はClaudeが高いと感じましたが、音声のリアルタイム体験を求めるとOpenAI Realtime APIかなと思いました。(あくまで2026年4月時点で感想です。)
開発中に困ったこと
1. 音声の棒読み問題
最初にブラウザ内蔵のSpeech Synthesis API(無料)で音声再生を実装しましたが、完全に棒読みでした。英会話練習アプリとしては致命的です。
OpenAI TTS API(tts-1モデル、声:shimmer)に切り替えたところ、自然な抑揚のある英語になりました。ブラウザTTSとの差は歴然です。
教訓: 音声品質は体験に直結する。ブラウザ内蔵TTSはプロトタイプでも避けた方がいい。
2. TTS再生のタイムラグ
テキスト応答が返ってきてからTTSを呼ぶため、1〜2秒のラグが毎回発生しました。
対策として以下を実施:
tts-1-hd(高品質・低速)→tts-1(標準品質・高速)に変更AI応答が来た瞬間にバックグラウンドでTTS生成を開始(先読み)
生成済み音声をキャッシュし、2回目以降は即再生
これでボタン再生は即座になりましたが、初回の1〜2秒は構造的に避けられなかったです。
3. Realtime APIのエコー問題
リアルタイム音声モードでは、AIの音声がスマホのマイクに拾われて「ユーザーの発話」として認識されるという問題が発生しました。
何も話していないのに、AIの音声がマイクに入り→テキスト化され→それに対してAIが返答する、という無限ループのような状態になりました。
対策として、自動音声検出(VAD)をオフにし、プッシュ・トゥ・トーク方式(ボタンを押している間だけマイクON)に切り替えて解決しました。
教訓: スマホでのリアルタイム音声会話は、エコー対策が必要。スピーカーとマイクが近いモバイルデバイスでは、VADベースの自動会話は現状厳しそう。
コスト面の現実
方式①: テキスト + TTS(現実的)
API | モデル | 1ターンあたり |
|---|---|---|
Chat | Claude Sonnet 4 | 約$0.002 |
TTS | OpenAI tts-1 | 約$0.001 |
STT | OpenAI Whisper | 約$0.001 |
合計 | 約$0.004/ターン |
10ターンのロールプレイ1回で約$0.04(約6円)。
月100人が毎日1回使っても月$120程度。これはビジネスとして十分許容範囲です。
ただ、相手の会話を待つ間が1〜2秒のタイムラグがあり、若干違和感があります。
方式②: Realtime API(高い)
項目 | 料金 |
|---|---|
音声入力 | $0.06/分 |
音声出力 | $0.24/分 |
合計 | 約$0.30/分 |
5分のロールプレイ1回で約$1.50(約220円)。方式Aの約30倍です。
月100人が毎日1回使うと月$9,000。ユーザー課金なしでは厳しい水準です。
ただ、方式①とは異なりほぼリアルタイムで会話できる感じで、スムーズでした。
コスト比較まとめ
方式 | 5分1回 | 月100人×毎日 | 体験 |
|---|---|---|---|
テキスト+TTS | $0.04 | $120 | ラグ1-2秒 |
Realtime | $1.50 | $9,000 | ほぼリアルタイム |
ChatGPT Plus | $20/月固定 | $2,000(20人分) | リアルタイム |
結局ChatGPTでよくない?
わざわざ作ってみてなんですが、、、既存のChatGPTの音声モード優秀ですよね。めちゃくちゃリアルタイムだしスムースですし。
個人が英会話を練習したいだけなら、ChatGPTの音声モードで十分です。
ChatGPT Plus(月$20)に加入すれば、音声モードでリアルタイム英会話ができます。「空港スタッフとして練習したい」と伝えれば、ちゃんとロールプレイしてくれます。音声品質も高く、ラグもほぼゼロ。個人利用ならこれが最適解です。
じゃあ何のために作ったのか
カスタムアプリを開発する意味があるのは、以下のようなケースです:
1. 組織として管理したい場合
社員の利用状況を把握したい
シナリオを会社の業務に合わせてカスタマイズしたい
「ChatGPTを各自で使って」は管理できない
2. UXを特化させたい場合
「シナリオを選んで開始」のような誘導型UI
学習進捗の記録・フィードバック機能
発音評価や成績管理
3. コストを組織レベルで最適化したい場合
ChatGPT Plusを100人に契約すると月$2,000
方式①なら月$120で済む(ただし体験は劣る)
4. 技術検証として「できること」を確認したい場合
僕の目的はそれでした。
5. まだまだChatGPT使わない人がいる。
IT業界にいるとわからなくなりますが、未だ使ったことがないという人が結構多いんです。そう考えると、その人たち向けにAIをラップしただけのアプリを用意してあげるのは価値があるかもしれないですよね。
技術的に証明できたこと
AIによる英会話ロールプレイは成立する — シナリオに沿った自然な会話が数ターン以上続く
テキスト+TTS方式は低コストで実用的 — 1回6円程度で、品質も十分
Realtime APIでほぼゼロラグの音声会話が可能 — ただしコストは30倍
ブラウザだけで音声入出力が完結する — ネイティブアプリ不要
Next.js + API Routesで十分に構築可能 — 特別なインフラ不要、Vercelで即デプロイ
まとめ
AI英会話ロールプレイアプリは、技術的には簡単に作れる時代になっています。Next.js + Claude API + OpenAI音声APIの組み合わせで、すぐに実際に動くプロトタイプができました。
ただし、ビジネスとしてペイするかは別問題です。個人の英語学習ならChatGPTの音声モードが最もコスパが良いですね。
カスタムアプリが活きるのは「組織管理」「業務特化」「コスト最適化」のいずれかが必要なケースです。逆に言えば、そのニーズがある企業にとっては、月$120で100人が使える方式Aは十分に魅力的でしょう。
