音楽タイピングゲーム『タイポニカ』v1.2.0を自作！キーボードでピアノ演奏【無料・ブラウザ・第1弾】 -

皆さん、こんにちは。あんちゃんです。「AIとブラウザゲームを作る」シリーズ、今回はガラッと趣向を変えて、キーボードで曲を演奏して遊ぶ音楽タイピングゲーム『タイポニカ』を自作してみました！「キーボードで曲を奏でる音楽ゲーム」、それがタイポニカです。ブラウザで、しかも無料で遊べます。上から流れてくるキーが判定ラインに重なった瞬間にそのキーを押すと、ピアノの音が「ポーン」と鳴って、きらきら星や第九などの名曲がだんだん形になっていく——そんなゲームです。テトリスのときと同じで、この記事の中にそのまま埋め込んであるので、今すぐ遊べますよ。ただし先に正直に言っておくと、これはまだ作り始めたばかりの最初のバージョンです。ここを出発点にして、これからシリーズとして少しずつ育てていくつもりです。さっそく紹介させてください！

あんちゃん

タイポニカの遊び方はカンタン！
①まず曲を選ぶ（曲名・レベル★・ハイスコアが出ます）。
②3秒カウントの後、上からキーが落ちてきます。
③キーが判定ラインに重なった瞬間に、そのキーを押す！ピアノの音が鳴りますよ。
打つのはいつも1キーずつ。同時押しはありません。伴奏（コードやベース）は自動で鳴るので、メロディに集中してくださいね。
キーボードのあるPCでの操作がおすすめです！

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

音楽タイピングゲーム「タイポニカ」ってどんなゲーム？
1. どうして作ろうと思ったの？
2. 「タイピング練習ソフト」ではなく「キーボードで曲を奏でて遊ぶゲーム」です
遊び方はカンタン！流れてくるキーを判定ラインで押すだけ
収録は著作権フリーの名曲5曲・レベルは4段階
1. レベルが上がると何が変わるの？
2. ハイスコアはブラウザに保存されます
実際に遊んでみた、正直な感想
1. ここが楽しい！
2. 正直、まだまだこれからなところ
タイポニカはシリーズ第1弾。ここから育てていきます！

音楽タイピングゲーム「タイポニカ」ってどんなゲーム？

タイポニカをひとことで言うと、ピアノとタイピングを合体させた音楽ゲームです。画面の上から、押すべきキーが書かれたノーツ（音符のかたまり）がスーッと落ちてきます。それが画面の下にある判定ラインにピッタリ重なった瞬間に、対応するキーを押す。すると、そのキーに割り当てられた音階のピアノ風の音が鳴って、曲が一音ずつ演奏されていきます。うまくタイミングが合うと「PERFECT」、少しズレると「GOOD」、大きく外すと「MISS」。この「PERFECT」がそろって曲がきれいに鳴った瞬間が、いちばん気持ちいいんですよ！

どうして作ろうと思ったの？

きっかけは単純で、「キーボードって、うまく叩けると音楽の演奏みたいで気持ちいいよな」と思ったことです。ぼくはタイピングそのものが嫌いじゃないんですが、無味乾燥な練習ソフトをひたすらやるのは、正直あんまり続かないタイプでして……。だったら、いっそキーボードを楽器にしてしまえば楽しいんじゃないか？と考えたわけです。ちょうどテトリスをClaude（AI）と一緒に作った流れもあって、「次はゲームらしいゲームじゃなくて、音で遊べるものを作りたい」という気持ちが強くなっていました。それで生まれたのが、このタイポニカです。名前の「タイポニカ」は、タイピングにちなんだ造語です。キーボードで曲を奏でるイメージから付けました。

「タイピング練習ソフト」ではなく「キーボードで曲を奏でて遊ぶゲーム」です

ここは最初にハッキリさせておきたいところです。タイポニカは名前に「タイピング」と付いていますが、今の時点では本格的なタイピング練習ソフトというより、キーボードで曲を鳴らして遊ぶゲームだと思ってください。「これをやればタイピングが上達します！」と言い切れるほど作り込めているわけではありません。あくまで、遊びながら自然とキーボードに触れる回数が増える、くらいの等身大のものです。でも、それでいいと思っているんです。楽しくキーを叩いているうちにホームポジションが手になじんでいったら、それはそれで儲けもの。まずは「気持ちよく曲が鳴る」ことを大事にしました。

遊び方はカンタン！流れてくるキーを判定ラインで押すだけ

改めて、タイポニカの遊び方をもう少しだけ丁寧に説明しますね。難しい操作はいっさいありません。やることは、基本的にたったこれだけです。

