Screenshots
Overview
概要
幼児が画面をタップして音を鳴らして遊べる、ドレミ8音の木琴（けんばん）アプリです。ピアノ・もっきん・オルゴール・ねこの4音色を選べ、童謡8曲の再生や「おてほん」モード、自分の演奏の録音再生に対応。iOS／Safariの音声制限に配慮したスタートゲートや、誤操作防止の長押しゲートなど、子どもが安心して使える設計です。
How to use
遊び方・使い方
「はじめる」をタップして音を有効化します（iOSの音声制限対策）。色分けされた8つの鍵盤をタップしてドレミを自由に鳴らし、「がっき」からピアノ・もっきん・オルゴール・ねこの音色を選択。「おうた」で童謡を再生し、はやさやくりかえし、お手本（光った鍵盤を追ってなぞる）で楽しめます。「ろくおん」で自分の演奏を録音して聴き返しも可能。保護者は長押しの「おうちのひとへ」から、より高機能なstudio（シンセ鍵盤・シーケンサー等）へ進めます。
Tech stack
技術スタック
HTML/CSS/JSTone.jsWeb Speech APIPWANext.js(配信)
アプリ本体はTone.jsを使った単一HTMLのクライアント完結アプリで、配信のみNext.jsを利用（ルートを内部転送）。Web Speech APIで音名読み上げ、設定はlocalStorage、PWAに対応しています。
Highlights
工夫した点
- スタートゲート・自動レジューム・長押し離脱ゲートなど、幼児とiOSの挙動を踏まえた堅牢な操作設計
- タップ時のキラキラ演出や、曲クリア時の紙吹雪・ファンファーレで達成感を演出
- 同じドメイン内に子ども用（index）と保護者／上級者用（studio）を共存
To improve
改善したい点
- アプリ本体が単一HTMLにインライン実装されており、保守・拡張がしにくい
- 音色はTone.jsの合成音のみで、実楽器サンプルに比べると質感に限界がある
What's next
今後の展望
- 童謡や音色のラインナップ追加
- 演奏の保存・共有や、お手本モードの難易度バリエーション拡充