はじめに
はじめまして、キュレオ社のデザイナー・初見（@823designer）です。
これまではサイバーエージェント・メディア管轄のブログサービスなどに従事しておりましたが、昨年10月にキュレオ社にジョインしました。
キュレオ社は、子供向けのブロックを用いたビジュアルプログラミング教材「QUREO」を開発する、サイバーエージェントの子会社です。（2019年より株式会社CA Tech Kids と株式会社スプリックスの合弁会社となりました。）
「QUREO」では日々どのようにサービスを改善し、子供たちに届けているか、その一例をご紹介したいと思います。
目次
- 現場で知った「QUREO」の課題
- 最初のつまずきをいかに減らすかが継続の鍵
- 改善①本当に理解できているかを画面上でわかりやすくする
- 改善②世界観を見せることで自然に全体を知ってもらう
- 改善③カリキュラム自体を見直して、つまずきを減らす
現場で知った「QUREO」の課題
昨年2019年11月に、「QUREO」が学芸大附属世田谷小学校にてプログラミング授業おこなうことになり、見学に伺いました。2020年度より小学校でのプログラミング教育必修化を目前に、学校から授業の依頼があり、「QUREO」のメンバーが出張授業にいくとのことで、2コマほど見学させていただきました。
見学したのは小学4年生のクラスでプログラミングを既に授業でとりいれているクラス（Scratchを利用）でした。2コマの授業で「QUREO」のチャプター1・2の全14レッスンを体験してもらい、私は現場で一緒に教えるお手伝いをさせてもらいました。
実際にサービスが使われているところをみるのは、大変感動するものでありました。
子供たちが夢中になって授業を受けている姿を見て、「QUREO」の良さを再確認できました。
もちろんよかった点だけでなく、ここで課題も発見することができました。
- 説明を読み飛ばしてしまう
- …だが説明が多いと、子供達の意識が散漫になってしまう
- ガイド機能に気がつかない
- もっと続きをすすめたくなる演出が必要
- 動画や説明を飛ばしてしまうため、理解しているか？をわかりやすく画面でだしてあげる必要がある
「QUREO」は子供向けのサービスなので、大人の自分が触ってみてわからないところと、子供たちがわからない点が異なるため、非常に勉強になりました。
最初のつまずきをいかに減らすかが継続の鍵
キュレオ社では現在「QUREO」をオンラインの個人利用だけでなく、全国1500以上の学習塾や習い事教室への提供も行っています。
学校授業を見学して確認できた課題は、QUREO導入教室でも課題となっている点でした。
塾でも体験会として、最初のチャプター1・2を体験してもらうのですが、この最初の体験でつまずいてしまうと、子供たちのやる気が削がれてしまう、という課題がありました。「最初の体験が楽しかったか」・「自分でプログラミングを組んでいるという、成功体験を積み重ねることができるかどうか」、で子供たちのやる気や継続につながっていきます。
学校授業を見学して、確認できた課題も同様に、序盤でつまずいてしまう生徒への課題だったため、チームで持ち帰って議論し、改善施策をリリースしました。
改善①本当に理解できているかを画面上でわかりやすくする
▼解決したい課題
「QUREO」ではレッスンをクリアすると、「クリア」表示がつきます。
これまでのデザインだと、答えを見ずにクリアしたときは「星」、答えを見てしまったときは「黒星」、というデザインでしたが、その説明がマウスをのせたときでないと表示されませんでした。子供たちにとって「ホバーしたらなにかがでる」というのはなかなか気が付きづらい仕様でした。
- ホバーしないとなぜ星が表示されているかわからない
- 作成した意図としては、子供たちが答えを見たレッスンを、もう一度トライして理解を深めてもらいたい
- 自分自身で見て、理解できているかをわかりやすくしたい
▼実行した改善案
こちらを解決するために、星のモチーフはそのままに、以下のような改善を行いました。
- より目に留まるアニメーションで目立たせる、かつ世界観になじむように。
- 黒星を埋めたくなる表現にすることで、「悔しい！ちゃんと星を埋めたい！」と感じてもらい子供自身で復習してもらう
- 「クリア！」「答えを見たよ」と文字説明をつけることで、一目で星の意味がわかるようになる
ここでは「いかに世界観のなかに馴染ませながら、簡潔に説明できるか？」というところが肝でした。これまでのメディアサービスのUIではなかった表現だったので、ゲーム的な表現は自分にとってもチャレンジできた部分でした。
特に星のアニメーションは、たくさん並んだ時に嬉しくなる、気持ちのいいアニメーションを目指しました。また、星のアニメーションをつけたことで、「星が特別なものである」と感じてもらえるようなデザインに変わったと思います。
▼並んだ時の気持ち良さを演出したアニメーション
▼答えを見た時とクリア時の比較。空いた穴を埋めるようにすることで、より埋めたくなる・コンプリートしたくなる狙い
改善②世界観を見せることで自然に全体を知ってもらう
▼解決したい課題
序盤のレッスンでは、「QUREO」という世界観を理解してもらい、「もっと学習したい！」「もっと進めたい！」と子供たちに感じてもらうことも必要でした。
体験会や学校の出張授業では、基本的にチャプター２までが範囲ですが、実際の「QUREO」には56のチャプターが存在します。
- 「QUREO」の世界観や全体像を伝えたい
- もっと先があることを伝えてワクワクしてほしい
- チャプター１・２よりも先にすすめたくなる、継続してQUREOをプレイしたくなるようになって欲しい
▼実行した改善案
こちらを解決するために行ったのは
- チュートリアルの流れで、全体マップを挟む
という改善でした。
「QUREO」のストーリーになじむ、自然な流れでマップを挟むことによって、「こんなにたくさんあるんだ！」と感じてもらいつつ、今後使うときにも全体マップの機能を使いこなすことができるよう、という狙いがあります。
改善③カリキュラム自体を見直して、つまずきを減らす
▼解決したい課題
チャプター１・２でも、子供たちに文字を入力してもらう箇所がでてきます。
非常に細かい点ですが、「QUREO」内では文字入力を教える機能はなく、子供のパソコンの習熟度によっては文字入力につまずいてしまう、という現象もありました。
- （「QUREO」のプログラミング学習の本質ではない）「難しい記号の入力」や「文字変換」などのパソコンの使い方でつまずいてしまう子が多い
- 文字入力で時間を使いすぎてしまう
▼実行した改善案
こちらを解決するために行ったのは
- 難しい記号や、文字変換を序盤のレッスンからはずす
という改善でした。
「QUREO」ではカリキュラムも内製で作成しています。そのため内容そのものを修正し、序盤のレッスンにおいては難しい記号「！」「？」などは省くように、レッスンそのものを見直しています。
細かい点ですが、「QUREO」ではこうした細かい調整や改善をおこない、実際の現場にお届けしています。塾や学校での課題を、開発チームで迅速に改善し、より質の高い教材へと日々試行錯誤しています。
最後に
今回は3つの改善例を紹介させていただきました。
こちら以外にもたくさんの改善や機能開発をしています。
実際に子供たちがサービスをプレイしている様子や、QUREO導入教室でのフィードバックをへて「QUREO」ではこうした改善や開発を行い、より子供たちが「QUREO」の世界観のなかで、自然とプログラミングを学べるように取り組んでいます。
デザイナーとしてもゲーム的な世界観の中でのUI表現や、ストーリー体験のなかでの見せ方、改善する楽しさがあります。実際に子供たちの手に届き、「子供たちの新しい可能性の一つとして、プログラミングが選ばれる未来を作っている」という使命感があり、やりがいを感じています。
ぜひご興味ある方は一度「QUREO」を体験してみてください！