曲を選ぶ：最初の画面で、遊びたい曲を選びます。それぞれに難しさを表すレベル★と、これまでのハイスコアが表示されます。
3秒待つ：曲を選ぶと3秒のカウントダウン。その後、上からノーツが落ちてきます。
判定ラインで押す：ノーツが下の判定ラインに重なった瞬間に、そのキーを押します。タイミングのズレの大きさで、PERFECT／GOOD／MISSが決まります。
曲が終わるとリザルト：スコア・最大コンボ・正確率・タイピング速度の目安（打／分）・判定の内訳・ランク（S/A/B/C）が出ます。Enterでもう一度、Escで曲選択に戻れます。プレイ中もEscでいつでも中断できますよ。

ちなみに、譜面にないタイミングで関係ないキーを押してしまうと「ミスタッチ」になって、短い不協和音とともに画面が赤くフラッシュします。焦って余計なキーを叩くと、けっこう耳に「うっ」とくるので、そこも含めて気をつけてみてください（笑）。

メロディは1キーずつ・伴奏は自動（オン/オフもできます）

タイポニカでいちばんこだわったのが、プレイヤーが打つのは、いつでも1キーずつ（単音）という点です。ピアノ曲だと和音（複数の鍵を同時に押す）が出てきそうなものですが、実際のタイピングに「同時押し」は存在しませんよね。なので、あなたが叩くメロディは全部1キーずつにしてあります。そのぶん、コードやベースといった伴奏の部分は、ゲームが自動で演奏してくれます。メロディを主役にして、伴奏はうっすら後ろで支える感じです。

この自動伴奏は、曲選択の画面にある「自動伴奏を鳴らす」のチェックボックスでオン/オフを切り替えられます。伴奏があると曲としてリッチに聞こえますが、「メロディの音だけに集中したい」「静かに練習したい」というときはオフにしてもOK。設定はブラウザが覚えてくれるので、毎回チェックし直す必要はありません。まずはオンのまま遊んでみて、物足りない/うるさいと感じたら切り替えてみてくださいね。

「うっすら伴奏」はコードでいうとこの部分です

ちょっとだけ中身の話をさせてください。伴奏がメロディの邪魔にならない「うっすら」した感じになるように、細かい調整をいくつも重ねています。まず伴奏の音量のピークを、前は0.10だったのを0.045まで大きく下げました。それから波形を全部sine（丸くてやわらかい音のこと）にそろえて、さらにローパスフィルター（高い音を削って音を暗くする装置）で700Hzまで抑えています。鳴らしているのも「ベース＋その5度上」の2音だけなんです。この地味な調整の積み重ねが、完成版の肝だと思っています。

var CHORDS = {
  C:  [36, 43],  /* C : C2 + G2（ベース＋5度） */
  G:  [43, 50],  /* G : G2 + D3 */
  ...
};
// メロディを主役にするため、伴奏ピーク音量を旧0.10→0.045へ大きく下げた
var BACKING_PEAK = 0.045;
function playBacking(midis, when, dur){
  master.gain.linearRampToValueAtTime(BACKING_PEAK, when + 0.015);
  master.gain.exponentialRampToValueAtTime(0.0001, when + 0.7); // 約0.7秒で減衰
  var lp = ac.createBiquadFilter();
  lp.type = "lowpass";
  lp.frequency.setValueAtTime(700, when);   // 700Hzまで下げて音を暗く
  for(i = 0; i < midis.length; i++){
    o.type = "sine";                        // 全部sineに統一（柔らかい土台）
    ...
  }
}

キーの割り当ては「ホームポジション」が基本

音階はキーボードの物理的な配置に割り当ててあります。基本になるのは、いわゆるホームポジションの列（中段）です。

中段（ホームポジション）＝白い鍵：A・S・D・F・G・H・J・K・L に、ド・レ・ミ・ファ・ソ・ラ・シ…と音が並びます。まずはここだけで弾ける曲から始められます。
上段＝黒い鍵（♯の音）：W・E・T・Y・U・O・P。少し難しい曲で使います。
下段＝低い音：Z・X・C・V・B・N・M。音域を広げたいときに登場します。

画面の下にはキーボードの絵がずっと表示されていて、その曲で使うキーは明るく、使わないキーは暗く光ります。押すと緑（成功）か赤（ミスタッチ）に光るので、目で追いやすいはずです。キーの位置はキーボードの物理配置で判定しているので、日本語配列でも英語配列でも同じように遊べますよ。

収録は著作権フリーの名曲5曲・レベルは4段階

