やったこと

Basic English 850 語の語彙学習サイトを計画から実装まで1日で進めた。Codex でレビューした後、Miller Column レイアウトで6カテゴリの単語を一覧・学習できる SPA を作った。

設計と全体構成

6カテゴリ構成

Ogden の分類に沿って以下の6カテゴリで整理した。

Miller Column レイアウト

デスクトップでは3カラム構成にした。

[カテゴリ一覧] → [単語リスト] → [単語詳細・クイズ]

macOS Finder の Miller Column を参考にしたナビゲーション。左から順に選択すると右に詳細が展開される。

850語データの生成

850語 + 文法ルール11項目のデータを JSON で用意する必要があった。手作業は現実的でないので、8並列のエージェントに分割して生成を実行した。

各エージェントがカテゴリごとに担当し、単語・品詞・日本語訳・例文・サブカテゴリ情報を含む JSON を出力。最終的に1つのデータファイルにマージした。

サブカテゴリ機能

Operations カテゴリを例にすると、100語の中に動詞・前置詞・副詞・接続詞が混在している。意味的なグループで分けないと一覧性が悪いので、サブカテゴリを追加した。

Operations (100)
├── 動詞 - 基本動作 (come, get, give, go, ...)
├── 動詞 - 状態変化 (be, become, seem, ...)
├── 前置詞 (about, across, after, ...)
├── 副詞 (again, ever, still, ...)
└── 接続詞 (and, because, but, ...)

Things (General) の400語も同様に、抽象概念・社会・感情などで分類した。

クイズエンジン

アコーディオンから常時展開へ

最初はアコーディオンUI（クイズを折り畳み表示）にしていたが、開く手間が面倒だった。常時展開のフラット表示に変更し、単語詳細ペインの中にクイズがそのまま表示される形にした。

サブカテゴリ別出題

全850語からランダム出題だと範囲が広すぎて学習効率が悪い。サブカテゴリ単位で出題範囲を絞れるようにした。

復習リスト

間違えた単語を Miller Column 形式で一覧表示する復習モードを用意した。

学習履歴の保存

localStorage に直近3回分の正誤履歴を保存する仕組みにした。

// 履歴の型イメージ
type WordHistory = {
  word: string
  results: ('correct' | 'wrong')[] // 最大3件
}

途中離脱時にも即時保存する。beforeunload イベントで現在の状態を書き込む。ページ再訪問時に前回の続きから再開できる。

音声再生

Web Speech API の speechSynthesis を使って発音を再生できるボタンを追加した。

const speak = (text: string) => {
  const utterance = new SpeechSynthesisUtterance(text)
  utterance.lang = 'en-US'
  speechSynthesis.speak(utterance)
}

自動再生トグルも付けた。単語を選択するたびに自動で発音が流れるモード。

モバイル UI

デスクトップの3カラム Miller Column はモバイルでは使えない。リストモードと詳細モードの2画面切替にした。

• カテゴリタブ: 横スクロールで6カテゴリを切り替え
• サブカテゴリチップ: タブの下にフィルタチップを横並び表示
• 単語タップでリスト→詳細に遷移、戻るボタンでリストに復帰

serif フォント採用

学習サイトで英単語を表示していると、sans-serif フォントで大文字の I（アイ）が小文字の l（エル）と区別しにくい問題が出た。英単語の表示部分に serif フォントを指定して解決した。

.word-display {
  font-family: Georgia, 'Times New Roman', serif;
}

serif なら I にヒゲ（セリフ）が付くので一目で区別できる。

トップページの再構成

テスト・デモ用のセクションがトップページに散らばっていたので、コンテンツセクションの中に移動して整理した。トップページはサイトの案内に集中させる構成に変更。

振り返り

• 850語のデータ生成を8並列エージェントで回したのは速かった。手作業なら数日かかる量が数十分で完了した
• Miller Column は情報の階層構造を見せるのに向いている。モバイルとの両立が課題だが、2モード切替で対応できた
• localStorage の即時保存は学習アプリでは必須。ブラウザを閉じても履歴が残る安心感がある
• serif フォントの件は、英語学習という用途を考えると最初から気づくべきだった