Web制作

LP（ランディングページ）設計・デザイン完全ガイド｜成果を出す構成とコンバージョン最適化

LP（ランディングページ）設計・デザイン完全ガイド｜成果を出す構成とコンバージョン最適化

LPとは？通常のWebページとの違い

LP（ランディングページ）は、ユーザーに特定のアクション（コンバージョン）を促すために設計された縦長の1ページサイトです。広告やメールから誘導し、問い合わせや購入などの成果獲得を目的とします。

通常のWebサイトとの違い

項目LP通常のWebサイト
目的特定のCVを獲得情報提供、ブランディング
ページ数基本的に1ページ複数ページ
ナビゲーション最小限 or なしメニューで回遊
ユーザー行動縦スクロールページ間を移動
情報量1つのテーマに絞る幅広い情報
流入経路広告、メール検索、SNS、広告等

LPが活用される場面

用途目的（CV）
商品・サービス紹介購入、申し込み
リード獲得資料請求、問い合わせ
セミナー・イベント参加申し込み
キャンペーン応募、登録
採用エントリー
アプリダウンロード

成果を出すLPの構成パターン

基本構成（AIDCAS構成）

成果を出すLPは、ユーザーの心理に沿った流れで構成されています。

【AIDCAS構成】

A：Attention（注意）
   └ ファーストビューで注目を集める

I：Interest（興味）
   └ 悩み・課題への共感で興味を引く

D：Desire（欲求）
   └ ベネフィットで「欲しい」と思わせる

C：Conviction（確信）
   └ 実績・事例で信頼を得る

A：Action（行動）
   └ CTAで行動を促す

S：Satisfaction（満足）
   └ 保証・サポートで安心させる

具体的な構成要素

順番セクション内容役割
1ファーストビューキャッチコピー、メイン画像、CTA離脱を防ぐ
2問題提起ユーザーの悩み・課題共感を得る
3解決策商品・サービスの紹介期待を高める
4ベネフィット得られるメリット欲求を刺激
5特徴・機能具体的な内容理解を深める
6実績・事例数字、お客様の声信頼を構築
7比較他社との違い選ばれる理由
8料金価格、プラン検討材料
9FAQよくある質問不安解消
10CTA申し込みフォーム行動を促す

ファーストビューの作り方

ファーストビュー（FV）は、ユーザーが最初に目にする部分で、LPの成否を決める最重要エリアです。

ファーストビューの構成要素

┌────────────────────────────────────┐
│  ヘッダー（ロゴ、電話番号）          │
├────────────────────────────────────┤
│                                    │
│   キャッチコピー（大見出し）         │
│   サブコピー（補足説明）             │
│                                    │
│   ┌─────────┐                      │
│   │  CTA   │  ← 行動ボタン        │
│   └─────────┘                      │
│                                    │
│         メインビジュアル            │
│                                    │
└────────────────────────────────────┘

キャッチコピーの作り方

良いキャッチコピーの条件

  • ターゲットに「自分のことだ」と思わせる
  • ベネフィット（得られる結果）を伝える
  • 具体的な数字を入れる
  • 短く、わかりやすい

キャッチコピーのパターン

パターン例
数字を入れる「3ヶ月で売上150%アップ」
疑問形「まだ手作業で請求書を作っていますか？」
呼びかけ「人材採用にお悩みの経営者様へ」
ビフォーアフター「Excelから脱却、業務時間を半減」
限定性「先着30社限定、初期費用無料」

NGなキャッチコピー

✗ 抽象的すぎる
   「最高のソリューションをご提供」

✗ ターゲットが不明確
   「みなさまへ」

✗ 長すぎる
   「当社は創業30年の実績を持ち、
    お客様に寄り添った...」

メインビジュアルの選び方

タイプ向いている商材例
商品写真物販、飲食商品そのものの写真
人物写真サービス、BtoB利用シーン、スタッフ
イラストIT、無形サービス概念を視覚化
動画高額商材、説明が必要サービス紹介動画

各セクションの設計ポイント

問題提起セクション

ユーザーの悩みや課題に共感し、「このLPは自分のためのものだ」と感じてもらいます。

構成例

■ こんなお悩みはありませんか？

□ 採用してもすぐに辞めてしまう
□ 求人広告を出しても応募が来ない
□ 採用活動に時間をかけられない
□ 採用コストが年々上がっている

