NAKASHIMA CRAFT で開発を担当している中島Dです。

今回は、TypeCraft という日本語タイピング練習サイトをつくった時の考え方をまとめます。

TypeCraft は、ブラウザだけですぐに遊べるタイピング練習サイトです。 はじめてパソコンに触れる人の練習から、毎日の記録、ちょっとした腕試しまで使えるように設計しました。

#まず大切にしたのは「自分の打ち方で通る」こと

日本語のローマ字入力は、人によって打ち方が少しずつ違います。

たとえば「し」は shi と打つ人もいれば si と打つ人もいます。 「てんき」も、文脈によっては tenki と打ちたい場合も tennki と打ちたい場合もあります。 拗音や促音も同じで、「きゃ」を kya と打つ人もいれば、kixya のように分けて打つ人もいます。

TypeCraft では、こうした違いをできるだけ受け止めるようにしました。

内部では、お題の読みを小さなまとまりに分解し、それぞれに許容するローマ字候補を持たせています。 入力された文字が、どれかの候補の続きとして自然なら受理し、合わなければミスとして扱います。

特に気を使ったのは「ん」と「っ」です。

「ん」は次に来る音によって n で確定できる場合と、nn や xn が必要な場合があります。 「っ」は、次の子音を重ねる打ち方と、xtu や ltu を使う打ち方があります。

ここを雑に扱うと、タイピング練習なのに「いつもの打ち方が弾かれる」ストレスが出てしまいます。 速さを測る前に、まず入力として自然に受け止めることを大切にしました。

#初心者にも、慣れた人にも使えるようにする

TypeCraft には、20 種類のお題セットと 17 種類のモードを用意しています。 お題は、短いひらがな単語から、日常会話、ことわざ、ビジネス文、長文、英語、苦手キー練習まで含めています。

最初は「はじめの一歩」のような短い単語で練習できます。 慣れてきたら、30秒・60秒・120秒の制限時間モードで腕試しができます。 さらに、ノーミスを続けるコンボチャレンジ、ミスで時間が減るサバイバル、1ミスで終了するノーミス完走など、少しゲームらしい緊張感のあるモードも入れました。

ただし、モードを増やす時に気をつけたのは、複雑に見せすぎないことです。

最初の画面では、世界地図のような画面から「何を打つか」と「どう遊ぶか」を選ぶ形にしています。 数字や設定項目だけを並べるより、練習を始める前の心理的な重さを少し下げられると考えました。

#手元を見ながら覚えられるようにする

タイピング練習では、結果の点数だけでなく、今どのキーを押せばよいかが分かることも大切です。

TypeCraft では、画面上に仮想キーボードを表示しています。 次に押すキーをハイライトし、押したキーにも反応します。 ホームポジションや指ごとの色分けも入れて、手元を見ながら少しずつ覚えられるようにしました。

上級者にとっては、仮想キーボードは必須ではないかもしれません。 それでも、はじめたばかりの人にとっては「次にどこを押すか」が見えるだけで、練習のしやすさが変わります。

速い人だけのためではなく、これから慣れていく人にも開いた道具にしたいと思いました。

#記録を残して、続けやすくする

結果画面では、スコア、KPM、正確率、時間、打鍵数、完了問題数などを表示します。 スコアは、速さだけではなく正確さも反映するようにしています。

また、ゲストモードでもブラウザ内に記録を保存し、活動カレンダーや連続日数、自己ベストを見られるようにしました。

タイピングは、一度だけ測るより、少しずつ続けることで変化が見えてきます。 そのため、1回ごとの結果だけで終わらせず、「最近どうだったか」「続いているか」が分かる画面を用意しています。

現時点では、ゲストモードだけでもひと通り遊べることを優先しています。 ログインして複数端末で記録を同期するための設計も進めていますが、まずはブラウザだけで完結する軽さを大事にしました。

#Rustでフロントエンドまで書く

技術構成は、フロントエンドが Rust + Leptos、ビルドが Trunk、スタイルが Tailwind v4 + daisyUI v5 です。 配信は Cloudflare Workers Assets を使っています。

ローマ字入力エンジン、ゲームセッション、記録集計、日付計算などは、できるだけ UI から分けて実装しました。 これにより、ブラウザで動くアプリでありながら、重要なロジックを通常の Rust のユニットテストで確認できます。

実際に、ローマ字入力の揺れ、全お題が完走できること、ゲームモードの終了条件、記録集計、日付処理などをテストしています。

UI は変わりやすい部分ですが、タイピング判定やスコア計算はアプリの芯です。 そこをテストしやすい形にしておくことで、後からお題やモードを増やしても壊れにくくなります。

#小さなアプリでも安全性を見直す

TypeCraft は、ゲストモードならログインなしで遊べる小さなアプリです。 それでも、公開する以上、セキュリティ面はひと通り見直しました。

外部フォントへの依存をやめ、基本的に同一オリジンだけで完結する構成にしています。 CSP、HSTS、COOP、CORP、Permissions-Policy などのヘッダも設定しました。

また、localStorage のデータが壊れていてもアプリが落ちないようにし、入力由来の文字列をそのままログへ出さないようにもしています。

タイピングゲームは、扱う情報が少ないぶん軽く見えがちです。 けれど、毎日使う道具として公開するなら、壊れにくさと安心感は最初から見ておきたいところです。

#おわりに

TypeCraft は、「速く打てる人のための計測器」というより、タイピングに慣れていく過程を支える道具としてつくりました。

自分のローマ字入力を受け止めてくれること。 次に押すキーが分かること。 短い練習から、少し緊張感のあるチャレンジまで選べること。 記録が残り、続けた分が見えること。

そうした小さな使いやすさを積み重ねています。

日本語タイピングを、少し楽しく、少し続けやすくする道具として育てていきたいと思います。