このサイトはアフィリエイトリンクを含んでいます
スポンサーリンク

自作タイピング練習ゲームが面白くなかったので大改造!『タイポニカv2』誕生の話【無料・ブラウザ】

自作タイピング練習ゲーム、タイポニカv2のプレイ画面 作ってみた!
スポンサーリンク
スポンサーリンク

皆さん、こんにちは。あんちゃんです。自作のタイピング練習ゲーム『タイポニカ』を、このたび土台からまるごと大改造しました!きっかけは、作った本人であるぼくが遊んでみて「……あれ、これ面白くないぞ」と気づいてしまったことです。前回の記事で「音楽タイピングゲームを作ったよ!」と紹介したばかりなのに、いきなりの方向転換。でも、この「自分で作って、自分で遊んで、ダメなところを認めて作り直す」という流れこそ、いちばん面白い開発の話だと思うんです。今回はその一部始終——何がダメだったのかの診断から、AIと一緒にやった作り替え、途中で見つかったバグ、そして「見た目がつまらない」というダメ出しからのもう一段の改修まで——を、失敗談込みで全部書きます。新しくなったタイポニカ(v2.1.0)はこの記事の中に埋め込んであるので、例によって今すぐ無料で遊べますよ!

あんちゃん
あんちゃん

新しいタイポニカの遊び方はこう!
①曲を選ぶ(曲名・レベル★・ハイスコアが出ます)。
②3秒カウントの後、上からひらがなが落ちてきます。
③その文字をローマ字で打つ!打ち切ると、譜面どおりのメロディ音が鳴って曲が進みます。
制限時間はナシ。曲はあなたが打った分だけ進むので、自分のペースで大丈夫。
キーボードのあるPCでの操作がおすすめです!

▶ タイポニカを全画面で遊ぶ(別タブで開く)

ちなみに前回の第1弾の記事はこちらです。今回の話は、この記事の「その後」にあたります。

音楽タイピングゲーム『タイポニカ』v1.2.0を自作!キーボードでピアノ演奏【無料・ブラウザ・第1弾】
音楽タイピングゲーム『タイポニカ』を無料でブラウザで遊べます。流れてくるキーを判定ラインで押すと、きらきら星や第九などの名曲がピアノの音で鳴る自作ゲーム。打つのは1キーずつ、伴奏は自動。シリーズ第1弾、この記事の中で今すぐ遊べます!
スポンサーリンク
スポンサーリンク

自作のタイピング練習ゲーム、作った本人が遊んだら面白くなかった

まず結論から言うと、最初のタイポニカ(v1)は、タイピング練習ゲームとして成立していませんでした。自作ゲームを公開した直後にこれを認めるのはなかなか恥ずかしいのですが、事実なので仕方ありません(笑)。公開してしばらくして、ぼくは自分でタイポニカを遊び込んでみました。そこで出てきた感想が「まだまだ何の面白みも実は感じない」「タイピングアプリとして練習ソフトにならない」だったんです。曲は鳴る。ピアノの音も気持ちいい。でも、何回遊んでも「タイピングがうまくなっていく感じ」がまったくしない。遊びとしても、数回で飽きてしまう。作った本人がそう感じるのだから、読者のみなさんはもっとそう感じているはずですよね。

自作タイピング練習ゲーム、タイポニカv2のプレイ画面

「面白くない」の正体は、文字を覚える必要がないゲームだったこと

そこで「なぜ面白くないのか」を、感覚ではなく構造の問題として診断してみました。答えはハッキリしていました。v1のタイポニカは、ノーツ(落ちてくるかたまり)が落ちてくるレーンが、押すキーの物理的な位置そのものだったんです。Aキーの真上のレーンにノーツが来たらAを押す。つまり、画面が「次はここを押せ」と場所ごと教えてくれる。これだと「この文字はキーボードのどこにあったっけ?」と思い出す工程がゼロなんですよね。タイピングの練習でいちばん大事なのは、文字を見てキーの位置を思い出すことのはずなのに、それをやらなくていい。要するにv1は、タイピングゲームの皮をかぶった「位置合わせゲーム」になっていました。

もうひとつの問題は、キーの割り当てが「A=ド、S=レ、D=ミ…」という音階順だったこと。これはピアノとしては自然なのですが、実際のタイピングの運指とはまったく関係がありません。がんばって指が覚えるのは「ドレミの場所」であって、文字の場所ではないんです。さらに、打つ順番はメロディが決めるので、きらきら星なら「A・A・G・G・H・H・G」のように同じキーの連打だらけ。現実の文章入力に、こんな打鍵パターンはまず出てきませんよね。

