Teachable

今回はTeachableで、1.0のページエディターを使いページブロックを編集する方法についてやっていきます。

Step1. ページエディター1.0とは

今はコースの中のPagesに入っています。EDITOR VERSIONにページエディターのバージョンが表示されています。各ページに1.0、2.0とありますが、古いスクールになればなるほど、1.0となっているのを目にすると思います。

チェックアウトページとサンキューページでは、1.0しかない場合は2.0のものを作ることができないんですよね。古いスクールだったら、チェックアウトページとサンキューページがもう1.0で固定されてしまっています。ある時を境に新しいスクールに登録したらすべて2.0になっているのですが、今回はレガシーの1.0のページエディターを使って編集していきます。

Step2. ページエディター1.0で編集する方法

まずは中を見てみましょう。「Edit」で中に入っていきますね。サンキューページなので、Purchase Confirmationという買ってくれてありがとうと表示するページや、Video Embed、Proceed to Courseというコースの受講に進むようなボタン、HTMLのボタンなどいろいろなものがすでにあります。

今回は「＋Insert new block」で挿入しながら見ていきましょう。

#1. Rich Text

まずは何があるかというと、Rich Textですね。これはリッチテキストを入れることができます。このような感じです。良いですよね。HTMLエディターというか、すごく汎用性のあるものですね。フォントを大きくしたり、いろいろな事ができます。HTML表示もできますね。

#2. Liquid/HTML

次は先ほどもありましたが、Liquid/HTMLですね。LiquidというのはTeachableの中で使っているショートコードのようなもので、Web ページがHTMLの言語で作られているならば、Teachableは半分がLiquidという言語で作られています。確かShopifyが作った言語で、それを使っていますね。

#3. Background Image

次はBackground Imageです。背景画像を入れます。テキストを入れることもできます。

#4. Video Embed

次はVideo Embedですね。埋め込みのビデオです。僕たちはここにアップセルのビデオセールスレターを入れて、そこでさらにサンキューページでアップセルするといったことをしています。Headingでは見出し、Descriptionでは説明文を入れることができます。

Step3. ページエディター1.0で編集できるその他のブロック（Other Blocks）

あとはほかにもこんなにたくさんあるんですよね。ひとつひとつ見てみましょうか。

#1. Course Hero Header

まずはCourse Hero Headerですね。ここにコース名が出ているのですが、これは画像になっています。画像をリプレイスしてあげると、その画像の上にこのテキストが載ります。OVERLAYでは画像の暗さを設定できます。Resetで戻すこともできます。このような感じです。Customize Enroll Buttonで「参加する」と入れるとどう映るか見てみましょう。このようになります。ボタンの文字を変えることもできますね。

#2. Coupon Banner

まだ沢山あります。次はCoupon Bannerです。クーポンが適用されているときの何パーセント割引されますよという表示で、セールスページでよく使いますね。サンキューページではあまり使わなくてもいいかなという感じですね。

#3. Course Description

次はCourse Descriptionです。コースの説明ですね。

#4. Author Bio

Author Bioは講師の説明です。講師はコースごとに割り振られているじゃないですか。InformationのAuthorのところに割り当てられていますね。これが表示されます。そのため、直接は編集できません。Authorを切り替えてください。

#5. Course Curriculum

ほかにはどんなものがあるでしょうか。次はCourse Curriculumです。これもコースのカリキュラムがそのまま反映されて載っているものになります。

#6. Bundled Courses

次はBundled Coursesです。ほかのレクチャーでも解説していますが、Teachableでは1つのコースに対して、バンドルといっていくつもコースを寄せ集めてパッケージのようにできます。これは同じパッケージの中に含まれる別のコースを表示するときに有効です。今のテスト用のコースはバンドルされていないので、なにもありませんよと言われています。

#7. FAQ

次はFAQですね。よくある質問です。

#8. Course Page Closing Letter

次はCourse Page Closing Letterです。これはコースの一番下にコースのまとめを書くようなところですね。普通のリッチテキストエディタでもいいんじゃないかなと僕は思ってしまいました。

#9. Primary Enroll Button

次はPrimary Enroll Buttonです。これは参加するボタンですね。プライマリーとセカンダリーでなにが違うか見てみましょうか。

