お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

適切に設計されたアカデミーのWebサイトは、認知度、信頼性、エンゲージメントを高めます。また、ブランドアイデンティティを表現し、訪問者にミッションやビジョンを伝える役割も果たします。この記事では、アカデミーのWebサイトを作成する手順を説明します。

このサイトエディターは、2024年12月16日以降に作成されたアカデミーでのみ利用できます。それ以前に作成されたアカデミーについては、こちらのヘルプ記事を参照してください。

Webサイトの作成

1. 左ペインの下部にある［アカデミーサイトを作成］をクリックします。既存のテンプレートを含むテンプレート画面が表示されます。
   
2. アイデアやコンテンツを最も効果的に紹介できるテンプレートにカーソルを合わせます。
   
3. 選択したテンプレートがWebサイトとしてどのように表示されるかを確認するには、サイトの［プレビュー］をクリックします。
   
4. テンプレートを選択するには、［選択］をクリックします。
   

テンプレートを選択した後、セクション、要素、ウィジェットを追加してWebサイトをさらにカスタマイズできます。これらのコンポーネントをWebサイトに追加する手順を見ていきましょう。

セクション

セクションの追加

1. Webサイトビルダーの上部メニューにある［+ 挿入］をクリックします。
   
2. ［セクション］を選択します。次のカテゴリーがオプション一覧とともに表示されます。
   ［すべて］
   ［見出し］
   ［画像］
   ［アイコン］
   ［ボックス］
   ［タブ］
   ［アコーディオン］
   ［カルーセル］
   ［地図］
   ［ニュースレター］
3. Webサイトビルダー上で、任意のオプションをドラッグ＆ドロップします。
   

また、コンテンツ領域にカーソルを合わせ、［+ セクションを追加］をクリックして、Webサイトにセクションを追加することもできます。

セクションのカスタマイズ

［一般］：セクションの背景の種類、色、テーマを変更します。
［シェイパー］：セクションにパターンを追加します。このパターンはセクションの背景として表示されます。
［トポグラフィ］：セクションに枠線と余白を追加します。
［アニメーション］：Webサイトの読み込み時にセクションを表示するアニメーションを追加します。
［CSS］：独自のCSSコードを記述してサイトをカスタマイズします。
［セクションの表示設定］：デバイスごとにWebサイトの各部分の表示／非表示を切り替えます。
［JS］：独自のJavaScript関数を記述してサイトをカスタマイズします。

［削除］：セクションを削除します。  

要素

要素は、Webサイトの構造を作成し、一貫性のあるユーザー体験に貢献する個々のコンポーネントです。

要素の追加

1. Webサイトビルダーの上部メニューにある［+ 挿入］をクリックします。
   
2. 要素オプションを選択します。
   
3. Webサイトビルダー上で、任意の要素をドラッグ＆ドロップします。
   要素の下に次のオプションが表示されます。
   ［テキスト］：見出し、段落
   ［ボタン］：ボタン、アイコン付きボタン、サインアップボタン
   ［画像］：画像、テキスト付き画像、見出しとテキスト付き画像
   ［アイコン］：アイコン、見出し付きアイコン、見出しとテキスト付きアイコン
   ［コンテンツ］：カルーセル、タブ、アコーディオン
   ［コンテナー］：ボックス、行
   ［区切り線］：区切り線、アイコン付き区切り線、テキスト付き区切り線、スペーサー
   ［その他］：Google Maps、オーディオ、動画、テーブル、埋め込みiframe、コードスニペット、ニュースレター、メニュー、ソーシャルプロフィール。

要素は、行と列の2つの区分に分類できます。

また、コンテンツ領域にカーソルを合わせ、要素領域の下部にある［+ 要素を追加］をクリックして、Webサイトに要素を追加することもできます。

［タイポグラフィ］：要素に枠線と余白を追加します。

［アニメーション］：要素にアニメーションを追加します。

［CSS］：CSSコードを記述してサイトをカスタマイズします。

［セクションの表示設定］：デバイスごとにWebサイトの各部分の表示／非表示を切り替えます。

［JS］：独自のJavaScript関数を記述してサイトをカスタマイズします。

各要素には、次の追加設定が表示されます。
［ボタン］の場合：

［一般］：配置、種類、サイズ、スタイル、ボタンラベルをカスタマイズします。

［リンクの変更］：このオプションを使用して、ボタンのリンクを設定または変更します。

［画像］の場合：

［一般］：画像の変更、配置の調整、テキストの追加を行います。

［リンク］：選択した画像にリンクを割り当てます。

［キャプション］：画像のキャプションを追加、カスタマイズします。

［アイコン］の場合：

上記の設定に加え、ライブラリーまたはファイルからアイコンを選択し、配置、サイズ、スタイル、色をカスタマイズできます。

［コンテナー］の場合：

［ボックス］：固定表示を有効にするオプションがあります。

［行］：要素の配置比率を調整する設定が表示されます。

［区切り線］の場合：

［アイコン付き区切り線］：

［一般］：ライブラリーやファイルからアイコンを選択して変更します。

［スタイル］：配置、サイズ、スタイル、アイコンの色、線の色をカスタマイズします。

［テキスト付き区切り線］：［一般］：配置、スタイル、二重線、区切り線のテキストを調整します。

［スタイル］：テキストスタイル、アイコンの色、テキストの色、線の色をカスタマイズします。

要素が［区切り線］：［スペーサー］の場合、［表示設定］タブと［JS］タブのみが表示されます。

［削除］：要素を削除します。

ウィジェット

ウィジェットは、コースやライブワークショップなどのアプリケーションに簡単にアクセスできるよう、Webサイトに埋め込まれるインタラクティブな要素です。ユーザーエンゲージメントを高め、使いやすさを向上させるための柔軟なカスタマイズを可能にします。

ウィジェットの追加

1. Webサイトの上部メニューにある［+ 挿入］をクリックします。
   
2. ウィジェットオプションを選択します。
   次のオプションが表示されます。
   ［すべてのコース］
   ［すべてのライブワークショップ］
   ［特定の商品の表示］
   ［おすすめコース］
   ［おすすめライブワークショップ］
   ［カスタムフォーム］
   
3. Webサイトビルダー上で、任意のウィジェットをドラッグ＆ドロップします。
   

ウィジェットのカスタマイズ

Webサイトのウィジェットをカスタマイズできます。

ウィジェット領域にカーソルを合わせます。
ウィジェット領域の左上に、次のウィジェットカスタマイズオプションが表示されます。
［移動］：ウィジェットを任意の場所にドラッグ＆ドロップします。
［設定］：設定画面に次のタブが表示されます。

      ［レイアウト］：表示されたレイアウトから任意のレイアウトを選択します。

      ［設定］：並べ替え条件と1ページあたりの商品数に基づいて、商品の表示方法を選択します。

1. 特定の商品表示ウィジェットでは、［商品］タブと［レイアウト］タブが表示されます。
   ［商品］タブで、［商品を追加］ボタンをクリックします。任意のコースとライブセッションを選択します。
   ［レイアウト］タブで、表示されたレイアウトから任意のレイアウトを選択します。
   
2. ［カスタムフォーム］では、［フォームを選択］ドロップダウンのみが表示されます。

［削除］：選択したウィジェットを削除するには、［削除］アイコンをクリックします。