AIで知識ゼロからアプリ開発1000時間 #10

＃10：日々の達成にご褒美を。レベルアップ演出で「継続」を演出する

毎日レベルアップするアプリに、控えめな演出をつけてみた話だじゃ。赤と黒の細長い線がスーッと上にのぼって、ステータス枠がちょっとだけ光る。たったそれだけのことでも、続けるモチベーションが変わる。技術的にはCSSアニメーションとReactの状態管理でサクッと実装。習慣化って、こういう「ちょっと嬉しいこと」が大事なんだなって実感したじゃ。

日々の達成にご褒美を。レベルアップ演出で「継続」を演出する

毎日まじめにアプリ開いで、コツコツタスク終わらせで、レベルが1つ上がる。そういう地味で堅実な作業にこそ、実は一番ご褒美が必要なんでねぇが？……って思ったのが、今回のエフェクト追加のきっかけだったじゃ。

最初は、ただ数字が「Lv. 1」から「Lv. 2」って増えるだけだったんず。でも、それだけだと、正直ぜんぜん嬉しぐねぇ。だから少しだけ「おぉっ」ってなる演出、追加してみることにしたんず。

演出っていっても、そんな大げさなもんじゃねぇ。
ほんの1.5秒だけ、ステータスの枠が赤黒く光って、ピシーッと赤と黒の細長いラインが下から上へスッと上がる。それだけ。だけどな、これがあるのとないのとでは全然ちゃうんず。

■ 技術的にはけっこうシンプル

まずはisLevelUpっていうフラグ用意して、レベルが上がったときだけtrueにすんず。んで、1.5秒後にまたfalseに戻す。これだけで、エフェクトのON/OFF切り替えはできるじゃ。

jsコピーする編集するsetIsLevelUp(true);
setTimeout(() => setIsLevelUp(false), 1500);

んでCSS側では、.level-up-effectってクラスつければ、枠がピカーッて光るようにして、
.rising-linesってクラスで、赤と黒のラインが上にスーッと流れるようにしたんず。

cssコピーする編集する.level-up-effect {
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.8);
  animation: glowEffect 1.5s ease-out;
}

.rising-lines {
  background: linear-gradient(0deg, black, red);
  animation: riseEffect 1.5s ease-out forwards;
}

これをアバターの横にちょろっと出すだけで、めちゃくちゃ“努力が報われた感”出るんず。

■ 継続するには「ちょっと嬉しい」が大事

習慣化のアプリって、正直に言えば地味な作業の連続なんず。だからこそ、「ちょっとだけ嬉しい瞬間」を作ってやるのが、めっちゃ効く。演出って、ただの飾りみたいに思われがちだけど、人間の心に火をつけるには、けっこう重要な要素だなぁと実感したじゃ。

■ 自分でもビックリした変化

演出つけてみた翌日、なぜかちょっと「今日もやるか」って気分が違う。うまく言えねぇけど、ご褒美のあるゲームのプレイヤーみたいな感覚になるんず。数字だけじゃない、「演出された変化」があると、続けたくなるんだな。

---

今日の学びまとめ

• useStateとuseEffectで一時的なアニメーション制御ができる
• CSSだけで“ちょっとカッコいい”は作れる
• 継続には「ちょっとしたご褒美」が効果バツグン