• Skip to primary navigation
  • Skip to main content

石崎力也のコンサルティング「いしこん」

年収1000万円以上のネットビジネス経営者を対象にデジタルコンテンツの販売方法とマーケティングオートメーションの導入方法に関する情報を発信するブログ。

  • いしこん 3.0
  • 無料ウェビナー
  • もう1本読む?
    • 【初心者でもわかる】失敗しないセールスファネル完全攻略ガイド:リード獲得から高額商品販売まで、売上を最大化する自動化戦略
    • 個人事業主のためのAIツール活用術|ChatGPTから始めるビジネスの自動化・効率化マスターガイド
    • ネット広告代理店を個人で開業!Facebook広告運用のスキルを身につけて成功する方法|ツールの設定、数値分析、営業、業務効率化まで
    • 【保存版】コンテンツマーケティングのネタ切れを防ぐ!ネタの見つけ方と戦略のコツ
    • 上級者をペルソナに設定し優良顧客だけを集める方法
    • Eメールマーケティングの基礎知識|開封率と成約率の向上、セグメンテーションまで
    • 30代フリーランスが家族と一緒にオランダに移住した体験を話します
    • Webマーケティングのやり方マスター講座|ブランディング戦略、SNS発信、スケジュール管理を解説
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • オンラインコース(講座)ビジネスの作り方・やり方
    • 会員制サイトの作り方とサブスクリプションの導入方法
    • 動画広告の作り方マスター講座|種類、活用方法から効果測定のコツまで
    • 短くて成約率の高いVideo Sales Letter(VSL)の作り方
    • エバーグリーンローンチとは?ツールの使い方を詳しく解説!
    • 個人でKindle電子書籍を出版して利益を得る方法
    • Teachable(ティーチャブル)の使い方・操作方法
    • ClickFunnels(クリックファネル)の使い方・操作方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • スクール
  • Show Search
Hide Search
現在の場所:ホーム / Teachable / 3-16 Teachableでページの新規作成と編集をする

3-16 Teachableでページの新規作成と編集をする

Last updated on 2022年5月29日 By 石崎 力也

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

今回お届けするノウハウはこちら

  • Step1. Teachableでセールスページを新規作成する
  • Step2. セールスレターに使えるブロックの種類
    • #1. COURSES
    • #2. BASICS
    • #3. LAYOUTS
  • Step3. Teachableでセールスレターに追加したブロックを編集する
    • #1. COURSES – Course Curriculum
    • #2. BASICS – Image
    • #3. BASICS – Text
    • #4. BASICS – Button
    • #5. BASICS – Video
    • #6. BASICS – Costom HTML
    • #7. BASICS – Email leads Leads Form
  • Step4. Teachableでセールスレターに追加したレイアウトを編集する
    • #1. Image with text
    • #2. Banner
    • #3. Text with image Grid
    • #4. Pricing Plan
    • #5. Featured Products
  • Step5. Teachableでセールスレターのブロックを並び替える方法
  • Step6. Teachableでセールスレターのブロックを複製する方法
  • Step7. Teachableでセールスページの詳細を設定する方法
  • やり方を動画で見る

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

About 石崎 力也

石川県金沢市出身。モントリオール在住。専門スキル:競艇、コピーライティング、DRM、アニメーション。このサイトの運営責任者です。2013年3月に六本木と西麻布で会社を設立し、同年11月までに全てのメディア・広告事業を軌道に乗せる。現在は、家族と一緒に、3か月に1度、住む国を変えながら生活をしています。

「デジタルマーケティング完全ガイド」を無料プレゼント0円でダウンロード

石崎力也のコンサルティング「いしこん」

Copyright © 2025 · Rikiya "Sales Funnel" Ishizaki