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

「音楽でタイピング練習」はできる?タイポニカ試作機 v1.1.0 で気づいた本音【プロトタイプ編】

音楽ゲーム『タイポニカ』の曲選択画面。著作権フリーの5曲から選んで遊べる 作ってみた!
スポンサーリンク
スポンサーリンク

皆さん、こんにちは。あんちゃんです。今日は、「音楽でタイピング練習ってできるの?」という素朴な思いつきから始まった、あるゲームの開発の裏話をさせてください。結論から正直に言ってしまうと——ぼくが作った試作機は、まったくタイピング練習になりませんでした!「音楽 タイピング 練習」を目指したはずが、作れば作るほど「これ、練習じゃないな……」と気づいていく。そんな失敗談です。でも、これで終わりではありません。「練習」を名乗るのをスッパリやめて、キーボードで曲を奏でて楽しむ音楽ゲームとして割り切ったら、これはこれで気持ちよく遊べるものになったんです。それが、いま公開している音楽ゲーム『タイポニカ』のv1.2.0です。うまくいかなかった過程まるごと、正直にお話ししますね!

あんちゃん
あんちゃん

この記事は「開発の裏話」なので、ゲーム本体はここには埋め込んでいません。実際に遊べるのは別の記事のほうにまとめてあります!記事の後半にリンクを置いておくので、まずは失敗談から読んでみてくださいね。

スポンサーリンク
スポンサーリンク

「音楽でタイピング練習ができる」と思って作りはじめた

そもそもの発端は、ぼくのこんな思いつきでした。「キーボードって、うまく叩けるとまるで楽器を演奏しているみたいで気持ちいいよな」と。タイピング練習ソフトって、正直あの無味乾燥な感じがどうも続かないんですよね。だったら、キーボードそのものを楽器にしてしまえば、音楽で楽しくタイピング練習ができるんじゃないか?——そう考えたわけです。AIのClaudeと一緒にブラウザゲームを作るのが最近の趣味になっていたこともあって、「よし、音で遊べるタイピングゲームを作ろう」と勢いよくスタートしました。

きっかけは「キーボードを楽器にしたら楽しく練習できるのでは」

頭の中にあったイメージはこうです。キーボードの各キーにドレミの音階を割り当てて、上から流れてくるノーツ(押すべきキー)を、判定ラインに重なった瞬間にタイミングよく押す。正しく打てばピアノの音が鳴って、だんだん曲になっていく。音ゲーみたいに楽しく遊んでいるうちに、気づいたらブラインドタッチが上達している——そんな一石二鳥のソフトができたら最高じゃないですか。この時点のぼくは、けっこう本気で「音楽でタイピング練習ができる」と信じていました。

最初の試作機(v1.0.0)は和音アリのピアノ×タイピングでした

そうして最初にできあがった試作機(バージョンでいうとv1.0.0)は、ピアノとタイピングを合体させた音楽ゲームでした。きらきら星やメリーさんの羊といった、みんなが知っている曲を5曲収録。キーボードの中段(ホームポジションの列)にドレミの白い鍵を割り当てて、上段を黒い鍵、下段を低い音に、という具合に音階を配置しました。しかもこの初代には、ピアノらしさを出そうと和音(複数のキーを同時に押す)まで入れてありました。ピアノ曲なんだから和音があったほうがリッチだよね、という素直な発想です。動くものはちゃんとできて、「おっ、それっぽいぞ」と最初はけっこう満足していたんです。この時点では、まだ失敗に気づいていませんでした。

試作を重ねるうちに「あれ、これ練習にならないぞ」と気づいた

ところが、実際に自分で何度も遊んでいるうちに、だんだん雲行きが怪しくなってきました。「あれ、これ……楽しいのは楽しいんだけど、タイピングの練習にはなっていなくないか?」と。ここからが、試作機をいじり倒しながらの気づきの連続でした。

v1.1.0で和音をやめ、打つのは単音のメロディだけにした

最初にひっかかったのが、さっき自慢した「和音」でした。よく考えると、ぼくらが文章を打つときは、基本は1キーずつですよね。ピアノの和音のように複数のキーを同時に押す場面は、ふだんのタイピングにはほとんど出てきません。同時押しの練習をいくら積んでも、それはタイピングとは別物の指の運動でしかない。そこで思い切って、和音(同時押し)を全部やめました。プレイヤーが打つのは単音のメロディだけにして、コードやベースといった伴奏の部分は、ゲームが自動で演奏してくれるように作り替えたんです。これがv1.1.0。ぼくが「試作機」と呼んでいるのは、だいたいこのあたりのバージョンです。

