前回、AIに子供向けのお片付けタイマーを作らせました。
目的は、5歳の子供が片付け中に遊び始めてしまう問題を改善できるか試すことです。
関連: 同じ文脈で進めた開発記録として AIにお片付けタイマーを改善させてみた｜子供が興味を示す見た目に修正された？ も読むと、ここで触れたポイントがつながりやすくなります。
関連: 次に読むなら AIで子供向け開発の土台を作ってみた も見ておくと、判断の軸がそろいます。
ただ、結果はほとんど効果なしでした。
キャラクターはいるものの動きが少なく、タイマーも小さい。
何が変わっているのかも分かりにくく、正直、大人が見ても面白くありませんでした。
そこで今回は、その失敗をそのままAIに伝え、改善させることにしました。
AIへの指示
伝えた内容は以下です。
子供が全然興味を示さなかった
くまがいるだけで動きがなく楽しくない
タイマーが小さい
おもちゃも小さく変化が分かりにくい
大人でも何が起きているか分からない
実際に使って感じた違和感を分解して、そのまま渡しました。
AIは正解を出す存在ではなく、指示を実行する存在です。
だからこそ、改善してほしいことを言語化して伝えることが重要になります。
AIの実装
まず既存コードを確認しました。
その上で問題を整理しています。
- アイテムが小さい
- アニメーションがない
- タイマーが小さい
その後、修正タスクを以下のように分けていました。
- globals.cssにアニメーション追加
- CharacterRoomの改修
- CleanupTimerPageの改修
いきなりコードを書くのではなく、
問題の特定 → 修正範囲の整理 → 実装
という流れに沿ってくれています。
改善内容
まず、見た目が大きく変わりました。
おもちゃが大きく表示されるようになり、
進捗に応じて消えていくのが分かりやすくなりました。
さらに、おもちゃが消えるときに動きが追加されました。
縮小しながら回転して消えるようになっています。
くまのキャラクターも改善されています。
タイマー中にバウンドするようになり、動きが出ました。
また、完了時にはキラキラ演出も追加されています。
子ども向けは「動くか」より「本人が反応するか」が核心でした。改善の観察ポイントはAIに子供向けお片付けタイマーを作らせてみたに残しています。
タイマーも大きく変わりました。ちょっと位置がずれていますが、、、
- 中央に大きな円形タイマーを表示
- 残り時間を大きな数字で表示
- 進捗に応じて色が変化
数字だけでなく、視覚的に時間が分かるようになっています。
ボタンも大きくなり、操作しやすくなりました。
全体として、見え方はかなり改善されました。
結果
見た目は大きく改善されました。
特に変わった点は以下です。
- おもちゃが大きくなった
- タイマーが大きくなった
- キャラクターが動くようになった
- 変化が分かりやすくなった
- 完了時の演出が追加された
少なくとも、「何が起きているか分からない状態」は解消されました。
ただし、まだ問題があります。
一番大きいのは、現実と連動していないことです。
時間が進むとおもちゃが勝手に消えるだけで、
子供の行動とは関係ありません。
つまり、
自分がやったから変わった
親目線では続けられるかが核心なので、AIで子供向け開発の土台を作ってみたを先に見ると改善の見方が具体的になります。
という体験になっていません。
今後の改善について
今回の改善は、見た目に寄りすぎています。
もちろん、前回の問題は見た目だったので指示にしたがってくれているのですが、まだ満足するものにはなっていません。
子供が動きたくなる仕組みを足していきたいです。
例えば、
- 片付けたら画面が変わる
- キャラクターが褒める
- ミッション形式にする
こういった要素が必要そうです。
次にやること
次は体験設計に踏み込みます。
方向性は、現実と連動させることです。
例えば、
子ども向けは「動くか」より「使ってくれるか」が難しいので、LLMのハルシネーションとは？AIが間違える理由と対策をわかりやすく解説で反応ベースの改善ポイントも確認しておくと考えやすいです。
- 片付けたらボタンを押す
- おもちゃが一つ消える
- キャラクターが褒める
- ミッション形式にする
こうすることで、子供が参加する仕組みに変えていきたらと思っています。
もちろん、どうすべきかはAIに考えさせます。
次回は、子供が自分から関わりたくなる体験設計をAIに考えさせていきます。
まとめ
次は、体験そのものを改善していきます。
今回は、お片付けタイマーの改善をAIにやらせました。
見た目は大きく改善されました。
ただし、体験としてはまだ弱いです。
そのため、次は体験設計を向上できるかをAIに実装させてみます。
