Landing Page Builder
Landing Page Builderは、コーディングの知識なしでランディングページをカスタマイズできるビジュアルのドラッグ＆ドロップエディターです。色、テキスト、画像、レイアウト — すべてポイント＆クリックで変更できます。
Watch the Video Tutorial
Accessing the Builder
ビルダーを開く方法は2つあります：
Method 1: From Settings
- SaaS Management → SuperAdmin Settings → Landing Page Settingsに移動
- **「Customize with builder」**をクリック
Method 2: From Sidebar
- SaaS Management → Landing Page Builderに移動
Builder Interface
Landing Page Builder — 左にページ、中央にビジュアルエディター、右にプロパティ
ビルダーには3つの主要エリアがあります：
| Area | Location | What It Does |
|---|---|---|
| Pages & Sections Panel | 左側 | テーマを閲覧、セクションを追加、ページを管理 |
| Visual Editor | 中央 | ページを表示し、編集する要素をクリック |
| Properties Panel | 右側 | 選択した要素のコンテンツ、スタイル、設定を編集 |
Working with Themes
左パネルに利用可能なテーマが表示されます：
- SaasCandy - Modern SaaS-focused design
- Mexant - Clean and minimal
- Productly - Product showcase style
テーマをクリックして事前定義されたセクションから始め、そこからカスタマイズします。
Adding Sections
- 左パネルで**「+ Add section」**をクリック
- 利用可能なセクションタイプを閲覧：
- Hero - 見出しとCTA付きヘッダー
- Features - カードまたはリストで機能を表示
- Pricing - サブスクリプションプランを表示
- Testimonials - 顧客の声とレビュー
- Contact - お問い合わせフォームまたは情報
- Custom - 独自コンテンツ用の空白セクション
- セクションをクリックしてページに追加
- セクションをドラッグして並べ替え
Editing Elements
- ビジュアルエディターの任意の要素（テキスト、画像、ボタンなど）をクリック
- 右のProperties Panelに設定が表示される
- Properties Panelのタブ：
- Content - テキスト、画像、リンクを編集
- Style - 色、フォント、余白、枠線を変更
- Advanced - CSSクラス、アニメーション、表示設定
Managing Pages
ビルダーは複数ページをサポートします：
- Pagesセクション（左上）で**「New page +」**をクリックして追加ページを作成
- 個別の価格ページ、機能ページ、Aboutページの作成に便利
Tips for a Great Landing Page
Keep It Simple
- セクションを詰め込みすぎない — 5〜7セクションが理想的
- 各セクションは1つの明確な目的を持つ
- 余白を十分に使う
Use High-Quality Images
- デフォルト画像を自分のスクリーンショットに置き換え
- 実際のCRMインターフェースを見せる — ストック写真より実物が良い
- 一貫した画像サイズを使用
Optimize for Speed
- 画像は1枚200KB以下に
- セクションを追加しすぎない（ページ読み込み時間が重要！）
- Google PageSpeedで読み込み速度をテスト
Test on Mobile
- ビルダーでモバイルプレビューボタンをクリック
- 小さい画面ですべてのテキストが読めることを確認
- ボタンがタップしやすいことを確認
Saving Your Changes
ランディングページに満足したら：
- 「Save Page」（右上、緑のボタン）をクリック
- **「View page」**をクリックして公開版を確認
- 顧客にURLを共有！
警告
保存を忘れないで！ 変更は自動保存されません。ビルダーを離れる前に必ず「Save Page」をクリックしてください。
ヒント
ランディングページは順調ですか？ プレミアムテナントにカスタムドメインサポートを提供する場合は、Custom Domainsの設定に進んでください。