【開発実績】英会話アプリ：リピーティング、シャドーイング、デクテーションアプリの開発

こんにちは。

英語学習、してますか？

シャドーイング、リピーティング、デクテーション、多読、多聴、単語、文法、瞬間英作文、長文読解、フリーカンバセーション、、、やるべきことはたくさんありますよね！

今回は自分の学習用に「リピーティング・シャドーイング専用アプリ」を作ってみました。

結論から言うと、技術的には十分に成立します。

この記事では、実際に手を動かしてわかった技術面・コスト面・体験面のリアルな話をまとめます。

作ったもの

英文リピーティング練習アプリのMVPです。

大量の英文（スプレッドシートから一括インポート）を、1画面1問で順に表示。タップでAI音声が流れ、口に出してリピート。ボタンを押すと英文テキストと日本語訳が出る、というシンプルな構成です。

単語学習アプリのUIを、例文（1文まるごと）用に再構成したイメージです。

機能一覧

練習機能

管理機能

技術構成

フロントエンド: Next.js 15 (App Router) + React 19 + Tailwind CSS

バックエンド: Next.js API Routes

DB: Neon (サーバレス Postgres) + Drizzle ORM

AI（音声合成）: OpenAI gpt-4o-mini-tts

ホスティング: Vercel

使っているAI：OpenAI のみ

音声合成は OpenAI の gpt-4o-mini-tts 一本です。

開発はClaude Codeでやってたので最初「Claude（Anthropic）で作ろう」思ったのですが、Anthropic には音声APIがないようです（2026年4月現在）。テキスト生成専用です。リピーティング練習は発音品質が体験の9割なので、ここはOpenAI一択でした。

gpt-4o-mini-tts の強みは instructions パラメータで話し方を自然言語で指定できる点です。今回はこう入れています：

"Read as a clear, natural American English speaker at a slightly measured pace suitable for a language-learning listener. Neutral, friendly tone."

結果的にGoogle翻訳と遜色ない、むしろそれ以上にナチュラルな音声が出たように感じます。

開発中に困ったこと

1. 再生スピードを「どこで」変えるか問題

「ネイティブスピードで聞きたい」「ゆっくり聞き取りたい」の両方のニーズがあります。対応は2通り：

• A: 生成時に instructions でスピード指定 → 別音声として再生成、別途API課金

• B: ブラウザの audio.playbackRate で再生時に変速 → 無料、即時、キャッシュそのまま使える

迷わず B を採用。0.75x / 1.0x / 1.25x のどれを選んでも、同じキャッシュ済み音声を使い回せます。音質の違和感もほぼ無し。

教訓: ブラウザ側でやれることはブラウザ側でやる。同じ理屈で「英文のハイライト」「進捗管理」もクライアント側に寄せて、サーバー負荷とAPIコールを最小化しました。

2. 同じ英文を何度も生成してしまう問題

リピーティングは本質的に同じ英文を何十回も聞き直すアプリです。毎回TTS APIを叩いていたらコストも体感速度も終わっています。

対策として、生成した音声を Postgres にキャッシュする仕組みを入れました。

key = sha256(model + voice + text)

1回生成したらBase64でDBに保存。同じ英文・同じ声・同じモデルなら2回目以降はDBから即取り出し。つまり：

• 同じ英文の2回目以降は 無料＆即時再生

• 声を変えると別キャッシュ（それぞれ初回のみ課金）

• 英文が1文字でも違えば別キャッシュ

これが後述するコスト感の肝です。

コスト面の問題

OpenAI gpt-4o-mini-tts の料金は大雑把に生成音声1分あたり約 $0.015（約2.3円）。

1文あたりのコスト

典型的な英文（15〜20語、再生時間約5秒）の場合：

$0.015×5秒60秒≈$0.00125≈0.2円$0.015×60秒5秒​≈$0.00125≈0.2円

デッキ1つ（100文）あたり

これがキャッシュ設計の威力。デッキを1回作れば、何人が何回聞いても追加料金ゼロです。

