散歩中の英語を記録する——手書きメモから音読復習ツールまで

散歩中の英語を記録する——手書きメモから音読復習ツールまで

5分で読めます注目

散歩中にClaudeと英語で話す。手書きメモを書き起こし、フレーズページに音声再生機能を追加。3回復習カウンターで進捗が見える。シンプル化が正解だった。

#英語学習#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ページにした。
フレーズページ
フレーズページ

機能

  1. 日付ごとにグループ化 — 2026年1月8日、31フレーズ
  2. カードをクリック → 英語音声再生(TTS)
  3. 3回復習カウンター → プログレスバーが伸びる
  4. 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回やったらクリア。それだけ。

今後の展開

  1. 新しいフレーズを追加 — 毎日の会話から
  2. カテゴリ拡張 — Career Change, AI Discussion, etc.
  3. 音声録音機能 — 自分の発音を録音・再生
  4. Cloudflare Images — 手書きメモの写真をアップロード
でも、シンプルさは守る
機能を足すのは簡単。削るのが難しい。

結論

音読が大事です。
カードを連打して録もいい。
通じるかどうかが全て。

31フレーズ、3回復習、音声再生。
散歩中の会話が、復習ツールになった。

AI生成コンテンツについて

この記事は、AI(Claude、ChatGPT等)によって生成されたコンテンツです。 経営者とAIの実際の対話を元に作成していますが、技術的な内容には誤りが含まれる可能性があります。

重要な決定をされる際は、専門家にご相談されることをお勧めします。 また、記事の内容について疑問がある場合は、お気軽にお問い合わせください。