こんにちは、ノーコードスクールのしんじです
今回はノーコードでUdemyのようなオンラインスクールを
立ち上げる方法について学んでいきます
時間割はこのようになっています
いつものように動画の概要欄に各時間割へのリンクを張っています
それではやっていきましょう

①オンラインスクールについて

1時間目、オンラインスクールについて
オンラインスクールというのは、何かの講義や授業などを
ネット上で動画や教材などを配布して
会員が有料もしくは無料で視聴できるようなサービスのことですね
有名なサービスだとこのUdemyがあります
さて自分が講師として話している動画を
ネット上で有料無料で配布したいという時
こういうUdemyやYouTubeを使う
というのが候補に挙がってきますが
一連の講義動画をパッケージにして
自社ブランドでユーザーに届けたい場合は
自前のオンラインスクールを立ち上げることになると思います
ノーコードツール、Bubbleやウェブフローなどで
オンラインスクールシステムを構築するのもいいんですが
オンラインスクールに特化したツールもあるので
今回はそれらについてお話します
Zoomなどを使ってリアルタイムに行うレッスン形式のものではなく
あくまで録画済みの動画を配布する形式の
オンラインスクールだということにご注意ください
代表的なものはこの3つになりますまず1つめのpodiaについては
こういうサイトのサービスです
かなり強力なオンラインスクール作成ツールで
各種講義をコース形式で配布できるのに加えて
メンバーシップサイトやデジタルファイルの販売もできるんですが
恐らく日本語対応が出来ないと思います
次にteachableというツールがあります
各種講義をコース形式で無料有料で配布できます
サイトオーナー用の管理ページは英語ですが
生徒向けのページは完全に日本語化することができます
次にthinkfic というツールがあります
teachableに似たツールで
こちらも生徒向けのページは日本語にできます
teachableとthinkficのどちらがいいのか
あまり調べてないんですが
2つのツールを比較した英語の記事が検索したらたくさん出てくるので
そちらをご覧頂ければと思います
今回はこのteachableを使ってみます
teachableを使ってUdemyのようなサイトをつくってみましょう

②teachaleでアカウントを作る

2時間目、teachableでアカウントを作る
ではこのteachableでアカウントを作っていきます
トップページからメールアドレスを入力して進めます
メールアドレスを入力した後フルネームを入力します
ここはスクール名ではなく自分の名前を入力してください
パスワード等を設定して
Get Startedをクリック
新しいスクール名を入力しろと出るので
ここではノーコードスクールと入力
その後アンケートのようなものが表示されるので
これは適当に入力したらOKです
最後一応Japanを入力しておきます
するとこういう管理画面に入りました
左上のスクール名をクリックすると
立ち上げたスクールのページを確認できます
これはログインした状態になっています
何もコンテンツがないのでこんな感じですが
とりあえずアカウントが出来上がりました
ダッシュボードに戻るとオンラインスクール開設に向けて
これらのステップをコンプリートしましょうと表示が出ています
一つ目はteachableが提供するウェビナーの案内ですが
これは無視してOKです
それ以外のステップについてこれから見ていきましょう
ちなみにフリープランで作っているので
最大10名の生徒までしか実行できません
アップグレードを押すとこういうプラン案内ページに行くので
お好みのプランを選択したらいいと思います

③コースにカリキュラムを登録する