ちなみに右側のゴミ箱のマークからDelete blockでいらないブロックをデリートできるので、いらないやつを消していきましょう。

ではプレビューします。どのような感じかというと、これですね。プライマリーのエンロールボタンにはこのようにプライシングを選ぶボタンがついています。こちらのセカンダリーのエンロールボタンにはついていません。セカンダリーのほうをクリックするとプライマリーに飛ぶようになっています。

#10. Embed Form

次はEmbed Formです。Mailchimpなどランディングページのフォームがあるじゃないですか。お客さんに情報を入力してもらってMailchimpのリストに登録してもらうフォームですね。「GetResponse」「CampaignMonitor」といったほかのEメールプラットフォームがありますが、これはここにコードを入れてくださいとやるものですね

#11. Testimonial

次はTestimonialです。これも良いですよね。お客さんの声をここに書けます。たくさん配置するとリアル感が出て良いですよね。

#12. Features Courses

次はFeatures Coursesです。注目のコースを3つ並べることができますね。サンキューページで他のコースを紹介したいときに結構良いんじゃないかなと思います。

#13. Homepage Hero Header

次はHomepage Hero Headerです。このように背景の画像があって、ここにテキストを載せたものをヒーローヘッダーと言うのですが、それが簡単に作れます。

#14. Upsell Offer

次はUpsell Offerです。来ました。これです。僕たちは必ずアップセルのオファーを必ず出していますね。確かCourseを選ぶとPricing Planが選べるんですよね。デモのコースを選ぶとPricing Planが選べました。Couponでクーポン適用する、しないを選ぶこともできます。これは結構汎用性が高いですね。

#15.Purchase Confirmation

次はPurchase Confirmationですね。これは買ってくれてありがとうという表示ですね。

#16.Proceed to Course

次はProceed to Courseです。これはもともとあったものですね。すぐコースに入りましょうという表示ですね。

Step3. ソーシャルメディアのアイコンを消す方法

よく左側のソーシャルメディアのアイコンをあまり使わないのですが、これを消す方法はないですかと聞かれることがあります。実はCourse Descriptionを削除すると消えるんです。セーブしてプレビューします。消えましたね。ということでどうしても消えない消えないと思ったらCourse Descriptionを削除してください。今回は以上です。やってみてください。

やり方を動画で見る

Teachable（ティーチャブル）の使い方・操作方法の一覧ページに戻る

今回はTeachableで商品決済ページをカスタマイズする方法についてやっていきます。

Step1. PagesからCHECKOUTに入る

商品の決済ページはTeachable内ではチェックアウトページと呼ばれています。このように値段が書いていて、支払い情報や請求書住所を入力して商品を購入する画面のことですね。この部分をもう少しカスタマイズすることができるのでやってみましょう。

まずはコースのPagesの中に入ってください。「CHECKOUT」というものがあります。これが先ほどのチェックアウトページです。「Edit」から中に入ってみましょう。

Step2. Testimonials（お客さんの声）を設定する

そうするといろいろと入力項目がありますが、上から見ていきます。まずはTestimonialsoptionalです。Testimonialsはお客さんの声ですね。お客さんの言葉、そして名前を書いてあげることで、説得力も増しますのでやってみてください。入力していきましょうか。例えばTestimonials Headingに｢お客様の声｣と入れます。Testimonialsは画像をアップロードできます。120×120と書いてありますが、正方形だったらOKだと思いますのでアップロードして戻ってきます。

512×512の画像を入れました。これで大丈夫だと思います。Nameは｢山田太郎｣としましょう。｢最高でした。購入を勧めます｣と入れます。もう1つはNameを｢山田花子｣、｢ぜひ購入してみてください｣とメッセージを入れておきますね。

Step3. Bullet Points optional を設定する

次はBullet Points optionalですね。この部分のように、この商品でどんなものがもらえますよと箇条書きにしたものです。Bullet Points Headingに｢この商品で得られるもの｣と入れます。そしてBullet Point 1に｢8モジュールのキラーレクチャー｣、Bullet Point 2に｢20本のワークシート｣、Bullet Point 3に｢毎月配信のマンスリーコンテンツ｣と入れます。ここにはボーナスを入れてあげてもいいと思います。

