LP デザインのコツ：成果につながるレイアウト・配色・画像の選び方
LP のデザインは、見た目を美しくするためだけにあるのではありません。読者が内容を理解し、次の行動を取りやすくするための設計です。きれいでも、読みにくく、押しにくい LP は成果につながりません。
この記事では、LP デザインの役割、視線の流れとレイアウト、配色と文字の大きさ、画像の選び方、スマホでの確認方法を説明します。デザインの好みは人によって違うため、数字で効果を確認しながら調整する前提で読んでください。
LP デザインの役割
LP は、1 つの商品やサービスについて、読者に特定の行動を取ってもらうためのページです。デザインの役割は、次の 3 つに整理できます。
- 内容を理解しやすくする。情報の優先順位を見た目で示す
- 信頼してもらう。整った見た目と、根拠のある情報で安心感を与える
- 行動を促す。次に押すべきボタンが迷わず見つかる
装飾を増やしても、これらの役割が果たされなければ意味がありません。デザインを考える際は、「このページで読者にしてほしい行動は何か」を最初に 1 つ決めます。
先に構成を決める
デザインは、構成が決まってから行います。どの順番で何を伝えるかが曖昧なまま見た目を整えても、改善の余地が残ります。構成の記事で、基本の流れを説明しています。構成が決まれば、各セクションの見せ方を決めやすくなります。
視線の流れとレイアウト
人がページを見るとき、視線は上から下へ、左から右へ動くのが基本です。縦に長いスマホ向けの LP では、上から順に読まれる前提で組み立てます。
1 カラムを基本にする
LP は、1 列に要素を並べる縦長の構成が一般的です。複数の列に分けると、視線が散り、読む順序が分かりにくくなります。PC では中央の幅を狭めて、スマホと同じ縦の流れを維持する方法が使われています。
余白を使う
要素を詰め込むと、読みにくくなります。余白は、情報のまとまりを区切り、重要な部分を目立たせる効果があります。
- 見出しと本文の間隔を、本文の行間より広くする
- セクションの間に、十分な余白を取る
- 関連する要素は近づけ、別の話題は離す
セクションごとに役割をそろえる
LP は複数のセクションで構成されるため、見出しの大きさ、余白の幅、ボタンの形をそろえると、全体に統一感が出ます。セクションごとにデザインが変わると、読者は新しいページに来たと感じて、読み進める流れが途切れます。最初に見出し、本文、ボタンの基本の形を決めておき、全体で使い回すと、作業も速くなります。
目立たせる要素を絞る
すべてを目立たせると、何も目立たなくなります。1 画面の中で最も目立たせるのは、1 つにします。たとえば、最初の画面なら、キャッチコピーか行動ボタンのどちらかです。最初の画面の作り方は、ファーストビューの記事で詳しく扱っています。
配色と文字の大きさ
色の数を絞る
LP の配色は、次の 3 種類で組み立てると整います。
| 色の役割 | 使う場所 | 目安の割合 |
|---|---|---|
| ベースカラー | 背景 | 大部分を占める |
| メインカラー | 見出し、ブランドを表す部分 | 全体の一部 |
| アクセントカラー | ボタン、強調したい部分 | ごく一部 |
ボタンの色は、背景やメインカラーと区別できるものにします。アクセントカラーを他の場所で使いすぎると、ボタンが目立たなくなります。
文字と背景のコントラスト
文字が読みにくい配色は、離脱の原因になります。W3C のウェブアクセシビリティの基準(WCAG)では、通常の文字と背景の明るさの比(コントラスト比)を 4.5:1 以上にすることが、達成基準 AA の目安として示されています。薄いグレーの文字や、写真の上に直接置いた文字は、読みにくくなりやすいので注意してください。
文字の大きさと行間
スマホの画面では、本文は 16 px 前後を基準にすると読みやすくなります。見出しは本文より明らかに大きくして、階層を作ります。
- 本文：16 px 前後、行間は文字の高さの 1.6 〜 1.8 倍
- 見出し：本文の 1.3 〜 2 倍
- 注意書き：小さくしすぎず、読める大きさを保つ
数字は目安で、フォントによって見え方が変わります。実際のスマホで確認して調整してください。フォントの種類は、1 ページで 2 種類以内にするとまとまりやすくなります。
画像の選び方
画像の役割を決める
画像は、飾りではなく、情報を伝えるために使います。
| 画像の種類 | 役割 |
|---|---|
| メイン画像 | 何の商品やサービスかを一目で伝える |
| 利用シーンの画像 | 使った後の状態をイメージさせる |
| 図解 | 仕組みや手順を分かりやすく示す |
| 実績・証拠の画像 | 信頼を補強する。出典と掲載許可を確認する |
避けたい画像
- 内容と関係のないイメージ写真。ページが長くなるだけで、情報が増えない
- 文字が小さく、スマホで読めない画像
- 権利が不明な画像。フリー素材でも、利用規約を確認する
- 実際の商品と大きく違う加工。誤認を招き、景品表示法で問題になる恐れがある
画像内の文字は、検索エンジンや読み上げソフトに伝わりにくく、スマホで拡大しないと読めないこともあります。重要な情報は、画像の中ではなく、本文のテキストとして書いてください。
表示速度への配慮
大きな画像は、表示を遅くします。必要な大きさに縮小し、圧縮してから使います。詳しい方法は、表示速度の記事を参照してください。
スマホでの見え方を確認する
LP の閲覧の多くがスマホになる場合、デザインの確認もスマホから始めます。
確認のチェックリスト
| 項目 | 見る点 |
|---|---|
| 最初の画面 | 何のページか、押すボタンがどこか分かる |
| 文字 | 拡大しなくても読める。行が長すぎない |
| ボタン | 指で押しやすい大きさと間隔がある |
| 画像 | 切れたり、はみ出したりしていない |
| 横スクロール | 発生していない |
| 読み込み | 通信が遅い環境でも、内容が表示される |
特に、SNS のアプリ内ブラウザで開いたときの見え方は、通常のブラウザと違うことがあります。実際に LINE や Instagram の中から開いて確認してください。スマホでの見え方の確認方法は、別の記事に詳しくまとめています。
デザインを参考にする方法
他社の LP を参考にするときは、そのまま真似るのではなく、「なぜこの順序か」「なぜこの色か」を考えます。自分の商材と読者に合わない要素まで取り入れると、かえって成果が下がります。参考にしたい LP は URL(例：https://example.com/lp-sample)とあわせて記録し、構成、配色、ボタンの位置を分けてメモすると、比較しやすくなります。テンプレートを使えば、整ったデザインを土台にして調整できます。
まとめ
LP デザインは、内容を理解しやすくし、信頼を得て、行動を促すための設計です。レイアウトは 1 カラムを基本に、余白で区切り、目立たせる要素を絞ります。配色はベース、メイン、アクセントの 3 役割で整理し、文字と背景のコントラストを確保します。画像は役割を決めて選び、重要な情報は本文に書きます。最終的な確認は、実際のスマホで、アプリ内ブラウザも含めて行ってください。
LP を作った後は、公開 URL を SNS ごとに分けて配信し、反応を比べると改善しやすくなります。Boostlink は、LP の作成と短縮 URL、クリック分析を同じサービスで使えます。
LP への集客に使える SNS アカウントを探している場合は、アカウントの購入や M&A を扱う Boostshop も選択肢です。購入の際は各プラットフォームの利用規約を確認してください。