LPデザインでやってはいけないこと｜成果が出ないランディングページのNG例10選

ランディングページ（LP）を作ったものの、

「アクセスはあるのに問い合わせが増えない」
「広告を出しても商品が売れない」
「デザインは綺麗なのに成果につながらない」

と悩んでいる方も多いのではないでしょうか。

LPでは、単純にデザインを綺麗にすれば成果が出るわけではありません。

むしろ、見た目を良くしようとするあまり情報を詰め込みすぎたり、派手な演出を追加したりすることで、ユーザーにとって分かりにくいLPになってしまうことがあります。

LPの目的は「デザインを見てもらうこと」ではなく、商品購入や問い合わせ、資料請求など、ユーザーに目的の行動をしてもらうことです。

この記事では、LP制作で避けたい代表的なNGデザインを10個紹介します。

これからLPを制作する方はもちろん、現在公開しているLPを改善したい方もチェックしてみてください。

LPは「綺麗なデザイン」だけでは成果につながらない

LPを制作するときに最初に考えたいのが、ページの目的です。

一般的なWebサイトでは複数のページを見てもらうことがありますが、LPでは基本的に1ページの中で、

興味を持つ
↓
商品の特徴を理解する
↓
必要性を感じる
↓
不安や疑問を解消する
↓
購入・問い合わせをする

という流れを作ります。

そのため、LPでは一つひとつのパーツが綺麗かどうか以上に、ユーザーが迷わず内容を理解できるかが重要です。

Googleもページエクスペリエンスについて、モバイルで適切に表示されることや、メインコンテンツをユーザーが容易に識別できることなど、総合的な使いやすさを重視しています。

つまり、装飾を増やすことより、

「読みやすい」
「分かりやすい」
「迷わない」
「行動しやすい」

という状態を作ることが大切です。

NG① ファーストビューで何の商品なのか分からない

LPで特に重要なのがファーストビューです。

ファーストビューとは、ページを開いた直後にスクロールせず表示される部分のことです。

ここを見ただけで、

「何の商品・サービスなのか」
「どんなメリットがあるのか」
「自分に関係がある商品なのか」

がある程度理解できる状態を目指します。

ありがちな失敗が、ブランドイメージを重視しすぎて、大きなイメージ写真と抽象的なコピーだけを配置してしまうケースです。

例えば、

「新しい毎日を、あなたに。」

というコピーと人物写真だけでは、化粧品なのか家電なのかサービスなのか分かりません。

キャッチコピーには商品のベネフィットを入れ、商品写真などを組み合わせることで、一目で内容が伝わるファーストビューにしましょう。

NG② 情報を詰め込みすぎる

伝えたいことが多いほど、LPに大量の情報を入れたくなります。

しかし、文字・写真・アイコン・バナーなどを隙間なく配置すると、ユーザーはどこから読めばいいのか分からなくなります。

重要なのは「情報量を減らす」というより、情報に優先順位をつけることです。

例えば、

大見出し
↓
簡単な説明
↓
画像
↓
詳細説明

というように視線の流れを作ります。

余白も立派なデザイン要素です。

セクションとセクションの間に十分な余白を入れることで、情報のまとまりが分かりやすくなります。

NG③ 文字が小さすぎる

PCでデザインを制作していると見落としやすいのが、スマートフォンでの文字サイズです。

PC画面では綺麗に見えていても、スマートフォンで確認すると文字が非常に小さくなっていることがあります。

特に注意したいのが、

注釈
商品説明
料金
CTA周辺のテキスト

です。

「デザインをスッキリ見せたいから」という理由だけで文字を小さくするのは避けましょう。

公開前には必ず実機のスマートフォンでも確認し、無理なく読めるサイズになっているかチェックします。

NG④ 色を使いすぎる

LPを目立たせようとして、

赤
青
黄色
緑
ピンク

など多くの色を使用すると、逆に重要な場所が分からなくなります。

基本となるカラーを決め、

ベースカラー
メインカラー
アクセントカラー

というように役割を分けると、ページ全体に統一感が生まれます。

特にCTAには、ページ内で目立つアクセントカラーを使用すると効果的です。

「目立たせたい場所だけ色を変える」という考え方が重要です。

NG⑤ CTAが目立たない

CTA（Call To Action）は、ユーザーに行動を促すボタンやエリアです。