「Save」を押します。このようになります。ひとつひとつセーブしていってあげてください。そうするとこのようにできます。

Step4. Course Guaranteeoptional を設定する

最後はCourse Guaranteeoptionalですね。例えば30日間返金保証ありますよといったことや、ほかのオファーがあればそれも投げてください。プリセットの画像がすごく綺麗なのでこういうのもいいですし、あとは自分でアップロードすることもできます。画像を作ってアップロードしてあげてもいいと思います。あとはここに、オファーの内容や商品の説明でもいいと思いますが、なにか気の利いた言葉を入れてあげるといいんじゃないかなと思います。

Step5. パブリッシュしてシークレットモードで確認する

これでパブリッシュしてみましょう。｢Publish｣を押すとパブリッシュ状態になるので、｢View Page｣でプレビューしますね。｢Copy course checkout page URL｣をコピーして新しいウィンドウに行ってください。ここに書いていますが、Google Chromeであればシークレットモードでペーストして、お客さんからどのように見えるかを確認してみましょう。右側がすごくカスタマイズされて、先ほどよりずっと良くなりましたね。ということで今回は以上です。やってみてください。

やり方を動画で見る

Teachable（ティーチャブル）の使い方・操作方法の一覧ページに戻る

今回はTeachableでスクールのページを管理する方法についてやっていきます。まずはSITEからPagesに行ってください。そうするとスクール上で用意しているいろいろなページが表示されます。ページには大きく分けて2つあります。School PagesとProduct Pagesです。

Step1. School Pagesを管理する

School Pagesはスクールに出すプライバシーポリシーや、「Terms of Use」は利用契約ですね、あとは特商法の表示などがあります。そういうページを作ると、特定の商品に限らずいろいろなところで使えると思います。Product Pagesはそれぞれのコースごとにセールスページなどのページをカスタマイズすることができます。

僕たちはいろいろなページを作っているので見てみましょうか。例えば特商法のページですね。特商法のページがはこうなっています。ページエディターが1.0という古いバージョンなのですが、ここにHTML形式で特商法関係のものが入っています。

ここではいろいろなオプションがあっていろいろなことができます。例えば、特商法ページは「PUBLISHED」で今公開の状態になっていますが、これを非公開にしたいという場合は右側の「…」から「Unpublish Page」を選んでください。「Copy URL Link」ではページのURLをコピー、「Rename Page Title」ではページタイトルを変更、「Rename Page URL」ではページのURLを変更することができます。あとは「Delete Page」ではいらなくなったページを削除、「Duplicate Page」ではページを複製することができます。

「＋Add New Page」で新しくページを作ることももちろん可能です。

School Pagesはどういうところに使うのか見てみましょう。これはスクールのプレビュー画面です。例えばフッターの利用規約をクリックするとこのようなページになります。こういうところで使えるページです。

Step2. Product Pagesを管理する

次はProduct Pagesに行きましょう。Product Pagesの場合は「Select Product」で、それぞれのプロダクトを選びます。今回はデモのプロダクトを選んでみましょう。コースのページからも同じ編集画面に入れますが、このPagesというところからは一括でいろいろな商品のページに飛ぶことができます。Sales Pages、Checkout Page、Thank You Pageと分かれていて、セールスページだけは複数作ることができ、最大25個まで作ることができます。

「セールスページ」に「Primary」と表示されていますね。この「Primary」はメインで使うページのことなのですが、右側の「…」から「Make Primary Page」を選んで置き換えることができます。あとのオプションはSchool Pagesと同じですね。このようにしてページを管理していくことになります。いろいろとオプションがあるのでやってみてください。

ちなみに古いスクールの場合はページエディターのバージョンが1.0になっていることがあります。比較的新しいスクール、そして新しく作ったコースは2.0です。この辺りは別の動画で解説しているので見てみてください。ということで今回は以上です。

やり方を動画で見る

Teachable（ティーチャブル）の使い方・操作方法の一覧ページに戻る

今回はTeachableでページの新規作成と編集についてやっていきます。どの部分の話をしているかというと、コースの中で新しくセールスページを作ってそれを編集していくようなプロセスのことですね。ブロックエディターがすごく便利で、簡単にセールスページができるようなUIになっているので見てみましょう。

