見出し画像

Progateのレッスンの作り方と品質を高める3つのポイント

株式会社Progateのまえしまです。

もっとレッスン制作やチームのことを知ってもらうために、教材制作チーム記事特集としてメンバーが続々と記事を発信していきます!その第一弾がこちらの記事になります!

以前紹介したProgateのレッスンの作り方がここ最近で改良されたので、今回改めて紹介したいと思います。

どうやってレッスンを制作しているの?

教材制作チームは現在7名います。このうち2〜3名が中心となってレッスンを作っていきます。今回はHTML&CSS Flexbox編の教材を例に紹介したいと思います。

Progateでは以下の制作フローに沿ってレッスンを作っています。

1. インプット
2. キックオフ・学習項目決め
3. モック制作
4. レッスン制作環境に落とし込み
5. リリース

1. インプットを行う

まずは本や公式チュートリアルなどを使って、その言語について勉強します。正しい知識を伝えるためなのはもちろん、この言語ではどのようなことができるのかを考えながら勉強します。
また実際に自分が勉強していく中で、つまずいたポイントはユーザーの方もつまずく可能性が高いので、レッスン制作をする時に重点的に教えるようにしようとメモをしておきます。

2. キックオフの実施&学習項目決め

この工程では、チームメンバーでこれから制作するレッスンを誰にどんな目的でどのような内容を入れ込むのかを決めていきます。

・なぜ作るのか?
・誰に向けて作るのか?
・どのように作るのか?
・どんな学習項目を教えるのか?

キックオフ実施時に使用する資料のテンプレート

スクリーンショット 2019-09-11 14.01.20

3. モック制作

学習項目を決めたら、Figmaというツールを使って、学習項目を本番に近いスライドとして落とし込んでみます。どのような構成でどのような文章、画像を使って教えるのかを詰めていきます。
特に自然な流れで学ぶことができるのか直感でスライドの内容が理解できるかなど初心者の方々の気持ちになって作り込みます。

Figmaで作成しているモック

画像2

4. レッスン制作環境に落とし込み

いよいよ最後の工程です。作成したモックの内容をサービスとして公開するために、レッスン制作環境に落とし込んでいきます。また演習の問題文や、ソースコードを書いて実行した時のエラーチェックなどを入れていきます。

レッスン制作環境でのFlexboxのスライド

画像3

レッスン制作環境でのFlexboxの演習画面

画像4

↑説明文や演習の問題、ソースコードなどを追加・修正することができる。

ここまで全て完成したら、最後に実際に初心者の方々の目線になって解いていきます。わかりにくい箇所や誤字等がないかを確認します。

5. リリース

ここまでの工程で良いレッスンが作成できた時点でリリースを行います。

良質なレッスンを作るための3つのポイント

Progateではわかりやすく、シンプルにプログラミングを学習できるように良質なレッスンを作ることにとにかく力を入れています!世界中のプログラミング初心者の方々にプログラミングの楽しさを伝え、そして自走できるように導くためにレッスン制作に力を入れています。(重要なことなので2回言いました!)
そこでProgateで品質を高めるためにしている3つのポイントを大公開します!

1. 何度もレビューを行う
企画フェーズ、実働フェーズそれぞれの制作フローの中で、こまめにレビューをします。
ちょっとでも気になったところは直していきます。

Flexbox編のレビューコメントの一部

画像5

↑レビューで気づいたことや感じたこと、直した方が良いものをコメントしている。

2.Progateメンバー一丸となって行う
一緒にレッスンを作っているメンバーはもちろん、他チームのメンバーやエンジニアチーム、マネージャーメンバーも含めて、Progateのみんなでレビューを行います。実際の現場で働くエンジニアとしての目線や、過去のレッスン制作経験者の目線などいろんな角度から見て、納得のいくレッスンを作っています。

3.納期より品質を優先する
Progateにおいてレッスン数がたくさんあることはとても重要なことですが、それ以上にリリースするレッスンの質を重視しています。
チーム内でリリースまで1レッスンあたり約2ヶ月間のスケジュールを設けており、それに向けたタスク管理をしています。ただ『納期に間に合うようにリリースする』というより、『良質なレッスンを完成させた』ときにリリースするようにしています。

Progateでのレッスン制作方法は伝わりましたでしょうか?
まだまだ伝えきれないところもありますが、ひとまずこんな感じで終わります!
これからもっともっとコンテンツチームの情報を発信していきますので、
ご興味ある方はぜひお楽しみにしていてください。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

9

Hiroki Maeshima

株式会社Progateのコンテンツチームに所属。レッスンの制作と時々エンジニアリング。twitter:@maeshiiii

Team Progate

Progateで働くメンバーのあれこれ。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。