音とタイピングで覚える、スマホ対応英単語学習PWAアプリ

「見る・聞く・打つ」を同時に行い英単語を効率よく記憶に定着させるWebアプリです。PWA対応により、アプリストア不要でホーム画面からワンタップで即座に起動・学習できます。

■ 目的と課題解決

「単語帳を見るだけ」の学習では音とスペルが結びつきにくく、ストアからのアプリ導入も手間になる課題に着目。「視覚・聴覚・タイピング」を同時に刺激して記憶定着率を最大化するとともに、PWA化によりどの端末でもホーム画面から即座に起動・学習できる環境を実現しました。

■ ターゲットとデザイン・技術選定

  • ペルソナ: 通学・通勤のスキマ時間に英単語を復習したい学習者。
  • UI/操作性: 長時間使っても目が疲れないダークトーン。Canvas描画補正によりスマホのタッチ操作でも快適にプレイ可能。
  • PWA実装: Service Workerにより、ストアを介さずホーム画面追加やオフライン動作に対応。

■ 主な機能

  • 音声付き英単語タイピング: 出題と同時にネイティブ音声を再生（SpeechSynthesis API）。
  • 成績分析＆ハイスコア保存: 正確率（%）、タイピング速度（WPM）を算出。スコアは自動保存。
  • HTMLコードタイピング: 実践的なWeb制作・記号入力の練習モード。

■ 使用技術・環境

  • フロントエンド: HTML5 / CSS3 / JavaScript
  • 描画ライブラリ・API: Canvas API / Web Audio API（効果音生成） / SpeechSynthesis API（英語音声読み上げ）
  • CSSフレームワーク: Tailwind CSS (CDN)
  • アイコン・フォント: Font Awesome / Google Fonts (Inter, Noto Sans JP)
  • データ保存: LocalStorage（最高スコアの自動保存）
  • 使用AI: Gemini
  • 作成時間: 4時間