STEP5 アップセルとダウンセルページの作り方

1. アップセル（OTO）の成約率を高めるために前のページとテイストを合わせる

Order FormとOTOページで、別々のテンプレートを選んだため、今回テイストがかなり違います。Order Formでお客さんが商品を購入した後、次に出るOTOページの雰囲気があまりにも違うと良くないです。なので、シンプルなOrder Formページの方に合わせていきましょう。

#01: 新しくVariationを作る

今からテンプレートを変えるのことは出来ないので、「CREATE VARIATION」から「Create From Template」でVariationを追加していきます。

今回は、シンプルな「OTO Video Page」というテンプレートを使いましょう。「Save Page & Continue」で次へ。

名前を「OTO-B」としておきます。今作ったVariation BのPathを「oto-b」にします。そして、トラッフィクをBの方にすべて流したいので、真ん中のスライダーでBを100%にします。「Apply Changes」をクリックして保存します。「EDIT PAGE」で、Bの方を編集していきます。

ヘッドの部分の文章を変えていきます。お決まりの「ちょっと待って！」も入れておきます。このアップセルで何を売るかですが、まだない「これから作るもの」を売っていいです。Fast Launchは、10日間でローンチするというなので、アップセルまで出来てないと思うので。今回は「高額商品を売る方法、Fast Launch Advance」を売っていきます。

#02: プログレスバーを挿入する

次にプログレスバーを入れます。「ADD NEW ELEMENT」から「PROGRESS BAR」を選択。

設定で、「PERCENT」の文を「注文完了まであと少し…」に変えます。

「THEMES」から「Animated Stripes」を選び、動いてる風のスタイルにします。

さらに「ADVANCED」の「PERCENT WIDTH」を「90 Percent」にします。

プログレスバーの残り10%の部分を「OFFSET COLOR」で変えます。「Transparent Black」が見やすかったので、これにします。あとは、順序を入れ替えて、不要になったRowなどを消します。まだ完成していない商品に関しては、納品時期なども書いておくと良いです。

SEOメタデータも編集しておきます。

タイトルや納品時期の文章を整えておきます。「SAVE」で保存します。

#03: アップセルページのビデオの内容

例を挙げるとこんな感じです。” Fast Launch 2.0の注文ありがとうございました。実は今回に限り、具体的な1つのオファーがあるんです。それは「Fast Launch Advance」というものを今作っています。で、これは9万9800円で販売する予定です。半分くらいしていて、もう既に内容は決まっているんですが、あとは撮影する段階という感じです。高額商品の売り方というのは…（と、バーっとしゃべります。）今回に限り50%オフです。なぜならまだ商品が出来ていないからです。商品の納品は2019年11月1日を予定しております。”

必要であれば、一番上のヘッド部分の文章も見直します。

残りの場所を変えていきます。YESリンクのボタンや、返金・カードの説明など。

真ん中の商品説明のセクションは、ご自身の商品に合わせて変えてください。

オレンジのボタンには、左側に「YES LINK FOR OTO」と書いてあり、つまりYESリンクが設定されています。一番下の「No Thank You」には、NOリンクが設定されているのが分かると思います。

2. OTOの商品をClickFunnelsに登録する

アップセル用の商品を登録していきましょう。決済があるところでは、「Product」が必要です。プリローンチコンテンツでは決済を受けないので、商品を登録するタブさえ表示されません。「Product」が必要なのは、Order Form、OTO、Down Sellです。

OTOページで、上の「Products」のタブをクリックし、「+ Add Product」をクリックします。ポップアップが出るので、記入していきます。Product Descriptionは22文字までなので、今回は「Fast Launch Advance OT」までになっています。

3. ダウンセルページをテンプレートから呼び出す

ダウンセルページも同じ要領で作っていくのですが、外観が似てる方がいいので、OTOページをテンプレート化してダウンセルに再利用します。まずは、OTOページそのものをテンプレートにします。OTOページの右側のValiationの方を「EDIT PAGE」し、上のの「SETTINGS」→「GENERAL」をクリックします。右側の「Save Page as Template」をクリックします。僕の場合は、既にテンプレートに保存していたので「Already Set as Page Template」になっていますが、これで完了です。

次に保存したテンプレートを呼び出します。ダウンセルのステップに行って、「CREATE VARIATION」でしたよね。