3時間目、コースにカリキュラムを登録する
オンラインスクール内にコースをつくってみましょう
コースというのは僕のノーコードスクールという
YouTubeチャンネルを参考にすると
こういう再生リストのようなものです
この構成を参考にteachable版にコンバートしてみましょう
Create a courseを押して
ここにBubbleの使い方と入れましてUber風のと入力します
select authorはこのコースの先生を指定できるようです
取り急ぎデフォルトのままにしておきます
Create Courseを押します
するとカリキュラム設定ページに移動します
カリキュラムはセクションとレクチャーに分かれています
レクチャーが講義そのもの
セクションがそのまとめといった感じです
レクチャーを追加するには下のAdd new lecture
セクションを追加するには右上のNew Sectionから行います
とりあえずファーストセクションをここからというようにしておきます
そしてファーストレクチャーをこうします
僕のYouTubeのノーコードスクールチャンネルは
1セクションで一つの動画という構成になっていますが
ここでは時間割ごとにレクチャーを分ける構成にしています
なので二つ目にAdd new lectureで、とします
セクションをもう一つ加えて
とし、この中にレクチャーをこうしておきます
一旦ここまでにしておいて各レクチャーに教材をアップロードしてみましょう
レクチャー名をクリックするとレクチャー設定画面に移ります
左のAdd Textを押してレクチャーの概要を記載します
という感じで入れておきましょう
その後Add Fileで動画をアップロードします
僕のYouTube動画は非常にファイルサイズが重いので
今回は仮で用意したファイルをアップロードしてみます
他にも色々追加することができまして
Add Quizでこういったクイズを作成することができます
こういう感じですね。他にもコードを入力したり
pdf等のファイルを添付ができます
そして下のコメントオンにすると生徒からの意見も受け付けることができます
この状態でプレビューを押すと
このレクチャーの公開ページをプレビューすることができます
現在こんな感じです
このレクチャーをこのまま公開してみましょう。Publishを押します
2時間目も同様に公開してみます
カリキュラム一覧ページに戻りレクチャー名を押して
ここに教材をアップロードするという感じですね
Publish 戻ります
Part2の1時間目も同様に
一旦これで一通りBubbleの使い方コースの
カリキュラム設定が完了したとしておきます
もう一つついでにコースを追加してみます
コースを新たに追加するには左下のCoursesから
このように表示されるので+ボタンを押します
ここではこのようにしておき
このカリキュラムはもうこのまま公開しておきましょうか
というわけでコースの作成について学びました

④コースの価格設定

4時間目、コースの価格を設定する次に価格設定です
コースの先ほどのBubbleの使い方の方に戻り
Pricingページに行きます
そしてAdd a pricing plan
複数の支払い形式から選択できます
Freeは無料、One Time Purchaseは1回の支払い
Subscriptionは月額課金のサブスクリプションですね
Payment Planは多分期間限定のプランとかですね
今回はフリープランにしておきます
そしてAdd Pricing Planを押すとこのように表示されます
もう一つ有料プランも入れておきましょう
One Time Purchaseで
入力してこれでプランの準備ができました

⑤コースのページ調整

5時間目、コースのページを調整する
その後Pagesからコース関連のページの編集を行います
デフォルトでは3つのページがあります。一つずつ見ていきましょう
一つ目はSALESページこれはコースのトップページです
Editを押してコースのトップページを編集することができます
このようなビジュアルエディターが立ち上がりますのでまずはバナー欄から
バナーというのはここですね、バナーの背景画像を
Upload Imageをクリックして
バナーの背景画像はウェブイメージから取得しています
ここにbackgroundと入力して
rainbow gradientを選択します
するとこのように選択したイメージが反映されました
ちょっと背景が強すぎるのでデザインタブからImage Opacity
これは画像の透明度ですね
この透明度0.5ぐらいにしておきます
Contentタブに戻り、Image Alt Textは
画像の代替テキストなんですが
お好みで入力してもらってHeading 見出しにはBubbleを学ぶ
Subheading Textには、と記載します
ボタンには
Go to Check outページを指定しておき
pricing plan、先ほど設定したプランですね
をフリーにしておきましょう。Button Textには受講すると
このボタンの色に関してはこのビジュアルエディターではなく
このEdit site-wide button colorから
サイト全体のテーマを設定で変更可能です
こういうページに移動するので
こちらにしておきます
そしてSaveを押します
先ほどのビジュアルエディターに戻りページを更新してみます
いうとボタンの色が変わりました後ヘッダーの色も変わりました
続けてバナーの下のテキストを編集します
ここにはここをクリックしてBubbleとはと記載し
これをHeading３とかにしておいて真ん中寄せにしておくと。そして
とでも入れておきましょう
その下のコースカリキュラムはカリキュラムとして太字にしておきましょう
カリキュラムの下は好きなように編集できます
とりあえずコース紹介代わりに僕の写真を
実施をしておきます
その下は無言で設定してしまいましたがプラン選択ですね
プラン選択にしておき
作ったプランをここに表示させておきます。ボタンテキストは、ですね
その下はもう必要ないのでDelete Blockで消しておきます
ちなみにその他いくつかのブロックも追加できます
ここからですね。あとは右上の設定から
右上のこれですね、右上の設定からその他の設定や
ページのSEO的なタイトルとdescriptionも設定可能です
こうやってヘッダーを消すこともできます。これでページの調整完了しました
Updateを押して戻ります。次にCHECKOUTページ
まずはTestimonialsoptionというのがあります
これは受講生の声みたいな感じです。右側にサンプルが表示されていますね
一つ入力してみます。ここにしておき
Upload Photoでweb Images
何か写真を一つ設定しておき、としておきましょう
この状態でSaveを押すと右側のサンプルにプレビューが表示されます
こんな感じです
次のBullet Pointsoptional
optionalというのは必須ではないということなんですけれども
これは先ほどはプレビューでいうとちょっと消えちゃってるんですが
このコースの特徴というかこのコースを選んだら
こういう事があるよというメリット並べたりするやつですね
Heading2としておきポイントとして、などとしておきます
そしてSaveを押します。するとこのように表示されました
その下はCourse Guarantee、保証のことですね
30日以内なら返金可能とか。一つ画像を選んで設定しておきます
そしてこのようになりました。これはユーザーがこのコースを購入する時
チェックアウトする時のページに表示されるユーザーの声という風になります
最後にPublishを押しておきます
こちら一応プレビューで確認することができるのですが
チェックアウトページの確認する方法でちょっと難しくはないんですが
面倒なので後回しにしておきます
そしてPagesに戻り最後にTHANK YOUページ
これはユーザーが、生徒が受講するを押した時に表示するページです
ここには
という感じで
といった感じにしておきましょう。そしてボタンに関してはこうしていきます
これで一通りコース関連のページの設定が完了しました

