loading中...

個人事業主に特化した無料WordPressテーマ「LiteWord」

ランディングページ（LP）の作り方ガイド

最終更新: 2026-03-15

ランディングページ（LP）の作り方ガイド

> このページのURL: https://lite-word.com/manual/use-case-lp/

LiteWordでコンバージョン率の高いランディングページ（LP）を作る方法を解説。ヘッダー・フッターの非表示、追従CTA、カウントダウンタイマーなど、LP専用の設定を詳しく説明する。

LP専用の設定

通常のページとは異なるLP向けの特別な設定がある。まずこれらを設定してからブロックを配置する。

1. ヘッダーを非表示／パターン変更する

LPではナビゲーションメニューが離脱の原因になるため、ヘッダーを非表示にするかシンプルなパターンに変更する。

  1. LPとして使う固定ページの編集画面を開く
  2. 画面右側のサイドバー → 「ページ」タブ → 「ページ設定（LiteWord）」 セクションを開く
  3. 「ヘッダー設定」 で以下のいずれかを選択:
    • 非表示: ヘッダーを完全に非表示にする
    • パターン変更: ロゴのみのシンプルなヘッダーに切り替える

→ 詳細: ヘッダーのページ別上書き

2. フッターを非表示／ミニマルにする

フッターもLP離脱の原因になるため、非表示またはミニマル構成にする。

  1. 同じ 「ページ設定（LiteWord）」 セクション内
  2. 「フッター設定」 で非表示またはミニマルパターンを選択

→ 詳細: フッター設定

3. 追従CTAをONにする

スクロールしても常に画面下にCTAボタンを表示する設定。LP必須の機能。

  1. 外観 → カスタマイズ → 「デザイン設定 - 追従CTA」 を開く
  2. 「追従CTAを表示する」 をONにする
  3. ボタンテキスト、リンク先URL、色を設定
  4. 「公開」 で保存

ポイント:

  • ボタンテキストは短く行動を促す文言にする（例: 「今すぐ申し込む」「無料で始める」）
  • スマホでは画面幅いっぱいに表示されるので、テキストは15文字以内が理想

→ 詳細: 追従CTA設定

4. 1カラムレイアウトにする

LPはサイドバーなしの1カラム表示にする。

  1. 「ページ設定（LiteWord）」 セクション内
  2. レイアウト で 「1カラム」 を選択

5. 横幅を広めに設定する

LPではコンテンツ幅を広く取ることで、画像やFVを大きく見せられる。

  • 各ブロックのサイドバー → 「横幅」 を 1080px以上 に設定
  • FVブロックは 全幅（100%） が基本

LP推奨ブロック構成

以下の順序で配置すると、LPの定番構成（PASONA/AIDMAの法則に沿った流れ）になる。

構成一覧

順番 セクション おすすめブロック 目的
1 ファーストビュー fv-7 / fv-1 / lw-pr-fv-14 強いヘッドライン + CTA。3秒で興味を引く
2 課題・悩み提起 lw-content-1 読者の悩みに共感し「自分のことだ」と思わせる
3 解決策の提示 lw-content-1 / lw-content-2 商品・サービスがその悩みを解決できる理由
4 特徴・メリット lw-list-1 / lw-step-1 3〜5つのポイントで具体的なメリットを列挙
5 お客様の声 lw-voice-1 実績・社会的証明で信頼性を高める
6 よくある質問 lw-qa-1 不安や疑問を事前に解消する
7 CTA + フォーム cta-1 + メールフォーム 最終的な申込・お問い合わせの受け皿
8 カウントダウン 期限設定（オプション） 緊急性を演出して行動を促す

作成手順

ステップ1: 固定ページを作成する

  1. WordPress管理画面 → 固定ページ → 新規追加
  2. タイトルに「LP名」を入力（例: 「春のキャンペーン」）
  3. パーマリンクをLP用に設定（例: campaign-spring）

ステップ2: LP専用設定を適用する

上記「LP専用の設定」の1〜5をすべて行う。

ステップ3: FVを配置する（ヘッドライン + CTA）

  1. FVブロック を挿入。LP向けのおすすめ:
    • fv-7: 動画背景で視覚的インパクト大（無料）
    • fv-1: 静止画背景 + ボタンスタイル調整可能（無料）
    • lw-pr-fv-14: ヘッダーまで回り込む全画面背景（プレミアム）
  2. 設定内容:
    • メインタイトル: LPの核となるヘッドライン（例: 「たった30日で売上を2倍にする方法」）
    • サブタイトル: 補足説明や対象者の明記
    • ボタンテキスト: 「今すぐ無料で始める」など行動を促す文言
    • ボタンURL: ページ内のフォームセクションにアンカーリンク（例: #form）
    • フィルター透過度: 0.4〜0.6で画像を暗めにしてテキストを読みやすく

ポイント:

  • ヘッドラインは「誰に」「何を」「どうなれるか」を入れる
  • FV-7を使う場合は背景動画のファイルサイズに注意（10MB以下推奨）

ステップ4: 課題・悩み提起セクション

  1. 見出しタイトル（custom-title-1 等）を追加（例: 「こんなお悩みありませんか？」）
  2. Content ブロック（lw-content-1）を追加
  3. ターゲットが抱える課題や悩みを具体的に列挙する

