概要
- 種別
- 自社プロダクト（麻雀の学習ゲーム）
- 提供形態
- ブラウザ版／LINEミニアプリ／iOS版（App Store）／Android版（Google Playでテスト配信中）
- 担当範囲
- 企画、UI・画面設計、開発、ストア申請・審査対応、課金と広告の設定、運用・改善
- 公開
- 2026年7月 ブラウザ版・LINEミニアプリ公開／2026年8月 iOS版公開
- リンク
- 製品紹介ページ／ブラウザで遊ぶ／App Store
作ろうと思った理由
麻雀が上達するかどうかは、1局の中で20回近く訪れる「どの牌を捨てるか」という選択の積み重ねで決まります。ところが実戦を1回打つには1時間近くかかり、選択の練習だけを繰り返すのは簡単ではありません。
そこで、この「選択の瞬間」だけを切り出して、数秒で1問、60秒で1ゲームという短い単位で繰り返せるようにしました。通勤中や休憩中のすきま時間でも練習量を積めることを最優先にしています。
主な機能
3つのモード
染め手に特化した「清一色モード」、標準的な「何切るモード」、完成した手牌の符を答える「符計算モード」。いずれも60秒のタイムアタックです。
鬼斬りモード
1問5秒の制限と、連続正解で獲得点が倍々になる仕組みを加える上級者向けの設定です。
段位と全国ランキング
スコアに応じた段位と、全期間・今週・モード別のランキングで、続ける動機を作っています。
振り返りと解説
解いた問題はあとから見返せ、正解の牌や符の内訳を確認できます。遊ぶことがそのまま復習になる設計です。
技術的な構成
小さなチームで4つの提供形態を維持するため、ひとつのコードからすべてを作る構成にしています。
- 画面は TypeScript と Next.js で作り、ビルド時に静的なファイルとして書き出しています。ブラウザ版は Cloudflare Workers から配信しています。
- 同じ静的ファイルを Capacitor で包み、iOS・Android のアプリとしてストアに出しています。LINEミニアプリも同じ画面を使っています。
- 問題データとランキングは Supabase で管理しています。
- アプリ内課金（月額・年額のサブスクリプションと広告除去の買い切り）は RevenueCat、広告は Google AdMob で実装しています。無料で遊べるのは1日10回までとし、プレミアム会員は無制限に遊べます。
- TypeScript
- Next.js
- Capacitor
- Supabase
- Cloudflare Workers
- RevenueCat
- Google AdMob
- LINE ミニアプリ
機能を追加すると、ブラウザ版とアプリ版に同時に反映されます。たとえば「符計算モード」は、ウェブで先に公開して動作を確かめてから、同じコードをアプリに取り込みました。
開発・運用で直面した課題と解決策
課金の商品がまったく表示されない
iOS版に課金を組み込んだところ、購入画面に商品が一つも表示されない状態が続きました。原因は二つ重なっていました。
一つ目は、App Store Connect の「有料アプリ契約」が、税務情報と銀行口座の登録待ちで有効になっていなかったことです。この契約が有効でないと、ストアは商品情報を返しません。二つ目はアプリ側のコードで、Capacitor のプラグインを非同期関数の戻り値として返していたことでした。プラグインはどのプロパティにアクセスしても関数を返す特殊なオブジェクトのため、JavaScript から「Promise のようなもの」と誤認され、処理が永久に完了しない状態になっていました。プラグインを同期的に参照するよう修正して解決しています。
審査で求められる表示が、条件によって消えていた
サブスクリプションの自動更新条件や解約方法、利用規約へのリンクを、価格の読み込みが成功したときだけ表示する作りになっていたため、審査で指摘を受けました。価格の取得に失敗しても開示事項は必ず表示し、再読み込みのボタンも常に出すよう作り直しています。あわせて、Android では Google Play 向けの解約案内に切り替わるよう、端末ごとに文言を出し分けています。
スコアより先に広告が見えてしまう
ゲーム終了時に全画面広告を出していますが、広告の準備が遅いと、結果のスコアが一瞬見えてから広告が重なることがありました。広告の表示処理が完了してから結果画面を描画するよう順序を変え、どのモードでも同じ体験になるようにしました。
ホスティングの利用規約
当初はブラウザ版を無料プランのホスティングで公開していましたが、そのプランが商用利用を認めていないことから、収益化に合わせて配信先を移しました。広告や課金を入れる前に、使っているサービスの規約が商用利用に対応しているかを確認することが大切です。
お客様の案件に活かしていること
これらはいずれも、コードを書く前後の「ストア」「課金」「規約」にまつわる課題でした。自社アプリで一度経験していることで、受託の案件では計画の段階からこうした点を織り込み、公開までの手戻りを減らすことができます。アプリ開発のご相談についてはアプリ開発のページをご覧ください。