100人の社員に配布した場合

既存の英語学習アプリとの比較（100人 × 1ヶ月）

桁が違います。もし100人で使うならという前提ですが、自作アプリはありですね！
（まぁ僕は1人で勉強してるので関係ないですが、、、笑）

結局、既存アプリでよくない？

わざわざ作っておいて何ですが、個人が英語を勉強するなら既存の単語アプリでだいたい十分です。

他のアプリはコンテンツの質・ゲーミフィケーション・継続設計のノウハウが積み上がっていて、たかだか月数百円。個人が英単語や例文を覚えたいだけなら、迷わずそっちを使うべき。

……と、ここまでは想定どおりの結論なんですが、今回実装してみて気づいたのは、「自分の教材」を流し込める学習アプリは意外と無いということでした。

じゃあ何のために作ったのか

自作する意味があるのは、以下のようなケースです：

1. 既製アプリに無い素材で練習したい場合

今回のトリガーがまさにこれで、Versant 対策の例文集でリピーティング練習したい、という要望でした。

既存アプリも用意されたコンテンツで学ぶアプリで、自分の教材（Versant、TOEIC公式問題集、業務資料、書籍の例文集）を流し込むのは基本できません。

本アプリはスプレッドシートからコピペで一括取り込みできるので、手元にある教材がそのまま練習素材になります。

2. 組織の業務英語に特化したい場合

たとえば：

• カスタマーサポート向け: よく使う応対フレーズ100選

• 営業向け: 海外顧客対応の決まり文句

• エンジニア向け: コードレビュー・ミーティングの英語表現

• 接客業向け: 訪日観光客対応フレーズ

社内Wikiや研修資料から英文をコピペすれば、その日から全社員がリピーティング練習できます。

3. コストを組織レベルで最適化したい場合

100人に mikan を配ると月 ¥120,000。本アプリなら初回約¥200、以降ほぼ¥0。

人数が多いほど効いてきます。1,000人・5,000人規模になると、無視できない金額差です。

4. UXを学習フローに合わせたい場合

本アプリには、リピーティング練習に特化したUXを組み込んでいます：

• 10問ごとのセット自動分割（達成感の演出）

• セット完了時の「達成！」画面

• 任意の問題からの開始

• わかる／わからないの2択回答

• 声・スピードの細かい切り替え

これらは汎用アプリには無い、業務や教材に合わせて作り込めるポイントです。

5. まだ AI アプリに触れていない人にもリーチしたい場合

英語学習層にはITリテラシーのバラつきがあります。「ChatGPT で練習してね」と渡しても、まだ使いこなせない人はたくさんいます。

AIを裏に隠した専用アプリを用意することで、AI慣れしていない人にも届けられます。

技術的に証明できたこと

• 高品質なAI英語音声での学習アプリは十分成立する — Google翻訳と遜色ないどころか、それ以上に自然

• TTSキャッシュ設計で実質コストをほぼゼロにできる — 1回生成すれば全員で再利用可能

• Next.js + Neon + Vercel で組織配布レベルのアプリが個人開発者レベルで作れる — 特別なインフラ不要

• スプレッドシートから素材を流し込める設計は強い — 学習コンテンツ用意のハードルが劇的に下がる

• 声・スピードの切り替えはクライアント側で完結する — サーバー再生成は不要

まとめ

AI英語学習アプリは、個人向けは既存サービスに勝てないのが現実です。無理に作らずを使うのが正解。

一方で、「組織で使う」「既製品に無い教材を使う」「独自のUXが欲しい」のどれかがあるなら、自前で作る意味は十分にあります。しかもコストは桁違いに安い。

「社員に業界特有の英語フレーズを覚えてほしい」「自社の研修教材をリピーティング練習できる形にしたい」みたいなニーズがある企業にとって、月¥200で100人に配れるこの方式は、現実的に十分アリな選択肢だと思います。

アプリ開発の無料相談はこちら