#英語学習#AI#個人開発#音読ReactTTSlocalStorageミニマルUI
2026年1月8日
今日、個人用の英語学習ツールを完成させた。
正確には、「完成」じゃなくて「シンプル化」した。
始まり:散歩中の英語会話
散歩しながらClaudeと英語で話す。
うまく言えなかったフレーズを手書きメモに書く。
そして、この雑な手書きを、またAIに読み込ませる。
Geminiの画像認識に放り込むと、完璧に書き起こしてくれる。
俺の字、こんな汚いのに。
- "Could you make my reply/answer/response more natural?"
- "They are both tough in different ways → Both are challenging"
- "I'm seriously considering switching completely"
AI → 俺 → 手書き → AI → Webアプリ
このループ、意味わからん(笑)
でもこれが一番記憶に残る。
これは形式じゃない。俺の言葉だ。
作ったもの:フレーズページ
手書きメモを書き起こして、Webページにした。
URL: /english/phrases
機能
- 日付ごとにグループ化 — 2026年1月8日、31フレーズ
- カードをクリック → 英語音声再生(TTS)
- 3回復習カウンター → プログレスバーが伸びる
- 3回で「✓ クリア」 → 緑背景、達成感
音読が大事だから、音声再生を中心にした。
シンプル化の過程
最初、こんなページを作った:
- /english/study — ダッシュボード(進捗・セッション記録)
- /english/conversation-log — 会話記録(日英対訳・復習モード・MD出力)
- /english/phrases — フレーズ集
全部いらなかった。
ユーザー(俺):「ダッシュボードいらなくね?会話記録もなにこれ?」
本質だけ残した。
- /english → トップページ(リンクのみ)
- /english/phrases → フレーズ集だけ
シンプルになった。
復習カウンターの仕組み
```typescript
const speak = (text: string) => {
if ('speechSynthesis' in window) {
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'en-US';
utterance.rate = 0.9;
window.speechSynthesis.speak(utterance);
// カウント更新
const currentCount = reviewProgress[text] || 0;
const newCount = Math.min(currentCount + 1, 3);
const updated = { ...reviewProgress, [text]: newCount };
setReviewProgress(updated);
localStorage.setItem('phrase_review_progress', JSON.stringify(updated));
}
};
```
- クリック → TTS再生 + カウント+1
- localStorageに保存
- 3回で「クリア」
音読を「見える化」した。
なぜこれが良いのか
1. 自分の言葉だから
「This is a pen.」は俺の言葉じゃない。
「I'm seriously considering switching completely.」は俺の言葉だ。
文脈がある。感情がある。だから覚える。
2. 音読が中心
英語学習で一番大事なのは音読。
書くだけじゃ意味がない。声に出す。耳で聞く。
TTS再生で、ネイティブの発音を確認できる。
3. プログレスが見える
3回復習したら「クリア」。
緑のバーが伸びる。達成感がある。
gamificationじゃない。進捗の可視化だ。
4. シンプル
機能を削った。ダッシュボードも、会話記録も、全部削った。
フレーズページだけ。
これでいい。
技術的な詳細
- Framework: Next.js (React)
- TTS: Web Speech API
- 保存: localStorage
- デザイン: ライトモード、セリフフォント、ミニマル
- OCR: Gemini画像認識(雑な手書きでも完璧に読み取る)
「形式」を嫌う理由
英会話サービス、たくさんある。
- 発音スコア
- ネイティブ度判定
- 「もう一度リピートしてください」
俺が嫌いなのは「形式」だ。
スコアで測られること。
評価されること。
このツールには、それがない。
音読して、3回やったらクリア。それだけ。
今後の展開
- 新しいフレーズを追加 — 毎日の会話から
- カテゴリ拡張 — Career Change, AI Discussion, etc.
- 音声録音機能 — 自分の発音を録音・再生
- Cloudflare Images — 手書きメモの写真をアップロード
でも、シンプルさは守る。
機能を足すのは簡単。削るのが難しい。
結論
音読が大事です。
カードを連打して録もいい。
通じるかどうかが全て。
URL: /english
31フレーズ、3回復習、音声再生。
散歩中の会話が、復習ツールになった。
AI生成コンテンツについて
この記事は、AI(Claude、ChatGPT等)によって生成されたコンテンツです。 経営者とAIの実際の対話を元に作成していますが、技術的な内容には誤りが含まれる可能性があります。
重要な決定をされる際は、専門家にご相談されることをお勧めします。 また、記事の内容について疑問がある場合は、お気軽にお問い合わせください。