Step1. Teachableでセールスページを新規作成する

では「＋Add New Sales Page」を押して新しくページを作ります。そうするとブロックエディターが開いて、すでにセールスページっぽさが出ているページが表示されます。このデフォルトのページもすごく良いのですが、ここにいろいろなエレメントを足していくことができるのでやっていきましょう。

Step2. セールスレターに使えるブロックの種類

左側に表示されてるのは今デフォルトで入っているものですね。Bannerなどいろいろとあるので、どのようなものがあるのか見ていきましょうか。ひとつずつ見ていくために「＋Add New Block」を押してください。そうするとどういう種類のブロックを入れるのか聞かれます。

#1. COURSES

まずはコース関係のブロックですね。クリックすると、コースの中身がどんなものかというカリキュラムを見ることができます。ここにはセクションの名前、レクチャーの名前、ビデオの時間、無料プレビューがあるかどうかといったものが入っています。

今はプレビューしているだけなのですが、もしこのブロックが良いなと思って本格的にこのページに追加したい場合は、ADDボタンを押してください。するとこのように追加されていきます。中身はいろいろといじることができますが、最初にどんなブロックがあるかだけ説明してしまいます。

次はBASICSとLAYOUTSに分かれています。順番に見ていきましょう。

#2. BASICS

まずはBASICSですね。BASICSがなにかというと、画像だけ、テキストだけ、ボタンだけというように単一の要素だけのブロックですね。

• Image：イメージですね。今はなにも入っていないので空っぽになっていますが、画像です。

• Text：見出しと中身ですね。あらかじめ余白がきちんと取られていて、デザインがそれっぽくなっているのはやはり凄いです。

• Buttonですね。シンプルですね。

• Video：タイトルと説明、そしてビデオ本編です。

• Custom HTML：分かりにくいと思うのですが、僕たちでいうとアンケートフォームをHTML形式で埋め込みたいというときに使います。ブロックエディター以外に自分でHTMLを使って装飾を追加したいという場合は入れてください。

• Email Leads Form：オプトインを取るものですね。

#3. LAYOUTS

ではLAYOUTSに行きましょう。LAYOUTSがなにかというと、画像とテキスト、バナー画像とボタン、という組み合わせのようにTeachable側が用意してくれたテンプレートのようなものがあって、綺麗にセールスページを見せるような要素を追加することができます。

• Image with Text：画像があってテキストがあって、これもすごく綺麗ですね。

• Banner：バナーの画像があって、ここにタイトル、説明文、そしてボタンまで入っていますね。ボタンに「Set a button action」とあるようにボタンのアクションも設定できるようになっています。

• Text with image Grid：グリッドというのはこのように3つに分かれているものですが、これもすごく綺麗ですよね。例えばこのコースで得られるものが3つありますと列挙することができます。これを3×3で9個並べても綺麗だと思いますし、どんなものが手に入るかを画像とテキストで綺麗に見せることもできると思います。

• Pricing：価格です。価格が複数ある場合は複数の価格から選択して登録するボタンを押してもらうことができます。

• Featured Products：この商品以外にもおすすめしたい商品を入れておくことができます。ではひとつひとつ見ていきましょう。

Step3. Teachableでセールスレターに追加したブロックを編集する

#1. COURSES – Course Curriculum

まずはCourse Curriculumですね。ADDボタンを押します。Heading Textに｢カリキュラム｣と入れてみましょう。Designのところはいろいろな要素で共通しているものです。

• COLORSのBackground Color、背景色を変えてみましょう。このように変わりますね。

• Heading Text Colorは｢カリキュラム｣の部分ですね。Section Name Background Colorも変えてみましょうか。あとはLecture Name Background Colorも適当に変えてみます。

• PADDINGですね。余白関係ですよね。例えばTopを100にしてみると、この上のところが変わります。Bottomも100にしてみます。Content Widthは幅を狭くしたり広くしたりできます。意外とこういう細かいところに触れるようになっています。

#2. BASICS – Image

次はImageです。ADDボタンを押します。Imageは簡単ですね。画像を入れます。Image Alt Textは、画像が表示されないときに出てくるテキストですね。あとはLink to URLで画像をクリックしたときのリンクも設定できます。

