LPデザインのコツ12選｜おしゃれより成果につながる見せ方
目次
LPデザインのコツは、「読む順番を絵で示す」「強弱をはっきりつける」「スマホの親指で完結させる」の3つに集約できます。デザインの役割は見た目を美しくすることではなく、広告から来た人が迷わず読み進め、必要な情報を受け取り、行動できるようにすることだからです。
きれいさと成果は、同じ方向を向くこともあれば、ぶつかることもあります。12の視点に加え、専門用語なしの確認方法、NG・OK比較、デザイナーとの確認チェックリストをまとめました。情報の並べ方は別記事「LP構成の作り方」で扱っているため、ここでは構成が決まったあとの見せ方に絞ります。
01LPのデザインが担う3つの役割
LPのデザインには、大きく次の3つの役割があります。
| 役割 | 内容 | うまくいっていないときのサイン |
|---|---|---|
| 読む順番を示す | 視線を上から下へ、迷わず進ませる | 途中で急に離脱が増える |
| 重要度を伝える | 大事な情報ほど目立たせる | 読まれたいところが読まれていない |
| 信頼をつくる | 見た目の整い方で安心感を与える | 申し込み直前で離脱する |
デザインを評価するときは、「好きか嫌いか」ではなく、この3つの役割を果たしているかで話すと、関係者の間で意見がまとまりやすくなります。
02見せ方の基本：視線の流れをつくる4つのコツ
コツ1. 1ブロック1メッセージにする
1つのブロックで伝えることは1つに絞ります。見出し、短い説明、それを裏づける画像や図、という単位で組むと、スクロールしながらでも内容が頭に入ります。1ブロックにあれもこれも詰め込むと、どれも印象に残りません。
コツ2. 見出しだけで話がつながるようにする
忙しい読み手は、本文を読まずに見出しだけを拾い読みします。見出しを上から順に読んだだけで、ページ全体の主張がわかる状態を目指しましょう。見出しが「特徴」「サービス内容」のような名詞だけになっていると、拾い読みでは何も伝わりません。
コツ3. 視線を止める場所を決める
ページ全体を同じ調子で並べると、視線は止まらずに流れていきます。数字、比較表、お客様の声など、とくに読んでほしいブロックだけ背景色を変える、幅を広げるといった変化をつけて、視線を止める場所をつくります。
コツ4. ブロックの区切りを見せる
ブロックとブロックの境目がわからないと、どこからどこまでが1つの話なのかが伝わりません。背景色の切り替え、十分な余白、区切りの見出しなどで、話の切れ目をはっきり見せましょう。
03情報の強弱をつける4つのコツ
コツ5. 文字の大きさに段をつける
見出し、小見出し、本文、注釈の文字の大きさを、はっきり区別します。大きさの差が小さいと、どれが見出しなのかがわからず、すべてが同じ重さに見えてしまいます。使う大きさは数種類に絞り、ページ全体で統一します。
コツ6. 強調は1ブロック1〜2か所に絞る
太字、色文字、マーカー、囲みなど、強調の手段はたくさんあります。しかし、あちこちを強調すると、結局どこも目立たなくなります。強調するのは、1ブロックにつき1〜2か所程度にとどめるのが目安です。
コツ7. 色の役割を決める
色は、ベースの色、メインの色、目立たせたい場所に使う色（アクセントカラー）というように役割を分けます。とくにアクセントカラーは、CTAボタンなど本当に押してほしい場所だけに使うと、自然と視線が集まります。
コツ8. 余白を「削らない」
情報を多く載せたいと、余白を詰めてしまいがちです。しかし、余白は読み手に一呼吸おかせ、要素のまとまりを示す役割を持っています。余白が少ないページは、内容が多いほど読みにくくなります。
04信頼とスマホ対応のための4つのコツ
コツ9. 写真は「実物」を優先する
素材サイトの写真はきれいですが、どこかで見たような印象を与えることがあります。商品、スタッフ、店舗、作業の様子など、実物の写真があれば優先して使いましょう。多少素朴でも、実在感のある写真のほうが信頼につながることがあります。
コツ10. スマホの1画面を基準に設計する
SNS広告から来る人の多くはスマホで見ています。パソコンで見て整っていても、スマホでは文字が小さすぎたり、横並びの要素が崩れたりすることがあります。デザインの確認は、必ずスマホの実機で行いましょう。
コツ11. ボタンは親指で押しやすく
スマホでは、ボタンを親指で押す場面がほとんどです。小さすぎるボタンや、隣のリンクと近すぎるボタンは押し間違いを招きます。ボタンの大きさと周りの余白には余裕を持たせます。
コツ12. 表示の速さもデザインの一部
大きな画像や動画、凝った動きを多用すると、ページの表示が遅くなります。表示を待つ間に離脱されてしまえば、どんなに美しいデザインも見てもらえません。画像は適切なサイズに圧縮し、動きは意味のあるところだけに使いましょう。
05デザインを専門用語なしで確認する「目を細めるテスト」
デザインの良し悪しを判断するのは、専門家でなくても可能です。おすすめは、画面から少し離れて目を細め、細かい文字が読めない状態でページを眺める方法です。
- 最初に目に入るのは何か（それはいちばん伝えたいことか）
- 見出しとそれ以外の区別がつくか
- ボタンの位置がすぐにわかるか
- ブロックの区切りが見えるか
- どこか1か所だけ、異常に目立つ場所がないか
目を細めると、文字の内容ではなく、形や色の強弱だけが見えます。この状態で、伝えたい順番どおりに目が動くなら、強弱の設計はおおむねうまくいっています。
06LPデザインのよくあるNG・OK比較
| 場面 | NG | OK |
|---|---|---|
| 見出し | 「サービスの特徴」 | 「入力は月1回、あとは自動で集計」 |
| 強調 | 1ブロックに太字・赤字・マーカーが5か所 | いちばん伝えたい1語だけにマーカー |
| 写真 | 素材サイトの笑顔のビジネスパーソン | 実際の作業画面やスタッフの写真 |
| 色 | ボタンと同じ色を見出しや装飾にも使う | ボタンの色はボタンだけに使う |
| 文字 | 画像の中に長文を入れる | 長文はテキストで組み、画像は補足に |
| スマホ | パソコンの横並びを縮小しただけ | スマホでは縦に並べ直す |
| 余白 | 情報を詰め込み、余白がほとんどない | ブロックごとに十分な余白を確保 |
07デザイナーとの確認チェックリスト
デザインの確認では、次の項目をデザイナーと一緒に見ていくと、感想ではなく役割で話し合えます。
- ファーストビューだけで、誰向けの何のページかがわかるか
- 見出しを上から読むだけで、主張がつながっているか
- 1ブロックに1つのメッセージになっているか
- 文字の大きさの段が、ページ全体で統一されているか
- 強調が1ブロック1〜2か所に収まっているか
- アクセントカラーがボタンなどに限られているか
- 実物の写真を使える場所で使っているか
- スマホの実機で、文字の大きさ・ボタンの押しやすさを確認したか
- 長文を画像の中に入れていないか
- 画像が圧縮されていて、表示が遅くないか
- 目を細めたとき、伝えたい順番に目が動くか
08LPデザインの改善は公開後の数字と組み合わせる
デザインの良し悪しは、最終的には公開後の数字で確かめます。
- ヒートマップで、よく読まれているブロックと読み飛ばされているブロックを確認する
- スクロールの到達率で、離脱が急に増えている場所を探す
- ボタンのクリック率で、ボタンの見せ方や位置を検証する
数字で問題のある場所がわかったら、その場所のデザインを1つずつ変えて比べます。ページ全体を一度に作り直すと、何が効いたのかがわからなくなります。
数字を読むときは、LP単体で結論を出さないようにします。ファーストビューでの離脱が多くても、原因がデザインとは限らず、広告で期待した内容と違うと感じて戻っていることもあります。広告の訴求ごとにスクロールの到達率を分けて見ると、この2つを区別しやすくなります。ただ、数字の確認、広告との照合、修正、再計測の流れは、1か所を確かめるだけでも時間がかかり、訪問数がたまるまで判断もできません。担当者が兼務の場合は、一度に見る場所を1つに絞り、確認日を先に決めておくと止まりにくくなります。
09商材別に気をつけたいデザインのポイント
12のコツはどの商材にも共通しますが、商材によって重みの置き方が変わります。
| 商材 | とくに気をつけたい点 | 理由 |
|---|---|---|
| BtoBサービス | 図や表で仕組みを見せる、社内共有しやすい情報の整理 | 決裁者と担当者が読み、比較検討されるため |
| 美容・健康 | 実物の写真、使用前後の見せ方の注意 | 見た目で魅力が伝わる一方、表現の規制にも注意が必要なため |
| 店舗・サロン | 地図・アクセス・営業時間を目立たせる | 「行けるかどうか」が判断の大半を占めるため |
| スクール・説明会 | 講師や受講生の写真、日程の見やすさ | 人で選ばれやすく、日程の選択が行動に直結するため |
| 通販 | 価格・条件の見やすさ、購入ボタンの押しやすさ | 申し込み直前の不安が離脱につながりやすいため |
10デザイナーに依頼するときに伝えること
デザインの仕上がりは、依頼の段階でどれだけ情報を渡せたかに大きく左右されます。次の項目を依頼メモとしてまとめて渡すと、「イメージと違う」という手戻りが減ります。
| 項目 | 書く内容 |
|---|---|
| 目的 | LPのゴール（資料請求、予約など）を1つ |
| 読み手 | 誰が、どの広告から、どんな気持ちで来るか |
| 伝えたい印象 | 言葉で3つほど（例：誠実、明快、親しみやすい） |
| 参考 | 好きなLPと、その「どこが」好きか |
| 避けたいこと | 競合と似せたくない点、使いたくない色や写真 |
| 必ず目立たせたいもの | CTAボタン、料金、特典など |
| 素材 | 使える写真、ロゴ、数字の出典 |
| 確認の方法 | スマホの実機で確認すること、確認する人 |
参考のLPを渡すときは、URLだけでなく「どこが好きか」を書き添えるのがポイントです。色が好きなのか、写真の使い方が好きなのかで、デザイナーが参考にする部分がまったく変わります。
実際に配信している広告の画像や動画も一緒に渡すと、デザイナーは広告からの続きとして見せ方を考えられます。文字の説明だけで伝えるより、広告とLPのずれを防ぎやすくなります。
11よくある質問
おしゃれなデザインは成果に悪影響ですか？
おしゃれなこと自体は問題ではありません。ブランドの世界観が購入の決め手になる商材では、むしろ大切な要素です。問題になるのは、おしゃれさを優先した結果、読む順番がわかりにくくなったり、ボタンが目立たなくなったりする場合です。
デザインを良くするために、まず何から直せばいいですか？
まずはスマホの実機で、ファーストビューとボタンの見え方を確認しましょう。次に、見出しだけを拾い読みして話がつながるかを確かめます。この2つは、デザインを大きく変えなくても改善しやすく、効果も出やすい部分です。見出しの書き換えやボタンの調整で済む範囲なら、社内の対応で進められることも多いでしょう。
LPのデザインは、どのくらいの頻度で見直せばいいですか？
広告の訴求を変えたとき、数字に変化があったときが見直しの目安です。定期的に全体を作り直すより、問題のある場所を数字で特定し、部分的に改善していくほうが効率的です。
12まとめ
- LPのデザインの役割は「読む順番を示す」「重要度を伝える」「信頼をつくる」の3つ
- 1ブロック1メッセージ、見出しだけで話がつながる状態を目指す
- 文字の大きさに段をつけ、強調とアクセントカラーは「ここぞ」に限る
- 写真は実物を優先し、スマホの実機と表示の速さで確認する
- 目を細めるテストとチェックリストで、感想ではなく役割で話し合う
LPのデザインは、広告で約束したことを、迷わず受け取ってもらうための道具です。Lic.では、広告のクリエイティブとLPのデザインを一続きで設計し、広告で興味を持った人がそのまま読み進められる見せ方を大切にしています。
広告のクリックはあるのに、申し込みが増えない？
広告運用を前提に、離脱防止の設計までふくめたLPや、配信用の広告クリエイティブを制作します。公開後も、配信データをもとに改善を続けます。
- 離脱防止まで考えたLP制作
- 配信用の広告クリエイティブ制作
- 配信データをもとにした継続的な改善
まだ具体的に決まっていない段階のご相談も歓迎です。
