LPを作成して公開する
オンクラスでは、講座販売のためのLP（Landing Page）構築機能を提供しています。
あらかじめ用意されたテンプレートを利用し、提供する講座に合わせてテキストや画像を変更するだけで簡単に作成することができます。
目次
新しくLPを作成する方法
- オンクラスの講師ページにログインし、左側のメニューから、「LP構築」をクリックしたあと、「テンプレート構築」を選択します。
- 「＋新規LP作成」ボタンをクリックします。
- 利用できるテンプレートの一覧が表示されるので、利用したいテンプレートが決まったら、「利用する」ボタンをクリックします。
「プレビュー」ボタンをクリックすると、テンプレートが別のウィンドウで表示され、全体のデザインを確認することができます。
- 表示された画面で、LPの名前を入力し、「作成」をクリックします。
このLPの名前は管理用のため、公開ページには表示されません。
- 表示されたテンプレートのテキストや画像を変更します。詳しい操作方法は、「編集画面の操作方法」を参照してください。
- 編集した内容を保存する場合は、「保存」ボタンをクリックします。公開する場合は、「公開」ボタンをクリックします。
- 公開したときは、LPのURLが表示されます。コピーして、受講生様へのご案内時などにご利用ください。
編集画面の操作方法
1. 編集画面の全体構成
| エリア番号 | エリア名 | 役割 |
|---|---|---|
| ❶ | ヘッダーエリア | LP全体に対する操作を行うボタンが並んでいます。 |
| ❷ | ツールバーエリア | 表示デバイスの切り替え（PC／SP）、操作の取り消し・やり直しのアイコンが並んでいます。 |
| ❸ | 編集エリア | LPのコンテンツを直接編集するエリアです。 |
💡 編集エリア内の各要素をクリックしたり、テキストを選択すると、 状況に応じて追加のボタンやツールバーが表示されます。
2. ページ全体の操作（ヘッダーエリア）
2.1 ページ管理ボタン
| No. | ボタン名 | 説明 |
|---|---|---|
| ① | ページ設定 | LPのメタ情報（OGP画像、ページタイトル、説明文など）を設定します。公開後のSNSシェア時の表示などに影響します。 |
| ② | 保存 | 編集中の内容を一時保存します。保存しただけでは公開ページに反映されません。 |
| ③ | 公開 | LPを公開し、アクセスできる状態にします。公開ボタンクリック後に、LPのURLが表示されます。 |
| ④ | プレビュー | 編集中のLPを別ウィンドウで表示し、公開時の見え方を確認できます。 |
⚠ 注意
「保存」は編集内容の一時保存です。受講生に見えるページには反映されません。 「公開」をクリックすると、保存済みの内容がそのまま受講生に公開されます。 詳しくは「5.1 保存と公開の違い」を参照してください。
2.2 表示切替・操作履歴ボタン
| No. | ボタン名 | 説明 |
|---|---|---|
| ⑤ | PC表示 | 編集エリアをPC画面の幅で表示します。 |
| ⑥ | SP表示 | 編集エリアをスマートフォン画面の幅で表示します。 |
| ⑦ | 元に戻す | 直前の操作を取り消します。 |
| ⑧ | やり直す | 「元に戻す」で取り消した操作を再度実行します。 |
⚠ 注意
「PC」「SP」ボタンは、編集エリアの表示幅を切り替えるだけの機能です。 LPの内容（テキストや画像）が変更されることはありません。 スマートフォンで閲覧するユーザーにどのように表示されるかを、編集しながら確認するために使用します。
3. 要素（ブロック）単位の操作方法
3.1 要素の選択方法
LP編集画面は、ヘッダー画像、見出しテキスト、本文、ボタンなど、複数の「要素（ブロック）」で構成されています。 各要素を編集するには、まず編集したい要素をクリックして選択します。
要素をクリックすると、その要素が青い枠線で囲まれ、周囲に操作アイコンが表示されます。
3.2 要素操作アイコン一覧
要素を選択すると表示される操作アイコンの一覧です。
| No. | アイコン名 | 説明 |
|---|---|---|
| ⑨ | 複製 | 選択中の要素を複製し、直下に同じ要素を追加します。 |
| ⑩ | 削除 | 選択中の要素を削除します。 |
| ⑪ | 上に移動 | 選択中の要素をひとつ上の位置に移動します。 |
| ⑫ | 下に移動 | 選択中の要素をひとつ下の位置に移動します。 |
3.3 要素の種類ごとの編集
要素にはいくつかの種類があり、選択したときに表示される編集メニューが異なります。
テキスト要素の場合
テキスト要素をクリックすると、テキストを直接編集できる状態になります。 テキストを選択（ドラッグ）すると、文字装飾ツールバーが表示されます。
画像要素の場合
画像要素をクリックすると、画像の差し替えや設定を行うことができます。
CTAボタン要素の場合
CTAボタン要素をクリックすると、ボタンのテキストやリンク先を編集できます。
4. テキスト装飾ツール
4.1 ツールバーの表示方法
テキスト要素内の文字列を選択すると、選択範囲の上部にテキスト装飾ツールバーが表示されます。
このツールバーは、選択した文字列の見た目を変更するためのものです。 ツールバーの各ボタンは、選択中のテキストにのみ適用されます。
4.2 各ボタンの機能一覧
| No. | ボタン名 | 説明 |
|---|---|---|
| ⑬ | 太字 | 選択中のテキストを太字にします。 |
| ⑭ | 斜体 | 選択中のテキストを斜体にします。 |
| ⑮ | 下線 | 選択中のテキストに下線を追加します。 |
| ⑯ | 取り消し線 | 選択中のテキストに取り消し線を追加します。 |
| ⑰ | 左揃え | テキストを左揃えにします。 |
| ⑱ | 中央揃え | テキストを中央揃えにします。 |
| ⑲ | 右揃え | テキストを右揃えにします。 |
| ⑳ | 文字色 | 選択中のテキストの文字色を変更します。▼をクリックするとカラーパレットが表示されます。 |
| ㉑ | 背景色 | 選択中のテキストの背景色（ハイライト）を変更します。 |
| ㉒ | グラデーション | 選択中のテキストにグラデーション効果を適用します。 |
| ㉓ | リンク | 選択中のテキストにリンクを設定します。クリックするとURL入力欄が表示されます。 |
| ㉔ | フォント種類 | 選択中のテキストのフォントの種類を選択します。 |
| ㉕ | フォントサイズ | 選択中のテキストのサイズを変更します。 |
| ㉖ | 文字間隔 | 選択中のテキストの文字間隔（字送り）を調整します。 |
5. 編集時の注意事項
5.1 「保存」と「公開」の違い
| 保存 | 公開 | |
|---|---|---|
| 目的 | 編集中の内容を一時的に保存する | LPを受講生に公開する |
| ユーザーへの影響 | なし（表示されているページは変わらない） | あり（公開ページに即時反映される） |
| 利用場面 | 編集の途中で作業を中断するとき | 内容を確定してユーザーに見せるとき |
| 取り消し | 保存後も編集画面で変更可能 | 公開後に非公開にする操作については「LPの公開設定」を参照 |
💡 編集中はこまめに「保存」をクリックし、内容を確定したら「公開」をクリックしてください。 「保存」しないまま画面を離れると、編集内容が失われる可能性があります。
5.2 「PC／SP切替」と「プレビュー」の違い
| PC／SP切替 | プレビュー | |
|---|---|---|
| 場所 | 編集画面内（ヘッダー直下） | 別ウィンドウで開く |
| 目的 | PC・スマートフォンそれぞれの表示幅での見え方を編集しながら確認する | 公開時の完成イメージを通しで確認する |
| 編集の可否 | そのまま編集を続行できる | 閲覧専用（編集はできない） |
| おすすめの使い方 | テキストや画像を変更するたびに、SP表示に切り替えてレイアウト崩れがないか確認する | 一通りの編集が完了した後、最終チェックとして使用する |
💡 PC／SP切替はあくまで編集画面内の表示幅を変えるだけで、LPの内容は変更されません。 「SP」ボタンを押してもスマートフォン用の別ページが作成されるわけではありません。