サイドバーとは
スマホでは全画面のスワイプLPですが、PC(横長画面)で開くと、LP本体の左右にパネルが表示されます。これがサイドバーです。
┌─────────────┬──────────────┬─────────────┐
│ 左パネル │ │ 右パネル │
│ │ LP本体 │ │
│ タイトル │ (縦スクロール)│ 動画パネル │
│ キャッチコピー │ │ タイトル │
│ │ │ 補足テキスト │
│ [CTAボタン] │ │ │
└─────────────┴──────────────┴─────────────┘
PCの広い画面を活かして、スクロール中も常にキャッチコピーと申し込みボタンが見えている状態を作れます。
左パネル(キャッチコピー+CTA)の設定
左パネルの内容はLP設定から自動で反映されます。チャットで変更できます。
| 表示内容 | 変更方法(チャットでの言い方) |
|---|---|
| キャッチコピー | 「キャッチコピーを『◯◯』に変えて」 |
| CTAボタンの文言 | 「ボタンの文字を『無料相談はこちら』にして」 |
| CTAボタンのリンク先 | 「申し込みURLを https://… に変えて」 |
💡 キャッチコピーの改行位置も指定できます:「キャッチコピーを『その腰痛、(改行)あきらめないで』にして」
右パネル(動画)の設定
右パネルには動画を表示できます。代表挨拶・施術風景・お客様の声動画などに効果的です。
手順
- LPの「⚙️ 設定」を開く
- 「サイドバー動画(PC表示)」セクションへ
- 以下を入力して保存します:
| 項目 | 内容 |
|---|---|
| 動画URL | YouTube / Vimeo / mp4 のURL |
| パネルタイトル | 動画上の見出し(例:「30秒でわかるサービス紹介」) |
| 補足テキスト | 動画下の説明文 |
💡 動画を設定しない場合、右パネルはシンプルな表示になります。なくても問題ありません。
サイドバーの見た目を微調整する
文字サイズや余白などは、チャットで頼めばCSSで調整されます(画像の再生成は不要・即時反映)。
サイドバーのキャッチコピーの文字を少し小さくして
サイドバーのボタンの文字が途中で折り返さないようにして
サイドバーの文字色をもう少し濃くして
よくある質問
Q. スマホでサイドバーはどこに出る? スマホでは表示されません(画面が狭いため)。代わりに画面下部に固定の申し込みボタンが表示されます。
Q. サイドバーの背景色は変えられる? LP全体のテーマカラー(背景色)に連動します。「背景色を◯◯に変えて」とチャットで伝えると、サイドバーも含めて変わります。文字色は背景の明るさに合わせて自動で読みやすい色になります。
Q. プレビューでPC表示を確認するには? LP編集画面のプレビューで「PC」モードに切り替えると、サイドバー込みの表示を確認できます。