る一連のガイド付きレッスンを作成して、貴社の専門知識を求める訪問者に提供します。

訪問者に新しいスキルを教えたり、プロジェクトをガイドしたり、専門知識を共有したりするためのコース ページを作成します。コースへのアクセス権を販売するには、料金プランに追加します。

このガイドでは、コース ページの基本、サイトへの追加方法、コース ページのカスタマイズについて説明します。

コース ページはバージョン7.1でのみ利用可能です。

ヒント: Squarespaceウェビナーの作成および販売オンラインコースに登録すると、カリキュラムの準備、オンラインコースの構築、料金プランを利用したコースの収益化に関するガイダンスを受講できます。

コース ページの構成

コース ページは、コースの概要ページとコース内の個々のレッスン ページの2つの部分で構成されています。チャプターやプログレス バーなど、コース ページには、他にもいくつかのエレメントがあります。

ヒント: コースの概要ページとレッスン ページの両方にページ セクションを追加することで、画像、テキスト、フォームなどを含めることができます。

コースの概要ページ

コースの概要ページは、コースのトップページです。コースの説明、[コースを開始] ボタン、プログレス バー、コースのチャプターとレッスンが表示されます。コースの概要ページに、含まれるコンテンツの概要を説明するセクションを追加できます。

コースの概要ページが [ページ] パネルのメイン ナビゲーション セクションにある場合は、すべての訪問者に表示されます。

レッスン ページ

レッスン ページには、レッスンのコンテンツと [完了して続行] ボタンが表示されます。[完了して続行] をクリックすると、次のレッスンに進み、コースの概要ページのプログレス バーが更新されます。

レッスン ページは、コースにサインアップしてアカウントにログインした訪問者のみが閲覧できます。

チャプター

チャプターにはレッスン ページがあり、そのタイトルがコースの概要ページに表示されます。これらは、コース ページに追加できるオプションです。

コース ナビゲーション

コース ナビゲーション メニューには、レッスン、チャプター、進行状況、およびコースに含まれる動画の再生時間が表示されます。メニューを表示するには、訪問者はコースにサインアップして [コースを開始] ボタンをクリックする必要があります。コース ナビゲーション アイコンをクリックすると、訪問者はメニューを拡大できます。

プログレス バー

プログレス バーは、訪問者がコースをどの程度完了したかを示します。訪問者がレッスンを完了すると、プログレス バーに進捗率が表示されます。

サイトを編集している間は、プログレス バーに0%と表示されます。プログレス バーをテストするには、ページをプレビューし、コースを進め、プログレス バーが更新されるのを確認します。

コース ページを追加する

コース ページを追加する方法は次の通りです。

1. [ページ] パネルを開きます
2. コース ページを表示したいナビゲーション セクションのの横にある [+] をクリックします。
3. [コレクション] で [コース] を選択します。
4. レイアウトを選択します。
5. ページ タイトルを入力し、Enter キーを押します。

コース ページを追加すると、コースの概要ページが画面の右側に表示されます。

ヒント: コース ページ、およびページに含まれるすべてのレッスンを複製できます。これは、変更について訪問者に気づかれることなく、新しいコース コンテンツを作成したり、現在提供中のコース コンテンツを試したりするのに最適な方法です。

コース ページの設定

次の手順でコース ページの設定を編集して、ページをパーソナライズします。

1. コース ページ パネルで、をクリックします。
2. コース ページ固有の設定を含む、次のページ設定を変更します。
   • コース名 - ブラウザーのタブに表示されるタイトル
   • コース概要 - ページが他の場所にリンクされている際に表示される説明
3. [保存] をクリックします。

レッスンを追加する

レッスンはコースのコンテンツです。これらには、動画、画像やテキストを含むページ セクションが含まれます。1つのコース ページには、最大250個までのレッスンが追加できます。

コース ページにレッスンを追加する方法は次の通りです。