ポップアップが出るので「Create From Template」を選びます。

ここでさっき保存したOTOページ「Fast Launch Advance OTO」を選び、「Save Page & Continue」をクリック。

Variation Bなので、「Page Name」には「Down Sell B」と入れて「Create Page Now!」で進みます。

右側に新しいVariationが出来ました。

「EDIT PAGE」から中を見ると、ちゃんとテンプレート通りになっています。ダウンセルページを無事にテンプレートから呼び出せました。

4. ダウンセルページを完成させる

テンプレートから呼び出したダウンセルページを完成させましょう。

こんな感じにプログレスバーや、ヘッドの文章を変えます。ダウンセルする時に僕はよく、「エッセンシャル版」という言葉を使います。他にも「ライト版」という良いと思います。なぜこんなオファーをするかというと、交渉力として機能するのは値段だけではないからです。

エッセンシャル版には特典やコミュニティが付属しません。ですが、それらを「必要ない」と思っている人、「一緒にパッケージされてしまっているから買わない」という人もいます。もちろん、価格が高いという理由で買わない人もいるでしょう。マクドナルドでチーズバーガー3つだけを買う、僕の友達もいます。「チーズバーガーだけ買ってください」というのと同じオファーになります。

ボタンの文章も「はい、39,800円で追加購入します」という感じに変えます。ダウンセルのエッセンシャル版は、特典やコミュニティが含まれないですが、本編は同じである説明を載せていきましょう。「ADD NEW ROW」から「1 COLUMN」のRowを追加します。「ADD NEW ELEMENT」から「SUB HEADLINE」を選びます。

あとは文字を編集していきます。最後に動画を埋め込みます。内容は次のような感じです。“ Fast Launchを購入して頂き、ありがとうございました。一つ前でAdvancedをオファーしましたが、値段が高すぎるとか、特典やコミュニティは不要という方もいると思うので、値段を下げてオファーさせてください。今回に限り39,800円です。今すぐ、下の「はい、39,800円で追加購入します！」のボタンをクリックしてください。あなたと商品の中でお会いできることをしています。それでは。 “これで、ダウンセルページは完成です。

5. ダウンセルページの商品を登録する

アップセルページと同じ要領で、ダウンセルの商品を登録していきます。

ダウンセルページで「Products」のタブをクリックし、

「+ Add Product」をクリックします。

ポップアップが出るので、記入していきます。

* Name：「Fast Launch Advance エッセンシャル版」
* Amount：39800
* Amount Currency：JPY
* Product Description：「Fast Launch Advance ES」

Product Descriptionは22文字制限があるので、エッセンシャル版の意味で「ES」をつけています。

記入し終えたら、「CREATE PRODUCT」をクリックします。

無事にダウンセル商品の登録が出来ました。

6. 会員サイトを作成するにあたって

ClickFunnelsで会員サイトを作る方法については、僕のブログ記事にあります。

ClickFunnelsで会員サイトを作る方法
https://rikiyaishizaki.com/click-funnels/how-to-make-membership-site

詳しいやり方は、これを読んで欲しいんですが、今回はその手前の話をしますね。ClickFunnelsで作る会員サイトは、簡易的な形になります。ThinkificやTeachableほどは、機能が充実していません。でも、YouTubeの限定公開リンクを渡す程度の10万円・20万円の商品があるくらいなので、そこまでセキュティなど細かく気にしなくても、ClickFunnelsで十分かなと思います。

実際に、ClickFunnelsのRussell Brunsonさんの商品は、ClickFunnelsの会員サイトで運営されています。ClickFunnelsの場合は、YouTubeやVimeo、Wistiaなどの動画ホスティングサービスが必要になるので、そのリンクを引っ張ってくる必要があります。少し面倒です。ThinkificやTeachableの場合は、もともとWistiaが組み込まれているので、動画をアップロードするだけで良いです。この点が違います。

ClickFunnelsだけで完結する場合は、会員サイトをClickFunnelsで作って頂いて構いません。ただ、今回は竹岡さんとのジョイントベンチャーなので、収益折半をしないといけません。その収益折半を自動でやってくれるのが、Teachableなんです。自動で相手への払込までやってくれます。

