CYHPERラーニングコンテンツビルダー

コンテンツビルダー

概要

コースの作成および編集を行う際、プラットフォームには組み込みのエディターが用意されており、講師、教師、管理者は、書式設定されたテキスト、画像、添付ファイル、リンクなどを使用して、コース内で直接コンテンツを作成できます。

このエディターでは、カラムやグリッドを使用してコンテンツページをフォーマットしたり、アコーディオン、フリップボックスなどのインタラクティブなウィジェットを追加したりすることもできます。

コースに組み込まれているエディターは、コースの各セクションからアクセスできます。この記事では、エディターのさまざまな要素にアクセスして使用し、魅力的で美しい学習コンテンツを作成する方法を解説します。

情報
ビジネスプラットフォームではデフォルトで「コース」という用語が使用され、アカデミアプラットフォームではデフォルトで「クラス」という用語が使用されることにご注意ください。この記事では、 「コース」と「クラス」という用語は同義語として扱われます。

エディターへのアクセス

コース内のページを編集しているときはいつでも、エディターが表示されます。

既存のコースでエディターにアクセスするには：
  1. 既存のコースにアクセスしてください。
  2. モジュール／レッスンをクリックしてください。
  3. 「セクションを追加」をクリックして新しいセクションを追加するか、既存のセクションを選択してください。
  4. ページをクリックしてください。
  5. ページにタイトルを追加してください。
  6. 「保存」をクリックしてください。
  7. 「編集」をクリックします。
情報
新しいコースを作成する方法については、 「講師向けコースとクラス」の記事の「コースの追加」セクションをご覧ください。


編集ページには、複数のメニューとツールが表示されます。
  1. 上部メニュー：上部メニューでは、セクションのタイトルを編集したり、表示モードをエディターとプレビューの間で切り替えたり、変更を保存またはキャンセルしたりできます。
    1. デフォルトでは、ページはエディターモードで表示され、コンテンツを積極的に編集できます。保存する前にコンテンツをプレビューするには、 「プレビュー」をクリックしてください。
  2. コンテンツビルダーメニュー：コンテンツビルダーメニューはエディターの左側に表示されます。このメニューを使用すると、レイアウトやコンテンツウィジェットをページにドラッグ＆ドロップできます。レイアウトとコンテンツウィジェットについては、この記事でさらに詳しく説明します。
    1. コンテンツビルダーメニューは矢印を使って折りたたんだり展開したりできることに注意してください。 アウトラインボタンの横にあるアイコンをクリックすると、ページ上にコンテンツを作成するための追加スペースが確保されます。
  3. ツールバー：ツールバーには、テキストのカスタマイズ、画像やリンクの追加など、さまざまな書式設定ツールが用意されています。ツールバーの機能については、この記事でさらに詳しく説明します。
  4. ページまたはキャンバス：キャンバスは、テキスト、画像、ウィジェットを追加してページコンテンツを作成する場所です。
情報
コンテンツビルダー機能を備えた新しいエディターは、2026年4月1日までご利用いただけませんのでご注意ください。



コンテンツビルダーメニュー

コンテンツビルダーメニューを使用すると、レイアウトウィジェットとコンテンツウィジェットをキャンバスに追加できます。コンテンツビルダーメニューは、次の3つのセクションで構成されています。
  1. コンテンツビルダーモード：コンテンツビルダーメニューのデフォルトは「ウィジェット」です。ここでは、キャンバスに追加できるレイアウトウィジェットとコンテンツウィジェットを選択できます。キャンバスにウィジェットを追加したら、 「アウトライン」をクリックして追加したウィジェットの順序を確認できます。「アウトライン」タブを使用すると、ウィジェットの順序をすばやく簡単に変更できます。
  2. レイアウト：レイアウトセクションには、グリッドウィジェットとカラムウィジェットが含まれています。これらのウィジェットを使用すると、編集可能なグリッドまたはカラムセットをコンテンツに追加できます。
  3. コンテンツ：コンテンツセクションには、アコーディオン、タブ、カードなど、コンテンツにインタラクティブ性と視覚的な魅力を加えることができるさまざまなウィジェットが含まれています。これらのコンテンツウィジェットをキャンバスに追加して、学習コンテンツに合わせてウィジェットをカスタマイズできます。さらに、コンテンツウィジェットはレイアウトウィジェット内に配置することも可能です。たとえば、列の各セクションにフリップボックスウィジェットを追加して、フリップボックスのインタラクションを1行にまとめることができます。