Designに関しては先ほどと同じですが、Background Colorはこの画像の外側の部分の背景色ですね。Border Radiusは画像の角をどれくらい丸めるかを変えられます。PADDINGは余白部分です。Full Bleedは画像を画面いっぱいに表示するかどうかですね。

#3. BASICS – Text

では戻りましょう。次はTextです。Textはシンプルですよね。Designも先ほど説明したものと同じです。次に行きます。

#4. BASICS – Button

次はButtonです。ADDボタンを押します。Button Actionではボタンのアクションを選択できます。｢Go to URL｣は指定のURL、｢Go to Checkout page｣は決済ページに飛ぶようにすることができます。｢Go to URL｣の場合はURLを指定してください。Button Textも指定しましょう。｢Go to Checkout page｣の場合は、Button TextはそのままですがPricing Planを指定する必要があります。価格プランをいろいろと設定している場合はいくつか選択肢があると思うので、どのプランの決済ページに行くかを指定することができます。

Designは一緒ですね。Border Radiusはボタンの角をどれくらい丸めるかを変えられます。あとはサイトのテーマのところで設定するボタンのカラーがあるのですが、そのボタンのカラーを設定する場合のリンクが貼られていて、｢Edit site-wide button color｣から行くことができます。ただし、これは一律で同じ色になってしまい、個別に変えることは今のところできなさそうです。

#5. BASICS – Video

次はVideoです。編集項目はシンプルですね。Designの部分も今まで紹介してきたものばかりですね。

#6. BASICS – Costom HTML

次はCostom HTMLですね。少し説明が難しいのですが、HTMLコードをそのまま入れることができます。これは詳しい人だけやっていただければいいかなと思うので、必要なタイミングでやってみてください。

#7. BASICS – Email leads Leads Form

最後はEmail leads Leads Formですね。ここにある通りの文言を編集していけばいいと思います。ここに「Add a checkbox for consent」とありますが、これは同意のチェックボックスですね。「チェックすることで、〇〇に同意したものとみなします」といったものですね。そういう細かいものもあります。Designに関しても先ほどとほぼ同じですね。

Step4. Teachableでセールスレターに追加したレイアウトを編集する

ではいよいよLAYOUTSですね。LAYOUTSに行きましょう。

#1. Image with text

Image with textです。Image with Textもシンプルですね。Layoutで画像の配置を左、右に変えられますし、Imageで画像自体も変えられます。Image Alt Textでaltテキスト、Image Link to URLでリンクを設定でき、ここのテキストも変えられます。あとは似たり寄ったりですね。Text Alignmentというテキストをどちらに寄せるかという項目以外はこれまで説明してきたものと同じですね。画像の角を少し丸めてみてもいいかもしれないですね。

#2. Banner

次はBannerです。Bannerもほとんど先ほどのものと似ていますね。これは画像、テキスト、ボタンと今まで紹介してきたものの組み合わせで設定項目があるという感じです。ちなみにShow Buttonでボタンのオンオフもでき、ボタンを表示しないようにすることもできます。Designの部分も、これまで説明してきたものばかりです。

#3. Text with image Grid

次はText with image Gridですね。すごく綺麗ですよね。それぞれの画像に対応した設定項目があります。これまで説明してきたものばかりなので、難しいところはないと思います。これはコースの内容とかを説明するのにすごく良いですし、タイル状に並べるとすごく綺麗かなと思います。やってみてください。

#4. Pricing Plan

次はPricing Planですね。Select Pricing Planではどのプライシングを載せるのか選択できます。最初は一番上のプライシングプランしか入っていないのですが、どんどん追加していくことができます。また、選んでほしくないプランは消すことができます。例えば、本当はほかの所でリンクとして提供しているものの、セールスページでは無料のプランは出したくないよという場合は無料のプランを消しておくといった感じです。あとボタンのテキストも選べます。Designはほとんど同じですね。ボタンのカラーも先ほど言った通り、サイト全体で決まっているものなので、個別にいじることはできません。

#5. Featured Products

