ページエディタを使用したコースの設計

公開日: 2024年10月8日更新日: 2026年10月19日

ページエディターは、効果的なオンラインコースを作成するために不可欠です。使い方を学ぶことで、コンテンツを論理的に構成し、魅力的な要素を追加し、コースをナビゲートしやすくすることができます。これにより、生徒は情報をより簡単に見つけて吸収できるようになり、より良い学習成果につながります。この記事では、ページエディターを使用して、メンバーの学習体験を向上させる、よく整理されたコースを設計するための重要な手順について説明します。

A screenshot of the course page editor dashboards

必要条件

アクティブなClickFunnelsアカウント
モジュールとレッスンがある公開済みのコース

コースページの高度なカスタマイズの有効化

コースのホームページとモジュールページをカスタマイズするには、 高度なカスタマイズ 機能をオンにする必要があります。

左側のメニューから コース アプリに移動します。
カスタマイズするコースを選択します。
コース概要ページの [カスタマイズ] タブをクリックします。
[高度なカスタマイズ] トグルスイッチを見つけます。
トグルをクリックしてオンにします。スイッチがアクティブになると青色に変わります。
テーマを変更 オプションを使用してカスタムテーマを選択できるようになりました。
[カスタマイズ] をクリックして、ページエディターを開きます。
重要
コースに選択したテーマには、すでにいくつかの重要な要素が含まれている場合があります。これらの事前構成された要素は、コース設計の出発点となります。できます：
- 既存の要素を好みのレイアウトに合わせて再配置します。
- これらの要素の設定を編集して、コーススタイルに合わせます。
- 新しい要素を追加して、コースページをさらにカスタマイズします。
この記事のカスタマイズ手順に従うときは、すべての要素を最初から追加する必要はないことに注意してください。代わりに、既存のテーマ構造を適応または強化している可能性があります。

コースホームページのカスタマイズ

コースのホームページは、学生の出発点です。コースのホームページには、コース構造が表示されます。ここで追加した要素には、すでに設定したコースの詳細が自動的に入力されます。コースとそのコンテンツの作成については、 Getting Started with Coursesの記事を参照してください。カスタマイズする方法は次のとおりです。

エディタで、[ **コースホーム]**を見つけます。
モジュール ・コレクション 要素を追加して、プライマリ・モジュールを表示します。
1. 新しい要素を追加 をクリックします。
2. 右側のメニューから コレクション を選択します。
3. コースモジュール を選択します。
モジュールコレクションを構成します。
1. 必要に応じて列を追加する
2. 重要なモジュール要素を含めます。
  - モジュールタイトル
  - モジュール画像
  - モジュールリンク

モジュールページのカスタマイズ

モジュールページには、レッスンとサブモジュールが表示されます。ここでのコンテンツは、作成したモジュール構造に基づいて自動的に更新されます。モジュールとサブモジュールの設定の詳細については、コースモジュールの管理方法の記事を参照してください。設定方法は次のとおりです。

モジュールページへのレッスンの追加

ページエディタで、[テンプレート] で [デフォルトモジュールページ] を見つけます。
レッスンコレクション要素を追加します。
1. 新しい要素を追加 をクリックします
2. コレクション > コースレッスン を選択
レッスンコレクションを構成します。
1. 必要に応じて列を追加する
2. 重要なレッスン要素を含めます。
  - レッスンタイトル
  - レッスン画像
  - レッスンリンク
保存をクリックして変更を適用します。

モジュールページへのサブモジュールの追加

同じ 「デフォルト・モジュール・ページ 」領域に、「 モジュール・コレクション 」要素を追加して、サブモジュールを表示します。
1. 新しい要素を追加 をクリックします。
2. 右側のメニューから コレクション を選択します。
3. コースモジュール を選択します。
モジュールコレクションを構成します。
1. 必要に応じて列を追加する
2. 重要なモジュール要素を含めます。
  - モジュールタイトル
  - モジュール画像
  - モジュールリンク

レッスンページのカスタマイズ

