#開発#全面刷新#UX#英語学習#イノベーションNext.jsWeb Audio APIGoogle Cloud TTSLocalStorageTTS音声分析
2026年1月10日
英語学習システムを、全部作り直した。
いや、「改善」じゃない。
破壊して、再構築した。
問題だらけだった前のシステム
1. 音声分析が全部フェイク
波形(Waveform)とスペクトログラムを綺麗に表示していたが——
全部嘘だった。
ブラウザの
SpeechSynthesis APIは音声ストリームを返さないので、波形もスペクトログラムもランダムなノイズを表示していた。マイクで録音した「あなたの声」と比較する元データがないので、比較自体が無意味だった。
2. 日記と英語学習が繋がっていない
英語フレーズを学習するページはあった。
でも——
- 日常の体験が反映されない
- 自分の言葉で話す練習ができない
- ただフレーズを暗記するだけ
退屈で、続かない。
3. キャラクターがいない
NotebookLMみたいな「会話形式」で学ぶのが理想。
でも、男女の対話を作っても、誰が誰だかわからない。
顔がない会話は、記憶に残らない。
だから、全部作り直した
1. Memoria × English Learning
「日記を書くと、英語会話になる」
- 日本語で日記を書く
- AIが自然な英語会話に変換
- Takumi(男性)とAnya(女性)が対話形式で話す
- 音声で再生、ループ、シャッフル、速度調整可能
日常の体験が、そのまま英語学習教材になる。
一石二鳥。
2. 本物の音声分析
Google Cloud TTS APIに切り替えて、実際のMP3音声ファイルを取得。
Web Audio APIでデコードして:
- 本物の波形データを抽出
- 本物のスペクトログラム(FFT分析)
- 波形オーバーレイ表示(青: ネイティブ / 金: あなた)
- スペクトログラム横並び比較
ようやく嘘をやめた。
3. Takumi & Anyaのキャラクター化
- Takumi(男性・青): 爽やかな見た目、落ち着いた声
- Anya(女性・ピンク): 明るい雰囲気、はつらつとした声
それぞれにアイコンを生成して、会話リストに表示。
顔があると、記憶に残る。
技術的な詳細
Memoria機能
データ構造:
interface MemoriaEntry { id: string; date: string; title: string; content: string; // 日本語の日記 tone: 'casual' | 'formal' | 'friendly'; conversation?: { english: Array<{ speaker: 'male' | 'female'; text: string; }>; japanese: Array<{ speaker: 'male' | 'female'; text: string; }>; generatedAt: string; }; }
ストレージ: LocalStorage(サーバー不要)
音声再生:
- ブラウザTTS(Web Speech API)
- 男性声・女性声を自動選択
- 再生速度調整(0.5x〜1.5x)
本物の音声分析
Google Cloud TTS統合:
// /api/tts const [audioContent] = await client.synthesizeSpeech({ input: { text }, voice: { languageCode: 'en-US', name: 'en-US-Neural2-J' }, audioConfig: { audioEncoding: 'MP3' } });
Web Audio APIで波形抽出:
const audioContext = new AudioContext(); const arrayBuffer = await response.arrayBuffer(); const audioBuffer = await audioContext.decodeAudioData(arrayBuffer); // 波形データ const waveformData = audioBuffer.getChannelData(0); // FFTでスペクトログラム const analyser = audioContext.createAnalyser(); analyser.fftSize = 2048; const frequencyData = new Uint8Array(analyser.frequencyBinCount);
キャラクターアイコン
AI生成(Imagen 3):
- Takumi: 青ベースの男性キャラ、テック系デザイン
- Anya: ピンクベースの女性キャラ、親しみやすいデザイン
公開フォルダ:
public/icons/takumi.png, public/icons/anya.png作っていて気づいたこと
1. フェイクは気持ち悪い
「見た目が良ければいい」と思っていた。
でも、自分が気づいている嘘を放置するのは、気持ち悪い。
だから直した。
2. キャラクターは強い
「Male」「Female」という表示より、「Takumi」「Anya」の方が圧倒的に親しみやすい。
名前と顔があるだけで、学習体験が変わる。
3. 日記と学習の統合は正解
「今日の体験」を英語にするから、記憶に残る。
教科書のフレーズより、自分の言葉の方が覚えやすい。
まとめ
Before(改善前)
- 音声分析:フェイク
- 日記機能:なし
- キャラクター:なし
- 学習体験:退屈
After(改善後)
- 音声分析:本物のデータ
- 日記機能:Memoria(日記→英語会話)
- キャラクター:Takumi & Anya
- 学習体験:自分の言葉で学べる
全部作り直して、ようやく満足した。
English Version
The Day I Rebuilt the Entire English Learning System
January 10, 2026
I rebuilt the entire English learning system today.
No, not "improved."
Destroyed and reconstructed.
The Old System Was Full of Problems
1. Audio Analysis Was Completely Fake
The waveforms and spectrograms looked nice, but—
They were all lies.
Browser's
SpeechSynthesis API doesn't return audio streams, so both waveforms and spectrograms were just random noise.Without the source data to compare against your recorded voice, the comparison itself was meaningless.
2. Diary and English Learning Were Disconnected
There was a page for learning English phrases.
But—
- It didn't reflect daily experiences
- No practice speaking your own words
- Just rote memorization
Boring. Unsustainable.
3. No Characters
The ideal was learning through "conversation format" like NotebookLM.
But even with male-female dialogue, you couldn't tell who was who.
Faceless conversations don't stick in memory.
So I Rebuilt Everything
1. Memoria × English Learning
"Write a diary, get English conversation."
- Write diary in Japanese
- AI converts to natural English conversation
- Takumi (male) and Anya (female) speak in dialogue format
- Audio playback with loop, shuffle, speed control
Your daily experiences become English learning material.
Two birds, one stone.
2. Real Audio Analysis
Switched to Google Cloud TTS API to get actual MP3 audio files.
Decoded with Web Audio API:
- Real waveform data extraction
- Real spectrogram (FFT analysis)
- Waveform overlay (blue: native / gold: you)
- Side-by-side spectrogram comparison
Finally stopped lying.
3. Takumi & Anya Characters
- Takumi (male/blue): Fresh appearance, calm voice
- Anya (female/pink): Bright atmosphere, energetic voice
Generated AI icons for each, displayed in conversation list.
Having faces makes it memorable.
What I Realized While Building
1. Fake Feels Wrong
I thought "if it looks good, it's fine."
But leaving lies I'm aware of felt disgusting.
So I fixed it.
2. Characters Are Powerful
"Takumi" and "Anya" feel infinitely more relatable than "Male" and "Female."
Just having names and faces changes the learning experience.
3. Diary-Learning Integration Works
Converting "today's experience" to English makes it stick.
Your own words are easier to remember than textbook phrases.
Summary
Before:
- Audio analysis: Fake
- Diary feature: None
- Characters: None
- Learning experience: Boring
After:
- Audio analysis: Real data
- Diary feature: Memoria (diary→English conversation)
- Characters: Takumi & Anya
- Learning experience: Learn with your own words
Rebuilt everything. Finally satisfied.
AI生成コンテンツについて
この記事は、AI(Claude、ChatGPT等)によって生成されたコンテンツです。 経営者とAIの実際の対話を元に作成していますが、技術的な内容には誤りが含まれる可能性があります。
重要な決定をされる際は、専門家にご相談されることをお勧めします。 また、記事の内容について疑問がある場合は、お気軽にお問い合わせください。