社内タイピング練習サイトを研修中に1日で作った話

「現代の魔法」を使えば、新入社員でも限られた時間でニーズを満たすプロダクトは作れる！

📚 この記事を読んで得られること

1日で動くプロダクトを作るためには
最小構成で社内ニーズを満たす「MVP」の作り方
研修中でも“実際に使われるもの”を作るコツ

1. はじめに

はじめまして。新入社員のSです！

突然ですが、弊社では入社時に「200文字程度の文章を4分以内にタイピングする」というテストがあります。

これは、エンジニアにとっては比較的クリアしやすい課題ですが、PC操作に慣れていない同期にとっては少し高いハードルでした。

その練習として、会社からは200文字前後の文章が書かれたWordファイルが複数配布されていました。

ですが、配布されたファイルで練習するために：

問題ごとにWordファイルを開き、
スマホでストップウォッチを立ち上げ、
タイピング練習を開始し、
終わったら目視で間違いを確認し、
ストップウォッチを止め、次のファイルへ…

時間をかけるべきは「タイピングの練習」なのに、それ以外に手間がかかっていた。

研修の合間に「これ、どうにかできないかな～」と思い、タイピング練習サイトを作ることにしました。

2. 仕様をどう決めたか：ユーザー＝自分たち

最低限必要な仕様は明らかでした。

200文字程度の問題文を表示
タイマーで4分カウント
ミスタイプの検出
問題文を切り替えられるUI

課題が明確だったので、「これさえ満たせばOK」という最小構成をすぐに決めることができました。

3. 1日で作るための技術戦略：「現代の魔法」を使い倒す

目標は「1日でのリリース」。そのため、サーバーサイドの実装は避けたいと考えました。

技術選定

構成： HTML / CSS / JavaScript のみ
ホスティング： GitHub Pages

この構成ならサーバー構築は不要で、ブラウザだけで完結します。これは高速リリースに最適な選択でした。

AIとのペアプログラミング

ここからが「現代の魔法」の出番です。GitHub Copilot と GPT-4o/4.1 を相棒に、開発を始めました。

最初のバージョンはわずか数分で完成しました。

ちなみに、私がGPT-4oに投げた最初のプロンプトは、以下のような非常にシンプルなものです。

タイピングテストのWebサイトを作成してほしい

html/css,javascript のみ
オフラインでも利用できるようにローカルで動作

問題文はlist.txtファイルから読み込み
一つのtxtファイルに複数問題が入っている
問題の区切りは改行二回
問題文を切り替えるボタンを左上に設置

タイマーを付属
デフォルトは4分のタイマー
ユーザーは時間を変更できる

問題文と入力された文字列が一致したらクリア
文字が入力される度に判定し、問題文と違うところを赤色で強調

タイマーストップ後、合っている部分の文字数を計算し、何文字分クリアしたかを表示

これだけでタイピングゲームの基本的な骨格となるコードが手に入ります。あとは細かい仕様を対話形式で伝えていくだけで、みるみるうちに形になっていき、1、2時間ほどで目的のものが完成しました。見た目は非常に質素でしたが、同期が抱えていた課題を解決するには十分なものでした。

初期版のスクリーンショット

プロトタイプスクリーンショット

4. 詰まったところ

詰まったところは特にありませんでした。

明確な課題 × シンプルな構成 × AIの助け ＝スムーズに開発できました。

5. 完成して分かったこと

✔ 「とりあえず動く」を1日で作るコツ

「課題を見つける力」これが大事だと思っています。

課題が明白になれば、あとはAIが理解できるように整理して指示を出すだけ。

プロンプトエンジニアリングが重要になりますが、趣旨とは外れるためここでは割愛します。

✔ 利用者からの反応

「練習がしやすくなった」「めっちゃ便利！」という声を多数もらえた
ユーザー = 同期なので、その場ですぐフィードバックをもらえて改善にもつながった

✔ 視点の変化

「現状を当たり前と思わない姿勢」
ユーザー自身も気づいていない不満を拾えると、価値あるプロダクトにつながる

6. 気軽にフィードバックできる関係性を築く

プロダクト開発において、フィードバックを素直に受け入れ、改善に繋げる姿勢は信頼の源です。信頼を得られると、「もっとこうしたら良いかも」という質の高いアイデアが自然と集まってきます。

ここで同期から貰った様々なアイデアが改良版へと繋がりました。

7. UI/UXを改善したバージョンの開発

フィードバックを元に、遊び心とわかりやすさをプラス。

🌟 改善点

進捗・入力速度などをリアルタイムに可視化
スペースを「␣」として可視化
正しい入力時にエフェクトが出る
残り時間が少なくなると爆弾が点滅 → タイムオーバーで爆発！💥
「問題文を覚えてしまう」問題に対処するため、AIによる自動作問機能を追加
- Gemini APIを利用し、「200文字前後の一般常識についての文章を生成して」とリクエストを投げる仕組みです。生成された文章が指定した文字数（175〜220文字）の範囲外だった場合は再生成するなど、練習に適した文章になるよう工夫しました。