数字で見ても、練習にならないゲームでした

ダメ押しで、譜面のデータを実際に集計してみると、これがなかなか衝撃的でした。v1で使うキーは、5曲ぜんぶ合わせてもわずか15種類。アルファベットは26文字あるのに、11文字は一度も登場しない状態だったんです。しかも1曲の演奏時間は16〜31秒しかなくて、5曲を全部弾いても中身は約2分。2分で終わって、キーの半分近くには一度も触れない。「これで練習になります」とは、口が裂けても言えません。作った本人の「面白くない」という直感は、数字でも裏付けられてしまいました。

ここでぼくは決めました。小手先の調整ではなく、ゲームの根っこから作り替える。落ちてくるものも、打つものも、曲の進み方も、全部です。

v2の大改造:落ちてくるのは「かな」、打つのはローマ字、鳴るのは名曲

新しいタイポニカ(v2)の設計は、ひとことで言うと「文字とメロディの切り離し」です。仕組みはこうなりました。

  • 落ちてくるのは「かな文字」:キーの位置ではなく、文字そのものが降ってきます。
  • 打つのはローマ字:「か」ならk・a。「し」はsiでもshiでもOK、「ん」はnでもnnでもOK。ふだんの日本語入力と同じ感覚で打てます。
  • 鳴るのは譜面の音:文字を打ち切った瞬間に鳴るのは、打ったキーの音ではなく、曲のその位置のメロディ音。正しくタイプしていくと、きらきら星や第九が一音ずつ完成していきます。

つまり、「文字を見る→キーの位置を思い出す→打つ」というタイピング練習の芯をゲームの中心に置いて、ごほうびとして名曲が鳴る、という構図です。v1では「キーボード=楽器」だったのが、v2では「キーボード=キーボード、曲はごほうび」に変わりました。実はこの切り離しには、AIから「音楽ゲームとしての気持ちよさとタイピング練習の両立は、そのままでは成立しませんよ」という手厳しい指摘があって、キーボードが楽器でなくなる代償は受け入れる、と割り切って決めたものです。ローマ字入力の複数の綴り(si/shiなど)の話がピンとこない方は、ローマ字入力(Wikipedia)も参考にしてみてください。

曲は打った分だけ進む「打鍵駆動」にしました

v2のいちばん大きな決断が、曲のテンポを捨てたことです。v1は音楽ゲームらしく、ノーツが曲のテンポに合わせて落ちてきて、タイミングよく押す方式でした。ところが、落ちてくるものを「かな」にしてローマ字で打つ形に変えると、計算上とんでもないことが起きます。曲のテンポのまま打とうとすると、いちばんやさしい入門曲でも1分あたり175打、いちばん速い猫踏んじゃったに至っては1分あたり約600打という打鍵速度が必要になるんです。600打/分なんて、人間には物理的に打てません(笑)。

そこでv2では、実時間の時計を捨てて、1文字を正しく打ち終えるたびに曲が1音進む「打鍵駆動」にしました。速く打てば曲は速く流れ、ゆっくり打てばゆっくり鳴る。制限時間も時間切れミスもありません。判定も、タイミングではなく正確さベースに変えました。その文字をミスタイプなしで打てたらPERFECT、打ちまちがえてから打ち直したらGOOD。タイピング練習で大事なのは「速く」より、まず「正確に」ですからね。ついでに、リザルト画面の「タイピング速度の目安(打/分)」も直しました。実はv1では計算のもとが譜面の固定値になっていて、プレイヤーの実際の速さを測れていなかったんです。v2からは、プレイ開始から終了までの実際の経過時間で計算するようにしました。これもこっそり直した欠陥のひとつです。

打つ言葉(詞)は5曲ぜんぶ自作しました——著作権の壁

「かなを打つ」となると、次の問題は何の言葉を打つかです。素直に考えれば「きらきら星の歌詞を打てばいいじゃない」なのですが、ここに著作権の壁がありました。調べてみると、曲と詞は権利が別もので、メロディがパブリックドメイン(著作権切れ)でも、日本語の歌詞には歌詞で権利があるんです。たとえば猫踏んじゃったのよく知られた日本語詞は、作詞者の没年から数えて2070年代まで著作権が生きていることが分かりました。草競馬にいたっては、原詞が19世紀のミンストレル・ショー由来で、現代の感覚では子ども向けに載せられない内容という別の問題も。パブリックドメインについてはパブリックドメインとは(Wikipedia)が分かりやすいです。