ポイント:

  • 箇条書きで3〜5個の悩みを挙げると共感を得やすい
  • 背景色を薄いグレー（#f5f5f5）にしてFVとの区切りを明確に

ステップ5: 解決策の提示セクション

  1. 見出しタイトル を追加（例: 「その悩み、〇〇が解決します」）
  2. Content ブロック（lw-content-1 / lw-content-2）で商品・サービスの概要を説明
  3. 画像とテキストを組み合わせて視覚的にわかりやすく

ステップ6: 特徴・メリットセクション

  1. 見出しタイトル を追加（例: 「選ばれる3つの理由」）
  2. 以下のいずれかのブロックを使用:
    • lw-list-1〜lw-list-4: 箇条書きリスト形式
    • lw-step-1: ステップ形式で順番に特徴を説明
    • lw-banner-info-01: 3カラムのバナーカード形式

ポイント:

  • メリットは3〜5個に絞る（多すぎると読まれない）
  • 各メリットにアイコンや画像を添えると視認性が上がる

ステップ7: お客様の声セクション

  1. 見出しタイトル を追加（例: 「ご利用者様の声」）
  2. Voice ブロック（lw-voice-1）を追加
  3. 名前・写真・感想を入力

ポイント:

  • 実名・実写真があると効果が高い（許可を得て掲載）
  • ビフォーアフターが見せられる場合はlw-gallery-01と組み合わせる

ステップ8: FAQ（よくある質問）セクション

  1. 見出しタイトル を追加（例: 「よくある質問」）
  2. QA ブロック（lw-qa-1）を追加
  3. 質問と回答を入力（5〜10個が目安）

ポイント:

  • 「料金はいくら？」「返金はできる？」「どのくらいで効果が出る？」など、申込前の不安を解消する質問を優先
  • アコーディオン形式なので長くなってもページが見づらくならない

ステップ9: 最終CTA + フォーム

  1. CTA ブロック（cta-1）を追加。背景色をアクセントカラーにして目立たせる
  2. その下に メールフォーム（LiteWordメールフォーム拡張機能）を追加
  3. フォームのHTMLアンカーに form を設定する（ブロック → 高度な設定 → HTMLアンカー）

→ 詳細: メールフォーム拡張機能

ポイント:

  • フォームの項目は最小限に（名前・メールアドレス・電話番号程度）
  • 入力項目が多いほどコンバージョン率が下がる

ステップ10: カウントダウンで緊急性を演出する（オプション）

LiteWordの期限・カウントダウン機能を使って、キャンペーンの締切を表示できる。

  1. 外観 → カスタマイズ → 「その他の設定 - 期限設定」 を開く
  2. 期限日時を設定
  3. カウントダウンの表示位置・デザインを設定
  4. 期限切れ後の表示内容（「キャンペーンは終了しました」等）を設定

→ 詳細: 期限・カウントダウン設定

LP向けの追加テクニック

ページ別カラーの上書き

LPのキャンペーンカラーがサイト全体のカラーと異なる場合、ページ単位で色を上書きできる。

  1. 固定ページの編集画面 → 「ページ設定（LiteWord）」
  2. 「カラー上書き」 セクションでメインカラー・アクセントカラーを変更
  3. このページだけ別の配色で表示される

コードインジェクションでトラッキング設置

Facebook Pixel、Google広告のコンバージョンタグなど、LP固有のトラッキングコードを設置する。

  1. 外観 → カスタマイズ → 「その他の設定 - コードインジェクション」 を開く
  2. 「`` 内に追加」 にトラッキングピクセルを貼り付け
  3. 「`` 前に追加」 にイベントトラッキングコードを貼り付け

→ 詳細: コードインジェクション設定

ポイント:

  • ページ単位でコードを出し分けたい場合は、ページ編集画面のコードインジェクション設定を使う
  • カスタマイザーのコードインジェクションは全ページに反映される

FV-7 / FV-14 を使った動画背景

動画背景のFVはLPとの相性が良い。短い動画で商品やサービスの雰囲気を直感的に伝えられる。

  • fv-7（無料）: 動画背景 + テキスト + CTAボタン
  • lw-pr-fv-14（プレミアム）: ヘッダーまで回り込む全画面動画背景

動画の推奨仕様:

  • 形式: MP4
  • 長さ: 5〜15秒（ループ再生される）
  • ファイルサイズ: 10MB以下（読み込み速度に直結）
  • 解像度: 1920x1080で十分
  • 音声: なし（自動再生はミュート状態）

LP作成チェックリスト

公開前に以下を確認する。

  • [ ] ヘッダーが非表示またはシンプルパターンになっている
  • [ ] フッターが非表示またはミニマルになっている
  • [ ] 追従CTAが設定されている
  • [ ] FVのヘッドラインが「誰に何をどうなれるか」を伝えている
  • [ ] CTAボタンのリンク先が正しい
  • [ ] フォームの送信テストを行った
  • [ ] スマホ表示でレイアウトが崩れていない
  • [ ] FVのスマホ用画像が設定されている
  • [ ] トラッキングピクセルが正しく設置されている
  • [ ] ページ表示速度が遅くない（動画・画像のファイルサイズを確認）
  • [ ] カウントダウンの期限日時が正しい（使う場合）

関連リンク

最終更新: 2026-03-15 11:00