こんにちは、Karouです。今回は、電子レンジで食材を温めるときに「ラップする？しない？」をクイズ形式で学べるWebアプリ「ラプる？」を作った話をします。
きっかけは「ラップどうする？」問題
電子レンジで温め直すとき、ラップをかけるかどうかで迷った経験はありませんか？ごはんはラップする、揚げ物はしない——なんとなく知っているけど、自信がない。「ほうれん草のおひたし」は？「カレー」は？聞かれると意外と答えられない。
そんな日常のちょっとしたモヤモヤを、クイズにして楽しく解決できたら面白いんじゃないか。そう思って「ラプる？」の開発が始まりました。
3つの難易度で飽きさせない
ラプる？には3つのモードがあります。
- ノーマルモード：「する」か「しない」の2択。電子レンジとラップの基本を学ぶ入門編。全10問で、正解・不正解のフィードバックとともに食材ごとの理由も表示されます。
- ハードモード：「ぴったりラップ」「ふんわりラップ」「しない」の3択。ラップのかけ方まで問われる上級編。たとえば、カレーは飛び散り防止にふんわりラップ、揚げ物はサクサク感を保つためにラップなし——こうした細かい知識が試されます。
- カオスモード：「レンジに入れてOK」か「NG」かを判定するモード。たらこ、ペットボトル、ドライアイス、金属装飾の食器——間違えて入れたら大変なものが次々と登場します。NGの食材をOKと答えてしまうと、画面上で爆発エフェクトが炸裂。
食材図鑑で知識が貯まる
クイズで出会った食材は「食材図鑑」に登録されていきます。全88品の食材が収録されており、それぞれの正しいラップ方法と理由が確認できます。カオスモードのNG食材は、ネタバレ防止のため未発見のものは🔒マークで表示。全食材をコンプリートする楽しみもあります。
実績システムでモチベーション維持
13種類の実績が用意されています。「初めてのクイズ」から「全モード制覇」まで、段階的な目標がプレイのモチベーションになります。実績はlocalStorageに保存されるので、ブラウザを閉じても進捗は保持されます。
演出へのこだわり
ラプる？では、クイズの体験を楽しくするための演出にもこだわりました。
- レンジ投げ込みアニメーション：食材を選ぶと、電子レンジの扉が開き、食材が投入され、扉が閉まり、庫内が光る——一連の流れをアニメーションで表現。
- 爆発エフェクト：カオスモードでNG食材をOKと答えた場合、画面が揺れて爆発する演出。思わず笑ってしまうインパクト。
- 効果音：出題音、正解音、不正解音、爆発音、電子レンジの「チン」音。音があるだけで体験の質が段違いに上がります。
- 漫画風吹き出し：カオスモードではレンジから漫画風の吹き出しが出現。食材に対するレンジのリアクションが楽しめます。
多言語対応
ラプる？は日本語と英語に対応しています。i18n基盤を自前で構築し、約120キーのUIテキスト、88品の食材名・説明、13個の実績テキストをすべて翻訳しました。言語切替ボタンで即座に切り替えられ、設定はlocalStorageに保存されます。
技術スタック
Next.js 15 + TypeScript + React 19で構築。Tailwind CSSでスタイリング、Firebase Hostingでデプロイしています。静的エクスポート（SSG）によりサーバーレスで運用でき、ランニングコストはほぼゼロです。
「ラップする？しない？」という身近な疑問を、クイズという形で楽しく解決する。料理初心者の方はもちろん、料理好きな方でも意外な発見があるはずです。ぜひ試してみてください。