実際に僕はこれまで、morefree.meの根本さん、videocreation.cloudの山田さん、あと言えない案件が3つくらいありますが、未だにこれらすべてを収益折半でやっています。売上の何%という契約で、ずっと僕がもらい続けてるみたいな感じです。ということで、今回の竹岡さんとのプロダクトローンチのこの商品も収益折半、しかも払込も自動でやっています。

なぜかというと、そもそも最初からエバーグリーンで回すつもりだったからですね。だから、「毎月の売り上げいくらありましたかと確認して、その半分を払い込みます。」みたいなことをやるのは、面倒です。一回きりならいいですが、エバーグリーンで毎月やるのは面倒です。だから、僕はTeachableで会員サイトを運用していきます。次回は、そのやり方を見ていきます。

7. Teachableで決済ページを作る

Teachableで既にコースを作成してあります。コースの作り方に関しては、たくさんのソースがあると思います。英語であれ日本語であれ。日本語のは、もう99%が僕の作ったやつですけど。検索していただいても出るし、Udemyで出るし、それでやり方を認していただければと思います。

Teachableの使い方
https://rikiyaishizaki.com/teachable/how-to-use-teachable

Teachableの使い方 – 独自ドメインの設定と日本語化の方法 | Udemy
https://www.udemy.com/how-to-use-teachable/

#01: ThinkificとTeachableにおける「Publish」の違い

ThinkificとTeachableには少し概念の違いがあって、Teachableの場合は「Publish Course」してなくても購入はできるんですね。YouTubeの限定リンクみたいに、リンクさえ知ってれば購入できます。Thinkificの場合は、「Publish Course」しないとどんな方法使っても絶対にそのコースを買えないんですね。

だからよくあるパターンは、TeachableでPublishせずに限定リンクを一部の人だけに送って、買ってもらうっていうパターンはよく見ますね。海外でも。実際に決済は、SamCartやThriveCartとか、あるいは僕らみたいにClickFunnelsで決済を受けて、Teachableに流し込むというパターンですね。そういう場合は、Teachableで「Publish Course」してしまうと、他の人が簡単にアクセス出来てしまうんですね。だから、「期間限定です」と言いながら期間限定じゃなくなってしまいます。

#02: 決済ページの使い分け

今回は収益折半するので、この「Product Launch Order Form」の決済ページだけをTeachableに飛ばします。もし、収益折半しないのであれば、シンプルに会員サイトをClickFunnelsで作ってしまえばいいだけの話です。僕たちの場合は折半するからこうなるよ、って流れを言ってるだけなので。

その場合どうなるかと言うと、セールスの部分で収益折半する場合は、Teachableに飛ばすのでボタンだけ置きます。僕たちは、ボタンだけ残してフォームの部分を抜きます。それで、Teachable PaymentやTeachable Gatewayで決済を受けると、Teachableで収益折半できるよという話です。残った購入ボタンから、Teachableに飛ばします。その作業をやっていきます。

まずは、Fast Launch 2.0のコースをTeachableで作って、Pricingにいきます。

単発決済なので、「One Time Purchase」を選びます。

通貨は 「JPY」 (Japanese Yen) を選んで、「99800」円にします。「Add Pricing」で追加します。

あとは僕たち、分割決済のPayment Planも用意してました。「Payment Plan」を選んで追加していきます。

今回は、19700円の6回払いを作っていきます。まず「JPY」を選んで、「19700」円にします。「monthly payments」は、6回払いの「6」にします。「name」には、「19700円の6回払い」と入れます。これは決済のページ出てくる名前になります。一括決済の方がだいぶ安いですね。だから、みんなのインセンティブとして、99800円を一括で払う方に僕たちは仕向けたいということですね。

無事に2つ登録できました。どんなページに見えるのでしょうか？それぞれの「PURCHASE URL」をCopyして、Chromeのシークレットモードなどで見てみましょう。

よし、うまくいってますね。

8. Teachableで決済を受ける理由

ここからは、Advancedな（発展的な）内容になってきます。1人で売ってる場合は関係ないですが、僕らみたいにジョイントベンチャーで収益折半する場合に限りこういうパターンがある、ということをお見せしていきます。これ既にTeachableのAuthorの部分で、50%ずつ収益配分するという設定を竹岡さんともセッティングしてあるんですね。