⑥コースのその他の設定

6時間目、コースのその他の設定
その後インフォメーションからこちらコースのこのBubbleの使い方
コース内の設定ページですね
インフォメーションページから
まずBrandingでサムネイル、web版サムネイルを追加します
このようにアップロードされました
web版とios版があるので、両方をきちんと設定した方がいいのですが
今回web版のみで進めていきます
ちなみにこのサムネイルPart1用のサムネイルになっているんですが
本当はコース全体を表す画像がいいです
一応Publish設定からPublishしておきましょう
その他Dripというのは
生徒が受講開始して数日後に公開するレクチャーなどが
設定できるページのようです
teacherbleのベーシックプランから利用できます
Bundle Contentsは
複数のコースを束ねて販売することができる機能です
Certificatesはコースを完了した生徒に
修了書などを発行することができる機能だと思います
こちらもフリープランだと使えないので
利用したい方は有料プランを使ってください
一応グライドの方にもこちらのコース設定から
グライドの使い方の方も
Publishコースをしておき
サムネイルを設定しておきます

⑦サイト設定

7時間目、サイト設定。左のナビゲーションのSiteメニューから
サイト全体の見た目周りを調整できます
右上のPreviewから現状のサイトを確認できます
まずサイトログをアップロードしてみましょう
そしてSaveを押します
プレビューを更新するとこのようにロゴが表示されました
ちょっとロゴ周りの余白が微妙ではあるんですが、注意すべき点として
スマホサイズで見た時、ロゴがそのままの大きさで表示されるので
もし横中の画像を使ったりしていると
このメニューが消えちゃったりするのでご注意ください
次にHomepage Backgroundですがこれは
この背景のことではなく例えば
こちらですね。なんて言いますか
こちらのページは僕の管理者アカウントでログインしている状態なので
ページを見ることができるのですが
このURLにログインしてないユーザーがアクセスすると
このようなLaunching Soonというページが表示されます
この時に背景に表示されているバックグラウンド画像を
ここから設定できるわけです。
このLaunching Soonページ以外にも
似たような構成のページで使われることになります
このFaviconというのはブラウザのタブの
この部分のアイコンのことです
今回はスキップします
次にDomains、こちら自分のサイトのドメインですね
フリープランを僕は使っているので
teacherbleのドメインのサブドメインを使うことになるんですが
有料プランを使っていれば独自ドメインを設定できます
一応このconfirmを押して好きなサブドメインに使うことできるんですが
このまま進みます。次ナビゲーション設定
こちらはいろんなページ遷移系の設定をすることができます
まずHomepage Settingsからはログアウトした時のページ
ログインした時のページを指定できます
現在はログアウトしている状態だとホームページ、ログインしている状態だと
コース一覧ページが指定されています
次にNavigation Barはこのサイト上部の
ここに表示するリンク設定です
特殊なのがこのAdminというのがありまして
これは僕のアカウントが管理者アカウントなので表示されているだけなので
一般ユーザーには表示されないと思います
次にBiosというのはコースの作者の画像や各プロフィールを設定できます
次にPagesというのはページを追加したり編集したりするページです
コース関連のページは自動で追加されるので
その他のページを設定したいときに編集するところです
右上から新たにページを追加できます
編集ボタンを押すとコースの時と同じような
ビジュアルエディターが立ち上がります
これ先ほど見ていたトップページですね。ちょっと編集します
こういう感じでコース編集の時と同じように設定できるのでお試しください
最後にPublishを押します
他、続けてサイト設定のCommentsはサイト全体のコメント管理
Custom Textは次の時間で説明します
Code Snippetsはサイト全体のCSS設定ができるようです
Power Editorは有料プランで使えるようになり
細かくサイトをカスタマイズしたい時に使う設定です