ポイント

  • ターゲットの具体的な悩みを列挙
  • チェックボックス形式で見やすく
  • 3〜5個程度に絞る

ベネフィットセクション

商品・サービスを使うことで得られる「結果」を伝えます。

特徴とベネフィットの違い

特徴（機能）ベネフィット（結果）
AI搭載作業時間が80%削減
24時間対応深夜の問い合わせも逃さない
クラウド型どこからでもアクセス可能

表現のコツ

  • 「〜できる」ではなく「〜になれる」
  • 数字で具体的に
  • ユーザー目線で書く

実績・事例セクション

信頼を獲得するための証拠を提示します。

含めるべき要素

要素例
数字「導入企業500社」「満足度98%」
受賞・認定「○○アワード受賞」
メディア掲載「○○新聞で紹介」
取引先ロゴ有名企業のロゴ（許可を得て）
お客様の声顔写真付きのコメント

お客様の声の効果的な見せ方

┌────────────────────────────────────┐
│ 👤 田中様（株式会社○○ 代表取締役） │
│                                    │
│ 「導入後3ヶ月で問い合わせが2倍に！ │
│  今ではなくてはならないツールです」 │
│                                    │
│ 業種：製造業 / 従業員：50名         │
└────────────────────────────────────┘

料金セクション

価格を明確に提示し、意思決定を促します。

料金表の見せ方

プランライトスタンダードプレミアム
月額9,800円19,800円39,800円
ユーザー数5名20名無制限
機能A◯◯◯
機能B-◯◯
機能C--◯
サポートメールメール・電話専任担当
申し込むおすすめ申し込む

ポイント

  • 推奨プランを目立たせる
  • 比較しやすい表形式で
  • 初期費用、解約条件も明記

FAQセクション

ユーザーの不安や疑問を解消します。

入れるべきFAQ

Q. 導入までどのくらいかかりますか？
A. お申し込みから最短3営業日で利用開始できます。

Q. 解約はいつでもできますか？
A. はい、月単位でいつでも解約可能です。
   違約金はかかりません。

Q. サポート体制を教えてください。
A. 平日9:00〜18:00でメール・電話サポートを
   提供しています。

Q. セキュリティは大丈夫ですか？
A. ISO27001を取得しており、万全のセキュリティ
   体制を整えています。

CTA（コールトゥアクション）の最適化

CTAはユーザーに行動を促すボタンやフォームで、LPの成果を左右する最重要要素です。

CTAボタンのデザイン

効果的なボタンの条件

要素ポイント
サイズ十分に大きく、タップしやすい
色ページ内で目立つ色（補色が効果的）
形角丸、立体感があると押しやすそう
マイクロコピーボタン周辺の補足テキスト

CTAボタンのコピー

良い例悪い例
無料で資料をダウンロード送信
今すぐ無料トライアル開始申し込み
30秒で見積もり依頼クリック

マイクロコピーの活用

        ［ 無料で相談する ］
    ✓ 1分で完了 ✓ しつこい営業なし

CTAの配置

配置場所役割
ファーストビュー即決ユーザー向け
コンテンツ中盤興味を持ったタイミング
ページ下部熟読後の最終決断
固定フッター（追従）常に見える

フォームの最適化

フォームの項目数が多いほど、離脱率は上がります。

フォーム改善のポイント

ポイント効果
項目を最小限に必須項目だけに絞る
入力補助郵便番号から住所自動入力
エラー表示リアルタイムでエラーを表示
プログレスバー進捗を可視化
送信ボタン「送信」より「無料で相談する」

項目数とCVRの関係（目安）

項目数CVR影響
3項目以下基準値
4〜6項目−10〜20%
7項目以上−30%以上

デザインの基本原則

色の使い方

カラー構成

種類役割使用比率
ベースカラー背景、余白70%
メインカラーブランドカラー25%
アクセントカラーCTA、強調5%

CTAに使う色の選び方

  • ページ内で最も目立つ色
  • メインカラーの補色が効果的
  • 赤・オレンジ・緑がよく使われる

フォント・文字サイズ

要素サイズ目安（PC）サイズ目安（SP）
大見出し32〜48px24〜32px
中見出し24〜32px20〜24px
本文16〜18px14〜16px
注釈12〜14px10〜12px

余白の取り方

余白が適切にあることで、読みやすく信頼感のあるデザインになります。

【余白の基本】
・セクション間：80〜120px
・要素間：20〜40px
・行間：1.6〜1.8em
・文字まわり：十分な余白を確保

