今回はTeachableコースデザインをテンプレからカスタマイズする方法についてやっていきます。
今回お届けするノウハウはこちら
Step1. コースデザインをカスタマイズする
コースのデザインは受講者側からどう見えるかという、このような画面のことですね。これをカスタマイズすることができるんですよね。ではやっていきましょう。
コースの中に入って左側のDesign Templatesに行ってください。そうするとActive Templateに、すでにアクティブになっているテンプレートが上部に表示されます。テンプレートは3つ用意してくれていて、左からSimple・Colossal・Teachable Classicとなっています。Teachable Classicは、今までTeachableがずっと使ってきた古いフォーマットですね。ではほかはどのような感じか見ていきましょう。「Activate」と「Preview」があり、「Preview」を押すとアクティベートする前にどのようになるのかを見ることができます。
#1. Simple
まずはSimpleです。こんな感じです。レクチャーをどこまで見ていたかはこのボタンでわかりますね。あとはコースのバナーがあって、タイトルがあって、インストラクターの情報は2ページ目にあるといった感じです。Progress、進捗状況がここに何パーセントと出ていて、スマホだとこのようになります。これも見やすくていいと思います。
#2. Colossal
次はColossalです。プレビューを見てみましょう。これも大きくタイトルが出るようになっています。一番特徴的なものは、この真ん中にある今まで見ていたレクチャーを再開するレジューム機能ですね。今までのレクチャーを再開するときに、ここを見ればどこまでやっていたかが一目瞭然なので、すごく分かりやすいですよね。早速僕もほかのコースをこれに変えていこうかなと思っているところです。
見てください。レクチャーの並びも結構分かりやすいですし、オーサー、インストラクターの情報もここに出てくるので、ページを切り替える必要がないですよね。あとは進捗状況も0%とここに出てきています。
ちなみにスマホだとこんな感じです。スマホもすごく分かりやすいですね。特に良いのは、ここでレクチャーを開始できることです。レクチャー数が増えてくると、ずらずらっと並んでページが長くなり、どこまで行ったか見にくくなると思います。しかし、最上部にワンクリックのボタンがくっついてるとすぐに学習を再開できます。そこが僕が気に入った点ですね。
Step2. フォント、カラー、テキストなどをカスタマイズする方法
あとはこの辺にいろいろと書いていて、ほかにもフォント、カラー、テキストなどをカスタマイズしたかったらここでカスタマイズしてねとあるので、その通りに行ってみましょう。
左側のSiteからThemeに行きます。まずはFont Familyです。フォントの種類が表示されています。英字フォントが多いのであまり変わらないかなと思いますが、もし気になったらいろいろと試してみてください。ちなみに変えると右側のプレビューが変わるので、もしリセットしたければ「Reset」、セーブしたければ「Save」を押してあげてください。今回はリセットしておきます。
あとはColor Paletteです。ここにナビゲーションバーやナビゲーションバーのリンクなどいろいろなものがありますね。Preset 1・2・3・4をクリックしてあげると、そういったものの色が丸ごと変更できるようになっています。やってみましょう。こういう感じです。クリックしてもセーブされないので、このまま戻ってもらえれば元のままです。
Step3. Teachableの英語表記を日本語に翻訳する方法
最後はSiteからCustom Textに行きます。これは英語を日本語などに翻訳するときに使うページなのですが、この右側の英語はたくさんあるので、翻訳するのはすごく大変だと思います。僕たちは「Teachable日本語化」という商品を出しているので、そういったものを使っていただければいいのですが、気になった表現があるときはここで変更して「Save」を押せばOKです。ということでこのようにしてカスタマイズをやってみてください。今回は以上です。
