「5年生は午後、運動会練習とします!」

その校内放送ひとつで、午後の授業が全部1時間ずつ後ろにズレる。運動会や学級閉鎖、急な行事。理科専科の先生にとって、これは「あるある」だと思います。
行事が入ると、授業は"玉突き"で後ろにズレていきます。 1つ動くと、その後ろも、そのまた後ろも、数珠つなぎに動く。しかも複数のクラスを持っていると、「他のクラスとの進度の差」まで開いていく。「今学期、ちゃんと最後まで終わるんだろうか?」——そんな不安が、頭の中でぐるぐるします。
玉突きは、日常にはない動き方
この"玉突き"、よく考えるとかなり不思議な動きです。私たちの日常には、あまりない。だから頭の中だけで追いかけようとすると、地味にすごく難しいんです。
実験手帳(開発中の授業スケジュール調整アプリ)でも、ここは大きなテーマでした。「どこがどこへ動くのか」を、どうすれば先生がパッと理解できるだろう?
まず、矢印で見せてみた
最初に試したのは、矢印です。「この授業はここへ動きます」というのを、青い矢印で結んでみました。

……が、これが失敗でした。連鎖が長くなると、画面は東京の地下鉄の路線図みたいにグチャグチャに。 矢印が交差して重なって、かえって何がどこへ動くのか分からない。可視化したはずが、逆に分かりにくくなってしまいました。
だったら、動かせばいい
ここで方針を変えました。「静止した矢印」ではなく「動くアニメ」にする。
- 破線のガイド線を、連鎖の各区間にそっと引く
- その線に沿って、矢印が「スーッ」と走る
- 矢印が半分を過ぎたら、授業のコマが1つ前の位置へスライドして移動する
- 1回流したら10秒ほど止まって、また繰り返す
やってみると、これが効きました。動きにした瞬間、"玉突き"が目で追えるようになった んです。「あ、この授業がここへ動いて、その分こっちが押し出されて……」と、視線が自然に流れをたどれる。
静止画だと「情報が全部同時に見えて混乱する」のに、動きにすると「順番に理解できる」。同じ内容でも、見せ方でこんなに変わるのか、と自分でも驚きました。
予定がズレても、準備はズレない
実装の中身としては、実際の授業データは動かしていません。玉突きの計算ロジックもDBもそのまま。あくまで「見せかけ」のクローンを重ねてスライドさせる方式にして、データの安全は守りながら、動きだけを足しています。
目指しているのは、「予定がズレても、準備はズレない」 状態です。行事で予定が崩れても、先生が慌てず次の授業に向かえる。その安心を、こういう小さなUIの積み重ねで作っていきたいと思っています。
もしよかったらフォローして、「予定がズレても大丈夫な道具」を作っていく過程を、これから一緒に見ていってください。