こんにちは。今回は、最近手掛けた「AI音声を用いた英単語学習Webアプリ」の開発プロジェクトを通じて、技術的に工夫した点や、エンジニアとして大きく成長できたと感じたエピソードを共有したいと思います。
これからWebアプリ開発をご検討されている方や、同じように要件定義や技術選定で悩んでいるエンジニアの方の参考になれば幸いです。
プロジェクトの概要と技術スタック
今回のプロジェクトは、学習塾向けに「生徒がスキマ時間で効率よく英単語を記憶できるアプリ」を開発するというものでした。
【採用した技術スタック】
・フロントエンド: React, Tailwind CSS
・バックエンド/データベース: Firebase (Firestore, Storage, Authentication, Hosting)
・外部API: Google Cloud Text-to-Speech API (Neural2モデル)
特にこだわったのは「音声の品質」です。単なる機械音声ではなく、Google Cloudの最新AIモデル（Neural2）の女性ボイスを採用し、さらに少し早めの再生速度（1.2倍速）に設定することで、単語帳アプリに最適な「キビキビとしたネイティブに近い発音」を実現しました。
システム構成としては、管理者画面から英単語をExcelで一括登録した際、未生成の音声データをGoogle Cloud APIにリクエストし、生成された音声ファイル（mp3）をFirebase Storageに保存。そのダウンロードURLをFirestoreの各単語データに紐付ける、というフルスタックな処理を実装しています。
直面した最大の壁：「Webアプリ」か「ネイティブアプリ」か
開発が終盤に差し掛かり、デモ環境でのテストを行っていた際、クライアントから非常にシビアなご要望をいただきました。
「他社の有名なネイティブアプリ（スマホにインストールするタイプ）のように、問題が表示された瞬間に遅延ゼロで音声が再生されるようにしてほしい」
当時、問題が表示されてから音声が鳴るまでに約0.6秒のタイムラグがありました。これはプログラムの処理落ちではなく、クラウド上（Firebase Storage）にある高音質な音声データにアクセスし、ストリーミング再生を開始するための「物理的な通信時間」です。
ネイティブアプリであれば、ギガバイト単位のデータを初回インストール時にスマホ端末へ全てダウンロードしておくことで、通信ゼロ（遅延ゼロ）での再生が可能です。しかし、今回の要件は「ブラウザで手軽にサクサク動くWebアプリ」であり、生徒のスマホ容量を圧迫しない設計が求められていました。
「高音質なAI音声（都度ダウンロード）」と「遅延ゼロの即時再生（ローカル保存）」は、Webアプリの構造上、完全にトレードオフの関係にあります。
技術的限界を「UX（ユーザー体験）」で解決する
「これ以上の通信時間の短縮は、物理的に不可能です」とただ突き放すのは簡単です。しかし、エンジニアとしての真の価値は、その制約の中で「クライアントが本当に解決したい課題は何か」を見極めることにあります。
ヒアリングを重ねる中で、クライアントが真に懸念していたのは「0.6秒待たされること」そのものではなく、「音声の読み込みを待っている間にも制限時間のタイマーが減ってしまい、生徒がテストで不利になること（＝公平性の欠如）」だと分かりました。
そこで私は、無謀な技術的チューニングに時間を溶かすのではなく、「UX（ユーザー体験）の仕様変更」による解決策を提案しました。
【実装した解決策：タイマーのフリーズ制御】
・問題が表示され、音声データを取得している間（約0.6秒間）は、テストの制限時間タイマーを完全にストップさせる。
・音声データが正常に読み込まれ、実際に再生が開始された瞬間（onPlayイベント発火時）にタイマーをスタートさせる。
この実装により、通信環境によるタイムラグが生徒の成績に悪影響を及ぼす不公平感を完全に排除できました。さらに、生徒視点では「音が鳴るまでの0.6秒間は、単語を視認する準備時間」として自然に受け入れられるようになり、体感的なストレスを劇的に軽減することに成功しました。
このプロジェクトを通じて得た糧
今回の開発を通して、ReactやFirebaseの連携、外部APIを用いた動的ファイルの生成・保存といった技術的なスキルアップはもちろんですが、それ以上に「クライアントとの折衝力と提案力」が大きく鍛えられました。
お客様は技術の専門家ではないため、時に「軽自動車の予算と仕様で、スポーツカーのスピード」を求めてこられることがあります。その際、技術的な仕組みの違い（Webとネイティブの違いなど）を分かりやすく言語化して説明し、不可能なものは不可能と毅然と線を引きつつも、「別のアプローチ（今回の場合はタイマー制御）で、ビジネス的な目的を達成する代替案」を提示できるかどうかが、プロのエンジニアの腕の見せ所だと痛感しました。
最後に
EFFORK SYSTEMSでは、単に言われた通りにコードを書くのではなく、システムの裏側にあるビジネスの目的や、実際のユーザーの使い勝手（UX）まで踏み込んだ開発を心がけています。
「こんなWebツールが欲しい」「今の業務をシステム化したいが、どう要件をまとめたらいいか分からない」といったご相談も大歓迎です。技術的な制約をクリアし、最適なソリューションをご提案いたします。ぜひお気軽にお声がけください。
