麻雀、あがれるようにはなったけど「点数計算」がいまだに苦手……という人、けっこう多いんじゃないでしょうか。とくに符の数え方。役と翻はなんとなく分かっても、「副底20符に門前ロン10符に暗刻が……」のあたりで毎回あやふやになる。自分もずっとそうでした。
そんな苦手を練習で潰せるアプリ「スズメンゴ」を、土曜日の朝の思いつきから夕方までの一日で作って公開しました。あがり牌姿を見て点数を4択で当て、符の内訳まで分解して解説してくれるクイズアプリです。
公開先はこちら → https://suzumengo.creco.net/（無料・登録不要・スマホ対応）
🚀 忙しい人向けまとめ
- 作ったもの: 麻雀の点数計算クイズ「スズメンゴ」。あがり牌姿の点数を4択で当て、符まで分解して解説してくれる
- きっかけ: Claude Code の週制限がリセットされたので、その勢いで一日開発
- 学べること: チュートリアル全24問で、役→符→満貫以上→役満まで段階的に基礎が身につく
- 作り方: Claude Code（実装）＋ Claude Design（デザイン）。土曜の昼に着手して、夕方には公開
- 技術: 点数は riichi-ts で実計算。固定の問題集ではなく、ランダム生成した手をその場で採点
どんなアプリなのか
名前の「スズメンゴ」は、麻雀の「雀（スズメ）」と、語学アプリ Duolingo の「-ngo」をかけたパロディです（○○○ンゴ成分も）。見た目もDuolingo風のやさしいトーンで、茶色いスズメのマスコットが「せいかい！」「おしい！」と応援してくれます。点数計算という、ともすればとっつきにくいテーマを、できるだけ気軽に触れるようにしたかったんですよね。
遊び方はシンプルです。
- あがった牌姿が表示され、「何点？」と聞かれる
- 4つの選択肢から点数を選ぶ
- 正解発表で、役・符の内訳・翻符・計算式まで見られる
これを繰り返すうちに、「この形なら何符でこの点数」という感覚が身についていく、という仕組みです。
符まで分解して解説してくれる（看板機能）
このアプリで一番こだわったのが、正解発表の解説です。たとえば「リーチのみ・子のロン」の手なら、こんな内訳が表示されます。
- 副底 20符
- 門前ロン 10符
- 暗刻（1萬・幺九）8符
- 合計38符 → 切り上げて 40符
- 子のロン 1翻40符 = 1,300点
ただ答えが合っていたかどうかだけでなく、なぜその点数になるのかを符の足し算から見せるようにしました。点数計算でつまずく人の多くは、この「符の数え方」が曖昧なまま止まっているので、そこを毎回おさらいできるのが狙いです。
チュートリアルは全24問、やさしい順
いきなり実戦だと心が折れるので、時間無制限・CPUなしのチュートリアル24問を用意しました。★やさしい→★★★むずかしいの順で、基礎（役と点数の配分）→符と翻→満貫以上→役満まで、段階的に進みます。
各問題には「役は何か」「符はどう数えるか」という段階ヒントが用意されていて、分からなければヒントを開いてから答えればOK。途中でやめても進捗が保存されるので、再開もできます。
CPUと点棒バトル（高い手ほど誤答が痛い）
チュートリアルで慣れたら、初級・中級・上級でCPUとの点棒勝負です。ここが地味に効くポイントなんですが、当たり外れに点棒のやり取りがあるんですよね。
| 行動 | あなた | CPU |
|---|---|---|
| 正解 | ＋和了点 | ±0 |
| 誤答 | −和了点 | ＋和了点 |
| パス／時間切れ | ±0 | ＋和了点 |
つまり、高い手を誤答すると大きく失点する。自信がなければ「パス」で安全に見送れるので、「この手はちゃんと数えられるから取りにいく」「これは怪しいから降りる」という駆け引きが生まれます。ただ正解数を競うより、ちょっと緊張感があって面白くなりました。
初級〜上級、上級は手牌がバラバラ
制限時間は初級30秒・中級10秒・上級10秒。上級は中級と同じ時間ですが、手牌が整列されず配牌順（バラバラ）で表示されます。実戦では牌は自分で並べ替えるので、「読み取り自体が難しい」状態を再現したかたちです。親が上がると連荘して本場が増えるなど、対局の雰囲気づけもしています。
そのほか
- 役満や親満貫もちゃんと出ます（四暗刻であがると気持ちいい）
- 無料・登録不要・PWA対応でホーム画面に追加できる
- シェアはQRコード・リンクコピー・Xに対応
- キーボード操作（1〜4で解答、Pでパス）、サウンド（ミュート可）、戦績の保存つき
なぜ作ったのか
きっかけは本当にしょうもなくて、その日の朝、Claude Code の週制限がリセットされていたんですよね。というのも、ちょうど Claude の新モデル「Fable 5」「Mythos 5」が米政府の輸出規制で公開3日にしてアクセス停止になり、そのお詫びとして全ユーザーの利用制限（5時間ごと・週単位）がリセットされる、という出来事がありまして（参考：Claude Fable 5/Mythos 5停止の補償か、全ユーザーの利用制限リセット – PC Watch）。
ともあれ「お、また使えるじゃん」となったので、せっかくなら軽く何か作ろうと思い、AIに壁打ち相手になってもらいました。
ところが、アイデアを出してもらうと地図系ばかり出てくる。最近そればっかり作っているので、AIにも「この人は地図の人」と思われているフシがあります。
そこで、「そういえば最近、麻雀にハマっていて、しかも符計算ができるようになりたかったんだった」と。だったらその練習アプリを自分で作れば、勉強にもなって一石二鳥じゃないか、という流れになりました。提案された側ではあるんですが、ゴールはすぐ決まりました。「点数を当てるクイズで、符の数え方まで身につくもの」。これです。
どうやって作ったか
この日はちょうど日本カーリング選手権大会のプレーオフをやっていて、テレビでそれを見ながら、時々手を動かすClaude Codeを横目で見守る、みたいな進め方でした。
実装は Claude Code、デザインは Claude Design
土台は React + Vite + TypeScript + Tailwind。実装は Claude Code に任せて、自分は方向を決めたり詰まりを一緒に潰したりする係です。
デザインは Claude Design でデザインシステム（カラートークン＋コンポーネント＋スズメのマスコット）を生成し、それをそのままコードに反映しました。「ゲームの構造は元のロジックのまま、見た目だけブランド指針に沿わせる」という分け方にしたので、機能を壊さずに一気に今の雰囲気まで持っていけたのは良かったですね。
点数計算は自前で書かず、ライブラリに任せる
点数計算を自前で実装すると、それだけで一日では終わりません。なので実計算は riichi-ts というライブラリに任せました。固定の問題集を持つのではなく、ランダム生成したあがり牌姿をその場で採点する方式です。これで「同じ問題ばかり出る」のを避けられます。
ちなみに最初に試したのは別の mahjong-utils というライブラリだったのですが、配布物（dist）が公開されておらず読み込めない状態で、早々に riichi-ts へ乗り換えました。こういうのは触ってみないと分からないですね。
あとは細かいところを直していくだけ
とはいえ全部がすんなり動いたわけでもなく、麻雀ならではの細かいバグを、見つけては指摘して直す、というのを何度か繰り返したくらいです。役満が0翻扱いで弾かれたり、親ツモの「オール」が半額になっていたり、4択の選択肢が雑で答えがバレてしまったり。あとはiOSで音が鳴らない、モーダルの暗幕が画面全体を覆わない、といったWebアプリでよくあるやつも一通り。
このあたりは「ここ点数おかしくない？」と気づいて伝えれば、Claudeがすぐ直してくれるので、自分はもっぱらチェック係でした。
マスコットと名前
スズメのマスコットは ChatGPT で生成して、Pillow（Python）で背景を透過＆分割しました（お腹のクリーム色だけは残すように調整）。名前は最初「スズメンツ」（スズメ×面子）にしようとしていたのですが、Duolingoのパロディだと伝わりやすい「スズメンゴ」に変更しました。
そんなこんなで、ビルドした静的ファイルをいつものレンタルサーバーに置いて公開。カーリングのプレーオフが終わるころには、ひとまず遊べる状態になっていました。
まとめ
麻雀の点数計算、とくに符が苦手という人は、ぜひ一度触ってみてください。4択なので気軽ですし、外しても「なぜその点数か」が毎回おさらいできるので、繰り返すうちに符の感覚が育ちます。
自分が欲しい練習アプリを、思い立った日のうちに形にできるのは気軽でいいですね。あなたなら、何の練習アプリが欲しいですか？
コメント