スマホ対応（レスポンシブ）

現在、LPへのアクセスの60〜80%はスマホからです。

スマホ対応のチェックポイント

□ タップしやすいボタンサイズ（44px以上）
□ 読みやすい文字サイズ（14px以上）
□ 横スクロールが発生していないか
□ 画像が適切なサイズで表示されているか
□ フォームが入力しやすいか
□ ページ速度は問題ないか

ABテストによる改善

LPは公開後も継続的に改善することで成果を向上させます。

ABテストとは

同じLPの2つのバージョン（A案とB案）を用意し、どちらが成果が高いかを検証する手法です。

テストすべき要素

優先度要素テスト例
高キャッチコピー表現の違い
高CTAボタン色、コピー、サイズ
中ファーストビュー画像、レイアウト
中フォーム項目数、順序
低ページ全体構成の順序変更

ABテストの進め方

1. 仮説を立てる
   例：CTAボタンを赤にするとクリック率が上がる

2. テストを設計
   ・A案：緑のCTAボタン（現状）
   ・B案：赤のCTAボタン（変更案）
   ・期間：2週間
   ・トラフィック：50%ずつ

3. テストを実行
   ・Google Optimize等のツールを使用

4. 結果を分析
   ・統計的に有意な差があるか確認
   ・サンプル数が十分か確認

5. 勝者を採用
   ・成果の高いバージョンを本番に

ABテストツール

ツール費用特徴
Google Optimize終了2023年に終了
VWO有料高機能
Optimizely有料エンタープライズ向け
AB Tasty有料使いやすい
Googleオプティマイズ代替無料〜Firebase A/B Testing等

LPのパフォーマンス指標

主要KPI

指標説明目安
CVR（コンバージョン率）CV数÷訪問数1〜3%（業種による）
直帰率1ページで離脱した率40〜70%
滞在時間ページ閲覧時間2〜5分
スクロール率ページの読了率50%以上
フォーム到達率フォームまで到達した率20〜40%
フォーム完了率フォーム到達後の完了率30〜60%

CVRの業界別目安

業種CVR目安
BtoB（資料請求）2〜5%
BtoB（問い合わせ）1〜3%
EC（購入）1〜3%
教育（申し込み）3〜8%
金融（申し込み）0.5〜2%

LP制作の費用と期間

費用相場

レベル費用特徴
テンプレート型10〜30万円既存デザインを活用
オリジナル標準30〜60万円自社専用デザイン
高品質型60〜100万円動画、アニメーション
戦略設計込み100〜200万円リサーチ、A/Bテスト

制作期間

工程期間目安
ヒアリング・企画1週間
構成・ワイヤーフレーム1週間
デザイン1〜2週間
コーディング1週間
テスト・公開3日〜1週間
合計1〜2ヶ月

まとめ：成果を出すLPのポイント

  1. ファーストビューで勝負: 3秒で「自分のことだ」と思わせる
  2. ユーザー心理に沿った構成: AIDCAS構成で論理的に訴求
  3. ベネフィットを明確に: 特徴ではなく「得られる結果」を伝える
  4. 信頼を獲得する: 数字、実績、お客様の声で証明
  5. CTAを最適化する: ボタンのデザイン、配置、コピー
  6. スマホファーストで設計: アクセスの過半数はスマホ
  7. 継続的に改善する: 公開後もA/Bテストで最適化

LPは「作って終わり」ではなく、データを見ながら改善を続けることで成果が向上します。この記事を参考に、CVRの高いLPを目指してください。

関連記事

WordPress導入・運用ガイド｜初心者でもわかるサイト構築と管理方法
Web制作

WordPress導入・運用ガイド｜初心者でもわかるサイト構築と管理方法

WordPressとノーコードツール徹底比較｜ホームページ制作はどちらを選ぶべき？
Web制作

WordPressとノーコードツール徹底比較｜ホームページ制作はどちらを選ぶべき？

Webアクセシビリティ入門｜障害者差別解消法対応と基本的な実装方法を解説
Web制作

Webアクセシビリティ入門｜障害者差別解消法対応と基本的な実装方法を解説

ランディングページ（LP）の作り方完全ガイド｜構成・デザイン・制作手順を解説
Web制作

ランディングページ（LP）の作り方完全ガイド｜構成・デザイン・制作手順を解説

CONTACT

お問い合わせはこちらから