今のタイポニカに入っているのは、誰でも自由に使える著作権フリー（パブリックドメイン）の5曲です。作曲者が亡くなってから長い年月が経ち、著作権の保護期間が終わっている、みんなが知っている名曲ばかりを選びました。ここは勝手に有名アーティストの曲を入れたりしないよう、きっちり気をつけたところです。ラインナップはこちら。

きらきら星（レベル1）：フランス民謡。中段だけで弾ける、いちばんやさしい入門曲です。
メリーさんの羊（レベル1）：アメリカ民謡。これも中段中心で、はじめの1曲におすすめ。
歓喜の歌（第九）（レベル2）：ベートーヴェンのあの名曲。中段を中心に、一部が下段へ広がります。
猫踏んじゃった（レベル3）：黒い鍵（上段）をたくさん使う、ちょっと速い曲。指があたふたします！
草競馬（レベル4）：フォスターの一曲。いちばん速くて、左右の手を交互に動かす場面が多い、今の最難関です。

「パブリックドメインって何？」という方は、著作権の保護期間が切れて自由に使えるようになった作品のことだと思ってください。くわしくはこちらが分かりやすいです。

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

レベルが上がると何が変わるの？

レベルは4段階あって、数字が大きいほど難しくなります。難しさの上げ方は「同時押しにする」ではなく、実際にタイピングとして手ごわくなる方向でそろえました。具体的には、①ノーツの落ちてくるスピードが速くなる、②使うキーの範囲が広がる（ホームポジションから上段・下段へ）、③左右の手の移動が増える、④連続で叩く場面が長くなる、という4つです。レベル1のきらきら星でウォームアップして、最後はレベル4の草競馬に挑戦する、という流れで遊ぶとちょうどいいですよ。

ハイスコアはブラウザに保存されます

各曲のハイスコアは、遊んでいるブラウザの中に自動で保存されます。次に同じブラウザで来たときに、ちゃんと自分の記録が表示されるので、「前回より上を目指す」という遊び方ができます。ただし今のところ記録が残るのは、その端末のそのブラウザの中だけです。別のスマホやPCに引き継いだり、みんなでランキングを競ったり…というのは、まだできません。ここは今後やってみたいところのひとつです。あと大事な注意点として、タイポニカはキーボードのあるPCでのプレイがおすすめです。スマホなどタッチ操作の端末で開くと「PC推奨」のご案内が出ます。今のバージョンではタッチ操作には対応していないので、ぜひパソコンで遊んでみてくださいね。

実際に遊んでみた、正直な感想

自分で作っておいてなんですが、タイポニカを実際に鳴らして遊んでみると、これがなかなか楽しいんです。特にきらきら星やメリーさんの羊みたいな、手が知っている曲を自分の指で鳴らせたときの満足感はいいですよ。良かったところと、逆に「まだまだだな」と思ったところを、正直に書いておきますね。

ここが楽しい！

音が気持ちいい：PERFECTがつながって曲がなめらかに鳴ると、素直に「おおっ」となります。伴奏がうっすら乗ると、ちゃんと曲っぽく聞こえるのも楽しい。
すぐ始められる：曲を選んで3秒待つだけ。むずかしいルールを覚える必要がなくて、思い立ったらすぐ遊べます。
ちょっとずつ難しくなる：レベル1からレベル4へと、無理なくステップアップできる感じにできました。猫踏んじゃったの黒鍵地帯で指がもつれるのは、いい意味で悔しいです。

正直、まだまだこれからなところ

いいことばかり書いても信用してもらえないと思うので、正直な不満点も。まず曲がまだ5曲しかありません。遊び込むとすぐ一周してしまうので、ここは増やしたい。それから、さっきも書いたとおりスマホでは遊べません。せっかく記事に埋め込んでも、スマホで見にきた人には「PCで遊んでね」としか言えないのは心苦しいところです。あとは、演奏している音色や、メロディと伴奏の音量バランスも、まだ「完璧！」とまでは言えません。このあたりは実際に自分の耳で聞きながら、これから調整していきます。「タイピングが上達するぞ！」と胸を張れる段階ではない——これも正直なところです。今はまず、キーボードで曲を鳴らして楽しんでもらえたら十分だと思っています。

タイポニカはシリーズ第1弾。ここから育てていきます！

というわけで、ブラウザで無料で遊べる音楽タイピングゲーム『タイポニカ』、その記念すべき第1弾（v1.2.0）のご紹介でした。何度も言っているとおり、これはまだ生まれたてのバージョンです。だからこそ、ここからみなさんと一緒に育てていけたら嬉しいなと思っています。今のところ、次にやってみたいことはこんな感じです。