• Skip to primary navigation
  • Skip to main content

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

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

  • いしこん 2.0
  • 無料ウェビナー
  • もう1本読む?
    • オンラインコース(講座)ビジネスの作り方・やり方
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • 会員制サイトの作り方とサブスクリプションの導入方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • ログイン
    • 新規登録はこちら
    • アカウントを持っている
  • Show Search
Hide Search
現在の場所:ホーム / アーカイブ石崎 力也

石崎 力也

3-3 Teachableでスクールのロゴとカラーを設定する

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

今回はTeachableでスクールのロゴとカラーの設定についてやっていきます。スクールのロゴとカラーというのは、スクールの中には文字、ナビゲーションバー、フッターの背景、コース、セールスページ、レクチャーの中のボタンなど、いろいろとありますが、その辺りのカラーを変えたり、ロゴに画像を入れることもできるので、ブランディングをしたい場合はこれを使っていきましょう。

Step1. スクールのロゴ・サムネイル・ファビコンを設定する

では設定のSITEにあるThemeのところから見てみましょう。最初はLogo & Brandingといって、画像を入れるところですね。ロゴに関しては決まりが一応あって、サイズは250×60が一番綺麗に見えますよ、PNGとJPEGを入れてくださいとあります。あとで入れていきます。School Thumbnailはここですね。暗くなっている画像があると思うのですが、この部分に入ります。サイズは960×540です。

Faviconはこのタブの左側がTeachableのアイコンになっていますが、この部分を変えられます。おすすめのサイズは32×32です。それぞれ「Upload」から入れていきましょう。入れ方はいろいろとあるのですが、今回は「My Device」でパソコンからアップロードします。

画像をアップロードしました。

ではどのようになったか見ていきましょう。まずログアウトした状態でホームページを見た場合ですね。ロゴはここに入りました。サムネイルのところは画像が少し黒っぽくなるので、明るい色のほうが良いですね。背景が透過していたほうが綺麗に見える感じがします。見てください。ファビコンはこのように設定されています。ログインした状態も見てみましょう。こちらの場合はロゴだけですね。

Step2. スクールのフォントを設定する

では次に行きます。Font Familyですね。フォントに関しては日本語フォントを変える方法はなく、Typographyで選べるのが英語部分だけなんですよね。一度適用して見てみましょう。「Alegreya」という癖のあるフォントにしてみます。この「MBA」という部分を見ておいてください。少し変わると思います。今読み込んでいます。少し変わりましたね。少し変わりましたが、日本語のところは変化がありません。そのため僕たちはデフォルトにしています。

Step3. スクールの色(Color Palette)を設定する

次はColor Paletteですね。これは結構色合いに関係してきます。Presetというものが用意されていて、綺麗に見えるPresetがあります。最初のPreset 1はTeachableっぽいカラーですね。これにしておいても綺麗だと思いますし、それぞれ細かく設定することもできます。9項目あるので、左上から順番に解説していきます。

#1. Nav bar & Footer Background

まずはNav bar & Footer Backgroundです。「Fixed, scrolling & email」とありますが、ここは気にしなくても大丈夫です。ナビゲーションバー、フッターがなにかというと、ナビゲーションバーはここにあるバーですね。そしてフッターはここの一番下にあるバーになります。その色合いですね。すごく濃いグレーの色になっています。

#2. Navigation Bar Link

次のNavigation Bar Linkは少しややこしいのでよく聞いてください。ナビゲーションバーへのリンクの色ですが、左側の白色が設定されているほうは「Links when nav bar is fixed」、右側のグレーが設定されているほうは「Links when nav bar is scrolling」と書いてあります。これはナビゲーションバーが固定されている場合の色は白、そしてナビゲーションバーがスクロールで動く場合はグレーということです。

実際に見てみましょう。

  • Links when nav bar is fixed:こちらはログアウトした状態です。ナビゲーションバーはここにあるのですが、スクロールするとくっついてきます。これがfixedということですね。固定されているので、白の色合いになっています。
  • Links when nav bar is scrolling:逆にログインした状態だとこのようにスクロールしても同じ位置に来ないですよね。その場合はグレーの色になっています。フッターに関しても、スクロールすると動きます。やはりこれもグレーの色合いになっています。

#3. Homepage Headings & Subtitle

次はHomepage Headings & Subtitleです。「when a background is set」とあるのでバックグラウンドの画像がセットされている場合です。ヘディングは「オンラインコースクリエイターのMBAプログラム」とある大きい文字の部分、そしてサブタイトルは下の「あなたの既存の収入をオンラインコース・ビジネスに置き換えませんか?」とある小さい文字の部分になります。これは2つとも同じ色合いで設定されています。

#4. Course Page Headings & Subtitle

次はCourse Page Headings & Subtitleです。これも「when a background is set」です。コースのセールスページを見てほしいのですが、バックグラウンドの色や画像がセットされていないので、文字がデフォルトの黒色になっています。 バックグラウンドをセットした場合はここで設定した色合いになります。