それは良いとして、やらなきゃいけないのはアップセルページ作るところです。TeachableのPagesから行くと、「THANK YOU PAGE」があります。この中身をアップセル用に変えていきます。「EDIT」で編集します。

まずは「Navigation Bar」や「Footer」など色んなものを消します。

次にClickFunnelsから、Headingなどをコピーしてくる作業があります。次回はこれをやっていきます。

9. Teachableでアップセルページを作る

Teachableで決済を受けるためのOTOページを作ってきますね。

#01: ヘッドを作る

次にClickFunnelsのOTOページから文言をコピーしてきます。

TeachableのThank Youページの、Headingにペーストします。

次の文章をコピーしてきます。もう一つHeadingを足したいなと思ったら、「+ Insert new block」から「Add Rich Text Block」を選択して追加します。「Rich Text」というブロックが追加されました。2行目以降の文章をコピーしていきます。

プレビューしてみると小さくなっているので、これを直します。大きさや色などを自由に変えられるため、さきほど追加した「Rich Text」の方に全て移してハンドルしていきます。

#02: 文字のサイズを色を整える

大きさを変えるには、「Change Font Size」からサイズを選びます。今回は30pxにします。中央寄せにするには、「Alignment」から「Center Text」です。最初の行は赤でしたね。「Bold」にして、「Font Color」を赤にします。最後の行も同じように、青にします。

「Save」して「Preview」で確認します。

タイトル文の下の文章も、同じ要領で入れていきます。最初の行を、もう少し大きくします。「Change Font Size」からだと「30px」が最大値なので、HTMLソースを編集します。「< >」のHTMLのボタンからHTMLソースに入って、「font-size」を40pxに変更します。Previewしてみましょう。すると、文字のサイズが大きくなって、折り返されてしまいました。折り返しが無いのを優先したいので、HTMLソースで「font-size」を30pxに戻します。

#03: ビデオの挿入

次はビデオを入れるんでしたね。ビデオのブロックは、「+Insert new block」から「Add Video Embed Block」で追加します。

「Add Video」をクリックし、出てきたポップアップ画面でアップロードします。ClickFunnelsに比べると、Teachableのビデオの方が綺麗です。なぜなら、TeachableにはWistiaが入っているからです。

#04: アップセル・ブロックの追加

あとは、アップセルボタンを追加していきます。

「+Insert new block」から「Other Blocks」をクリックし、「Upsell Offer」をクリックします。

アップセルのブロックが追加されました。「Select course」でコースを選ばなくてはいけません。

僕らは既に他のコースがあるので、表示されていますが、何も登録してない場合は、表示されないと思います。ここに「Fast Launch Advanced」というコースを作って、追加していきたいので、次回それをやっていきます。

10. Teachableでアップセルオファーする商品を登録する

#01: コースを追加する

「Fast Launch Advanced」のコースを登録していきます。

左のバーの「+」ボタン、または右上の「New Course」をクリックします。

コースのタイトル、サブタイトル、Authorを選択して「Create Course」をクリック。

#02: 商品のPricing Planを作る

まず、クーポンを作りたいのですが、それには「Pricing Plan」が必要なので作っていきます。

「Pricing」のページから、「New Pricing Plan」をクリック、そして「One-Time Purchase」を選びます。

通貨は「JPY」にし、価格を入れて「Add Pricing」で追加します。

#03: クーポンを発行する

次にクーポンを発行します。左のバーから「Coupons」へ行き、「New Coupon」→「This Course Only」を選びます。

「Percentage」を選び、割引したい%を入力します。「Coupon Code」にはランダムなものを入れます。「Expires」はクーポンの有効期限です。このコースは2030年まで売り続けるそうなので、2030年の日付にしました。「Number Available」は有効なクーポンの数です。最後に、「Add Coupon」で追加します。

クーポンが追加されたのが確認できます。

#04: アップセルページに商品とクーポンを組み込む

次に、作った商品とクーポンをアップセルページに組み込んでいきます。

左の「Courses」から目的のコースを選択します。この場合は、Fast Launch 2.0です。

左に出てくる「Pages」をクリックし、「THANK YOU PAGE」を「EDIT」します。

「Upsell Offer」のブロックで、「Course」の「Select Course」からさっき作ったコースを選びます。

その下の「Pricing Plan」にも、さっき作ったPricing Planを選びます。