レッスンページには、個々のレッスンコンテンツが表示されます。ここの要素には、作成した個々のレッスン情報が入力されます。レッスンの作成と管理に関するガイダンスは、 How to Manage Course Lessonsの記事を参照してください。レッスンページをカスタマイズするには、次の 2 つのオプションがあります。

デフォルトのレッスンテンプレートを編集します。
1. ページエディタで、[ テンプレート] タブをクリックします。
2. [ デフォルトのレッスンページ]を選択します。
3. ここで行った変更は、このテンプレートを使用するすべてのレッスンに適用されます
個々のレッスンページをカスタマイズします。
1. ページエディタの 「コース」 タブで、カスタマイズする特定のレッスンに移動します。
2. レッスン名をクリックして、個々のページを編集します。

どちらのオプションでも、次の手順に従ってページをカスタマイズします。

重要なレッスン要素を追加します。
1. レッスンタイトル
2. 画像
該当する場合は 、メディア 要素を含めます。
1. ビデオレッスンの場合: レッスンビデオ 要素を追加
2. 音声レッスンの場合: レッスン音声 要素を追加
コンテンツ本文 を追加します。
1. 新しい要素を追加 をクリックします
2. ダイナミックスロット > コンテンツ本文 を選択します
**「レッスンステータス」**要素を設定する: 「レッスンステータス」要素には、各レッスン内の生徒の進捗状況が表示されます。追加するには:
1. 新しい要素を追加 をクリックし、レッスンステータス を選択します。
2. ベース/未完了 状態と完了状態の両方の外観をカスタマイズします。
  - テキストを編集します(例:「レッスン開始」または「完了」)。
  - テキストとアイコンの色を調整する
  - コースデザインに合わせてスタイルを変更する
(オプション)ナビゲーションボタンまたは進行状況ボタンを追加します。

a. レッスンページに含める各アクションに Button 要素を追加します 。

b. ボタン ごとにボタンアクションを 次のいずれかに設定します。
- 完了をマーク…: 現在のレッスンを完了としてマークし、ユーザーをまだ完了していない次のレッスンに進めます。すべてのレッスンが完了している場合は、最初のレッスンに戻ります。
- 次のレッスンへ進む…: 現在のレッスンを完了としてマークせずに、完了済みかどうかに関係なく、コースのアウトライン順で次のレッスンにユーザーを移動します。非公開のレッスンやユーザーがアクセスできないレッスンはスキップされ、最後のレッスンではコースページに移動します。すでに修了したコースを見直す受講者向けのボタンとして使用できます。
- 前のレッスンに戻る…: 現在のレッスンの完了ステータスに影響を与えることなく、コースのアウトライン順で前のレッスンにユーザーを戻します。
- レッスンを再スタート…: 現在のレッスンの完了ステータスをクリアしてレッスンを再読み込みし、ユーザーが最初からやり直すことができるようにします。
[保存] をクリックして変更を適用します。

コースサイドバーのカスタマイズ

コースサイドバーは、学生がコースコンテンツをナビゲートするのに役立ちます。モジュールやレッスンなどのコース構造が表示されるため、異なるセクション間を簡単に移動できます。サイドバーのさまざまな側面をカスタマイズしてコースのデザインに合わせてカスタマイズし、学生の学習体験を向上させることができます。