そこで思い切って、5曲すべての詞を自作しました。曲の雰囲気に合う平易な日本語の言葉を、ぼくのほうで一から書き下ろしています。これなら権利の確認待ちはゼロ。しかも自作の良いところは、タイピング練習に効くようにキーを散らせることです。英字26文字に加えて、長音「ー」・読点「、」・句点「。」も全曲を通して登場するように配りました。数字は最高難易度の草競馬にだけ、「3とう」「10がつ」のような自然な形で混ぜてあります。レベルが上がるほど記号や数字が増える、段階式の練習になっているわけです。

結果、集計上の登場キーはv1の15種類から28種類に増加(英字22+数字3+記号3)。1周に必要な打鍵数も、5曲合計235打から454打へ、ほぼ倍増しました。同じ5曲・同じメロディなのに、打つ中身はまるで別のゲームです。

出せなかった文字も、正直に書いておきます

ひとつ白状すると、英字26文字のうちl・q・v・xの4文字は登場させられませんでした。標準的なローマ字入力では、この4文字はかな・記号・数字のどれを打つときにも出てこないんです(「ぁ」をlaと打つような非標準の綴りを強制すれば出せますが、詞が不自然になるのでやめました)。26文字コンプリートならず、22文字止まり。ここは「標準的なローマ字入力の練習」という目的を優先した、意図的な割り切りです。あと細かい仕様として、「次に押すキーを光らせる」ガイド機能も付けたのですが、これはあえて最初からオフにしてあります。光ったキーを押すだけだと、それこそv1の位置合わせゲームに逆戻りですからね。どうしても欲しい人だけ、曲選択画面でオンにできます。

AIに「会社ごっこ」をさせて開発を回してみた

ここからは開発の裏側の話です。今回の改造も、テトリスや第1弾のときと同じくAIのClaudeと一緒に作ったのですが、今回はちょっと変わったやり方をしました。Claudeの中に小さな会社みたいな役割分担を作ったんです。ぼくの相談を受けて段取りする秘書役、直す方針を設計する開発リーダー役、実際にコードを書く実装役、歌詞の著作権を調べる調査役、そして「その方針、本当に正しいですか?」とわざと反対意見をぶつけてくる反対役まで。ぼくは社長のつもりで「面白くない。作り直し」とだけ言って、あとは各役割が診断→設計→調査→実装→検査、と順番にバトンを渡していく形で進めました。さっき書いた著作権の調査も、「両立は成立しない」という手厳しい指摘も、この役割分担から出てきたものです。

タイポニカv2の曲選択画面。レベル別の5曲と設定トグル

検査役が見つけたバグ:「ん」をnnで打つとミスになる!

この役割分担が実際に役に立った瞬間がありました。実装役が「できました!」と出してきたv2を、検査役(開発リーダー役)がチェックしたところ、1回目は不合格・差し戻しになったんです。見つかったのは、「ん」をnnと2打で打つと、2打目が必ずミスタイプ扱いになるというバグ。ゲーム内のヘルプには「んはnでもnnでもOK」と書いてあるのに、実際にnnで打つと減点される。ふだんnn派で打っている人(ぼくもです)が遊んだら、確実に「なんで!?」となるやつです。原因を追いかけると、文字が切り替わった最初の打鍵で内部の状態をまとめてリセットする処理が、nnの2打目を受け入れるためのフラグまで一緒に消してしまっていました。修正はソースコードのたった1行。でも、この1行に気づけるかどうかで、遊んだ人の信頼はぜんぜん違ったはずです。

テストも「実際にキーを打つ」自動化に

差し戻しではもうひとつ、「テストが代表的な打ち方しか試していないから、nnみたいな別の打ち方のバグを見逃した」という指摘も出ました。そこで、ブラウザを自動操縦して実際にキーイベントを打ち込む自動テストを作り直しました。si・nnといった別の綴りでの打鍵も含めて全22項目。面白いのは、修正前のバージョンにこのテストを流すと、nn関連の8項目だけがきれいに失敗するのを確認できたことです。つまり「このテストは、あのバグをちゃんと捕まえられる」という証拠まで取れたわけです。失敗をただ直すだけじゃなくて、同じ失敗を二度と通さない網に変える。AIとの開発でここまでできると、なかなか気持ちいいですよ!

実機テストでまたダメ出し→v2.1.0で「音ゲーの絵」を復活させた

