スマホアプリ（タイピング×英単語学習PWA）

英単語をタイピングして学習するゲーム形式のPWAアプリを作成しました。
出題された英単語を制限時間内に入力し、 正解数を競うシンプルな学習ゲームです。

URL: https://www.otomoko.shop/words/

英単語学習、タイピング練習、スキマ時間を利用しての学習を想定し、スマートフォン・PCの両対応としました。
スマートフォンではオフラインでも利用が可能です。

使用技術

• HTML
• CSS
• JavaScript（React等は使用しない）

制限事項

• バックエンド：使用しない
• 外部API：使用しない
• 外部ライブラリ：使用しない
• データ保存：localStorage

ゲームの仕様

英単語を一つランダムに表示し、入力欄に単語を入力。60秒以内にいくつ正しく入力できたかを競う。正解するとスコアが+1。残り時間はカウントダウンで表示。
結果画面にゲーム終了メッセージ。リスタートボタンで再開可能。

アプリの特徴

• 初級・中級・上級と三段階の難易度あり
• ローカルストレージにてハイスコアを保存
• 正解時には〇、不正解時には×が大きく表示される。効果音あり。
• 残り20秒でタイマーの色がオレンジに、10秒で赤。5秒で画面が赤く点滅する

デザインについて

タイピングに集中させることを目的としたものだが、ゲームらしさを演出するため、レトロなゲーム感のある色調やデザインを採用し、効果音や視覚演出（〇/×表示、TIME UP演出など）を取り入れ、ゲームとしての楽しさを意識したUIにした。

この制作について気を付けたこと

• PC・スマートフォン両方で快適に遊べるよう、レスポンシブ対応と実機での挙動確認を行った
• スマートフォンでは、キーボード表示によって入力欄や情報が隠れる問題に直面し、レイアウトを再設計して改善した
• 残り時間・スコア・レベル・判定が常に確認できるよう、HUDの配置や情報の見せ方を工夫した
• iOSの消音モードでは効果音が鳴らない仕様も確認し、視覚的フィードバックを重視する設計にしている（効果音のオンオフ切り替えもアプリ上でできる）

作業時間：5時間。ChatGPT（ゲーム設計）およびGemini（アイコン描画）を使用