レイアウト：グリッド

レイアウトセクションには、グリッドと列の2つのウィジェットが含まれています。キャンバス上にカスタマイズ可能なグリッドを作成するには：
  1. キャンバス上にカーソルを置き、グリッドボタンをクリックします。
  2. または、グリッドウィジェットをキャンバスにドラッグアンドドロップします。


グリッドウィジェットは、デフォルトでは2列2行を表示します。
  1. 列と行のドロップダウンメニューを使用して、グリッドのレイアウトを定義します。最大で4列、4行まで選択できます。
  2. 列と行の間隔は、 「間隔」ドロップダウンメニューを使用して調整できます。 「小」 「中」 「大」 「特大」から選択してください。
  3. 垂直方向の配置垂直方向の配置アイコンこのボタンを使用すると、グリッドセクション内のテキストと画像の垂直方向の配置を、上、中央、下のいずれかから選択できます。
  4. 「行を追加」をクリックすると、最大4行まで行を追加できます。
  5. 「列を追加」をクリックすると、最大4列まで列を追加できます。
  6. 行または列を削除するには、 「行の削除」または「列の削除」をクリックします。
グリッド内にコンテンツを追加するには：
  1. グリッド内のセクションをクリックして、コンテンツの追加を開始します。
  2. ツールバーを使用して、テキストの書式設定、画像、リンク、さらには動画の追加を行うことができます。
    1. ツールバーについては、この記事の後半で詳しく説明しますので、そちらをご覧ください。
  3. グリッドセクション内にコンテンツウィジェットを追加できます。
    1. 例えば、グリッドの各セクション内にフリップボックスを配置することができます。
  4. いつでも「プレビュー」をクリックしてコンテンツをプレビューできます。
    1. 編集モードに戻るには、 「エディター」をクリックしてください。

レイアウト：列

ページにカスタマイズ可能な列を作成するには：
  1. キャンバス上にカーソルを置き、 「列」ボタンをクリックします。
  2. または、 Columnウィジェットをキャンバスにドラッグアンドドロップします。


列ウィジェットは、デフォルトでは2つの列を表示します。
  1. 「列数」ドロップダウンメニューを使用して、列数を選択してください。最大4列まで選択できます。
  2. 列間の間隔は、 「間隔」ドロップダウンメニューを使用して調整できます。 「小」 「中」 「大」 「特大」から選択してください。
  3. 方向ドロップダウンを使用して、水平方向または垂直方向の列を作成します。
  4. 垂直方向の配置垂直方向の配置アイコンこのボタンを使用すると、列内のテキストと画像の垂直方向の配置を、上、中央、下のいずれかから選択できます。
  5. 「列を追加」をクリックすると、最大4列まで列を追加できます。
  6. 列を削除するには、 「列の削除」をクリックします。
列内にコンテンツを追加するには：
  1. 列内をクリックしてコンテンツの追加を開始します。
  2. ツールバーを使用して、テキストの書式設定、画像、リンク、さらには動画の追加を行うことができます。
    1. ツールバーについては、この記事の後半で詳しく説明します。
  3. 列内にコンテンツウィジェットを追加できます。
    1. 例えば、カードウィジェットを列の中に配置することができます。
  4. いつでも「プレビュー」をクリックしてコンテンツをプレビューできます。
    1. 編集モードに戻るには、 「エディター」をクリックしてください。

コンテンツウィジェット

コンテンツセクションには、アコーディオン、タブ、カード、コールアウトテキスト、引用、フリップボックスの6つのウィジェットが含まれています。キャンバスにウィジェットを追加するには：
  1. キャンバス上にカーソルを置き、コンテンツウィジェットをクリックします。
  2. または、コンテンツウィジェットをキャンバスにドラッグアンドドロップします。
  3. キャンバス上には複数のコンテンツウィジェットを重ねて配置できます。
  4. グリッドまたはカラムセクション内に、任意のコンテンツウィジェットを配置することもできます。
    1. 例えば、フリップボックスをグループ化したい場合は、まずグリッドを追加し、次に各グリッドセクションにフリップボックスウィジェットを配置します。


