• Skip to primary navigation
  • Skip to main content

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

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

  • いしこん 2.0
  • 無料ウェビナー
  • もう1本読む?
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • オンラインコース(講座)ビジネスの作り方・やり方
    • 会員制サイトの作り方とサブスクリプションの導入方法
    • 動画広告の作り方マスター講座|種類、活用方法から効果測定のコツまで
    • 短くて成約率の高いVideo Sales Letter(VSL)の作り方
    • エバーグリーンローンチとは?ツールの使い方を詳しく解説!
    • 個人でKindle電子書籍を出版して利益を得る方法
    • Teachable(ティーチャブル)の使い方・操作方法
    • ClickFunnels(クリックファネル)の使い方・操作方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • ログイン
    • 新規登録はこちら
    • アカウントを持っている
  • Show Search
Hide Search
現在の場所:ホーム / Teachable / 3-3 Teachableでスクールのロゴとカラーを設定する

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

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

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

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

  • Step1. スクールのロゴ・サムネイル・ファビコンを設定する
  • Step2. スクールのフォントを設定する
  • Step3. スクールの色(Color Palette)を設定する
    • #1. Nav bar & Footer Background
    • #2. Navigation Bar Link
    • #3. Homepage Headings & Subtitle
    • #4. Course Page Headings & Subtitle
    • #5. Headings
    • #6. Body Text
    • #7. Buttons & Links
    • #8. Video Player
  • やり方を動画で見る

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(ティーチャブル)の使い方・操作方法の一覧ページに戻る

Filed Under: Teachable

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

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

Copyright © 2023 · Rikiya "Sales Funnel" Ishizaki