せっかく作ったLPが読まれない原因は「視線の流れ」と「テキスト量」にあります。CSSとHTML構造の改善で、ユーザーを自然にCTAへ誘導する実践的な手法を解説します。
「作ったのに読まれない」LP、心当たりありませんか？
Googleアナリティクスを確認したとき、こんな数字を見て頭を抱えた経験はないでしょうか。
- 直帰率が80%を超えている
- 平均セッション時間が30秒以下
- スクロール深度が30%にも届かない
FivenineDesignでも、リニューアル相談を受けるクライアントの9割以上が「LP自体はあるけど問い合わせが来ない」という状況で持ち込んでこられます。デザインが古いわけでも、サービス内容が悪いわけでもない。問題は「視線の流れが設計されていない」ことと「テキスト量が最適化されていない」ことに集約されます。
この記事では、実際の改善施策をコード例とともに紹介します。フロントエンドの知識が多少ある方であれば、今日から手を動かせる内容です。
なぜユーザーはスクロールをやめてしまうのか
ユーザーがLPを離脱するパターンには、大きく2つの原因があります。
原因① 視線の「次の着地点」が見えない
人の視線はWebページ上で「F字型」もしくは「Z字型」に動くことが知られています。しかし多くのLPは、この視線の動きを無視したレイアウトになっています。要素がただ縦に並んでいるだけで、「次はここを見てほしい」という意図が設計されていない状態です。
視線を引き継ぐ仕掛けがなければ、ユーザーは「なんとなく読み終わった気」になってそのまま離脱します。実際、ヒートマップツールで分析すると、多くのLPではファーストビューの下端で視線が止まっていることが確認できます。
原因② テキストが「壁」になっている
情報を丁寧に伝えようとするあまり、テキストを詰め込みすぎるケースが非常に多いです。1段落が200文字を超えるような説明文が続くと、ユーザーは「後で読もう」と思った瞬間に離脱します。
逆に、テキストが少なすぎる「引き算しすぎ」のLPも問題です。情報が薄く、信頼感が生まれません。適切な密度を意識することが肝心です。
実践：視線誘導を設計するHTML/CSS構造
ステップ1：セクション間に「引力」を作る
あるクライアント（神奈川県内の士業事務所）のLPを改善した際、最も効果が出たのがセクションの接続部分の設計でした。各セクションがぶつ切りになっていたため、ユーザーが「ここで終わり」と感じて離脱していたのです。
解決策として、セクション間に視線を引き下ろす「トランジション要素」を挿入しました。
<!-- セクション間に視線を引き込む斜めカット -->
<section class="section-a">
<div class="container">
<!-- コンテンツ -->
</div>
<div class="section-divider"></div>
</section>
<section class="section-b">
<!-- 次のコンテンツ -->
</section>
.section-a {
position: relative;
background-color: #f8fafc;
padding-bottom: 80px;
}
.section-divider {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #ffffff; /* 次セクションの背景色 */
clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
このような斜めカットの境界線は、視線を自然に「下へ、下へ」と誘導します。改善後、このクライアントではスクロール深度が平均42%から71%へ向上し、問い合わせフォームの到達率が約1.7倍になりました。
ステップ2：見出しに視線の「重力」を持たせる
視線誘導において、見出しのタイポグラフィとレイアウトは非常に重要です。フォントサイズの差を明確につけることで、ユーザーの目が自然と「大きいものから小さいものへ」と流れます。
/* 視線の重力を意識した見出し設計 */
.lp-heading {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
color: #0f172a;
}
.lp-subheading {
font-size: clamp(1rem, 2.5vw, 1.25rem);
font-weight: 400;
line-height: 1.8;
color: #64748b;
margin-top: 1rem;
max-width: 600px; /* 1行の文字数を制限 */
}
clamp()を使うことで、デバイス幅に関わらず常に適切なフォントサイズ比率を維持できます。スマートフォンで見たときに見出しが本文と大差ない大きさになってしまうのは、視線誘導が崩れる典型的な失敗です。
ステップ3：CTAボタンに「視線の終着点」を明示する
どれだけ優れたコンテンツがあっても、CTAボタンが埋もれていれば問い合わせにつながりません。ボタンの存在を視覚的に際立たせる「注意引き付け」のアニメーションは、実装コストが低い割に効果が大きいです。
/* 視線を引き寄せるCTAアニメーション */
.cta-button {
display: inline-block;
padding: 1rem 2.5rem;
background-color: #3B82F6;
color: #ffffff;
font-size: 1.125rem;
font-weight: 700;
border-radius: 0.5rem;
text-decoration: none;
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
}
.cta-button::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 0.75rem;
border: 2px solid rgba(59, 130, 246, 0.5);
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.05); }
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
}
このパルスアニメーションは「ここが重要です」という合図として機能します。ただし、ページ内でアニメーションを使う要素は1〜2箇所に絞ること。乱用すると注意が分散してしまいます。
テキスト量の最適化：3つの黄金ルール
視線誘導と同じくらい重要なのが、テキストの「量と構造」の設計です。
flowchart TD
A[テキストブロックを書く] --> B{1段落が80文字を超えているか？}
B -->|Yes| C[分割または箇条書きに変換]
B -->|No| D{専門用語が含まれているか？}
D -->|Yes| E[平易な言葉に置き換え or 注釈を追加]
D -->|No| F{この情報は本当に必要か？}
F -->|No| G[削除する]
F -->|Yes| H[掲載確定]ルール1：1段落は最大80文字 スマートフォンの画面で80文字を超える段落は「テキストの壁」に見えます。改行を活用し、1つの段落に1つのメッセージだけを込めるよう意識してください。
ルール2：重要な情報は「上3行」に集約 ユーザーが各セクションで確実に読むのは最初の数行だけです。「このセクションで何が分かるのか」をセクション冒頭に明示する習慣をつけましょう。
ルール3：箇条書きは3〜5項目まで 箇条書きが6項目以上になると、ユーザーは読む気を失います。どうしても多くなる場合は、グルーピングして小見出しを立てることを検討してください。
よくある失敗パターンと対処法
Web制作・UI改善もお任せください
フロントエンド開発
モダンな技術で、使いやすく美しいWebサイトを実現します
※ 通常1営業日以内にご返信します
まとめと今日からできる次のステップ
視線誘導とテキスト最適化は、デザインを大幅に変えなくてもCSSとHTML構造の調整だけで大きな変化を生み出せる領域です。今回紹介した施策を優先度順に整理すると、以下のようになります。
特にテキスト量の最適化は、コードを一切書かなくても今日から着手できる最優先施策です。まずは既存LPの本文を見直すところから始めましょう。
「自分で試してみたけれど改善が見えない」「そもそもどこから手をつければいいか分からない」という場合は、ぜひFivenineDesignにご相談ください。20年以上の実績をもとに、LPの構造・テキスト・視線設計を一緒に見直します。
