サイドバーの使い方 — PC表示の左右パネルを設定する

この記事でできること

  • PC表示のサイドバーに何が表示されるか分かる
  • サイドバーの文言・動画を設定できる
  • サイドバーの見た目を微調整できる

サイドバーとは

スマホでは全画面のスワイプLPですが、PC(横長画面)で開くと、LP本体の左右にパネルが表示されます。これがサイドバーです。

┌─────────────┬──────────────┬─────────────┐
│  左パネル     │              │  右パネル     │
│             │   LP本体      │             │
│ タイトル      │  (縦スクロール)│  動画パネル   │
│ キャッチコピー │              │  タイトル     │
│             │              │  補足テキスト  │
│ [CTAボタン]  │              │             │
└─────────────┴──────────────┴─────────────┘

PCの広い画面を活かして、スクロール中も常にキャッチコピーと申し込みボタンが見えている状態を作れます。

左パネル(キャッチコピー+CTA)の設定

左パネルの内容はLP設定から自動で反映されます。チャットで変更できます。

表示内容変更方法(チャットでの言い方)
キャッチコピー「キャッチコピーを『◯◯』に変えて」
CTAボタンの文言「ボタンの文字を『無料相談はこちら』にして」
CTAボタンのリンク先「申し込みURLを https://… に変えて」

💡 キャッチコピーの改行位置も指定できます:「キャッチコピーを『その腰痛、(改行)あきらめないで』にして」

右パネル(動画)の設定

右パネルには動画を表示できます。代表挨拶・施術風景・お客様の声動画などに効果的です。

手順

  1. LPの「⚙️ 設定」を開く
  2. サイドバー動画(PC表示)」セクションへ
  3. 以下を入力して保存します:
項目内容
動画URLYouTube / Vimeo / mp4 のURL
パネルタイトル動画上の見出し(例:「30秒でわかるサービス紹介」)
補足テキスト動画下の説明文

💡 動画を設定しない場合、右パネルはシンプルな表示になります。なくても問題ありません。

サイドバーの見た目を微調整する

文字サイズや余白などは、チャットで頼めばCSSで調整されます(画像の再生成は不要・即時反映)。

サイドバーのキャッチコピーの文字を少し小さくして
サイドバーのボタンの文字が途中で折り返さないようにして
サイドバーの文字色をもう少し濃くして

よくある質問

Q. スマホでサイドバーはどこに出る? スマホでは表示されません(画面が狭いため)。代わりに画面下部に固定の申し込みボタンが表示されます。

Q. サイドバーの背景色は変えられる? LP全体のテーマカラー(背景色)に連動します。「背景色を◯◯に変えて」とチャットで伝えると、サイドバーも含めて変わります。文字色は背景の明るさに合わせて自動で読みやすい色になります。

Q. プレビューでPC表示を確認するには? LP編集画面のプレビューで「PC」モードに切り替えると、サイドバー込みの表示を確認できます。

関連記事