赤ちゃんをあやすタッチ遊びアプリ「ぷかぷかタッチ」を作った
子供をあやすとき用に、ブラウザで動くタッチ遊びを作った。ふわふわ浮かぶ大きなシャボン玉をタップすると、やさしい音階と紙吹雪でぽんっと弾ける。それだけのアプリだが、それだけでいい場面が子育てにはある。
設計で気をつけたこと
大人向けのゲームと違い、対象は狙ってタップできない年齢の子供だ。設計はすべてそこから逆算した。
・シャボン玉を大きくし、当たり判定はさらに45px広げた。だいたい触れば当たる ・泡に外れたタップでも、その場所でキラキラが弾ける。どこを触っても必ず何かが起きる ・画面には常に5個以上の泡があるようにした。触る対象が消えない ・スクロールもピンチズームも無効化。小さな手が暴れても画面が動かない ・文字やボタンは遊びの邪魔をしない最小限。消音ボタンだけ置いた
「必ず反応が返ってくる」ことが、この年齢向けではいちばん大事だと思う。失敗が存在しない設計にした。
音はWeb Audioでその場で合成
効果音に音声ファイルは使っていない。Web Audio APIのオシレーターで、タップのたびにペンタトニックスケール（ドレミソラ）からランダムに1音を鳴らしている。ペンタトニックはどの音の組み合わせでも濁らないので、連打されても音楽的に破綻しない。子供は連打するので、ここは重要だった。
周波数: C5 D5 E5 G5 A5 C6 からランダム波形: サイン波2本（基音+1オクターブ上を薄く重ねる）エンベロープ: 15msで立ち上げ、0.9秒で減衰音量は控えめに、立ち上がりを緩やかにして、びっくりさせない音にしてある。消音ボタンもあるので、外出先では切って視覚だけでも遊べる。
実装はプレーンJSとCanvas
外部ライブラリなしの単一HTMLで、絵文字（ひよこ、クジラ、蝶、星など）を泡の中に描いている。画像素材もゼロで、全部Canvasの描画と絵文字だけ。泡の揺れはサイン波、弾けたときの紙吹雪は簡単なパーティクルで表現した。
スマホでの誤動作対策として、touch-actionの無効化とpointerイベントでの処理をしている。この手の全画面タッチアプリでは、ブラウザ既定のスクロール・ズームとの戦いが実装の半分を占める。
まとめ
・子供をあやす用のタッチ遊びをブラウザアプリとして作った ・狙えない年齢向けに「失敗が存在しない」設計にした ・音はWeb Audioでペンタトニックを合成。連打しても濁らない ・素材ゼロ・単一HTML・外部ライブラリなし ・ぷかぷかタッチから遊べる。あやしの合間にどうぞ