ウィジェットをキャンバスに追加すると、さまざまな方法で移動したり、並べ替えたりできます。ウィジェットの並べ替えを行うには：
  1. コンテンツビルダーメニューの「アウトライン」をクリックすると、キャンバスに現在追加されているウィジェットの一覧が表示されます。
    1. 一覧表示されているウィジェットの上下矢印を使用して、キャンバス上のウィジェットの順序を変更します。
  2. キャンバス上の各ウィジェットには、ウィジェットの右上隅に小さなメニューも備わっています。
    1. 上下の矢印キーを使用して、キャンバス上のウィジェットの順序を変更します。
  3. ウィジェットをキャンバス上にドラッグアンドドロップすることもできます。 並べ替えアイコンウィジェットの左側にあるアイコンをクリックし、ウィジェットを新しい場所にドラッグします。


ページ上のウィジェットはどれでも削除または複製できます。ウィジェットを削除または複製するには：
  1. ウィジェットの右上隅にある3つの点アイコンをクリックすると、小さなメニューが表示されます。
  2. ウィジェットを削除するには、 「削除」をクリックしてください。
  3. 「複製」をクリックすると、ウィジェットが複製されます。ウィジェットに追加したコンテンツはすべて、複製されたウィジェットにも含まれます。

コンテンツウィジェット：アコーディオン

アコーディオンは、コンテンツのセクションを積み重ねて表示し、ユーザーが各セクションを必要に応じて展開・折りたたみできるインタラクティブなウィジェットです。各セクションにはクリック可能なヘッダーがあり、クリックするとコンテンツが表示されます。キャンバスにアコーディオンを追加するには：
  1. キャンバス上にカーソルを置いて「アコーディオン」をクリックするか、コンテンツビルダーメニューからアコーディオンウィジェットをキャンバスにドラッグアンドドロップします。
デフォルトでは、アコーディオンにはヘッダーとコンテンツセクションを含む2つのセクションが表示されます。アコーディオンを設定するには：
  1. ヘッダーのプレースホルダーテキストを直接クリックすると、ヘッダーテキストを編集できます。
  2. タイトルヘッダーをクリックすると、セクションが展開され、コンテンツセクションが表示されます。
  3. コンテンツのプレースホルダーテキストを直接クリックすると、コンテンツテキストを編集できます。ツールバーを使用して、画像、リンク、または動画をコンテンツセクションに追加できます。
  4. 「アイテムを追加」をクリックすると、セクションを追加できます。アコーディオンセクションは最大10個まで追加可能です。
  5. セクションを削除するには、 「項目を削除」をクリックしてください。
情報
学習者がコンテンツを閲覧する際、デフォルトではすべてのアコーディオンセクションが閉じられることに注意してください。

コンテンツウィジェット：タブ

タブウィジェットは、関連コンテンツを個別のビュー（タブ）に整理するインタラクティブなウィジェットで、ユーザーはウィジェットを離れることなく各タブを切り替えることができます。キャンバスにタブウィジェットを追加するには：
  1. キャンバス上にカーソルを置いて「タブ」をクリックするか、コンテンツビルダーメニューから「タブ」ウィジェットをキャンバスにドラッグアンドドロップします。
デフォルトでは、ウィジェットには3つのタブが表示され、それぞれにタブのタイトルとコンテンツセクションがあります。タブウィジェットを設定するには：
  1. タブタイトルのプレースホルダーテキストを直接クリックしてください タブのタイトルテキストを編集します。
    1. タブタイトルのテキストカラーは、プラットフォームのメインアクセントカラーになりますのでご注意ください。
  2. タブコンテンツのプレースホルダーテキストを直接クリックすると、コンテンツテキストを編集できます。ツールバーを使用して、タブコンテンツに画像、リンク、または動画を追加できます。
  3. 別のタブタイトルをクリック タイトルとコンテンツを編集するタブに移動します。
  4. 「タブを追加」をクリックすると、タブを追加できます。最大8つまで追加可能です。
  5. タブを削除するには、 「タブを削除」をクリックしてください。

コンテンツウィジェット: カード

カードウィジェットは、組み込みの書式設定を適用してコンテンツをページ内で際立たせるコンテナです。カードウィジェットにはヘッダーとコンテンツが含まれます。プラットフォームのメインアクセントカラーがコンテナの左側に表示されます。キャンバスにカードウィジェットを追加するには：
  1. キャンバス上にカーソルを置いて「カード」をクリックするか、コンテンツビルダーメニューからカードウィジェットをキャンバスにドラッグアンドドロップします。
