「多機能」から「一撃」へ。Velocity English開発記：要件定義編

前回の開発では、多言語対応や音声入力という「盛り盛り」の機能を実装した。

だが、実際に自分で使い込んでみると、非常な現実に直面・・・。「APIコストの爆増」「UXの鈍化」という二つの壁だった。

音声入力から変換まで合計20秒。この「待ち時間」は、アプリが掲げる「Velocity（疾走感）」とは真逆のものだった。そこでPhase 3では、あえて機能を削ぎ落とし、学習の本質を研ぎ澄ませる決断をした。

「多機能＝善」ではない。音声入力や多言語対応を一度切り離したのは、開発速度の低下を防ぐためだけではない。

俺自身が既存の英語アプリに感じていた「余計な機能の多さ」を排除し、本当に欲しかったシンプルなアプリ開発にリソースを集中させるためだ。

そこには開発リソースだけではなく、UXも含まれる。

Gemini APIの回数制限を「制約」ではなく、「1回のプロンプトにどれだけの密度を詰め込めるか」という知的なゲームとして再定義した。いわゆる「ワン・ショット・プロンプト」だ。

「英文・カタカナ・強調ポイント」の3要素を一度の生成で完結させる「一撃」の効率化を突き詰めることとする。

音声認識の「待ち時間」と「誤認識のストレス」を、最新のUX設計で凌駕させる。

それが新機能「ビジュアル・リズム・ガイド」だ。

耳で待つのではなく、目でリズムを捉える。このパラダイムシフトが、学習のテンポを劇的に改善するだろう。まさに俺が欲しかった機能だ。

2. 新機能：ビジュアル・リズム・ガイドの要件定義

ビジュアル・リズム・ガイドの要件となる3要素を紹介しよう。

1日20回という制限を「一撃の質」に変えるためのスパイス。単なるテキスト表示を超え、3つのアプローチで脳にリズムを叩き込む。

強調フォント (Stress Point): ネイティブが強く発音する単語を、Pythonの正規表現で検出し、CSSで「デカく・鮮やかに」強調。どこにエネルギーを込めるべきか一目で理解できる。
カタカナ・リンキング: 単なるフリガナじゃない。音が繋がる「リンキング」を意識した表記を生成し、日本人が苦手な「音の壁」を直感的に視覚化する。

音声波形 (Visual Waveform): CSSアニメーションによる「波形」をカードに配置。実際に喋っているかのような「演出」を加えることで、文章が持つ独特のうねりやテンポ（ダイナミズム）を視覚的に意識させる。

音声出力機能: 視覚的にリズムを掴んだら、仕上げは「音」だ。生成されたテキストをその場で音声出力。目で見ているリズムと、耳で聴く発音を完全に一致させるための最終ガイドとして機能する。

アップデートの核心は、バックエンド（Python）で生成した構造データを、いかに美しく、かつ保守性を保ったままフロントエンド（CSS）へ橋渡しするかにある。

Gemini APIから出力される「WANT」のようなマークアップ済みのテキストを、Pythonの re.sub を使ってリアルタイムで <span> タグへ変換する。

意図: AIに直接HTMLを書かせるのはトークン消費も激しく、デザインの柔軟性も欠ける。記号のみを生成させ、コード側で置換することで「ロジック」と「見た目」を完全に分離。デザイン変更が必要な時は、Pythonを触らずにCSSファイルを更新するだけで完結する設計だ。

「英文」「カタカナ」「音声波形」の3つを、単なる箇条書きではなく「単語ごとのユニット」として垂直に整列させている。

意図: 従来の学習アプリは、英文と読みがズレて表示されることが多く、リズムを掴む際のノイズになっていた。CSS Gridを駆使し、単語・カタカナ・波形のピークを一つのカラム（列）に固定。これにより、視線を動かさずに「音の重なり」を直感的に捉えられる構造を実現した。

視覚的リズムガイドで「構造」を理解した直後、0.5秒以内に「正解の音」に触れられるよう、カード内に即時再生ボタンを実装した。

意図: 視覚情報だけで終わらせず、聴覚へフィードバックすることで、脳内での「音のイメージ」と「現実の音」を最短距離で同期させる。これこそが、Velocity Englishが追求する「疾走感のある学習体験」の正体だ。

正規表現（re.sub）による動的スタイリング: Python側でマークアップされた強調箇所を検出し、リアルタイムで <span> タグへ置換。CSSの外部化により、ロジック（Python）とデザイン（CSS）を完全に分離し、保守性を担保している。
Flexbox/Gridによる「縦のライン」の整合: 「英文・カタカナ・波形」が単語ごとに縦に整列するよう配置。これにより、どの単語がどのリズムで、どう繋がるのかが迷子にならない。
音声出力ボタンの追加: 視覚ガイドでリズムを掴んだら、即座にネイティブ音声を再生。視覚と聴覚を「Velocity」を持って同期させる。