#5. Headings

次はHeadingsです。Headingsはこのコースの所に表示されている項目のことです。CashLabのコースであれば「CashLab」という名前のところです。こちらもそうですね。この「Evergreen Secrets」などの部分の色合いです。

#6. Body Text

次はBody Textです。Body Textはここの本文の部分です。ログインして中に入ったときの、こちらも本文の部分ですね。

#7. Buttons & Links

次はButtons & Linksです。これはカリキュラム一覧の「スタート」というボタンや、レクチャーの中にある「次の講義」というボタンですね。

#8. Video Player

最後はVideo Playerです。TeachableではWistiaを使っているのですが、このビデオプレーヤーの下の所の色ですね。これもこの辺りのボタンの色と統一してあげると、すごく綺麗になると思います。

ということで今回はこんな感じです。もしわからなくなってしまったら、プリセットに戻してあげると綺麗になります。プリセットに戻したあとは必ず「Save」をして反映するようにしてください。今回は以上です。やってみてください 。

やり方を動画で見る

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

3-2 Teachableでスクールとコースをプレビュー表示する

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

今回はTeachableでスクールとコースのプレビュー表示についてやっていきます。スクールやコースを作ったあとに、プレビュー表示で、受講生になったらどのようになっているか見たいと思います。そのプレビューの見方についてやっていきます。

Step1. Coursesをプレビューする

まずはコースのプレビューから見てみましょう。Coursesの中に入ります。InformationのタブのところにPreviewがあり、「Sales Page」と「Course Curriculum」の両方を見ることができます。

「Sales Page」に行きましょう。このようなセールスページが出てきて、ここに「Preview as student」と「Preview as public」を切り替えられる場所があります。セールスページの場合は、基本的にこの2つを切り替えたとしても特に違いはありません。

次は「Course Curriculum」に行きましょう。コースカリキュラムは違いが出てきます。今度は「Preview as student」か「Preview as admin」ですね。先ほどは「Preview as public」でしたが、ここがadminになっています。

「Preview as student」の場合はこのように出ます。ここにはパブリッシュされていて、ドラフトではないレクチャーのみが表示されます。

「Preview admin」に切り替えてみましょう。そうするとパブリッシュされていないドラフト状態のレクチャーも一緒に見ることができます。これが2つのビューの違いです。

Step2. Coachingをプレビューする

次はCoachingです。CoachingはTeachableで比較的新しく追加されたサービスで、コーチングやコンサルなどを提供するときに使います。中に入っていきましょう。中に入るとこのようになっています。

Templateのところで「Preview」を押してあげてください。そうすると「〇〇さん今日も何かをしましょう」や、First milestoneとして「ようこそ」と表示されているのをプレビューすることができます。中を押すとこのようになっていて、なにかコメントが書けるようにもなっていますね。

Step3. スクールの外観をプレビューする

最後です。最後はスクールのプレビューです。スクールのプレビューに関しては、Dashboardの「View Your School」、または左上にある自分のスクールの名前のところをクリックしてください。そうすると自動的にプレビューページになります。ここでも「Preview as student」か「Preview as public」を選ぶことができます。

ということでこのようにしてスクールとコースのプレビューを見てみてください。今回は以上です。やってみてください。

やり方を動画で見る

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

3-1 Teachableでコースデザインをテンプレからカスタマイズする

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

今回は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です。ということでこのようにしてカスタマイズをやってみてください。今回は以上です。

やり方を動画で見る

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

14-5 クリックファネルでフォーム回答後にトラッキングピクセルを発火させる方法

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

今回はClickFunnelsでフォーム回答後にトラッキングピクセルを発火させる方法についてやっていきます。トラッキングピクセルというのは、FacebookやGoogleの広告などで、お客さんの行動に合わせて計測をするための調査の方法です。フォームの回答項目によって、FacebookやGoogleにお客さんがこんな回答しましたよというデータを送る方法をやっていきましょう。

Step1. SETTINGSから「EDIT SURVEY OPTIONS」に入る

まずはSETTINGSから「EDIT SURVEY OPTIONS」に入ってください。TRIGGERSで新しいトリガーを作ります。TRIGGER TITLEは適当に決めてください。今回はどの質問のどの回答を選択したらトリガーが発火するかを選ばないといけません。例えばQUESTIONSは「Q:”うちのコースに興味もってもらえましたか?”」、ANSWERは「”はい、最高ですね!”」を選択すると、「うちのコースに興味もってもらえましたか?」という質問に「はい、最高ですね!」と回答されたときにFacebookのピクセルを発火させるということですね。

Step2. FACEBOOK PIXELの設定

FACEBOOK PIXELはお客さんが回答を送信したあとに、CUSTOM NAMEでつけた文字列のトラッキングイベントをFacebookの管理画面に出してくれるんですよね。新しくトラッキングイベントを作ってくれます。Facebookの場合はこのような感じになります。ここにはスペースを入れることはできません。