デフォルトでは、カードウィジェットにプレースホルダーテキストが表示されます。カードウィジェットを設定するには：
  1. カードヘッダーのプレースホルダーテキストを直接クリックすると、ヘッダーテキストを編集できます。
  2. カードコンテンツのプレースホルダーテキストを直接クリックすると、コンテンツテキストを編集できます。ツールバーを使用して、カードコンテンツに画像、リンク、または動画を追加できます。

コンテンツウィジェット: コールアウトテキスト

コールアウトテキストウィジェットには、さまざまな種類のコンテンツに注意を促すための4つのプリセット形式が用意されています。4つのオプションは、 「ヒント」 、 「注記」 、 「警告」 、 「例」です。キャンバスにコールアウトテキストウィジェットを追加するには：
  1. キャンバス上にカーソルを置いて「吹き出しテキスト」をクリックするか、コンテンツビルダーメニューから「吹き出しテキスト」ウィジェットをキャンバスにドラッグアンドドロップします。
デフォルトでは、プレースホルダーテキストがコールアウトテキストウィジェットに表示されます。コールアウトテキストウィジェットを設定するには：
  1. 「タイプ」ドロップダウンメニューから吹き出しの種類を選択してください。選択肢には、 「ヒント」 、 「注記」 、 「警告」 、 「例」があります。
    1. 選択したコールアウトの種類によって、ウィジェットのアウトラインと背景色が決まります。
  2. 吹き出しのプレースホルダーテキストを直接クリックすると、テキストを編集できます。ツールバーを使用して、吹き出しウィジェットに画像、リンク、または動画を追加できます。

コンテンツウィジェット：引用

引用ウィジェットには、コンテンツに引用を追加する際に使用できる3つのプリセット引用フォーマットが用意されています。3つのオプションは、クラシック、モダン、ミニマルです。キャンバスに引用ウィジェットを追加するには：
  1. キャンバス上にカーソルを置いて「引用」をクリックするか、コンテンツビルダーメニューから「引用」ウィジェットをキャンバスにドラッグアンドドロップしてください。
デフォルトでは、引用ウィジェットにプレースホルダーテキストが表示されます。引用ウィジェットを設定するには：
  1. 「タイプ」ドロップダウンメニューから見積もりタイプを選択してください。選択肢は「クラシック」「モダン」 「ミニマル」です。
    1. 選択した引用タイプによって、引用ウィジェットの書式が決まります。
  2. 引用プレースホルダーテキストを直接クリックしてください テキストを編集するには、ツールバーを使用して、引用ウィジェットに画像、リンク、または動画を追加できます。
  3. 引用元のプレースホルダーテキストを直接クリックすると、引用元の情報を編集できます。

コンテンツウィジェット：フリップボックス

フリップボックスウィジェットは、ユーザーがクリックすると両面がめくれるインタラクティブなカードです。フリップボックスは、フラッシュカードやQ&Aコンテンツに最適です。キャンバスにフリップボックスウィジェットを追加するには：
  1. キャンバス上にカーソルを置いて「フリップボックス」をクリックするか、フリップボックスをドラッグアンドドロップします。 コンテンツビルダーメニューからウィジェットをキャンバスに追加します。
デフォルトでは、プレースホルダーテキストを含むフリップボックスウィジェットの前面が表示されます。フリップボックスウィジェットを設定するには：
  1. カードの表面のテキストを編集するには、 「表面を編集」をクリックするか、フリップボックスのプレースホルダーテキストを直接クリックします。ツールバーを使用して、画像、リンク、またはビデオをカードに追加できます。
  2. カードの裏面のテキストを編集するには、 「裏面を編集」をクリックしてください。ツールバーを使用して、画像、リンク、または動画をカードに追加できます。
  3. コンテンツ編集中にいつでも「反転」をクリックすると、カードを反転できます。
  4. 「形状」ドロップダウンをクリックして、正方形または長方形のフリップボックスを選択します。

ツールバーメニュー

ツールバーは、ページ上およびウィジェット内のコンテンツを編集できるメニューバーとアイコンで構成されています。ツールバーはHTMLエディタとも呼ばれます。詳細については、 HTMLエディタの記事をご覧ください。