「LPを作ってみたけれど、なんとなく素人っぽく見える」
「きれいにデザインしたのに、なかなか問い合わせにつながらない」
「LPは普通のWEBサイトと何が違うの？」
LP（ランディングページ）を制作するとき、このような悩みを持つ方は少なくありません。
LPは単純に見た目をおしゃれにすれば良いわけではありません。
商品やサービスの魅力を分かりやすく伝えながら、ユーザーを「購入」「問い合わせ」「資料請求」などの行動へ導くことが重要です。
そのためには、一般的なWEBサイトとは少し違ったデザインの考え方が必要になります。
この記事では、LP制作を行っているWEBデザイナーの視点から、成果につながるLPデザインを作るために押さえておきたい10のポイントを解説します。
LPデザインとは？
LPとは「Landing Page（ランディングページ）」の略称です。
広い意味ではユーザーが最初に訪問したページを指しますが、WEB制作の現場では一般的に、
商品購入や問い合わせなど、特定の目的に特化した縦長のWEBページ
をLPと呼びます。
通常のWEBサイトでは会社概要、サービス紹介、ブログ、お問い合わせなど複数のページへユーザーを誘導します。
一方、LPは基本的に1ページの中で、
興味を持ってもらう
↓
商品の特徴を理解してもらう
↓
メリットを感じてもらう
↓
不安を解消する
↓
購入・問い合わせへ進んでもらう
という流れを作ります。
そのためLPデザインでは、単に情報をきれいに並べるだけでなく、ユーザーが読み進めやすい順番と視線誘導をデザインすることが重要です。
成果につながるLPデザインのコツ10選
ここからは、実際にLPをデザインするときに意識したいポイントを紹介します。
1. ファーストビューで「何の商品か」を伝える
LPで特に重要なのがファーストビューです。
ファーストビューとは、ページを開いたときにスクロールせず表示される最初の画面です。
ユーザーはページを開いて数秒程度で、
「自分に関係があるページなのか」
を判断します。
そのため、
- 何の商品・サービスなのか
- どんなメリットがあるのか
- 誰向けなのか
が短時間で分かるデザインにしましょう。
商品画像を大きく配置したり、キャッチコピーにメリットを入れたりすると伝わりやすくなります。
逆に、抽象的な写真とキャッチコピーだけでは「結局何の商品なの？」となり、離脱につながる可能性があります。
2. 情報に優先順位をつける
LPに掲載する文章をすべて同じ大きさで表示すると、どこが重要なのか分かりません。
そこで重要になるのが情報の優先順位です。
例えば、
一番伝えたいキャッチコピー
↓
商品のメリット
↓
補足説明
のように、重要度に合わせて文字サイズや太さを変えます。
LPでは「読ませる」というより、まずは見ただけで重要な情報が分かる状態を作ることが大切です。
3. 余白をしっかり取る
LP制作初心者にありがちなのが、情報を詰め込みすぎることです。
「できるだけ多くの商品情報を見せたい」
と思うと、文章や画像同士の間隔が狭くなりがちです。
しかし、余白が少ないデザインは情報量以上にごちゃごちゃして見えます。
セクション間や見出し周辺には十分な余白を確保しましょう。
余白は「何もない場所」ではありません。
情報を整理して見やすくするための重要なデザイン要素です。
4. 配色は3色程度を基本にする
LPだからといって、多くの色を使えば目立つわけではありません。
色が多すぎると、どこが重要なのか分からなくなります。
基本的には、
ベースカラー
背景などページ全体を構成する色。
メインカラー
ブランドや商品のイメージを表す色。
アクセントカラー
CTAや特に目立たせたい部分に使用する色。
という3色程度から考えるとまとめやすくなります。
特にCTAの色はページ内で統一すると、
「この色＝ボタン」
とユーザーが認識しやすくなります。
5. フォントを使いすぎない
LPではフォント選びも印象を大きく左右します。
しかし、ゴシック体、明朝体、手書き文字などを大量に混ぜると統一感がなくなります。
基本となるフォントは1〜2種類程度に絞るのがおすすめです。
例えば、
本文：読みやすいゴシック体
キャッチコピー：太めのゴシック体
だけでも十分メリハリを作れます。
高級感を出したい場合には、ポイントとして明朝体を使う方法もあります。
重要なのは、フォントそのもののおしゃれさではなく、商品イメージと読みやすさのバランスです。
6. 写真はできるだけ大きく使う
LPでは商品写真が非常に重要です。
特にEC系のLPでは、文章で商品の魅力を説明するよりも、1枚の写真の方が直感的に伝わることがあります。
例えば食品なら、
商品のパッケージ写真だけではなく、
料理として完成した状態
食べているシーン
食材のアップ
などを掲載すると利用イメージが伝わります。
家電なら、
商品単体
使用している状態
部屋に置いた状態
などを組み合わせると効果的です。
7. 長い文章は図やアイコンに置き換える
LPでは文章を最初から最後までじっくり読んでくれるとは限りません。
スマートフォンでは特に、スクロールしながら必要な情報だけを見るユーザーも多くいます。
そこで、
数字
アイコン
グラフ
比較表
図解
などを使って、文章を視覚化します。
例えば、
「重量は約1.7kgなので、一般的な商品と比較して軽量です」
という説明なら、
約1.7kg
という数字を大きく表示した方が直感的です。
8. CTAはページ内で目立たせる
CTA（Call To Action）は、ユーザーに行動してもらうためのボタンやエリアです。
例えば、
「購入する」
「無料で相談する」
「資料をダウンロード」
「お問い合わせ」
などです。
LPの目的が商品購入なら、どれだけデザインが優れていても購入ボタンが分かりにくければ成果につながりません。
CTAは、
周囲に余白を取る
アクセントカラーを使う
ボタンらしい形にする
行動が分かる文章にする
などを意識しましょう。
また、LPが長い場合はCTAを最後に1回だけ配置するのではなく、ユーザーが行動したくなるタイミングに複数配置します。
9. セクションごとにデザインを切り替える
縦に長いLPで、最初から最後まで同じ白背景が続くと、情報の区切りが分かりにくくなります。
そこで、
白
薄いグレー
ブランドカラーの薄い背景
写真背景
などを使って、セクションごとに変化を付けます。
ただし、すべてのセクションを派手にする必要はありません。
背景色や余白を少し変えるだけでも十分です。
ユーザーがスクロールしたときに、
「ここから別の話が始まった」
と直感的に理解できるデザインを目指しましょう。
10. スマートフォンを基準にデザインする
現在のLP制作では、スマートフォン表示を無視することはできません。
PCではきれいに見えていても、スマートフォンでは、
文字が小さい
画像内の文字が読めない
ボタンが押しにくい
横並び要素が窮屈
といった問題が起こることがあります。
特に画像の中に文字を入れる場合は注意が必要です。
PCで横1000px程度の画像を作り、そこに小さな文字を大量に配置すると、スマートフォンで縮小された際に読めなくなります。
制作時はPCだけで確認せず、必ず実際のスマートフォンサイズでもチェックしましょう。
LPデザインでやってはいけないこと
ここまで紹介したポイントとは逆に、LPで避けたいデザインもあります。
代表的なのは、
- とにかく派手にする
- 色を使いすぎる
- 文字を詰め込みすぎる
- 画像の中に小さな文字を大量に入れる
- CTAがどこにあるか分からない
- 商品より装飾の方が目立っている
- セクションごとにデザインの雰囲気が違う
といったケースです。
LP制作ではデザインにこだわるほど、装飾を追加したくなることがあります。
しかし、ユーザーが見たいのはデザインそのものではありません。
「この商品は自分に必要なのか」
「どんなメリットがあるのか」
「購入して大丈夫なのか」
という情報です。
デザインはそれらを分かりやすく伝えるために使います。
おしゃれなLP＝成果が出るLPではない
LP制作で特に意識しておきたいポイントです。
デザイン性の高いLPを見ると、
「こんなLPを作りたい」
と思うことがあります。
もちろんブランドイメージを高めるためにデザイン性は重要です。
しかし、LPの本来の目的は作品として評価されることではなく、ユーザーに行動してもらうことです。
例えば非常におしゃれなLPでも、
何の商品なのか分からない
文字が読みにくい
商品のメリットが伝わらない
購入ボタンが見つからない
のであれば、LPとしては改善の余地があります。
反対に、デザイン自体はシンプルでも、
商品がすぐ分かる
メリットが理解できる
情報を読みやすい
CTAを見つけやすい
LPの方が成果につながる場合があります。
「おしゃれにする」ではなく「伝わりやすくする」
という視点でデザインを考えることが大切です。
LPデザインを作る基本的な流れ
実際にLPを制作するときは、いきなりPhotoshopやFigmaを開いてデザインを始めるのではなく、先に情報を整理します。
基本的には、
① LPの目的を決める
購入、問い合わせ、資料請求など、ユーザーに取ってほしい行動を決めます。
↓
② ターゲットを決める
誰に商品を販売するのかを明確にします。
↓
③ LPの構成を作る
掲載する情報と順番を決めます。
↓
④ ワイヤーフレームを作る
文章、画像、CTAなどの大まかな配置を決めます。
↓
⑤ デザインする
配色、フォント、写真、装飾などを決めます。
↓
⑥ スマートフォン表示を確認する
文字サイズ、画像、CTAなどを確認します。
↓
⑦ 公開後に改善する
アクセス解析などを確認しながら改善します。
という流れがおすすめです。
デザインを始める前に構成をしっかり作っておけば、制作途中で「ここに何を入れよう？」と迷うことも少なくなります。
LPは公開して終わりではない
LPは完成して公開したら終わりではありません。
実際のユーザーがどのようにページを見ているのかを確認し、必要に応じて改善していきます。
例えば、
ファーストビューで離脱が多い
CTAまで到達している人が少ない
スマートフォンの離脱率が高い
といった問題が分かれば、
キャッチコピーを変更する
商品画像を変更する
文章量を減らす
CTAを追加する
スマホの文字サイズを変更する
といった改善ができます。
制作時に「これが正解」と決めるのではなく、ユーザーの反応を見ながら改善していくことが重要です。
まとめ｜LPデザインは「伝わりやすさ」が重要
成果につながるLPを作るためには、単純におしゃれなデザインを目指すだけでは不十分です。
今回紹介したポイントをまとめると、
- ファーストビューで商品を伝える
- 情報に優先順位をつける
- 余白をしっかり取る
- 配色を整理する
- フォントを使いすぎない
- 写真を大きく使う
- 情報を視覚化する
- CTAを目立たせる
- セクションを分かりやすくする
- スマートフォンを意識する
ことが重要です。
LPをデザインするときは、
「どうすればかっこよくなるか？」
だけではなく、
「どうすればユーザーに伝わるか？」
を考えてみてください。
その視点を持つだけでも、LPのデザインは大きく変わります。
また、LPではデザインだけでなく、どの順番で情報を見せるかという「構成」も重要です。
LPの構成については、関連記事の「LPの構成の作り方｜成果につながるランディングページの基本構成を徹底解説」で詳しく解説しています。
ファーストビューの作り方について知りたい方は「LPのファーストビューの作り方｜成果につながるデザイン7つのポイント」もあわせて参考にしてください。
関連記事
LPの商品画像の作り方｜売れるデザインに共通する7つのポイント
LPのファーストビューの作り方｜成果につながるデザイン7つのポイント
LPの構成の作り方｜成果につながるランディングページの基本構成を徹底解説
ペイントツールのスタンダード【CLIP STUDIO PAINT PRO】
最短1ヶ月で動画編集スキルが身につく！【クリエイターズジャパン】