Step3. Google TAG Managerの設定

Googleの場合、Google TAG Managerで設定されているトリガーネームというイベントネームと同じになるようにしてください。下に書いていますが、全く同じ文字列を入れなければいけません。

Step4. 回答を選んだ時点でトラッキングピクセルは発火する

1つの回答に対して FacebookとGoogleの両方で発火させることもできますし、どちらか片方だけ発火させることもできます。1つここで言っておきたいのですが、お客さんが回答を送信していなくても、送信する前にこの回答を選んだ時点でGoogleなどのトラッキングピクセルは発火します。最後まで回答しなくても、一問一問答えた時点でトラッキング ピクセルは発火するということだけ覚えておいてください。今回は以上です。

やり方を動画で見る

ClickFunnels(クリックファネル)の使い方・操作方法の一覧ページに戻る

14-4 クリックファネルで回答フォームで回答後の挙動を変更する方法

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

今回はClickFunnelsで回答フォームで回答後の挙動を変更する方法ついてやっていきましょう。この回答フォームは、回答が終了するとどういう挙動をするのか5つのパターンから選ぶことができます。一つ一つ見ていきましょう。

Step1. 回答後の挙動は5つのパターンがある

まずはこの回答フォームのSETTINGSから「EDIT SURVEY OPTIONS」に入ります。回答後の挙動の設定はOutcomesで行います。Outcomeは結果という意味で、Outcomesのアクションをカスタマイズすることで回答し終わった後のフォームの挙動を変えることができます。「Default Outcomes Action」の中に入って、ACTIONSのPAGE ACTIONを設定していきましょう。

  • Loading Then Page Redirect:回答が終了したあと、次のページにリダイレクトされるまでの間に何かテキストを出すものです。例えば「次のページにリダイレクトしています」「ページは自動でリダイレクトされます」といった文言を出して、それから数秒経ったあとにリダイレクト先にリダイレクトします。
  • Instant Page Redirect:先ほどの「Loading Then Page Redirect」の場合はテキストが出てからリダイレクトされましたが、こちらの場合は何もテキスト表示せずにすぐにリダイレクト先にリダイレクトします。
  • Hide Survey:Surveyは回答フォームのことなのですが、回答が終わると回答フォーム自体がページからパッと消えるというものです。
  • Submit Page (form):Submit Pageというのは回答フォームのページです。ページ自体を送信するようになっていて、メールアドレスなどをとるときに有効だと思います。
  • Open Popup:回答フォームの回答が終了したあとにポップアップフォームを出すものになります。

Step2. 回答後の挙動を設定する

#1. Loading Then Page Redirect

では1つ目の「Loading Then Page Redirect」をやってみましょう。すでにLOADING TEXTには「回答ありがとうございました。」、SUB TEXTには「ページは自動でリダイレクトされます。」という文言と、CUSTOM REDIRECTにはリダイレクト先のURLを入れてあります。これでページを保存してどのような挙動になるのか見てみましょう。プレビューで回答フォームに回答します。回答をクリックしました。するとテキストが表示されて、そのあとリダイレクトされましたね。

#2. Instant Page Redirect

では2つ目をやっていきましょう。Outcomesを編集して次は「Instant Page Redirect」を選択します。これで保存してどんな感じになるのか見てみましょう。そうすると回答をクリックしたあと、テキスト表示されずにすぐにリダイレクト先にリダイレクトされたと思います。これが2つ目のパターンですね。

#3. Hide Survey

次は3つ目の「Hide Survey」です。回答フォーム自体を隠してしまう方法ですね。プレビューします。回答してクリックすると回答フォームが瞬時に消えました。

#4. Submit Page (form)

次は4つ目の「Submit Page (form)」ですね。この場合はEメールのフォームを入れておきましょう。INPUTフィールドを作って 、INPUT TYPEは「Email Address」を選択しましょう。まず、お客さんにはEメールアドレスを入力してもらって、その上でこの回答を入れてもらってください。今回はメールアドレスに「support@haamalu.co.jp」と入れてみましょうか。これで「はい、最高ですね!」をクリックすると、「回答ありがとうございました」と表示されますね。

#5. Open Popup

最後です。最後は「Open Popup」ですね。ポップアップが開かれるようになります。やってみましょう。これで回答します。回答するとこのようにポップアップが出てきます。例えばこのボタンに回答のボーナスの URLを載せておくとすぐにここからダウンロードできたりします。

このようにして回答後の挙動を5つのパターンから選ぶことができるので、用途に応じて使い分けてみてください。今回は以上です。

やり方を動画で見る

ClickFunnels(クリックファネル)の使い方・操作方法の一覧ページに戻る

  • 次のページへ 1
  • 次のページへ 2
  • 次のページへ 3
  • Interim pages omitted …
  • 次のページへ 42
  • Go to Next Page »

知っていることはお金になる…1度限りのウェビナーをご用意しました。視聴する

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

Copyright © 2022 · Rikiya "Sales Funnel" Ishizaki