2018年4月21日にサービスが開始された、ライフイズテックのプログラミングのオンライン学習教材「テクノロジア魔法学校」をやってみたレポートです。
今回は、プログラミング学習の作りについてレポートします。実際に使ってみて、学びに役立つ仕掛けがたくさんされていることがわかりましたので、レポートしたいと思います。
リアルタイムレスポンスで、PDCAサイクルが速くまわせる
プログラミングの学習画面では、プログラムを入力するウィンドウと、そのプログラムの結果を表示するプレビューウィンドウと、問題とヒントが表示されたウィンドウの3つの要素が1つの画面に構成された状態になっています。プログラムを入力するとすぐにプレビューで確認できるので、自分が入力したプログラムによってどう画面が変わるのか、プログラムが合っているのかどうか、どこが間違っているのかなど、PDCAサイクルを速くまわすことができるUIになっていました。
また、正解にならない・プレビューに反映されない場合は、プログラムのどこかが間違っていることになるので、指定のプログラムと自分が書いたプログラムを見比べて間違いを探すクセがつくなと思いました。
ナビキャラの動きで、視線誘導・説明解説にリズムを
学習画面では、終始ナビキャラが、次に何をするか指示を出し、正解時に褒めたりするのですが、そのナビキャラの立ち位置が画面内を行き来するようになっています。どういうプログラムを書いたらいいか説明しているときは、問題・ヒントのウィンドウやプログラムを入力するウィンドウあたりに移動し、正しいプログラムが書けて正解した際はプレビューウィンドウに移動して、ユーザーが次にどこを見たらいいのか迷わないように、視線を誘導する役割も担っていました。また、そういった動きがあることで、学習中の説明が単調にならずに済んでいるように感じました。
条件や制御で、教えたいポイントからズレないように工夫
プログラムの入力では、ユーザーにすべてのプログラムを書かせるのではなく、テンプレートを用意し、学習させたいポイントだけプログラムを入力させる形になっていたり、指示内容に関係のないプログラム部分については、編集自体ができないようにロックをかけていたりなど、条件や制限があります。ユーザーの自由度は損なうものの、間違いを探す範囲が広くなりすぎて、どこが間違っているのかわからず嫌になってしまったり、思ってもいないところを編集して、元に戻せなくなってしまったりという心配がいらないなと思いました。
1 基礎学習でステップアップ→2 基礎全終了で復習も兼ねた応用学習へ
テクノロジア魔法学校では、メディアアート・ゲーム制作・Webデザインの3種類のプログラミングを並行して学習していきます。各カテゴリごとに、複数回のレッスンをステップアップ形式で1本道で進めていく基礎学習と、基礎学習をすべて終了させた後に学習することができる応用学習の構成になっています。応用学習では、それまでの基礎学習で学んだプログラミングを使ってより高度な作品を作ることで、復習の意図も込められています。ちなみに、テクノロジア魔法学校では基礎学習や応用学習とは言っておらず、魔法学校の世界観に合わせたネーミングになっています。
基礎学習のステップアップの中にも、新しいプログラムと共に、前に出てきたプログラムが何回か出てきたり、ヒントとして最初から表示されているプログラム自体が徐々に少なくなって非表示（「？？？」と表示）の部分が増えてきたりするので、少しずつヒントを見なくても指定されたプログラムを覚えて書けるような設計になっています。
第1章では意図した順番で一本化。第2章ではユーザーの興味に任せて選択式。
第１章では、チュートリアル的な役割で、いちばん最初にパソコンの基本操作の学習を実施し、その後、メディアアート→Webデザイン→ゲーム制作の決まった順番で学習が進めることができます。扱っている言語から考えると、Webデザインだけプログラムの書き方が異なるので、学習のわかりやすさの観点からすると、メディアアートとゲームを連続して学ぶ形にするのが理想的なので、以下の順番にするのを考えます。
ただ、第１章ではユーザーのワクワク感や「プログラムをちょっと書いただけでこんなすごいのが作れちゃった！」という成功体験を早い段階でさせることがユーザーの満足度・自信につながるので、重要になると思います。また、第１章の最後に作った作品の成功体験も、印象として残りやすく、次の章への期待にもつながるので、その章の中で１番高くあるべきです。こういった観点を考慮すると、【A案】も【B案】も、基本的なプログラムでWebデザインの作品を作るには、メディアアートやゲームのような動的な作品に比べると、キャッチーな成功体験では劣るかと思います。また、テクノロジア魔法学校の世界観として、「プログラミング＝魔法」と設定しているので、メディアアートやゲームの方が魔法っぽく感じる作品を作りやすくもあります。
簡単なプログラムだけで動的かつディズニーに関連したメディアアートを作ることができた！という成功体験を得て、Webデザインで別のプログラム言語を学び、最後にプログラムの書く量も多い・少し難しいゲームも作ることができた！という体験をしてもらうために、こういった順番で一本化にしたのではないかな、と考えました。
第２章では、各カテゴリ1レッスン分ずつやってどういう内容をやるのか認識させた上で、好きなカテゴリから学習できる形になっていました。第２章でも、わかりやすさ・学びやすさという観点よりも、ユーザーが興味あるカテゴリやストーリーから学習できるようにしていました。
謎解きストーリー×プログラミング（魔法を唱える）で、必然性を。
新たなコンテンツ体験ができたのが、第２章での謎解きでした。謎解きのストーリーに合わせて、学習したプログラミング（魔法を唱える）が必要な場面があり、成功するとストーリーが進行します。これまで、プログラミング学習が謎解きやストーリー進行に密接に連携はされていなかったので、ストーリーを進行させる部分と、プログラミング学習する部分と別々な感覚でしたが、こういった内容があることで、プログラミングの実践の場という感覚になり、ストーリー中にプログラミングを学習する必然性が強くなったと思いました。
（前田）
