はじめに
全国のパパ・ママエンジニアのみなさん。こんにちは。
2歳〜3歳くらいの子どもって動物大好きですよね？
わたしには2歳8ヶ月の娘がいるのですが、特にカピバラが大好きです。
そんな動物大好きっ娘のために簡易ゲームをつくりました。
つくったもの
Animal Sounds 〜おとあてげーむ！いきものどーれだ？〜
内容はとってもシンプル。
動物の音が流れるので、その音に合う動物（いきもの）を選択肢の中から選ぶゲームです。
作った目的（解決したい課題）
2歳といえば、いろいろなものに興味が湧いてくる年頃。
わたしの娘も例外でなく、まいにちさまざまなものに興味を示しています。
中でも、最近いちばん好きなのが動物。
毎晩のように動物図鑑を持ってきて、「ぱぱー。読んでー。」とせがんできます。
そんなに動物が好きなら、動物園に連れて行ってあげたいなぁと思いつつ、コロナ禍で頻繁に外出するわけにもいかない。
「なんとか、動物図鑑だけでは味わえない、もう少しだけ相互性のある体験ができるプロダクトはないかな？」
その結果、出来上がったのが今回のゲームです。
企画コンセプト
ゲームでもなんでも、何かプロダクトを作るのなら企画書は必要です。
すごく簡易ですが、ゲームを作るにあたって下記のコンセプトとビジョンを予め決め、企画書を作っておきました。
ビジョンについて
限りなくシンプルに！
2歳が遊ぶゲームなので、余計な機能はいっさい付け加えないことにしました。
「どうぶつの音が流れて、答えを選択肢から選ぶだけ」
という内容にすることで、直感だけで遊べるゲームを目指しました。
本当はログイン機能があったり、正解率が出たりとゲーム性をあげることも考えたのですが、娘がそんな機能を望むかと検討した結果、すべて削ぎ落としました。
迷わないUI。音で盛り上げる。
今回音声ゲームにした最大の理由として、UIがあります。
2歳だとまだ字が読めないのと、複雑な操作をすることも困難です。
どうしようか？と考え、実際に2−３歳の子どもが遊ぶようなゲームアプリを観察したところ、音声（キャラクターの声など）が多用されていることに気づきました。
平易な言葉なら、2歳くらいの子どもでも理解できると思ったので、音声形式のゲームにしました。
コスト０
今回のような音声当てゲームをつくるにあたって、コスト面は絶対に0にすると決めていました。
あくまで開発者のわたしにとっては、それこそが他の類似プロダクトとの差別化につながると考えたためです。
コスト０を実現するために、画像はunsplashから拝借させていただきました。
また要となる音声ですが、フリー素材だとすべての動物の音がカバーできそうになかったので、七声ニーナというサービスを利用することにしました。
※2022年3月末でサービス終了みたいです。
すぐに飽きさせない
出てくる選択肢がいつも同じで、答えも同じだったら1回やったらすぐに飽きてしまうと思いました。
そこで、毎回ランダムな選択肢を作り、答えも毎回違うようにプログラムを組みました。
外れても否定をしない
当初、正解ではない動物を選んだ場合は「はずれー」という音声にする予定でした。
しかし、子どものことを考えるとそれはどうなのか？と。
せっかくのゲームだから楽しく遊んでもらいたいと考え、「惜しいです！」の音声に差し替えました。
実際に使ってもらった反応
実際に娘に使ってもらいました。
期待通り、直感で遊び方を理解したようで、楽しく遊んでくれました！
使用技術
- React v17.0.2
- TypeScript v4.5.5
- Material UI v5.4.2
- Emotion 11.8.1
- ESLint/Prettier
苦労した点
実ははじめてReactとTypeScriptを触ったため、2週間ほど基礎学習をするところから始めました。
そのため、Reactのコンポーネント分割やTypeScriptの型定義に慣れるのが苦労しました。
また動物の画像や音声データを準備するのが地味にしんどかったです。
おっさんが朝6時に動物の鳴き真似をして、音声録音を繰り返すという地獄絵図が我が家に生まれていたのは遠い過去のお話です。
プルリク募集中！
さいごに、今回のアプリはReact初心者がつくったアプリなのでコード品質はあまり良くないと自覚しています。
もし、「Reactはチョットデキル」的な方がいらっしゃったらぜひGitHubからコードレビューいただき、あわよくばリファクタリングついでにアドバイスくれたりしたらとても勉強になります！