Progate教材のつくりかた(企画編)

こんにちは。
Progateコンテンツチームの鶴崎です。
今回は、Progateの教材、通称:コンテンツ の企画についてご紹介したいと思います。

さて、突然ですが、三択クイズです。
Progateのコンテンツって誰が作っていると思いますか?

にんじゃわんこが一人で作っている
コンテンツ制作のためのプロ集団が作っている
アウトソーシングしている

正解は…
テレテレテレテレテレテレテレ...

2 です!

コンテンツ作りをアウトソーシングしていると思っていた方、少なからずいらっしゃたのではないでしょうか?
実は、Progateのコンテンツは、基本的にすべて社内で企画、実装、リリースしており、最初から最後まで社内で完結しています。

ちなみに、にんじゃわんこは制作には携わっていないものの、皆さまご存知、Progateのメインキャラクターです。皆さんと一緒にプログラミングを勉強しています。


さて、今回は、Progateのメンバーがどのように企画を作っているのか、どのくらいの期間を要するのか、についてお話したいと思います。

[もくじ]
- Progateのコンテンツ制作の手順は2つ
- レッスン企画の過程をご紹介
- 意外と泥臭い
- 最後に

Progateのコンテンツ制作の手順は2つ

まず、コンテンツの企画って何?という方のために、Progateのコンテンツ制作過程について簡単にご説明します。

Progateのコンテンツ制作過程は、大きく分けて以下の2つのフェーズに分けられます。

・企画 - どのようなコンテンツを作るかを決めるフェーズ
・実働 - 企画を元にコンテンツを作り上げていくフェーズ

企画と実働どちらが大変なの?という話ですが、どちらも同じくらい大変です。
企画は、コンテンツ全体の質に関わりますし、企画が微妙なまま実働に入ると、実働に入ってから「このコンテンツ、正直微妙だね」と、企画段階から振り出しに戻る、なんてことになります。
実働は、コンテンツの細部の細部までこだわり抜いて作るので、誤字脱字は論外、表現方法や演習問題の判定の一つ一つ、ミスのないように作っていきます。

レッスン企画の過程をご紹介

話は逸れましたが、企画について詳しく見ていきましょう
企画でやることは大きく分けて以下の5点です。

・レッスンで教える単元の勉強
・レッスンの方針決め、どのような単元を教えるかを決定
・レッスンの流れ作成
・ストーリー作成/演習問題作成
・スライド文章制作/画像制作

今回は、僕がProgateにジョインしてから1番最初に担当したコンテンツ、
「JavaScript ES6 学習Ⅴ, 学習Ⅵ」
を元に、Progateのレッスン企画についてご紹介したいと思います。
内容としてはProgate内でもかなり軽い部類のレッスンです。

ちなみにこの2つのレッスン企画は、それぞれ8~10営業日程度かかっています。

それでは、上から順に見ていきましょう!


レッスンで教える単元の勉強

当然ですが、先生が勉強を教えるには、先生自身がその単元を理解していないと教えることができません。
ということで、コンテンツを企画する前にはまずその単元について勉強します
基本的には業務中に学習するのですが、土日を使ってプライベートで学ぶメンバーも多いです。
プライベートの時間を使って学ぶことは全く強制ではなく、趣味も兼ねて、次担当する言語を勉強しておくか~みたいな人が多いですね。

ちなみに弊社では、Udemyの動画教材を使って学ぶ人が多いです!

レッスンの方針決め、どのような単元を教えるかを決定

ここからが、本格的なレッスン制作です!

まず最初に、レッスンを作るメンバーでキックオフミーティング、「kickoff」という会議を行います。
ここでは、以下画像のように、届けたい人やどういうことを教えるかを話し合って確認し、共通認識を深めます。


レッスンの流れ作成

まず、大まかな目次を作ります。

このレッスンでは何をどの順番で教えるか、を大まかに掴むためですね!


ストーリー作成/演習問題作成

大まかな演習の構成ができたところで、ストーリーを作ります。
にんじゃわんこひつじ仙人の会話ですね。


このストーリを作っていて、ぎこちない会話になったり、全体の流れ的におかしい会話になると、教える順番を変えたり、そもそも教えるべきじゃないかも、みたいな議論になります。
Progateのレッスンのテンポ感の良さは、この段階で決まります。

以下が、実際のストーリー制作ドキュメントです!
最初はこのようにストーリーを下書きして、修正していきます。
(スライド案や演習も含まれていますがそこはご愛嬌ということで...。
犬: にんじゃわんこ, 羊: ひつじ仙人 です笑)


スライド文章/画像制作

最後に、スライドの原案を作成します。
以下のように、Google Slidesを使って作成しています。

スライド画像は、この頃までホワイトボードに下書きを書いて、それを写真で撮るというアナログな手法を取っていたのですが、最近はfigmaを使ってデジタルで完結しようという流れが来ています。


以下の画像が、上の下書きからできた本物のスライドですね。
完成度が全然違う(笑)

以下から実際のコンテンツを確認していただけます。(有料会員のみですが...!)
https://prog-8.com/es6/study/6/2#/5

意外と泥臭い

しかも、妥協は一切なく、チームメンバーの誰かが微妙だな、と思ったらすぐに作り直します。

ES6学習Ⅴ, Ⅵでは、上記で紹介した作業を7回繰り返しました。


スライド画像も4回作り直してますね。

どれだけ時間がかかろうが、ユーザーさんの目線で考え抜いて、最後まで妥協をしないというのがProgateの1番の強みです。

最後に

ここまで読んで頂いてありがとうございました。

思っていたより地道な泥臭い作業だな、と思った方が多いのではないでしょうか。
そうなんです。地道で泥臭いんです!!

と、特にオチはないのですが、何はともあれ、
これからもProgateをよろしくお願いします!

株式会社Progate's job postings
2 Likes
2 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more