URL  https://saikyoxrea.shop/keyboarding

英単語タイピング学習PWAアプリ を作成しました。
英単語をランダム出題し、正誤判定とスコア加算を行い、制限時間内で結果を表示するタイピング学習ゲームです。学習効率とユーザー利便性を意識して設計し、スマートフォン・PC両対応のレスポンシブ設計、オフラインでも利用できるPWA仕様を採用しています。

オフライン利用とホーム画面追加に対応(PWA仕様)

主な機能

出題形式や難易度を自由に選択可能

効果音ON/ OFFや、ゲーム中の操作設定可能

スマホ画面に対応したレスポンシブ設計

制作環境・使用技術

  • 制作時間:5時間
  • 使用ツール:Visual Studio Code、FileZilla、ブラウザ(Chrome / スマートフォン実機)
  • 使用技術:HTML、CSS、JavaScript のみで、フレームワークやバックエンド、外部API・ライブラリは不使用。データ保存にはブラウザの localStorage を活用し、軽量でシンプルな構成にしています。

使用素材 OtoLogic(https://otologic.jp/)

工夫した点
タイピング音はランダムで3種類鳴るようにして、ピアノのように音階を楽しみながら学習できる設計にしました。ゲーム途中でもESCキーで離脱できるなど、ストレスなくプレイできる工夫をしています。また、メニューは英単語だけでなくコードタイピングも選べるようにし、ボタンは最小限にまとめて直感的に操作できるシンプルなデザインにすることで、視認性と操作性を高め、楽しみながら学習できる環境を意識しました。