LP（ランディングページ）は、広告などをクリックしたユーザーが最初に訪れる、いわばサービスの「顔」です。
最初のページでしっかりとインパクトを与え、どのようなサービスなのかを的確に伝えられなければ、ユーザーはすぐに離脱してしまいます。
この記事では、「良いLP」と「ダメなLP」を実際のデザイン例をもとに比較し、違いや効果的なLPにするための方法を具体的に解説していきます。
「良いLP」と「ダメなLP」の比較がデザインスキルの向上につながる理由
LPの比較がデザインスキルの向上につながる理由は、次の3つです。
- 効果的なデザインを視覚的に理解できる
- ユーザー目線で考える習慣がつく
- 細部へのこだわりが身につく
1：効果的なデザインを視覚的に理解できる
「良いLPとはこういうものです」と文章で説明されても、具体的なイメージが湧きにくいと感じる方は多いでしょう。
しかし、実際のデザインを比較しながら見ることで、「何が効果的なのか」を直感的かつ視覚的に理解できます。
例えば、ヘッダーの最適な配置、クリックされやすいボタンの色、カードデザインのシャドウのかけ方といった細かい部分も、ただ言葉で覚えるのではなく、目で見て覚えることが、自身でデザインを制作する際に重要です。
2：ユーザー目線で考える習慣がつく
LPの最終的な目的は、LPを訪れたユーザーに「いいな」と感じてもらい、商品の購入や資料請求といったアクションにつなげることです。
そのためには、常にユーザーの立場に立ってデザインを考える必要があります。
良いLPとそうでないLPを比較し、「なぜこちらはわかりやすいのか」「なぜこちらは情報が伝わりにくいのか」をユーザーの気持ちになって考えることで、自然と訪問者目線でデザインを設計する習慣が身につきます。
3：細部へのこだわりが身につく
多くのLPを比較分析していると、「このあしらいはどのような効果を狙っているのか」「ボタンの角の丸みはなぜこの角度なのか」といった、細かい部分まで意識が向くようになります。
実は、この「細かい部分」こそが、全体のクオリティを大きく左右するポイントです。
例えば、ページ内で使われているボタンの角丸の角度がバラバラだと、それだけで統一感のない未熟な印象を与えてしまいます。
さまざまなLPを比較することで、こうした細部へのこだわりが自分の中に蓄積され、デザイン全体のクオリティアップにつながります。
【セクション別】ダメなLPと良いLPのデザイン比較
実際のLPをセクションごとに分解し、イマイチな例と良い例を比較しながら、具体的なポイントを見ていきましょう。
ここで言う「良い・悪い」とは、単に見た目がかっこいいかどうかではありません。
「ユーザーにとって情報がわかりやすいか」「迷わずに行動できる設計になっているか」というユーザビリティの観点で解説していきます。
1：ファーストビュー
ファーストビューは、ユーザーがページを訪れて最初に目にする画面です。
ここで「素敵だな」「自分に関係ありそうだ」と感じてもらえなければ、すぐ離脱されてしまいます。
イマイチな例のLP
- 文字が見づらい
- メッセージが頭に入ってこない
- デザインに統一感がない
この例では、ごちゃごちゃした書類の画像の上にキャッチコピーが重なっているため文字が見づらく、サービスの一番の魅力が伝わりません。
また、文字と背景の色の差が少ないコントラスト不足の状態で、メッセージが頭に入ってこない原因になっています。
さらに、左側のカッチリした写真と右側のシンプルなイラストではテイストが異なり、デザインに統一感がなく、ちぐはぐな印象を与えています。
良い例のLP
- 文字がはっきりと読める
- メッセージが瞬時に伝わる
- 安心感と信頼性がある
- プロフェッショナルな印象を与える
背景をシンプルにするなどして、文字がはっきりと読めるように視認性を確保することが最優先です。
その上で、文字サイズを大きくしてメリハリをつけ、メッセージが瞬時に伝わるように工夫されています。
さらに、「導入実績〇〇人」といった具体的な数字で安心感と信頼性を高め、月桂樹のような簡単なあしらいを加えることで、プロフェッショナルな印象を与えています。
2：サービスの特徴・理由
ファーストビューで興味を持ったユーザーが、次に目にするのがサービスの特徴や選ばれる理由などを解説するセクションです。
イマイチな例のLP
- 文章が長すぎる
- 情報の強弱がない
この例では、伝えたいことが多いあまりに文章が長いため、ユーザーは読む気をなくしてしまいます。
また、3つの要素がただ並んでいるだけで情報の強弱がついておらず、どこが一番重要なのかが分かりません。
ここまで長い文章を一字一句しっかり読んでくれるユーザーは、まずいないと心得ておきましょう。
良い例のLP
- 何について書かれているか明確である
- 情報が整理されている
- 要点がひと目でわかる
良いLPでは、「選ばれる3つの理由」のように、まずタイトルで何について書かれているかが明確です。
そして、各項目に番号を振ったりアイコンを使ったりすることで、視覚的に情報が整理され、格段にわかりやすくなっています。
さらに、最も伝えたいメッセージを大きく太字で示し、詳細は小さく記載することで、時間がないユーザーでも要点がひと目でわかるように工夫されています。
3：CTA（Call To Action）
CTAは、LPのゴールである「お申し込み」「資料請求」「購入」といった行動をユーザーに促すボタンが設置された、重要なセクションです。
イマイチな例のLP
- ボタンが目立たない
- 存在感がない
この例では、背景の青色とボタンの水色が同系色のため、ボタンが目立たなくなり背景に埋もれてしまっています。
これでは存在感がなく、ユーザーがスクロールする中で見逃してしまう可能性が高いでしょう。
良い例のLP
- 強力に目立たせる
- クリックしたくなるデザインになっている
ユーザーは私たちが思っているほど注意深くページを見ていないため、CTAボタンは「これでもか」というくらい目立たせる必要があります。
背景色に対して補色を使うと、色の違いが際立ちます。
補色とは？
色相環上で正反対の位置にある色同士の組み合わせ。お互いの色を目立たせる効果がある。
また、サイズを大きくしたり、矢印を入れたりするなど、ユーザーが思わずクリックしたくなるようにデザインを工夫することも重要です。
4：導入事例・お客様の声
サービスを実際に利用した企業やお客様の声は、ユーザーが抱える「このサービスは本当に大丈夫だろうか？」という不安を解消し、安心感を与えるための重要なコンテンツです。
イマイチな例のLP
- 情報がシンプルすぎる
- 信頼性に欠ける
カードデザインで体裁は整っているものの、情報がシンプルすぎて具体性がありません。
また、これだけではユーザーの信頼性を勝ち取るには情報が足りず、「本当に多くの人に使われているのかな？」という疑問を解消できません。
良い例のLP
- 実績を裏付けている
- 安心感を与える
良いLPでは、ファーストビューで謳った「導入実績2万人」という主張を、具体的な導入企業のロゴを掲載することで実績を裏付けています。
ユーザーは「あ、あの有名な会社も使っているんだ」と感じることで安心感が醸成され、それがコンバージョンへの強力な後押しとなります。
導入実績の部分を作る際には、お客さんに実績やアピールできるポイントはあるかヒアリングしておくといいですね。
LP全体のクオリティを上げる「統一感」
これまでセクションごとのデザインポイントを見てきましたが、LP全体のクオリティを決定づけるもう一つの重要な要素が「統一感」です。
各パーツのデザインがどれだけ優れていても、ページ全体で一貫性がなければ、ユーザーにまとまりのない雑な印象を与えてしまいます。
統一感を出すために意識したいポイントを2つ解説します。
- 色数を絞り、トーンを合わせる
- 同じ役割のパーツはデザインを統一する
1：色数を絞り、トーンを合わせる
デザインに統一感を持たせるための効果的な方法が、使用する色を絞ってトーンを合わせることです。
イマイチな例のLP
このLPは青、黄色、緑、赤と多くの色が使われており、ここまで色数が多いと、全体的なトーンが合わず、統一感が失われてしまいます。
また、情報量が多すぎると感じる原因にもなり、ユーザーが本当に読むべきコンテンツに集中できなくなります。
良い例のLP
このLPは、青と黄色をメインカラーとして全体を構成しています。
色数を絞るだけで、デザインに統一感が生まれ、洗練された印象に変わります。
届けたい情報は何なのかという目的に立ち返り、それを達成するために最適な色を絞って設計することが大切です。
2：同じ役割のパーツはデザインを統一する
ページ内に複数登場する同じ役割を持つ要素は、デザインを統一するのが鉄則です。
イマイチな例のLP
このLPでは、「無料で試してみる」という同じアクションを促すボタンが、場所によって「黄色」と「赤色」の2種類存在しています。
このように、アクションは同じなのにボタンの色や形が違うと、ユーザーは「これは何か違うアクションにつながるのだろうか？」と無意識に迷ってしまいます。
良い例のLP
「無料で試してみる」のボタンはすべて黄色で統一されています。
ボタンの色だけでなく、形状や角の丸みなども揃えることで、ユーザーは「この形のボタンを押せば、無料お試しに進むんだな」と直感的に学習し、迷うことなく安心してアクションを起こせます。
統一感を出せるように、全体で使う色やパーツの形など意識してみてください！
まとめ：ポイントを押さえてコンバージョンにつながるLPを作ろう！
LPは、ユーザーが最初に触れるサービスの顔です。
デザインの良し悪しは、見た目の派手さではなく「伝わりやすさ」と「行動しやすさ」で決まります。
・ファーストビューで興味を引く
・情報を整理して要点を明確にする
・CTAをしっかり目立たせる
・全体のトーンや色、ボタンの形を統一して信頼感を持たせる
上記のポイントを押さえることで、LPの完成度は大きく変わります。
本記事で解説したポイントを押さえて、デザインをブラッシュアップしていきましょう。
未経験からWebデザイナーを目指すならデイトラがおすすめ！
デイトラWebデザインコースでは、「理論」「言語化」「実践」を積み重ねてデザインスキルを習得できるカリキュラムが揃っています！
デザインの学習で難しいのは、自分が作ったものが良い作品なのかが判断できないこと。その悩みを解決するために、デイトラWebデザインコースには現役デザイナーから直接指導が受けられる添削課題があります。
独学では得られないプロの着眼点を知れるので、デザインスキルをぐんぐんレベルアップできますよ。
また、デイトラWebデザインコースは、随時教材をアップデート！一度受講したら追加された講座も無料で閲覧できるので、デザインスキルもどんどんアップデートし続けられる最高の学習環境を提供しています。
未経験からWebデザイナーを目指す方は、ぜひデイトラWebデザインコースをチェックしてみてください！
ももさん（@momo_web24）
デザイン会社社長。WebアプリのUI/UX設計からHP、ロゴ作成まで幅広くWeb制作に携わっている。デイトラWebデザインコースのメンター。