「Coupon」も作ったものを選びます。

ClickFunnelsで作ったYESリンク・NOリンクの文言と同じになるように編集していきます。「Customize Accept Offer Button」がYESリンクで、「Customize Decline Offer Button」がNOリンクです。それぞれにClickFunnelsからコピーしてきた文章を入れます。「Save」してプレビューすると、こんな感じになります。YESリンクは、よりクリックしやすくなっています。

#05: ブロックを追加してページを仕上げる

真ん中の例1〜3の部分を作っていきます。

今回は、テスティモニアルのブロックを使っていきます。「+ Insert new block」→「Other Blocks」から「Testimonials」を選び追加します。

ClickFunnelsのページから、説明文をコピーして貼り付けます。

「Add Image」をクリックし画像を入れます。今回はオーダーバンプの画像を入れたいので、「Web Images」から「payment」と検索し画像を選びました。

「Save」してプレビューすると、少し画像が縮んでいますが、要領はこんな感じです。このようにして作っていってください。

11. ソーシャルメディアのスクロールバーを削除する方法

#01: 文章を直す

#02: Course Descriptionブロックを削除する

ページの左下に表示されるソーシャルメディアのシェアアイコンを消していきます。

Googleで検索すると、Teachableの公式ヘルプページが出てきます。読んでみると、どうやら「Course Description」のブロックに付いてくるようなので、それを削除します。

「Course Description」ブロックの右の「Delete block」をクリックし、Confirmで確認が出るので「OK」をクリックして削除します。

プレビューで見ると、綺麗に消すことが出来ました。

12. ClickFunnelsにTeachableの決済ボタンを設置する

ClickFunnelsのページからTeachableの決済へ飛ばすためのボタンを作っていきます。今回は、竹岡さんとのJVなのでTeachableで決済をします。その流れで作っていきます。もし、ClickFunnelsで会員サイトを作る場合はこの作業は必要ないです。その場合は、このファネルの中に会員サイトを作っても良いですし、別ファネルに作っても、どっちでも良いです。

#01: Rowを非表示にする

ClickFunnelsの決済フォームの部分を非表示にしていきます。今回は、JVのためフォームは不要ですが、もしも後でJVが終わった場合でも、フォームを削除せずに非表示のままにしておけば、後から表示することが出来ます。最初に非表示にする部分から、文章の部分だけを複製しておきましょう。ボタンの右上の「CLONE」で複製します。上のバーの「ROWS」から「MANAGE」をクリックします。右側のバーにある「目のアイコン」で表示/非表示を切り替えられます。今回は、複製した文章を残し、元のボタンと決済フォームを非表示にします。

こんな感じになります。「2 COLUMN ROW」は、決済フォームの部分です。

#02: 決済ボタンを用意する

残した文章は、内容を変えておきます。新しいRowを追加して、決済ボタンを作っていきます。上のバーの「ROWS」から「ADD ROW」をクリックします。「2 COLUMNS」を選び、ドラッグしてページに入れます。出来たRowのオレンジの部分で「ADD NEW ELEMENT」をクリックし、右のバーから「BUTTON」を追加します。ボタンの文章を変え、文字の折返しギリギリまでフォントサイズを大きくします。それを「CLONE」で複製して、複製されたボタンをドラッグで右側のColumnに持っていきます。

13. Teachableの決済URLをClickFunnelsに埋め込む

#01: 決済ボタンの外観を整える

前回の最後からさらに、ボタンを調整しました。ボタンの下のテキスト「SUB TEXT」を追加し、右側のボタンはグレーにしました。僕らとしては、左側の一括払いの方を選んで欲しいので、一括払いの方がより強調される形にしています。

ちなみに「SUB TEXT」はボタンの設定から編集できます。

#02: Teachableの決済URLを貼る

TeachableのPricingページにある、一括決済の方の「PURCHASE URL」を「Copy」します。

ClickFunnelsに戻り、一括決済用のボタンの設定から「SET ACTION」を選び、「GO TO WEBSITE URL」にさっきのリンクをペーストします。このとき、「Open in New Tab/Window」にしておきます。なぜかというと、決済ページを見てから、分割決済に戻りたい人もいるので。同じようにして、分割決済のボタンにもURLを設定します。これでこのSTEPはおしまいです。