キーボードを1本指で1キーずつ押して単音のメロディを奏でるイメージ

せっかくなので、その試作機(v1.1.0)そのものを下に埋め込んでおきます。完成版のタイポニカ(v1.2.0)と何がどう違うのか——伴奏の感じや打っているときの手触りは、正直、言葉で説明するより実際に触ってもらったほうが早いです。よかったら少し遊んでみて、このあとの話を読み進めてくださいね。

▶ 試作機(v1.1.0)を全画面で遊ぶ(別タブで開く)

伴奏を自動で鳴らす仕組みは、コードでいうとこの部分です

せっかくなので、伴奏を自動で鳴らしている部分をちょっとだけお見せしますね。プレイヤーが打つのはメロディの単音だけで、コードやベースはプログラムが勝手に鳴らしてくれます。その心臓部が、下のスケジューラ(鳴らすタイミングを予約していく係のこと)です。やっていることはシンプルで、「今の時刻から0.15秒だけ先まで」をこまめにチェックして、そのあいだに鳴らすべき伴奏を、正確な時刻に予約していきます(先読み予約と呼んでいます)。曲の基準になる時刻に合わせて予約するので、伴奏がメロディとズレずに、うまく同期して鳴ってくれるんです。ここがv1.1.0の肝でした。

// 曲クロックに合わせ、0.15秒先読みで伴奏コードを予約するスケジューラ
function scheduleBacking(){
  var LOOK = 0.15;
  var now = audioCtx.currentTime;
  while(g.backingIdx < g.backing.length){
    var ev = g.backing[g.backingIdx];
    var when = g.audioT0 + ev.sec;          // 曲のt=0基準の絶対時刻
    if(when > now + LOOK){ break; }
    if(when >= now - 0.05){ playBacking(ev.midis, Math.max(when, now), ev.dur); }
    g.backingIdx++;
  }
}

v1.1.1で伴奏を調整…でも、やっぱり練習にはなりきらなかった

単音にしたことで「タイピングらしさ」には一歩近づいた気がしました。ただ今度は、自動で鳴る伴奏がメロディを邪魔して、肝心の主役が聞こえにくいという問題が出てきます。そこでv1.1.1では、伴奏の音量をぐっと下げて、うっすら後ろで支える低音の土台にする調整をしました。オン/オフを切り替えられるスイッチも付けました。音のバランスは良くなった。難易度の上がり方も、まずまず狙いどおり。……なのですが、何度遊んでも、「これでタイピングが上達するぞ」という手応えは、正直まったく湧いてこなかったんです。ここで、ぼくははっきり認めることにしました。今の作りでは、タイピング練習にはなりきらない、と。

なぜタイピング練習にならなかったのか(正直な理由)

じゃあ、どうして「音楽 タイピング 練習」はうまくいかなかったのか。自分なりに触ってみて感じた理由を、正直に並べてみますね。あくまでぼくの体感で、断定できる話ではありませんが……。

  • 打つのは常に単音:文章を打つ練習というより、流れてくる1音を1つずつ拾っていく遊びなので、実際の文字入力とは動きが違います。
  • 目でキーを追ってしまう:画面を流れてくるノーツを目で追って押すゲームなので、「手元を見ずに指の位置を体で覚える」ブラインドタッチの訓練とは、方向性が別物でした。
  • 楽しさ優先で作った:譜面のテンポや音価も、練習カリキュラムとしてではなく、あくまで「遊んで気持ちいい」ことを優先して調整しています。上達の設計図にはなっていないんです。

ちゃんとしたタイピング練習にしようと思ったら、たぶん手元を隠したり、指ごとに担当のキーを繰り返し打たせたり、実際の文章に近い並びで打たせたり……という、けっこう地道な仕組みが必要になるはずです。でもそれを入れていくと、今度は音ゲーとしての気持ちよさがどんどん削られていきます。楽しさと練習効果、この2つを1本のゲームで両立させるのは、思っていたよりずっと難しいことだったんです。

要するに、「曲を演奏して楽しむこと」と「タイピングが上達すること」は、思っていたほど素直につながらなかった、というのが試作機で得た正直な結論でした。ちょっと悔しいですが、これも実際に作ってみたからこそ分かったことです。

だから「練習」を名乗るのをやめて、音楽ゲームとして割り切った

ここで、ぼくは方針を大きく変えることにしました。うまくいかなかったものを無理に「タイピング練習ソフト」として売り込むのは、遊んでくれる人に対して不誠実ですよね。それに、失敗を隠して背伸びするより、できていることを正直に名乗るほうが気持ちいい。そう考えて、思い切った割り切りをしました。

「上達します」と言えないなら、言わない

