https://yask12.shop/typing_pwa

2. プロジェクト概要

「英単語の暗記を、もっと楽しく、もっと手軽に」をコンセプトにした、Webベースのタイピング練習アプリです。
中学生が間違いやすい月（Months）や曜日（Days）をゲーム感覚で反復練習ができる設計にしました。

3. 使用技術

  • HTML / CSS / JavaScript
  • PWA: Service Worker / Web App Manifest

4. こだわったポイント（技術的工夫）

  • PWA対応によるネイティブアプリ体験
    • SafariやChromeの「ホーム画面に追加」機能に対応。オフライン環境でも起動可能な Service Worker を実装し、通信環境に左右されない学習体験を提供しました。
  • 直感的なUI/UXと視覚的フィードバック
    • 入力制御: 正解の文字以外は入力できないように制限し、初心者でもリズムを崩さずタイピングできるよう配慮しました。
    • ヒント機能: 一定時間入力がない場合に、薄く正解単語を表示するオートヒント機能を実装。学習が止まらない工夫を凝らしています。
    • 演出: 全問正解時の紙吹雪（Canvas API）や、残り5秒の警告アニメーションなど、ユーザーのモチベーションを維持する演出を盛り込みました。