⑧日本語化

8時間目、日本語化
立ち上げたオンラインスクールはある程度
ビジュアルエディターから日本語化はしましたが
一部このサイト設定のCustom Textから
変更しないといけないものがあります
例えばこういったところですね
沢山の設定があるので、このカレントの部分にこのように
そしてSaveを押すと該当のテキストが日本語化されます
こんな感じですね

⑨オンラインスクールを公開する

９時間目、オンラインスクールを公開する
ダッシュボードのLauanch your schoolから
サイトを公開します
プラン選択がありますが気にせず、下の
Launch school with the Free plan
を押すと公開完了です
先ほどもお伝えしましたが、フリープランだと
10人までしか生徒が受講できないのでご注意ください
サイトにアクセスしてみましょう
先ほどのログインしてないページ
この状態で更新を押すとサイトが公開されています
ユーザ登録を押すとユーザ登録ページに移動します
ユーザー登録をすると生徒としてログインがすることができるわけですね
これはすでにログインしている状態ね
ということで自分のアカウントを使ってMy Coursesを押すと
このように先ほど追加したコースが表示されています
色々と英語のままになっている所がありますが
これはさっきの時間割で学んだ日本語化を行うと日本語にできます
もう少し動きを見てみると、このようにBubbleを学ぶページができまして
ベーシックブランで受講するを押すとチェックアウトページが出て
ユーザーの声、受講生の声が表示され
ここにクレジットカードを入力するとコースを購入できるわけです
このBubbleを学ぶコースはフリープランがあるので
フリープランで受講してみます
するとthank youページがでました
thank youページが日本語化さっきしたはずなんですが
英語のままになっています
PublishかSaveかを押し忘れたんじゃないかなと思います
Go toカリキュラムに行き実際のレクチャーページはこんな感じです
先ほども申し上げましたが英語がたくさんまだ残ってますが
全て日本語化することが出来ます
これでStartを押すとカリキュラムが自動で動画が始まっていますが
始まりまして色々と生徒がこのレクチャーは終わったなと思ったら生徒の方で
Complete and continue
これも日本語化可能です。これを押すと
進捗がこのように進んでいくわけです
これが2時間目ですね。同様にこれを押すと進捗が進んでいきます
こんな感じでteaturbleを使うと
授業をオンラインで受講することができます

⑩講師を追加する

10時間目、講師を追加する
ダッシュボードのUSERS設定のAuthorsから
コースを作成することができる講師を設定できるようです
無料プランだと設定できないので今回ありませんが
こちらのヘルプページを見るとオーサーごとにコミッション
手数料のことですね、これを設定できまして
この講師が作ったコースが売れる毎にサイト管理者が手数料を取り
残りを講師にあげるといったこともできるみたいですね

エンディング

以上で今回の動画終わります
どうやってコースの売り上げを受け取るとか
コースの抱き合わせ販売方法とか
細かいところいろいろお話ししてないことがあるのですが
teacherbleの使い方でGoogle検索をすると
細かくまとめている方がいらっしゃいますので
そちらの記事も併せてご覧頂ければと思います
最後までご視聴いただきありがとうございました
よかったらチャンネル登録、高評価ボタンよろしくお願いします
それではまた次回お会いしましょう。ありがとうございました