広告をクリックした人の9割が、何もせずにページを閉じている
Web広告の運用レポートを見ると、クリック数は月1,000件を超えているのに、問い合わせフォームの送信は月に10件程度。この数字に違和感を覚えたことはないでしょうか。
広告のクリック率やキーワードの選定に問題がないのに成果が出ないとき、原因の多くは広告の「その先」、つまりランディングページ（LP）のデザインにあります。
LPは、広告をクリックした見込み客が最初に目にするページです。ここで「この会社なら相談してみよう」と感じてもらえるかどうかが、問い合わせ件数を大きく左右します。
この記事では、デザインの専門知識がなくても理解できるよう、CV率（コンバージョン率）を上げるための7つのUI/UX原則を、企業のLP改善事例とともに解説します。
広告運用の改善施策については、アドストラテジーの記事も参考にしてください。
原則1：ファーストビューで「何の会社か」を3秒で伝える
ページを開いて最初にスクロールせずに見える範囲を「ファーストビュー」と呼びます。Nielsen Norman Groupの調査によると、ユーザーがページに留まるかどうかを判断する時間はわずか10秒以内。実質的には、ファーストビューの3秒でページの運命が決まります。
ファーストビューに必要な要素は3つだけです。
まず、ユーザーの課題を端的に表現したキャッチコピーです。「高品質な製品を適正価格でお届けします」のような企業目線のコピーではなく、「納期遅れに悩んでいませんか？」のようにユーザーの困りごとを言語化したコピーが効果的です。Google広告のレスポンシブ検索広告で成果の出た見出しをそのままLP冒頭に転用するのも有効な手法です。
次に、何を提供する会社なのかが一目でわかるサブコピーです。キャッチコピーの直下に、サービスの具体的な内容を1文で記載します。
そして、次のアクションを示すCTAボタン（「資料請求はこちら」「無料相談を申し込む」など）です。ファーストビューにCTAがないLPは、入口のないお店のようなものです。
Googleが提唱するLCP（Largest Contentful Paint）の目標値は2.5秒以内です。ファーストビュー内のメイン画像やキャッチコピーが2.5秒以内に描画されないと、ユーザーは内容を判断する前にページを去ってしまいます。
原則2：CTAボタンは「ページに1つ」ではなく「視線の流れに複数」
LPの目的は1つ、問い合わせや資料請求などのコンバージョンです。その目的に対して、CTAボタンはページ内に複数回配置してください。
ユーザーは上から下にページを読み進めます。ファーストビュー直下、サービス説明の後、事例紹介の後、そしてページ最下部に、同じCTAボタンを自然な文脈で繰り返し配置します。
Unbounceの調査では、LPのCTAは1種類に統一しつつ複数回表示することで、コンバージョン率が平均30%向上するという結果が出ています。
注意すべきは、「資料請求」「お問い合わせ」「電話する」のように複数種類のCTAを並べないことです。選択肢が増えるほどユーザーは迷い、結局何もせずにページを閉じてしまいます。これは心理学で「決定回避の法則（ヒックの法則）」と呼ばれ、選択肢の数が増えるほど意思決定に時間がかかり、最終的に行動しないという現象です。
CTAボタンのデザインで押さえるべき3点:
- コントラスト: ページの基調色と補色関係にある色を使う。白背景にグレーのボタンはCTAとして認識されにくい
- マイクロコピー: 「送信」ではなく「無料で資料をもらう」のように、クリック後に得られる価値を明示する
- 周辺の余白: ボタンの上下左右に十分な余白を確保し、視線が自然にボタンに集まるようにする
原則3：フォームの入力項目は「必要最小限」に絞る
問い合わせフォームの入力項目が多いほど、途中で離脱する人が増えます。これは直感的にも理解できるはずです。
HubSpotの調査によると、フォームの入力項目を4項目から3項目に減らすだけで、コンバージョン率が50%向上するケースがあります。
資料請求であれば、会社名・氏名・メールアドレスの3項目で十分です。電話番号や部署名、検討時期といった項目は、資料送付後のフォローアップ時に確認すればよいのです。
「でも、営業部門がもっと情報を欲しがる」という声は必ず出ます。しかし考えてみてください。10項目のフォームで月5件の問い合わせを得るのと、3項目のフォームで月15件の問い合わせを得るのと、どちらが営業にとって価値があるでしょうか。
さらに、フォーム周りのUI改善では以下のポイントも効果的です。
- リアルタイムバリデーション: 入力中にエラーを即時表示する。送信ボタンを押した後に全エラーをまとめて表示するのは離脱率を上げる
- 入力例の表示: プレースホルダーに「例: 株式会社〇〇」と表示し、入力形式の迷いを減らす
- プログレスバー: 複数ステップのフォームでは進捗を視覚化して完了意欲を維持する
フォームUI設計の詳細は、フォーム離脱率を半減させるUI設計の実践知識でも解説しています。
原則4：信頼性の証拠を「具体的に」見せる
初めて訪問した企業のLPで、ユーザーが最も気にするのは「この会社は信頼できるか」という点です。
信頼性を示す要素として効果が高いのは、導入実績の数字（「累計500社導入」）、具体的な顧客名やロゴ（許可を得た上で）、そして顧客の声です。
顧客の声を掲載する際は、「とても良いサービスでした」のような抽象的な感想ではなく、「導入後3ヶ月で問い合わせが月12件から28件に増加しました」のように具体的な成果を含む声を選んでください。Baymard Instituteの調査では、具体的な数値を含む顧客の声は、抽象的な感想と比べてコンバージョンへの影響が2倍以上あると報告されています。
信頼性を強化する5つの要素:
| 要素 | 効果 | 実装例 |
|---|---|---|
| 導入社数 | 規模の証明 | 「累計500社以上が導入」 |
| 顧客ロゴ | 視覚的な権威性 | 業界上位企業のロゴを横並び表示 |
| 数値入り体験談 | 成果の具体性 | 「CVRが2.1%→4.8%に向上」 |
| 第三者認証 | 客観的な品質保証 | ISO認証マーク、セキュリティバッジ |
| メディア掲載実績 | 社会的証明 | 「〇〇新聞に掲載されました」 |
Nielsenの信頼性ガイドラインでは、これらの要素を「ページの上部3分の1以内」に配置することを推奨しています。ユーザーはスクロール前に信頼判断を下すことが多いためです。
原則5：余白は「デザインの無駄」ではなく「読みやすさの投資」
社内でLPのレビューをすると、「余白が多すぎる」「もっと情報を詰め込めないか」という意見が出ることがあります。しかし、適切な余白はコンバージョン率を上げる重要な設計要素です。
余白が十分にあると、ユーザーの視線は自然と重要な要素（キャッチコピーやCTAボタン）に集中します。逆に情報が詰め込まれたページは、どこを見ればいいかわからず、結果としてCTAに到達する前に離脱されます。
特にスマートフォンで閲覧されるLPでは、余白の重要性はさらに高まります。画面が小さい分、テキストと画像の間に十分な間隔がないと読みにくく、タップしたいボタンも押しにくくなります。
UIデザインの世界では「近接の法則」が広く知られています。関連する要素は近くに、無関係な要素は離して配置することで、ユーザーは無意識に情報のまとまりを理解できます。この法則をLPに応用すると、各セクションの間に十分な余白を取りつつ、セクション内の見出し・本文・CTAは近接させて一体感を持たせるのが理想です。
CSSの実装としては、セクション間のpaddingは80px〜120px（モバイルでは48px〜64px）が目安です。テキストの行間（line-height）は本文で1.8〜2.0を確保すると、長文でも読み疲れしにくくなります。
原則6：ページの表示速度は「3秒以内」を死守する
デザインがどれほど優れていても、ページの表示に5秒以上かかれば、ユーザーの半数以上が表示を待たずに離脱します。
Googleの調査では、モバイルページの読み込み時間が1秒から3秒に増えると直帰率が32%増加し、1秒から5秒では直帰率が90%増加すると報告されています。
LP高速化のために最初に取り組むべきは画像の最適化です。一眼レフで撮影した数MBの写真をそのまま掲載していないでしょうか。WebP形式への変換と適切なサイズへのリサイズだけで、ページの読み込み時間は大幅に改善します。
2026年のCore Web Vitals基準値:
| 指標 | 良好 | 改善が必要 | 不良 |
|---|---|---|---|
| LCP（最大コンテンツ描画） | 2.5秒以内 | 2.5〜4秒 | 4秒超 |
| INP（次回ペイントまでの応答性） | 200ms以内 | 200〜500ms | 500ms超 |
| CLS（累積レイアウトシフト） | 0.1以内 | 0.1〜0.25 | 0.25超 |
PageSpeed Insightsで自社LPのスコアを定期的に測定し、上記基準を満たしているか確認してください。特にINP（Interaction to Next Paint）は2024年3月にFID（First Input Delay）から変更された比較的新しい指標で、ボタンクリックやフォーム入力時の応答速度を評価します。
技術的な実装方法については、テックビルドのCloudflare Workers解説が参考になります。Cloudflareの画像最適化機能を使えば、自動的にWebP変換とリサイズが行えます。
原則7：スマートフォンファーストで設計する
総務省の通信利用動向調査によると、2025年時点で日本のインターネット利用端末はスマートフォンが71.2%を占めています。にもかかわらず、多くの企業のLPはPCで作成・確認され、スマートフォンでの見え方が後回しにされています。
スマートフォンファーストの設計では、以下が基本です。
- 横幅いっぱいのCTAボタン: タップ領域を最大化し、片手操作でも押しやすくする
- 最低48px四方のタップターゲット: Googleのモバイルユーザビリティガイドラインでは、タップ要素間に8px以上の間隔を確保することを推奨しています
- 片手操作を前提としたフォーム設計:
inputmode="email"やinputmode="tel"属性を指定し、入力内容に応じた適切なキーボードを自動表示する
PCで見たときの美しさよりも、スマートフォンでの操作のしやすさを優先してください。CSSメディアクエリでのブレークポイントは768pxが一般的ですが、LPの場合は480px以下の狭い画面幅でも崩れないことを必ず検証しましょう。
まとめ
LPのCV率改善は、大がかりなリデザインをしなくても、この7つの原則に沿って部分的な改善を重ねるだけで着実に成果が出ます。
改善の優先順位に迷ったら、まず**原則1（ファーストビュー）と原則3（フォーム最適化）**から着手してください。この2つはデザインスキルを問わず、コピーライティングと項目の取捨選択だけで実施でき、効果が出やすい施策です。
まずは来週、自社のLPをスマートフォンで開いて、ファーストビューに「何の会社か」「次に何をすればいいか」が3秒以内に伝わるか確認してみてください。もし伝わらないなら、そこが最初の改善ポイントです。
LPのCVR改善項目を網羅的に確認したい方は、ランディングページのCVR改善チェックリストもご活用ください。