目次
LPデザインとは？
LPデザイン（ランディングページデザイン）とは、広告や検索からアクセスしたユーザーを「申し込み・購入・登録」などの行動（コンバージョン）に導くための1ページ完結型Webページのデザインです。
通常のWebデザインと異なり、LPデザインはCVR（コンバージョン率）を最大化することが最優先の目的です。見た目の美しさより「売れる・申し込まれる」設計が重要です。
LPデザインの基本構成
成約率の高いLPには共通する構成があります。
① ファーストビュー（FV）
↓
② 共感・問題提起
↓
③ 解決策の提示
↓
④ 実績・信頼性（社会的証明）
↓
⑤ 料金・サービス詳細
↓
⑥ よくある質問（FAQ）
↓
⑦ CTA（申し込みフォーム・ボタン）
ファーストビュー（FV）のデザイン
ファーストビューはLP全体で最も重要なエリアです。訪問者の70%以上がFVを見た直後に離脱するか読み進めるかを決めると言われています。
FVに必須の3要素
① ターゲットが明確なキャッチコピー
× 「最高品質のサービスをご提供します」（誰向けかわからない）
○ 「副業月収10万円を目指す会社員のためのWebスクール」（誰向けか明確）
② メインビジュアル
- 人物写真：親近感・信頼感を高める
- 商品写真：具体的なイメージを伝える
- イラスト：ブランドトーンを演出
③ CTAボタン
FV内に1つ以上のCTAボタンを設置します。色・サイズ・テキストが成約率に直結します。
CTAボタンのデザイン
CTAボタンはLPで最も注意を払うべき要素です。
クリック率を上げるポイント
色の選び方
| ボタン色 | 印象・効果 |
|---|---|
| 赤・オレンジ | 緊急感・行動喚起。CVRが高くなりやすい |
| 緑 | 安心・GO。環境・健康系に向く |
| 青 | 信頼感。BtoB・金融向き |
| 黄 | 明るさ・注目。子ども向け・エンタメ |
原則: ページの中で最も目立つ色をCTAに使う
テキストの書き方
× 「送信する」「申し込む」（メリットが伝わらない）
○ 「無料で資料をもらう」「今すぐ30日間試す」（ベネフィット明示）
サイズ・余白
- スマホでタップしやすいサイズ（最低44×44px）
- ボタン周囲に十分な余白を確保
- シャドウや矢印アイコンで「押せる」ことを示す
LPデザインの配色
3色ルール
| 役割 | 割合 | 用途 |
|---|---|---|
| ベースカラー | 60% | 背景・余白（白・薄グレー） |
| メインカラー | 30% | ブランドカラー・見出し背景 |
| アクセントカラー | 10% | CTAボタン・重要な強調 |
業種別カラーガイド
| 業種 | 推奨カラー |
|---|---|
| 美容・エステ | ピンク・ゴールド・白 |
| 健康・医療 | 青・緑・白 |
| ビジネス・IT | 紺・青・グレー |
| 教育・スクール | 青・オレンジ |
| 飲食 | 赤・オレンジ・茶 |
フォント設定
読みやすさを最優先に
- 本文フォントサイズ：PC 16px以上、スマホ 14px以上
- 行間（line-height）：1.7〜1.9（LPは長文なので広めに）
- フォントファミリー：Noto Sans JP / ヒラギノ角ゴ / 游ゴシック
見出しと本文のコントラスト
h2 {
font-size: 28px; /* PCの場合 */
font-weight: bold;
line-height: 1.4;
}
p {
font-size: 16px;
line-height: 1.8;
color: #333;
}
スマホ対応（レスポンシブ）は必須
LPへの流入の60〜80%はスマートフォンです。スマホファーストで設計しないと成約率が大幅に下がります。
スマホデザインのチェックポイント
- [ ] CTAボタンは親指で押しやすい位置・サイズか
- [ ] テキストは14px以上でスクロールなしに読めるか
- [ ] 横スクロールが発生していないか
- [ ] 画像の読み込みが遅くないか（3秒以内）
- [ ] フォームの入力項目は最小限か
信頼性を高めるデザイン要素
実績・数字の見せ方
× 「多くのお客様に選ばれています」
○ 「導入企業3,200社 ／ 顧客満足度98.2% ／ 業界10年の実績」
社会的証明の配置
- お客様の声：顔写真付きで3〜5件
- ビフォーアフター：使用前後の変化を視覚的に
- メディア掲載実績：ロゴを横並びで表示
LPのA/Bテストで改善する
LP公開後はデータを見ながら改善サイクルを回します。
| テスト要素 | 変更例 |
|---|---|
| キャッチコピー | 「〜できる」→「〜で悩んでいる方へ」 |
| CTAボタン色 | 赤 → オレンジ |
| CTAテキスト | 「申し込む」→「無料で試してみる」 |
| FV画像 | 商品写真 → 使用者の笑顔写真 |
| フォーム項目 | 5項目 → 3項目に削減 |
Googleオプティマイズ（無料）やHeatmapツール（Hotjar）でユーザー行動を計測しながら改善します。
まとめ
- LPデザインはCVR最大化が目的。美しさより「売れるかどうか」で設計する
- ファーストビューにターゲット・ベネフィット・CTAの3点を入れる
- CTAボタンは目立つ色・行動を促すテキスト・タップしやすいサイズで
- スマホファーストで設計し、表示速度を3秒以内に保つ
- 公開後はA/Bテストで継続的に改善する
LPデザインの基本を押さえたら、実際に1枚作成して効果測定してみましょう。
