【Webアプリ開発の実録】「ネイティブアプリ並みのレスポンス」を求められた時の技術的アプローチとUX改善
こんにちは。今回は、最近手掛けた「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の各単語データに紐付ける、というフルスタックな処理を実装しています。直面し
0