検査に合格したv2.0.0を、今度はぼくが実際のブラウザで遊んでみました。タイピング練習としての手応えはちゃんとある。音もいい。でも、また新しい問題が出てきたんです。それは——「なんだか分からない平仮名が一列で順番に落ちてくるだけっていうのは非常に絵的に面白くない」。v2.0.0では「レーン=キー位置」の癒着がv1の失敗の本体だったので、その反省から文字を画面中央の縦1列に積む方式にしていました。理屈は正しい。でも見た目は、はっきり言って地味。v1にあった「音ゲーっぽいワクワクする画面」が消えてしまっていたんです。中身を直したら見た目がつまらなくなるとは、ゲーム作りは本当に一筋縄ではいきません。

かなはキーのレーンに落ちてきて、打つたびに横へ滑る

そこで最後の改修、v2.1.0です。「キーボード配置のレーンに文字が順番に落ちてくる」というv1の絵を復活させました。ただし落ちてくるのはv2の「かな文字」のまま。たとえば「か」(ローマ字でk→a)なら、まずKキーの真上のレーンに落ちてきて、キーボードのすぐ上で止まって待ちます。kを正しく打つと、文字がスッとAキーのレーンへ横に滑って移動。aを打つと文字が消えて、そのレーンにリングがパッと広がり、メロディが一音鳴る。次に打つ文字たちも、それぞれ自分の最初のキーのレーンの上のほうに、薄く順番に控えて見えています。「文字がどのキーの上にいるか」が、そのまま「次に押すキーのヒント」を出しすぎない程度の絵になっていて、われながら気に入っています。打鍵駆動なので、待たせても時間切れにはなりませんよ。

カラオケ風の歌詞バーも追加しました

v2.1.0ではもうひとつ、画面の上部にカラオケ風の歌詞バーを新設しました。いま打っている場所を中心に詞が窓のように表示されて、打ち終えた文字は黄色に変わり、いま打っている文字は強調、まだの文字は薄く見える。打てば打つほど窓が流れていくので、「自分はいまこの歌のここを打っているんだ」というのがひと目で分かります。自作の詞も、これでようやく「歌」らしく見えるようになりました。あわせて画面下の仮想キーボードには数字の段(1〜0とハイフン)や「、」「。」のキーも足して、使うキー全部のレーンを本物のQWERTY配置どおりに用意しています。自動テストも、レーンの位置や歌詞バーの進行といった見た目の検査を14項目足して計36項目に増やしました。

作り直したタイポニカを遊んでみた、正直な感想

タイポニカv2のリザルト画面。正確率とタイピング速度の目安が出る

収録曲は同じ5曲。でも「打つ難しさ」で並べ直しました

収録曲はv1と同じ、パブリックドメインの名曲5曲です。ただしレベルの付け方は考え直しました。v1では「落ちてくるスピードが速い=難しい」だったのですが、打鍵駆動になったv2にスピードの概念はありません。そこで、タイピングとして実際に手ごわくなる軸——使う文字の種類・ことばの長さ・記号や数字の混ざり方——で段階を付け直しています。

  • レベル1:きらきら星/メリーさんの羊——英字だけの短いことば。ローマ字入力の肩慣らしに。
  • レベル2:歓喜の歌(第九)——長音「ー」(ハイフンキー)が混ざります。
  • レベル3:猫踏んじゃった——読点「、」と、小さい「ゃ・ゅ・ょ・っ」(拗音・促音)が登場。
  • レベル4:草競馬——「ー」「、」「。」に加えて、数字キーまで出てくる最高難易度。

小さい「っ」は「っと」ならttoのように次の子音を重ねて打つ、「きゃ」のような拗音はひとまとまりで打つ、といったルールも、ふだんの日本語入力と同じにしてあります。音はv1から引き続き、音源ファイルを一切使わずブラウザの機能(Web Audio)だけで鳴らすピアノ風の自前合成。各曲のハイスコアも、これまでどおり遊んでいるブラウザの中に自動保存されます。ちなみに記録の名前(曲ID)は旧バージョンと分けてあるので、v2で遊び始めてもv1のハイスコアが壊れる心配はありませんよ。

v1と比べて良くなったこと・まだこれからなこと

できあがったv2.1.0を改めて遊んでみて、v1との違いをいちばん感じるのは、頭の使いどころが変わったことです。v1は「光った場所を押す」反射のゲームでしたが、v2は「ひらがなを見る→ローマ字を思い浮かべる→キーの場所を思い出す→打つ」という、ふだんの文章入力と同じ頭の回路を使います。ミスタイプすると短い不協和音と赤フラッシュで「うっ」となるので、自然と「次は正確に打とう」という気持ちになる。打ち終えたときにリザルトで正確率とミスタイプ数、実測のタイピング速度(打/分)が出るのも、記録を伸ばす楽しみになっています。