1. [ページ] パネルを開きます
2. レッスンを作成するコース ページをクリックします。
3. コース ページ パネルで、[コース コンテンツ] をクリックし、[+] をクリックします。
4. ドロップダウン メニューで、[レッスン] を選択します。
5. [一般] タブで、レッスンのタイトルを入力します。タイトルは200文字以下にする必要があります。次のオプション機能を追加、編集することもできます。
   • 抜粋 - レッスンの簡単な説明。これはコースの概要ページと概要ブロックに表示されます。説明は500文字以下にすることをおすすめします。
   • カスタムURL - レッスンのタイトルに関連したURLを割り当てます。このURLは編集可能です。
   • サムネイル - レッスンを象徴する画像を追加します。これは、コースの概要ページ、コース ナビゲーション メニュー、および概要ブロックに表示されます。コース ナビゲーション メニューでは、サムネイルの上に再生のシンボルが表示されます。
6. [動画] タブでは、レッスンに動画を追加することができます。レッスンに動画が含まれていない場合や、レッスンの上部をページ セクションにしたい場合は、[レッスン動画を表示] をオフに切り替えます。
7. レッスンに動画が含まれている場合は、[動画を追加] をクリックして、次の操作を行います。
   • 動画ファイルをサイトに直接アップロードするには、[ファイルをアップロード] をクリックします
   • 以前にアップロードした動画を再利用するには、[ライブラリーから選択] をクリックします。
   • 外部でホストされている動画を埋め込むには、[リンクから追加] をクリックし、VimeoもしくはYouTubeの動画のリンクを貼り付けます。
8. [ステータス] タブで、[公開] もしくはレッスンを公開するように [スケジュール] をクリックします。レッスンを [下書き] として保存し、作業を続けることもできます。
9. [保存] をクリックします。
10. 左上の [編集] をクリックし、レッスンのコンテンツを含むページ セクションを追加します。

ヒント: 画像のベストプラクティスを確認して、魅力的なサムネイル画像を作成してください。

レッスン ページ動画

レッスン ページ動画は、ページ上部にバナーのように表示されます。各レッスン ページに1つのレッスン ページ動画を追加できます。さらに動画を追加するには、ページ上のブロック エリアに動画ブロックを追加します。

レッスン ページ作成の際に動画を追加しなかった場合は、次の手順に従って既存のレッスン ページにレッスン ページ動画を追加できます。

1. [ページ] パネルを開き、コース ページをクリックします。
2. [コース コンテンツ] をクリックします。
3. 動画を追加するレッスンにカーソルを合わせ、[...] をクリックし、[レッスンを編集] をクリックします。
4. [動画] をクリックし、[動画を追加] をクリックして、動画のアップロードや、以前にライブラリにアップロードした動画の追加、サードパーティー サービスの動画の埋め込みを行います。
5. [保存] をクリックします。

ヒント: 動画のアクセシビリティに関するヒントを確認して、オーディエンス全員が閲覧できるコースのコンテンツを作成しましょう。

アイキャッチ画像のカスタマイズ

動画をアップロードする場合は、動画が再生される前に表示されるカスタム アイキャッチ画像を追加できます。

カスタム アイキャッチ画像を追加する方法は次の通りです。

1. 動画がアップロードされたら、[カスタム アイキャッチ画像] のトグルをオンに切り替えます。
2. [画像を追加] をクリックします。

このオプションは、Squarespaceにアップロードされた動画に対してのみ使用できることに注意してください。埋め込まれたYouTubeやVimeo動画は、サードパーティーのサービスからアイキャッチ画像を取得します。

レッスン ページの動画ストレージの制限

レッスン ページの [動画] タブに追加される動画は、ストレージの許す限り最長3時間まで保存できます。動画の要件の詳細については、[サイトに動画を追加する] をご参照ください。

すべてのSquarespaceサイトには、すべてのページやアップロードされた動画に対して30分の動画ストレージが付属しています。さらに多くの動画ストレージが必要な場合は、Digital Productsプランの購入を検討してください。

チャプターを追加する (任意)

チャプターはレッスンをグループ化することでコースのコンテンツを整理するのに役立ちます。視覚的に、チャプターで類似したレッスンや連続したレッスンをまとめることができます。チャプターには、最大250個までのレッスンが追加できます。

コース ページにチャプターを追加する方法は次の通りです。

1. コース ページ パネルで、[コース コンテンツ] をクリックし、[+] をクリックします。
2. ドロップダウン メニューから、[チャプター] を選択します。
3. これにより、新規チャプターがコース ページ パネルに表示されます。[新規チャプター] にカーソルを合わせて […] をクリックし、チャプターのタイトルを入力します。チャプターのタイトルは200文字以下にする必要があります。
4. [保存] をクリックします。
5. レッスンをクリックしてチャプターにドラッグします。