例えば、

「購入する」
「無料で相談する」
「資料請求する」

などがCTAにあたります。

LPの内容がどれだけ良くても、CTAが見つからなければコンバージョンにつながりません。

よくあるのが、デザインに馴染ませすぎてボタンが背景と同化しているケースです。

CTAは、

・周囲に余白を作る
・背景とのコントラストをつける
・ボタンだと分かる形にする
・行動内容を具体的に書く

といった工夫をしましょう。

NG⑥ CTAを増やしすぎる

CTAは目立たせる必要がありますが、種類を増やせば良いわけではありません。

例えば同じLPの中に、

「購入する」
「資料請求」
「お問い合わせ」
「LINE登録」
「メルマガ登録」

などが並んでいると、ユーザーはどれを選べばよいか迷ってしまいます。

LPでは最終的にユーザーに何をしてほしいのかを決め、メインとなるCTAを明確にしましょう。

同じCTAをページ内に複数回配置すること自体は問題ありません。

重要なのは「行動の種類を増やしすぎない」ことです。

NG⑦ スマートフォンを考えずにデザインする

現在のWeb制作ではスマートフォンでの表示を無視できません。

PC版をそのまま縮小しただけでは、

文字が小さい
ボタンが押しにくい
画像の内容が分からない
横スクロールが発生する

といった問題が起こります。

Googleもページエクスペリエンスの評価において、モバイル端末でコンテンツが適切に表示されるかどうかを確認することを推奨しています。

LP制作ではPCとスマートフォンを別々に考え、

「スマートフォンでどう見えるか」

まで設計することが大切です。

NG⑧ 画像を大きく使いすぎてページが重い

LPでは商品写真やイメージ画像が重要です。

ただし、高解像度の画像を必要以上に大量に使用すると、ページの表示速度が低下する原因になります。

GoogleのCore Web Vitalsでは、読み込み速度を評価するLCPについて、良好なユーザー体験の目安として2.5秒以内が示されています。

画像は表示サイズに合わせて適切にリサイズし、WebPなどの軽量な画像形式を利用することも検討しましょう。

「画質を落とす」のではなく、必要な画質を保ちながらデータ量を減らすことがポイントです。

NG⑨ アニメーションを使いすぎる

スクロールすると文字が動いたり、画像がフェードインしたりするアニメーションは、LPの印象を良くするために有効です。

しかし、

文字が常に動く
背景が大きく動く
スクロールするたびに演出が入る
CTAが激しく点滅する

といった過剰なアニメーションは、内容を読む邪魔になる場合があります。

アニメーションは「動かすこと」が目的ではありません。

商品の特徴を分かりやすく見せたり、重要な場所へ視線を誘導したりするために使います。

特にスマートフォンでは動きの多いページが使いにくくなることもあるため、必要な場所に限定するのがおすすめです。

NG⑩ デザインを作って終わりにする

LPは公開したら完成、というわけではありません。

実際にユーザーがページを訪れるようになったら、

どこまでスクロールされているか
CTAがクリックされているか
どこから離脱しているか
コンバージョンにつながっているか

などを確認します。

例えば、ファーストビュー直後の離脱が多いなら、キャッチコピーや商品説明に問題がある可能性があります。

CTAまで到達しているのにクリックされないのであれば、CTAのデザインや文言、オファー内容などを見直す余地があります。

Google Analyticsなどのアクセス解析やヒートマップを活用しながら改善していきましょう。

LPは「制作して終わり」ではなく、公開後に改善を繰り返すことで育てていくページと考えるのがおすすめです。

LP公開前にチェックしたいポイント

最後に、制作したLPを公開する前に以下を確認してみましょう。

□ ファーストビューだけで商品内容が分かる
□ キャッチコピーが読みやすい
□ 情報を詰め込みすぎていない
□ 色を使いすぎていない
□ CTAがすぐ見つかる
□ CTAの目的が統一されている
□ スマートフォンでも読みやすい
□ ボタンをタップしやすい
□ 画像容量が大きすぎない
□ アニメーションを使いすぎていない
□ 商品のメリットが伝わる
□ 購入前の不安を解消できる情報がある
□ ページの最後まで自然な流れになっている

すべて完璧にする必要はありません。

まずは「ユーザーが迷う場所がないか」という視点でページ全体を確認してみてください。