一方で、正直に書いておきたいこともあります。まず、「これで必ずタイピングが上達します!」とはまだ言えません。練習として成立する形にはなったと思っていますが、実際に上達するかどうかは、これから遊び込んで確かめていく段階です。それから、スマホでは相変わらず遊べません(キーボード前提なので、タッチ端末では「PC推奨」の案内が出ます)。詞は権利の都合で自作なので、「知っている歌詞を打ちたかった」という人にはちょっと申し訳ないところ。あとはピアノの音色や音量のバランスも、まだ調整の余地ありです。このあたりは、また次のバージョンの宿題ですね。

まとめ:自作ゲームは「失敗を認めて作り直す」のがいちばん面白い

タイピング練習ゲームを自作して、公開して、自分で遊んで「面白くない」と認めて、根っこから作り直す——今回のタイポニカv2は、そんな回り道の記録でした。振り返ると、v1からv2.1.0までで変わったのはこれだけあります。

  • 落ちてくるのが「キーの位置」から「かな文字」になった(打つのはローマ字、鳴るのは譜面の音)。
  • 曲のテンポを捨てて打った分だけ進む方式に。判定はタイミングから正確さに変わった。
  • 詞は著作権の壁を越えるために5曲すべて自作。登場キーは15種→28種、1周の打鍵数は235打→454打に増えた。
  • 「ん」をnnで打つとミスになるバグを検査で発見して修正。自動テストは36項目に。
  • 中央1列で地味になった画面を、キー配置のレーンに落ちる音ゲーの絵+カラオケ風歌詞バーで立て直した。

【次回予告】やっぱり「上から降ってくる音ゲー」に戻します

実はこの記事の公開にあわせて、完成したv2.1.0をあらためて遊び込んでみて、もうひとつ正直な結論が出ました。これ、ぼくのやってほしかった動きではなかったんです。今のv2.1.0は、文字がキーの位置まで降りてきて、こちらが打つまで止まって待ってくれます。練習としては打ちやすい。でも音楽ゲームとしては、やっぱり曲の流れに乗って、上からノーツが自動でどんどん落ちてくる、あの追い立てられる感じが欲しい。ゲームもこの記事の内容も今のままにしておきますが、この「自動で落ちてくる音ゲーへの回帰」は次のバージョンで直します。その顛末はまた次の記事で書きますので、お楽しみに!

【2026-07-17 追記】予告どおり、その「自動で落ちてくる音ゲーへの回帰」を果たしたv3.0.0が完成しました。速すぎて打てなくなった問題をどう乗り越えたか、顛末はこちらの記事に書いています。

予告どおり「上から降ってくるタイピング音ゲー」にしました!タイポニカv3.0.0
無料で遊べるタイピング音ゲー「タイポニカ」を、上からノーツが自動で落ちてくる本物の音ゲーに大改造しました。速すぎて打てない問題をどう乗り越えたか、正直に書きます。

AIと組んだおかげで、この作り替えを短い期間で回せたのも今回の収穫でした。役割を分けて、わざと反対させて、検査で差し戻す。人間の会社みたいなやり方が、AI相手でもちゃんと機能するのは面白い発見です。同じノリで作ったテトリスの開発記はこちら。

Claudeと作るテトリス最終決戦!「スタートボタンが押せない」謎とWordPressの罠を全部越えてv1.2.2完成【スマホ対応】
Claude(AI)と共同開発したブラウザテトリスv1.2.2の全記録。文字化け、押せるのに始まらないスタートボタン、4ライン消したのに2行残るバグ——WordPress埋め込みの罠を一つずつ解決した実録です。ゲームは記事内で遊べます。

AIと一緒にものづくりをする話に興味がある方は、Claude関連のほかの記事もどうぞ。そして何より、まずはこの記事の上に埋め込んであるタイポニカv2.1.0を触ってみてください。遊んでみて「ここが面白くない」と思ったら、それこそ大歓迎です。作者本人のダメ出しで生まれ変わったゲームなので、みなさんのダメ出しでもっと良くなるはずですから!それでは、あんちゃんでした。

あんちゃん
あんちゃん

おすすめはレベル1の「きらきら星」から!英字だけの短いことばで、自分のペースで打てるから、ローマ字入力に自信がなくても大丈夫。慣れてきたら、数字も混ざるレベル4の「草競馬」に挑戦してみてね!

コメント

タイトルとURLをコピーしました