マシマシ打ができるまで — 2つの試作を1つにまとめた話
公開日： ／ 書いた人：shinpoyo
山盛りラーメンの「コール」特化タイピングゲーム「マシマシ打」は、別々に作っていた2つの試作を1つにまとめて生まれました。この記事では、その過程で何を残し、何を削ったかを振り返ります。
2つの試作
もともと、同じテーマで2つの試作がありました。
- ロジックの試作：素の JavaScript で書いたタイピングゲーム。
shi/siなどの表記ゆれに対応したローマ字判定、難易度に応じたコールの出題、トッピングの量で形が変わる丼の絵など、ゲームの中身がしっかりしていました。 - 見た目の試作：React で作った画面。食券機をモチーフにした黒と黄色のデザインで、雰囲気はよいものの、ゲームとしての中身はまだ仮のものでした。
いいとこ取りでまとめる
そこで、見た目の試作を土台にして、ロジックの試作の判定や出題の仕組みを TypeScript に書き直して組み込みました。ローマ字の判定は細かい決まりが多いので、移植したあとに自動テストを書き、「ninniku は『にんいく』になる」といった実際の日本語入力と同じふるまいになっているかを確かめています（この「ん」の話は別の記事にまとめました）。
足すより削る
試作を合わせると、要素がどんどん増えていきます。実際に遊んでみて、遊びの邪魔になるものは思い切って削りました。
| 削ったもの | 理由 |
|---|---|
| 食券機にお金を入れる操作 | 雰囲気は出るものの、毎回の手間になってゲームのテンポが悪くなった |
| トッピング券（スコア倍率など） | 「買うだけでスコアが上がる」要素は、タイピングの腕と関係なく点数が変わってしまう |
| コール道場（別モード） | コールの長さに関係なく制限時間が一定で無理があり、内容も本編とほぼ同じだった |
| 画面のキーボード表示 | コールの文字を大きく見せることを優先した |
かわりに、ゲームを始める前に選ぶ「退店ペナルティ」は残しました。条件を厳しくするほどスコアの倍率が上がる仕組みで、倍率がもらえるのは「失敗できない」というリスクを自分で選んだときだけです。
また、ラーメンと店主の絵は、最初は簡単なイラストにしていましたが、雰囲気が出なかったため写真風の画像（AI で生成したもの）に戻しました。効果音も、ブラウザの機能（Web Audio）で一から作り直し、打鍵音や提供の音に厚みを出しています。
プレイ画面はシンプルに
一番大きく変えたのはプレイ画面です。最初はいろいろな情報を並べていたため、肝心のコールの文字が画面に収まらないことがありました。
よく遊ばれているタイピングゲームのプレイ画面を見直すと、どれも「打つ文字」が主役で、ほかの情報は控えめです。そこで、プレイはポップアップで開くようにし、コールの文字とローマ字を大きく表示して、残り時間・連続正解・正確率などは下に小さくまとめました。食券を選んでからプレイまでが一続きになり、迷わず始められるようになりました。
登場人物も整理しました。画面右上のアイコンは「あなた（お店に通う常連客）」で、名前とアイコンを自由に変えられます。店主はお店の人として、プレイ中にコールを問いかけてきます。
公開前に気をつけたこと
- 実在のお店と誤解されないように：特定のお店を連想させる名前や言葉を画面から外し、非公式の作品であること、画像が AI で生成したものであることを明記しました。
- データは端末の中だけに：記録やプレイヤー名はブラウザの中にだけ保存し、外部には送りません。
- 自動で遊んで確かめる：ブラウザを自動で操作するテストで、最初から最後まで遊べるか、画面の大きさを変えても文字がはみ出さないかを確認しています。
まだ「全国のランキング」など、やりたいことは残っています。遊んだ感想があれば、ぜひお問い合わせから教えてください。
マシマシ打：店主の「ニンニク入れますか？」に、コールをローマ字で即答するタイピングゲームです。
マシマシ打を見るほかの記事
- タイピングを速くする練習のしかた — 正確さが先、速さはあと
ホームポジション・手元を見ない・正確さ優先・毎日少しずつ。速くなるための練習の順番。 - 「ニンニク」が「にんいく」になる理由 — ローマ字入力の「ん」の打ち方
ninniku と打つと「にんいく」になる理由と、「ん」を n 1回で打てるとき・nn が必要なときの見分け方。 - 個人開発のゲームを独自ドメインで公開する — GitHub Pages と Cloudflare
GitHub Pages のゲームを独自ドメインの下にまとめて公開した手順と、つまずいた点・セキュリティ設定。