Feel Physics | Blog

Sicence (Physics) education with ICT

「授業が玉突きでズレる」を走る矢印で見えるようにした話

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

その校内放送ひとつで、午後の授業が全部1時間ずつ後ろにズレる。運動会や学級閉鎖、急な行事。理科専科の先生にとって、これは「あるある」だと思います。

行事が入ると、授業は"玉突き"で後ろにズレていきます。 1つ動くと、その後ろも、そのまた後ろも、数珠つなぎに動く。しかも複数のクラスを持っていると、「他のクラスとの進度の差」まで開いていく。「今学期、ちゃんと最後まで終わるんだろうか?」——そんな不安が、頭の中でぐるぐるします。

玉突きは、日常にはない動き方

この"玉突き"、よく考えるとかなり不思議な動きです。私たちの日常には、あまりない。だから頭の中だけで追いかけようとすると、地味にすごく難しいんです。

実験手帳(開発中の授業スケジュール調整アプリ)でも、ここは大きなテーマでした。「どこがどこへ動くのか」を、どうすれば先生がパッと理解できるだろう?

まず、矢印で見せてみた

最初に試したのは、矢印です。「この授業はここへ動きます」というのを、青い矢印で結んでみました。

……が、これが失敗でした。連鎖が長くなると、画面は東京の地下鉄の路線図みたいにグチャグチャに。 矢印が交差して重なって、かえって何がどこへ動くのか分からない。可視化したはずが、逆に分かりにくくなってしまいました。

だったら、動かせばいい

ここで方針を変えました。「静止した矢印」ではなく「動くアニメ」にする。

  • 破線のガイド線を、連鎖の各区間にそっと引く
  • その線に沿って、矢印が「スーッ」と走る
  • 矢印が半分を過ぎたら、授業のコマが1つ前の位置へスライドして移動する
  • 1回流したら10秒ほど止まって、また繰り返す

やってみると、これが効きました。動きにした瞬間、"玉突き"が目で追えるようになった んです。「あ、この授業がここへ動いて、その分こっちが押し出されて……」と、視線が自然に流れをたどれる。

静止画だと「情報が全部同時に見えて混乱する」のに、動きにすると「順番に理解できる」。同じ内容でも、見せ方でこんなに変わるのか、と自分でも驚きました。

予定がズレても、準備はズレない

実装の中身としては、実際の授業データは動かしていません。玉突きの計算ロジックもDBもそのまま。あくまで「見せかけ」のクローンを重ねてスライドさせる方式にして、データの安全は守りながら、動きだけを足しています。

目指しているのは、「予定がズレても、準備はズレない」 状態です。行事で予定が崩れても、先生が慌てず次の授業に向かえる。その安心を、こういう小さなUIの積み重ねで作っていきたいと思っています。


もしよかったらフォローして、「予定がズレても大丈夫な道具」を作っていく過程を、これから一緒に見ていってください。