レッスンやチャプターを整理する

レッスンとチャプターは、コース ページ パネルに表示されている順番でコースの概要ページに表示されます。レッスンをクリックして。チャプター内やチャプター外にドラッグしたり、ドラッグで順番を変えたりすることができます。チャプターもクリックしてドラッグすれば、順番を変えることができます。

コース ページのスタイルを設定する

コース ページの色とフォントは、サイト全体のフォントと色の微調整オプションに従います。コースの概要ページもしくはレッスン ページのスタイル設定にアクセスする方法は次の通りです。

1. コースの概要ページもしくはレッスンで [編集] をクリックします。
2. [レイアウトを編集] をクリックして、コース概要もしくはレッスン ページのスタイル設定を開きます。

コース概要のスタイルを設定する

[レイアウトを編集] をクリックしてコース概要のスタイル設定を開くと、次を実行できます。

1. [エレメント] タブのトグルを使用して、コースの概要ページでどのエレメントを表示または非表示にするかを選択します。オプションには、[コース タイトル]、[コースの説明]、[コース ボタン]、[レッスン サムネイル]、および [レッスンの抜粋] が含まれます。
2. [デザイン] タブでは、コース概要の間隔、配置、ボタン スタイル、レイアウトなどを変更できます。
3. [デザイン] の [レイアウト] で、[リスト] もしくは [グリッド] を選択します。リスト レイアウトでは、レッスンが縦方向のリストとして1列に表示されます。グリッド レイアウトでは、グリッドが作成され、レッスンは行で表示されます。
4. [色] タブで、コース概要のカラー テーマを選択します。

リスト レイアウトとグリッド レイアウトには、それぞれ異なるスタイル オプションがあることに注意してください。たとえば、リスト レイアウトではレッスンのサムネイルの縦横比を変更できますが、グリッド レイアウトでは変更できません。

レッスン ページのスタイルを設定する

[レイアウトを編集] をクリックし、レッスン ページのスタイル設定を開くと、次を実行できます。

1. [エレメント] タブのトグルを使用して、コース タイトル、コースの説明、コース ボタン、レッスン サムネイル、およびレッスンの抜粋を表示します。
2. [デザイン] タブでは、コース ヘッダーのスタイル、ページ エレメントの間隔、配置、ボタンのスタイル、レッスン ページのサムネイル表示、セクション スタイル、およびコース概要を設定できます。レッスン ページのセクション間の仕切りを有効にしてスタイルを設定することもできます。
3. [色] タブで、レッスン ページのカラー テーマを選択します。

レッスン ページの追加のスタイル オプション

コースが進行中の場合、さらに多くのスタイル設定を使用できます。これらの設定にアクセスするには、次の手順に従ってください。

1. スタイルを設定するレッスン ページで、[コースを開始] または [コースを継続] をクリックします。
2. [編集] をクリックし、[レイアウトを編集] をクリックします。
3. [デザイン] タブで、デスクトップのボタン設定、モバイルのボタン設定、コース ナビゲーション、レッスン エレメント、および仕切りのスタイルを設定します。

スタイルを変更すると、コース ページ内のすべてのレッスン ページに影響します。これは、レッスン ページ間におけるスタイルとデザインの一貫性を確保するためです。

コース ページへのアクセス権を販売する

料金プランを使って、コースへのアクセス権を販売できます。無料の料金プランを提示して訪問者にメールアドレスの提供を求めることもできます。

料金プランにコース ページを追加する場合、コース ページ全体、もしくはレッスン ページのみを有料にすることができます。レッスン ページのみを有料にした場合、サイトのすべての訪問者がコースの概要ページにアクセスできるようになります。

レッスン ページを有料にした場合は、まだ料金プランに登録していない訪問者に、特定のレッスンへのアクセスを許可することができます。これを行うには、サイド パネルのレッスンにカーソルを合わせて [...] をクリックし、[公開プレビューとして設定] をクリックします。コースの概要ページ全体をペイウォールの後ろに隠した場合、公開プレビューに設定されたレッスンを訪問者は閲覧できません。

ヒント: コースの概要ページにデジタル商品ブロックを追加して、訪問者にサインアップを促しましょう。