ramen-timer

制作経緯

子どもとラーメンを食べるとき、「あと何秒？」という問いが何度も繰り返される場面がありました。時間の感覚が大人とは違う子どもにとって、「3分」という数字は実感を伴いにくい。ただのカウントダウンではなく、「待つことへの見通し」を視覚的・聴覚的に届けるタイマーが作れないかというところが出発点です。

開発を進めるうちに気づいたのは、発達特性（時間感覚の困難さ、聴覚過敏）のある子どもにとって、一般的なタイマーの UX がかなり不親切だということです。大きな音のアラート、突然の画面切り替え、複雑な操作 UI——これらを取り除き、「見通しがわかる、驚かない」という体験に絞り込むことが設計の核になりました。

概要

ramen-timer は、子ども向けのラーメンタイマーです。現在は keroway-family/ramen-timer（PWA）と keroway-family/ramen-timer-mobile（React Native / Expo）の 2 リポジトリに分け、Web とネイティブアプリをそれぞれの実行環境に合わせて育てています。どちらも private repository のため、この Works では公開 URL と設計方針のみを紹介します。

PWA 版は https://ramen-timer-dch.pages.dev で公開し、ブラウザからすぐ試せる入口にしています。モバイル版は Expo ベースで、端末の振動や通知などネイティブ寄りの体験を検証する位置づけです。

技術選定

• PWA — Web からすぐ使える入口。Service Worker / manifest を整え、インストール不要で試せるオンボーディングも兼ねる。
• React Native / Expo — iOS / Android 向けのネイティブ体験を検証。振動や通知など、ブラウザだけでは扱いにくいフィードバックを試せる。
• TypeScript — タイマーの開始・一時停止・リセットという状態遷移を型で明示し、状態管理の誤りを早期検出する。
• アクセシビリティ優先の UI — 音だけに頼らない終了通知、視覚的な残り時間表示、急な変化を避ける演出を重視している。

学び

「発達特性への配慮」は特定の人向けの特殊対応ではなく、使いやすさの本質に近いものだ、という実感が得られました。予告アニメーションは「突然終わらない」感覚を届けるために入れたものですが、特性のない子どもにとっても「おお、終わる！」という期待感になっていました。

音なしモードを検討したとき、最初は「音がなければタイマーとして機能しないのでは」という疑問がありました。しかし「終了を知る方法は音だけではない」と視点を変えることで、振動フィードバックと光点滅の組み合わせで代替できると気づきました。

今後の方向性

ラーメン以外のシーン（歯磨き・宿題など）向けのプリセット追加、子どもが絵を選んで設定できる UI、保護者向けプロファイル（音量・アニメーション強度のデフォルト）の実装を検討しています。PWA 版で体験を固め、必要な機能をモバイル版へ移植する流れで進める予定です。