🎯 なぜ「タイマー付きフォーム」なのか？

多くの学習記録アプリでは「何を学んだか」を入力することが主ですが、本当に習慣化したいのは「学んだという事実を記録する行動」です。

そこで私は、以下のUXを目指しました。

🛠 タイマー付きフォームの設計ポイント

<Button onClick={handleStart}>スタート</Button> <Button onClick={handleStop}>ストップ</Button>

ユーザーはフォームに必要最低限の情報を入力したら、あとはボタンを押すだけ。操作のシンプルさが継続の鍵です。

Reactアプリでは、<Link>コンポーネントを使うと即時遷移してしまうため、タイマー中の警告を出しても防げません。

そこで、独自の GuardedLink コンポーネントを実装し、タイマー実行中は「本当に移動しますか？」と確認→OK時のみ router.push() 実行というフローにしました。

localStorage.setItem("learning_start_time", now.toISOString());

これにより、ユーザーは「次も記録したい」という気持ちを自然と持てるようにと考えました。

「タイマー付きフォーム」というシンプルな仕組みですが、習慣化を支援するUXとして非常に効果的でした。

記録を習慣づけたいプロダクトを開発する際には、ただの入力フォームではなく、行動を支援する仕掛けを加えてみると継続率が大きく変わります。