【Flutter × AI】音声変化に着目したシャドーイングアプリ「シャドマス」を作った話

こんにちは@ヒラメです。
このたび、英語の音声変化に特化したシャドーイングアプリ「シャドマス」 を公開しました。
本記事では、このアプリを開発するに至った背景や技術スタック、こだわったポイントなどを紹介します。

https://shadomas.com/

🎯 なぜシャドーイングアプリを開発したのか？

英語学習の中で「聞こえない音」をどう克服するかは、永遠のテーマです。
特にネイティブの自然な会話では、音声変化（連結、同化、脱落など） が頻繁に起こります。

たとえば：

I'm going to work today.

👂️ 例：ネイティブ発音だと アム ガナ ワァーク トゥデイ に聞こえます。

私もこれまで何度も耳にしてきましたが、まだまだ聞き取れない音がたくさんあります。

既存の英語学習アプリではこうした「音声変化」へのフォーカスが弱く、シャドーイングに特化したアプリを探してもお手頃な価格かつ実用的なコンテンツで学習できるものが無く困っていました。

「無ければ作ればいい」— そう思い立ち、4人のスペシャルなメンバーで開発を始めました🔥

🐸 シャドマスとは？

シャドマスは、音声変化に着目した英語シャドーイングアプリです。
AIによる発音評価や添削、聞き取りにくい音を可視化する機能を搭載しています。

こんな方に特におすすめです：

• ネイティブの英語が「早すぎて聞こえない…」と感じている中級者〜上級者
• 独学でシャドーイングをしているが、正しくできているか不安な人
• 自分の発音が実際に通じるのかチェックしたい人
• 音声変化を意識して本格的にリスニング力を鍛えたい人

主な機能：

• ✅ ネイティブ音声に沿った スクリプト付き再生
• ✅ 自分の声を録音し、AIで発音を評価（Speechace API連携）
• ✅ 苦手な音声変化に対応した ピンポイント練習
• ✅ 学習履歴・単語登録で 習慣化サポート

🛠️ 技術スタック

開発には Flutter + Firebase + Speechace + GitHub を使っています。

項目	技術
フロントエンド	Flutter（iOS / Android）
バックエンド	Firebase Cloud Functions (TypeScript)
音声評価API	Speechace
認証	Firebase Auth（Email / Google / Apple）
DB	Firestore
ストレージ	Firebase Storage
開発管理	GitHub
CI・CD	GitHub Actions（学習データの自動デプロイ）

フロントエンドアーキテクチャ

フロントエンドでは、MVVM + Repository パターンにより、UIとロジックの責務を明確に分離して構成しています。データ取得やビジネスロジックは ViewModel から切り離し、テストや機能拡張のしやすい構成にしています。

使用している主なライブラリ・設計方針：

• riverpod：状態管理。グローバルにもローカルにも使えるため、MVVMに相性が良い
• go_router：画面遷移と deep link 対応。画面構成の責務を明確に保てる
• flutter_hooks：Widgetのロジックの分離・簡素化（HookWidgetでViewを整理）
• freezed：状態やモデルの定義に活用。ViewModelや非同期処理の状態表現に使用
• cloud_firestore, firebase_auth, cloud_functions など Firebase SDK 各種

このアーキテクチャにより、小さな機能単位での開発・テスト・修正がしやすくなり、チーム開発にも適した構成になっています。

バックエンドシステム構成

バックエンドでは、Firebase にて、Auth、Firestore、Storage、Cloud Functions を組み合わせたサーバーレス構成を採用しています。ユーザー認証から音声データの保存、音声評価でのAPI連携までを一貫して担うことで、スケーラブルかつ保守性の高い仕組みを実現しています。

音声評価の仕組みとデータの扱い：

• APIキーの秘匿性：Speechace API キーは Cloud Functions で安全に保持
• データ検証：Cloud Functions 内でユーザーIDなどの整合性を確認し、不正リクエストをブロック

Speechace API で何をしているのか、何ができるか、今後記事をアップデートしていく予定です！📢

GitHub Actionsによる学習データ更新：

• シャドーイングに使用する学習データ（音声・スクリプトなど）は、GitHub 上の管理リポジトリでバージョン管理しています。
• GitHub Actions を使って、特定ブランチへの更新をトリガーに Firebase Storage や Firestore へ自動デプロイされる仕組みを構築しています。

🚀 アプリのダウンロードはこちら

🍎 App Store（iOS）:
https://itunes.apple.com/jp/app/id6745143950?mt=8

🤖 Google Play（Android）:
https://play.google.com/store/apps/details?id=com.eleven.shadomas

いくつかのシャドーイングは無料で試せるので、ぜひダウンロードして使ってみてください！

🙏 最後に

私自身が「英語の音声が聞き取れない」ことに何度も悩んできました。だからこそ、聞こえる体験 ができる学習環境を本気で作りたいと思っています。

もし興味を持っていただけたら、試してもらえると嬉しいです。感想・バグ報告・フィードバックなども大歓迎です！

@ヒラメ