ページエディターで、 サイドバー 要素を見つけるか追加します。
[ 設定⚙ ]アイコンをクリックして、その設定を表示します。
必要に応じて、次の設定を調整します。
- 上マージン: スライダを使って、サイドバーの上のスペースを設定します。
- レンダーモード: ドロップダウンメニューで「クラシック」または「アセンション」スタイルのいずれかを選択します。
- ドリップモジュールを表示: 「はい」を切り替えてすべてのモジュールを表示するか、「いいえ」を切り替えてコースサイドバーでアクセスできないドリップモジュールを非表示にします。
- サブモジュールをデフォルトで展開: デフォルトは「いいえ」で、メインモジュールは展開されますが、サブモジュールは学生が現在いる場合を除き折りたたまれたままです。「はい」を選ぶと、すべてのサブモジュールも展開されます。
- 現在のメインモジュールからのみコンテンツを表示: (クラシックレンダーモードでのみ使用可能)「はい」を選ぶと、学生が現在いるメインモジュールのコンテンツだけを表示します。
- 幅: スライダーを使用してサイドバーの幅を調整します。
- 上部パディングと下部パディング: 内部間隔を微調整します。
- 垂直間隔: サイドバー項目間のギャップを制御します。
- 背景色: コースのデザインを引き立てる色を選択します。
- モバイルハンバーガーカラー: モバイルメニューアイコンの色を選択します。
- モジュール間の隙間: (クラシックレンダーモードでのみ使用可能)サイドバーのモジュールセクション間の間隔を調整します。
- 完了チェックマークカラー: 進行状況追跡チェックマークの色を選択します。この機能は、サイドバーの完了したレッスンの横に小さなチェックマークアイコンを表示し、学生がコースの進捗状況を一目で視覚化できるようにします。
- 左のインデントスペーシング: サブアイテムのインデントレベルを設定します。
- 左のアイコンを無効にする: 項目の横にあるアイコンを表示または非表示に切り替えます。
- チェックマークアイコンを無効にする: 必要に応じて、完了チェックマークアイコンをオフに切り替えます。
- コンテンツ深度の切り捨て: 表示するコンテンツのレベル数を制御します（2 または 3）。
サイドバー モジュール の設定をカスタマイズして、サイドバー内のモジュールセクションの外観を調整します。
コースの深さ設定を構成する: コースの深さは、サイドバーのさまざまなレベルのコンテンツ階層を指します。例えば：
- 深さ 1 はメインモジュールである可能性があります
- 深さ 2 はモジュール内のセクションにすることができます
- 深さ 3 は個々のレッスンを表す場合があります
各深度レベルには独自のスタイル設定があり、コース構造のさまざまなレベルを視覚的に区別できます。カスタマイズするには:
1. 設定メニューの「コースの深さ1」、「コースの深さ2」などまで下にスクロールします。
2. コースの深さごとに、タイポグラフィ、色、その他の視覚要素を調整して、サイドバーナビゲーションに明確な階層を作成できます。
[ ボーダー ] を有効にして、サイドバーにアウトラインを追加します。
[ 影] 設定を切り替えて、視覚的な奥行きのために影効果を追加します。
設定を調整したら、右上の 「保存」 をクリックして変更を適用します。

コースページの保存とプレビュー

作業内容の保存

ページエディターで、右上隅にある [保存] ボタンを見つけます。
コースページに変更を加えたら 、[保存] をクリックします。
保存の確認を待って、更新が確実に保存されていることを確認します。

コースページのプレビュー

ページエディタで、「**保存」ボタンの横にある「プレビュー」**アイコンをクリックします。
新しいタブが開き、コースページの ライブプレビュー が表示されます。
書式設定の問題、リンク切れ、デザインの不一致がないか確認してください。
編集を続行する準備ができたら、プレビュータブを閉じます。

モジュールやレッスンなどの動的コンテンツをプレビューで表示するには、まずコースを公開する必要があります。コースがまだ下書きモードの場合、これらの要素は表示されません。また、動的セクションにコンテンツが添付されていない場合、公開後も非表示のままになります。詳細な手順については、 Getting Started with Courses の記事を参照してください。
重要
一部のコースページでは、モジュール、レッスン、またはページに自動的に取り込まれる要素などの 動的コンテンツ が使用されます。
- コースページに 動的コンテンツ が含まれているが、まだ何も追加されていない場合(レッスンのないモジュールなど)、そのセクションはプレビューに 表示されません 。
- 動的要素はコンテンツがアタッチされている場合にのみ表示されるため、これは予期される動作です。
- 動的コンテンツがどのように表示されるかを確認するには、プレビューする前に、少なくとも 1 つのモジュール、レッスン、または項目を追加していることを確認してください。

詳細については、 Page Editor: Saving and Previewing Your Workを参照してください。