最後はFeatured Productsです。商品をどんどん追加していくことができるんですよね。このような感じです。商品はコーチングでも、バンドルでも、コースでも大丈夫です。｢すべてのコースを見る｣というボタンもオンオフできます。触ってもらえればわかるかなと思います。Card Styleは「Grid」か「Stacked」というスタイルにするのかを選べます。あとはこれまでやってきた通りです。

Step5. Teachableでセールスレターのブロックを並び替える方法

ここまで来るとたくさんのブロックが並んでいると思うので、ブロックの並び替えをやっていきましょう。例えばこれとこれを並び替えたいときは、左側の六つの・を掴んでやると簡単にできます。ブロックを削除するのも簡単で、右側の「…」から「Delete」を選んで削除できます。このような感じです。

Step6. Teachableでセールスレターのブロックを複製する方法

あとは複製もできます。「…」から「Duplicate」を選ぶと複製されます。例えば同じようなブロックを作って、1つはイマイチだったから隠しておいて、あとでまた何か使いたい、テストしたいという場合は「…」から「Hide」を選んでください。そうするとブロックがグレーになったのがわかりますでしょうか。消えた訳ではなく、いつでも「Unhide」で戻せます。例えばキャンペーンのときに、このキャンペーンの文言だけ表示させてほかは一時的に非表示にさせるといったことに使えると思います。

Step7. Teachableでセールスページの詳細を設定する方法

最後です。最後は右上の歯車に行ってください。これはこのページ自体のセッティングです。例えばHeaderは上にあるこのバーですね。Header Overlapでは画像にヘッダーを被らせたり、Transparent Headerでヘッダーを半透明にしたり、Show Footerでフッターを表示しないようにできます。CONTENT WIDTHは余白の部分ですね。PAGE METADATEはページのURL、タイトル、説明を変えることができます。

ブロックエディターで作り込まれたブロックをはめ込むだけに見えるのですが、意外といろいろな設定ができるので、工夫次第ですごく綺麗なページが作れると思います。ということで今回は以上です。長くなりましたが、いろいろと触ってみると面白いと思うのでやってみてください。

やり方を動画で見る

Teachable（ティーチャブル）の使い方・操作方法の一覧ページに戻る

今回はTeachableでカスタムHTMLブロックにスニペットを追加する方法についてやっていきます。Teachableではセールスページなどでこのようなブロックエディターというものがありますよね。ブロックエディターのところでページ自体に新しい機能を付加したり、少し高度なCSSを使ったりすることができるのですが、そういったカスタムのHTMLを埋め込む方法についてやっていきましょう。

Step1. 「＋Add New Block」からCuustom HTMLを加える

「＋Add New Block」から入ってCuustom HTMLの右側にあるADDボタンを押してください。そうするとこのようにコードを挿入するところができるんですね。横幅を変えることができ、ここにいろいろなコードを追加できます。

TeachableのCustom HTML Block Snippetsというページにはどのようなことができるかという例が書いてあるんですよね。例えば、このButton hover effectは良いと思います。見てください。ボタンの上にカーソルを合わせるとボタンが大きくなります。Expand Codeを押すと、「 < style > 」から始まるコードが表示されます。これをコピーして貼り付けましょう。プレビューするとこうなります。色も編集できるはずです。やってみてください。

Step2. タイプフォームで作ったフォームを埋め込む方法

次はこのタイプフォームで作ったフォームを埋め込んでみたいと思います。タイプフォームのShareのところから、「Standard」というページ内に埋め込む形のものを選択します。やっていきましょう。「Get the code」でコードをコピーして、Custom HTMLに貼り付けます。

自動的にセーブになるので、Draft Savedと表示されています。では「Preview」から見てみましょう。おそらく一番下に出るんじゃないかなと思います。これですね。フィードバックフォームが出てきます。タイプフォームが埋め込まれました。

このようにカスタムのHTMLブロックを追加し、その中にスニペットというHTMLのコードをたくさん入れることでいろいろな機能をページに付加することができます。便利だと思いますのでやってみてください。Teachableのホームページにもいくつかありますね。ソーシャルメディアボタンやフォームを埋め込むものがあったり、いろいろなエフェクトがあります。いじれる方はやってみてください。面白いと思います。

やり方を動画で見る

Teachable（ティーチャブル）の使い方・操作方法の一覧ページに戻る