はじめに
株式会社インティメート・マージャー開発本部でエンジニアをしている @eknis です。
アドベントカレンダーはもうすぐ終わり。今日はクリスマスイブですね🎄
エンジニアの皆さんはプレゼント用意できましたでしょうか。
私は普段の忙しさに追われ、気づけばもうクリスマスが近い。
父としての威厳を見せたい。でも時間がない。
そこで閃きました。
「そうだ、AI（Gemini）とペアプロして、子供専用のアプリを作ればいいんだ」と。
実務とは遠いですがクリスマスなのでAIの力を借りて知育アプリ「Prodigy Toys」を開発した記録を共有します。
学び、というよりやってみましょうという内容です。
作ったもの: 「Prodigy Toys」
子供が夢中になる「おもちゃ箱」のようなアプリを目指しました。
主な機能
1. 🏠 ホーム画面
アプリの顔となるホーム画面。
子供が好きな「ガチャ」への導線をあえて大きく配置し、ワクワク感を演出しています。
背景やバナーは「スキン」設定によって自動的に切り替わります。
2. 🎮 知育ミニゲーム
単なる暇つぶしではなく、少し頭を使うゲームを用意しました。
全部で15種作りましたが一部を紹介すると
-
👂 おとあてクイズ:
Web Speech APIで「ワンワン！」と読み上げ、正解の動物を選びます。 -
🧩 かたちパズル:
Canvas APIで動的に描画された図形（星や三角など）を、シルエットに合わせて選びます。
-
🔢 すうじタッチ:
ランダムに配置された数字を1から順にタップ。タイムアタック形式で集中力を養います。
3. 🎁 ガチャ機能
ゲームで遊んで貯めたポイント（💎）でガチャを回せます。
演出には少しこだわり、カプセルが開くようなワクワク感をCSSアニメーションで表現しました。
4. 🎨 着せ替えスキン (ここがこだわり)
「恐竜」「宇宙」など、テーマに合わせてアプリ全体の見た目がガラッと変わります。
CSS変数を再定義する仕組みにより、色だけでなく背景画像や各パーツのスタイルまで一括で変更可能です。
5. 👤 ユーザー切り替え
ユーザーごとにセーブデータを分離しました。(我が家は子供が二人なので。)
開発のポイント: AI活用で「素材なし」「時間なし」を乗り切る
AIとペアプロすることで、エンジニアが苦手な部分や時間のかかる部分をショートカットしました。
1. デザインシステムの爆速構築
「子供向けで、ワクワクする感じで、でも今風のグラスモーフィズムで！」
こんな抽象的なオーダーから、AIが一瞬でCSS変数ベースのデザインシステムを構築してくれました。
:root {
/* Theme Colors - スキン機能で動的に書き換える変数 */
--primary-color: #EE5253;
--secondary-color: #48DBFB;
--radius-lg: 24px;
/* Glassmorphism - 共通のすりガラス効果 */
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-blur: 10px;
}
この変数定義のおかげで、後述するスキンの切り替え機能も「変数の値を書き換えるだけ」で実現できました。
2. 素材がない？ コードで作ればいいじゃない
個人開発の最大の壁、それは「素材探し」です。
画像や音声を探しているだけで日が暮れてしまいます。
今回はAIの提案により、ブラウザ標準APIを駆使して素材レス開発を行いました。
🔈 音声素材 → Web Speech API
「動物の鳴き声ファイルを探す？面倒です。ブラウザに喋らせましょう」
const speak = (text: string) => {
const utterance = new SpeechSynthesisUtterance(text); // "ワンワン！"
utterance.lang = 'ja-JP';
utterance.rate = 0.9;
window.speechSynthesis.speak(utterance);
};
これだけで「おとあてクイズ」が完成。
🧩 画像素材 → HTML5 Canvas API
「パズルの図形画像を作る？描画ロジックを書いたほうが早いです」
星型や多角形を描画する複雑なロジックも、AIなら一瞬で書いてくれます。おかげで無限に遊べるパズルができました。
🖼 アイコン → 絵文字 (Emoji)
アイコン画像を用意する代わりに、絵文字をフル活用。
text-align: center; font-size: 60px; で立派なアセットになります。
とはいえお気に入りにしたいこともあるかと思うので要相談ですね。
3. ロジック実装も爆速
「1から10まで順番にタップするゲーム」のような、単純だけど細かい状態管理が必要なロジックも、要件を伝えるだけでほぼ完璧なコードが上がってきました。
私は生成されたコードをレビューし、子供が喜びそうなエフェクト（正解時の音やアニメーション）の調整に注力できました。
技術スタック
- Framework: React + TypeScript
- Build Tool: Vite (起動が速くて快適！)
- Styling: Plain CSS + CSS Variables (CSS-in-JSは使わずシンプルに)
- Audio: Web Audio API (効果音も合成音で生成！)
もっとよくなる
やれることはもっとありそうです
- UIをもっとブラッシュアップできそう
- 良い伝え方をするともっと子供が好きな見た目になりそうな気もするんですが試行錯誤中です。アニメ風もちょっと違ったんですよね。
- 親との関わり
- 親御さんと一緒に遊べるもの、ババ抜きなど 一緒になにかする をもっとやりたいですね
- ストレージ
- いくつかの端末で遊ぶことは安易に想像できますね。ですが対応できていないので無料枠を駆使して安くやりたいですね
まとめ
「これすごいね！」
...と、明日の朝言ってもらえることを信じています。
AIペアプログラミングは、単なるコード補完ではなく、エンジニアの「作りたい」という想いを、物理的な時間の制約を超えて実現してくれるツールだと実感しました。
普段忙しいと子どもとの時間は限られてしまいます。それでも普段やっている仕事や大人ってすごいんだな、楽しいんだなと思ってもらえるよう
なにかしてあげられるのは私にとってとても嬉しいことでした。
みなさんも、年末年始の休みに「AIとペアプロ開発」いかがでしょうか？
毎日欠かさず！インティメート・マージャー アドベントカレンダーを見てください！明日が最後！
また、インティメート・マージャーでは、新卒から中途採用まで幅広く採用募集中です！
記事を読んで弊社に興味を持ってくれた方は、下記より採用情報をチェック！
それでは、メリークリスマス！🎅✨