プログラミング学習サイトCodecademyに見る、ユーザーのやる気を持続させるゲーミフィケーション

今回は、注目を集めるプログラミング学習サイト「Codecademy」を題材に、
このサービスがユーザーのやる気を引き出すためにどのような工夫をしているのか、
見ていきたいと思います。

codecademy_logo

【Codecademyとは】Web上でJavascriptなどのプログラミング言語を学習できる
プログラミング学習サービス。2012年6月からは一部日本語での提供も開始されている。
Javascriptのほか、HTML/CSS、Python、Ruby、jQueryなども学ぶことができる。

Codecademy

 

1.学習を始める ~オンボーディング~

それでは早速サイトにアクセスして学習を初めてみましょう!
現在トップページと初めのコースは日本語化されているようですね。

サイトにアクセスすると以下のような画面になります。

cdc01

いきなり何やら書き込める窓があるのがわかります。
左側の「Get Started」を押してみると、

cdc02

右側の窓にフォーカスが移ります。
まずはここからスタートするようですね。

窓には、名前を””で囲んで入力してくださいという指示が書かれています。
その通り入力すると、

cdc03

このように反応が返ってきて、次の指示が提示されます。

その後も、Javascriptの書き方についてのごく簡単な問題が出題され
(たとえば名前の文字数をカウントする方法や、簡単な計算など)、
ユーザーは次々にそれを解いていくことになります。

間違った場合は、どこが間違っているのか教えてくれます。

 

そして、いくつかの指示をクリアすると、

cdc04

レッスン完了の言葉とともに、次の画面への誘導が現れました。

cdc05

クリックするとこのように、「学習状況を保存したい場合はアカウントを作成してください」という
ポップアップが出現し、会員登録を促されます。

登録をしなくてもコース自体は受講できるようですが、本格的に学習したい場合は
登録したほうがよさそうです。これで、学習のための準備は一通り整いました。

 

2.フィードバックと進行度の可視化

登録後も、はじめのセクションと同じくプログラミングの説明とそれに関連した
練習問題が表示され、ユーザーはそれを次々と解いていくという形式になっています。

はじめは1行のみのコードでしたが、ここからは複数行のコードも出てくるため、
表示は変わっています。また、説明文もより長くしっかりしたものになっていきます。

cdc06

このように学習を進めていくとバッジが獲得できることがあります。

cdc07

また、コースを完了するとポップアップでお祝いしてくれます。

 

今度はマイページに注目してみましょう。

cdc08

最初のコースをクリアした直後のマイページはこのようになっています。

中央部には現在受講しているコースの進行状況が表示され、
あとどのくらいでコースを完了できるのかが一目で分かるようになっています。

また、自分が完了したコース一覧とまだ完了していないコース一覧も
見ることができるようになっています。

右側上部には、獲得したポイントと、どのくらい連続で学習を行ったのかの記録が残っています。
ポイントはトータルのほかに、今日獲得したポイント数や1日の最高獲得ポイント数が
記録されています。

初めの段階では問題一つをクリアするごとに1ポイント、という対応関係があるようです。

 

その下には獲得したバッジの履歴が表示されています。

cdc09

このようにバッジの一覧を見ることも可能です。

 

そのほか、Codecademyにはグループ機能もあり、
グループ内でのポイントランキング(リーダーボード)やグループ内掲示板、
他者の活動のフィードなどの機能が提供されています。

 

3.Codecademyのゲーム要素

Codecademyは非常に典型的なゲーム要素を活用しています。
以下、特徴的なものについてみてみましょう。

 

・オンボーディング

Codecademyで最も特徴的なのがこの部分です。
オンボーディングとは、最初に訪れたユーザーにスムーズにサービスを使い始めてもらう
手法を指します。

Codecademyは冒頭で見たように「まず体験してもらう」という形で
新規ユーザーを迎えています

そして最初のレッスンでは、プログラミング言語や変数について説明するのではなく、
ごく簡単なものでも実際に書いて、課題をクリアするということを重視しています。

初めてプログラミングを学ぶためにサイトを訪れたユーザーに対して、
Codecademyの使い方を紹介するだけでなく、
「専門的なことがわからなくても書き始めることができる」というメッセージを発することで、
ユーザーをやる気にさせるという工夫が見られます。

初心者が躓きがちな環境設定が必要ないというのも参加のハードルを下げていますね。

 

また、以前のバージョンでは、この冒頭のレッスンでもバッジが貰え、
そのまま
JavaScriptのコースが続くなど、オンボーディングの観点では
とても優れた仕組みが提供されていました。(残念ながら現在は変わってしまったようです)

 

・ポイントとバッジ

オンボーディングがスタート時の工夫だとすれば、
以降の2つは継続のための工夫だということができます。

Codecademyでは一つのレッスンがいくつかの課題に分けられており、
一つの課題を達成するごとにポイントを手に入れることができます。
また、ポイントとは別に、レッスンをクリアや、一日でいくつ以上の課題をこなすといった
条件を達成するとバッジが獲得できます。

ただ単に課題をこなすだけでは単調になってしまいますが、
一つ課題を達成するごとにポイントが増えたり、要所要所でバッジという形で褒められたり
することで、モチベーションが維持しやすくなっている
のではないでしょうか。

 

・達成度の可視化

最後に紹介する特徴は、マイページでコースの進行状況が見られるということです。

プログラミングの学習は、「あとどのくらいやればいいか?」というゴールが見えにくく、
モチベーションが上がらない一つの要因になっています。
Codecademyでは、進行状況が可視化されているため、今自分がどの位置にいて、
あとどれだけ頑張ればコースを完了できるかが見えるようになっています。

自分が今までこれだけやったんだ、ということが実感でき、
あとこれだけ頑張ろう、というモチベーションにつながりやすくなる
ということが考えられます。

 

以上の3つのゲーム要素によって、Codeccademyはユーザーに対して
はじめやすく、やめにくい」学習サービスを提供することが可能になっています。

今や優良な学習サービスは数多くありますが、
ユーザーに支持されるにはコンテンツの良さだけでなく、
いかに学習を支援するかということが重要になってくるかもしれませんね。