やったことはシンプルで、「タイピングが上達する」という看板を、きっぱり下ろしただけです。胸を張って言えないことは、言わない。その代わり、このゲームが本当にちゃんとできていることは何かと考えたら、答えははっきりしていました。キーボードで曲を奏でて楽しむ、この一点です。だったら、それを名乗ればいい。「タイピング練習ソフト」ではなく、「キーボードで曲を奏でる音楽ゲーム」として世に出そう、と腹をくくったわけです。

割り切ったら、これはこれで気持ちよく遊べるものになった

おもしろいもので、「練習」という重荷を下ろした途端、このゲームの良さがくっきり見えてきました。手が知っているきらきら星やメリーさんの羊を、自分の指でポーンと鳴らせる満足感。PERFECT判定がつながって曲がなめらかに流れたときの「おおっ」という気持ちよさ。うっすら乗る自動伴奏で、ぐっと曲っぽくなる楽しさ。タイピング練習としては落第でも、音楽ゲームとしては、これはこれでちゃんと楽しいんです。失敗を後ろ向きに引きずるのではなく、「じゃあ得意なことで勝負しよう」と割り切ったら、むしろ前向きな作品になりました。

そうして公開したのが、タイポニカ v1.2.0

そんな紆余曲折を経て、ゲーム名を「タイポニカ」に決めて公開したのが、いまのv1.2.0です。「タイポニカ」はタイピングにちなんだ造語で、キーボードで曲を奏でるイメージから付けました。試作機の失敗があったからこそ、無理のない、等身大の音楽ゲームとして仕上げられたと思っています。

いまのタイポニカでできること

公開版のタイポニカ v1.2.0で遊べる内容を、かんたんにまとめておきますね。

  • 打つのは単音のメロディだけ:同時押しはありません。コードやベースの伴奏はゲームが自動で演奏。曲選択画面のチェックボックスで、伴奏のオン/オフも切り替えられます。
  • 著作権フリーの名曲5曲:きらきら星、メリーさんの羊、歓喜の歌(第九)、猫踏んじゃった、草競馬。作曲者が亡くなって長い年月がたった、パブリックドメインの曲だけを選びました。
  • レベルは4段階:同時押しではなく、落下スピード・使うキーの範囲・左右の手の移動・連続打鍵の長さで難しくしています。
  • キーボードのあるPCがおすすめ:スマホなどタッチ端末では「PC推奨」の案内が出ます。今のバージョンはタッチ操作には未対応です。

「タイピングが上達します!」とは言いません。でも、キーボードで名曲を鳴らす気持ちよさは、ちゃんと味わってもらえるはずです。ちなみに「パブリックドメイン」というのは、著作権の保護期間が切れて誰でも自由に使えるようになった作品のことです。くわしくはこちらが分かりやすいですよ。

パブリックドメインとは(Wikipedia)歓喜の歌(第九)について(Wikipedia)

実際に遊べるのはこちら

ここまで失敗談を読んでくださった方は、ぜひ実物を触ってみてください。完成版のタイポニカ v1.2.0は、こちらの記事の中にそのまま埋め込んであって、ブラウザで、しかも無料ですぐ遊べます。遊び方の説明や収録曲の詳しい紹介も、こちらにまとめてありますよ。

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

失敗も含めて、ここから育てていきます

というわけで、「音楽でタイピング練習ができるのでは」と意気込んで始めたものの、試作機で見事に「これは練習にならないぞ」と気づき、最終的に音楽ゲームとして割り切って公開した——という開発ストーリーでした。遠回りしたようにも見えますが、実際に手を動かして試したからこそ、正直な着地にたどり着けたと思っています。うまくいかなかった過程も、隠さず記事にできてスッキリしました!

タイポニカはまだ生まれたてのシリーズ第1弾なので、これから曲を増やしたり、音をもっと良くしたり、少しずつ育てていくつもりです。「この曲やりたい!」というリクエストも大歓迎。更新したらまたブログでお知らせしますね。

ちなみに、AIのClaudeと一緒にブラウザゲームを作るこのシリーズ、前にはテトリスも作っています。そちらは「スタートボタンは押せるのにゲームが始まらない」という怪奇現象と格闘した、これまた濃い開発の裏話です。失敗談つながりで楽しんでもらえると思うので、よかったらこちらものぞいてみてください。自作のシューティングゲームもブラウザで遊べるので、ゲーム開発の話が好きな方はあわせてどうぞ。

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

失敗も正直に書くのが、ぼくのブログのモットーです!タイピング練習にはならなかったけど、曲を奏でる楽しさは本物だよ。まずは「きらきら星」から弾いてみてね!

コメント

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