私はこれまで、大手デジタル広告代理店、UXコンサルティング会社、デジタル広告支援会社などを経験し、才流でも広告出稿やWebサイトに関する案件を複数ご支援しています。そのなかでお客さまから何度もご相談いただいたことがあるのが、以下の課題です。
「広告を出稿してLPの流入は増えたのに、コンバージョン率が上がらない」
このような課題を相談いただいたとき、私がまず確認するのはLP（ランディングページ）のファーストビューです。
ユーザーは広告をクリックし、LPに訪問すると数秒で「離脱するか」を判断します。そこで重要なのが、ユーザーが最初に目にするファーストビューです。ファーストビューの訴求を変えたり、CTAを設置したりといった改善で、短期で効果が出るケースもあります。
本記事では、ファーストビューを最適化する7つの要点を解説します。
なお、以下の記事ではLPの標準ワイヤーフレームを解説しています。
※関連記事：BtoB商材のLP（ランディングページ）の標準ワイヤーフレーム
ファーストビュー改善の優先順位
本記事で説明するファーストビュー改善の要点を、優先順位が高い順に紹介します。
- 要点1：ファーストビューにCTAを設置する
- 要点2：ユーザーの期待や疑問に応える
- 要点3：サービス内容とサービス名を明確に伝える
- 要点4：最大の提供価値を1メッセージで伝える
- 要点5：サブメッセージでメインメッセージを補強する
- 要点6：「信頼」の裏付けを提示する
- 要点7：ファーストビューで完結するデザインで見せる
なかでも、「要点1：ファーストビューにCTAを設置する」はもっとも即効性がある改善です。すべてを改善できない場合、まずは1つだけでも取り組んでみてください。
次に着手したいのは、「要点2：ユーザーの期待や疑問に応える」「要点3：サービス内容とサービス名を明確に伝える」「要点4：最大の提供価値を1メッセージで伝える」です。これらはユーザーが商品・サービスに対する理解を深めるために必要な部分です。
最後に、要点5～7を改善します。ユーザーの行動をさらに後押しするために補強する要素です。優先順位に沿って、段階的に改善していくとよいでしょう。
コンサルタントの実践アドバイス
本記事を読み進めていただくにあたり、前提を共有しておきます。
ファーストビューとは、スクロールせずに見える範囲を指します。PCでは縦700〜800px程度（最も多い1920×1080のモニターで、ブラウザのバーやタスクバーを除いた高さ）が目安になります。
よくありがちなのが、制作時に大きなモニターを使用して確認したデザインが、小型のPCや標準のPCで確認すると見切れてしまっているという失敗です。とてももったいないミスだと思います。
こうした失敗を避けるためにも、LP作成後や改善後に、自社の主要なターゲットが閲覧する同様の環境でテストしていただけると間違いありません。メインメッセージとフォーム・CTAがスクロールしなくても見えているか、確認する習慣をつけましょう。
要点1：ファーストビューにCTAを設置する
ランディングページのファーストビュー改善で、もっともインパクトの大きい施策が、CTA（Call To Action）を設置し、アクションの導線を作ることです。CTAが見つからなかったり、心理的なハードルの高いCTAを置いていたりすると、ユーザーはアクションしにくくなります。
ファーストビューに気軽にクリックできるCTAを設置することで、広告から訪問したユーザーを迷わせることなく、コンバージョンに進んでもらいましょう。
✖ 改善が必要なファーストビューの例
設置場所、提案する内容、文言、ビジュアルについてそれぞれ解説していきます。
CTAの設置場所
設置場所は、ファーストビュー内で、ユーザーがひと目でわかる場所にしましょう。ファーストビューの高さは、モニターの解像度とブラウザのUIによって決まりますが、 600px以内であれば小型ノートPCでも確実に表示される「安全圏」 です。
スクロールなしで、CTAボタンやフォーム全体が見える位置に配置しましょう。
画像例のように、右側にフォーム露出する形はとくにおすすめです。この形に変えて、実際にこれまでコンバージョン率が大幅に上昇するケースを多く確認できています。
〇 参考にしたい好例
ほかにも、メインの写真やキャッチコピーを置いているゾーンに目立つCTAボタンを設置したり、スクロールしても常にアクセス可能な追従CTA（フローティングCTA）を設置したりするのもおすすめです。
CTAで提案する内容
内容は、「お問い合わせ」「商談」などのハードルが高い提案ではなく、資料ダウンロード、料金表の確認、導入事例への遷移、無料トライアルなど気軽にアクションしやすいものを組み合わせるのがおすすめです。これによって、検討度合いが違うさまざまなユーザーの期待に沿えます。
心理的ハードルの低いCTAの例
- 資料ダウンロード：検討初期のユーザー向け
- 料金表・価格確認：比較検討したいユーザー向け
- 導入事例を見る：検討の具体的なイメージを持ちたいユーザー向け
- 無料トライアル：体験してみたいユーザー向け
〇 参考にしたい好例
HRBrain：「無料でお試し」のCTAを「お問い合わせ」の隣に設置している
CTAの文言
CTAに入れる文言は、ユーザーにとってのメリットを具体的に示す言葉、心理的なハードルを下げる言葉を選ぶのがポイントです。
CTA文言の例
| ポイント | OK例 | NG例 |
| 何が得られるかを具体的に示す ※アクションと価値を一体で伝える | ・資料をダウンロード ・価格を確認する ・導入事例を見る | ・くわしくはこちら ・詳細はこちら ・送信 |
| 心理的ハードルを下げる ※不安や手間という「押さない理由」を消す | ・無料で試す ・3分で完了 ・登録不要で見る | ・お問い合わせ ・今すぐ申し込む ・電話で相談する |
さらに、CTAボタンの上部や下部に補足説明（マイクロコピー）を配置すると、行動を後押しできます。
効果的なマイクロコピーの例
- 3分でわかる○○サービス
- 入力項目は3つだけ
- 営業からの連絡は一切いたしません
- 個人情報は保護されます
- クレジットカード不要
これらのひと言が、ユーザーの「めんどくさい」「営業されそう」「個人情報が心配」などの不安を軽減してくれます。CTAの文言とバランスをみながら検討しましょう。
〇 参考にしたい好例
AD EBiS：CTAの上に「初期費用無料。まずは料金を確認！」というマイクロコピーを設置
CTAのビジュアル
よくある失敗は、デザインを優先しすぎて、CTAボタンが背景に埋もれていたり、スクロールしないと見えない位置に配置されているケースです。CTAは常に明確に視認できる状態にする必要があります。
背景とのコントラストを十分に確保し、CTAボタンには十分な余白を設けることで、誤タップを防ぎましょう。小さすぎるとタップしにくいため、ボタンサイズは44×44px（※）程度がよいでしょう。
コンサルタントの実践アドバイス
「CTAボタンにアイコンをつけたほうがいいですか？」と聞かれることがありますが、アイコンはあくまでも補助的な要素なので、まずは文言をしっかり磨きましょうとお伝えしています。アイコンは、アクションの内容を直感的に伝えられるという点では優れているので、使用する場合は、単なる装飾ではなく、文言を後押しするために必要なデザインを検討しましょう。
※「44×44px」はApple（ヒューマンインターフェイスガイドライン、44×44pt）とWCAG 2.5.5（最低44×44 CSSピクセル）にもとづく推奨値です。WCAG 2.2のレベルAA最低基準は24×24pxで、44×44pxはより望ましい推奨ラインとされています。
要点2：ユーザーの期待や疑問に応える
ユーザーは、検索キーワードで知りたいことや気になることを入力し、自分の期待や疑問に応えてくれそうな広告文をクリックしています。しかしLPで期待した内容が見つからないと、離脱してしまいます。
ランディングページのファーストビューで、ユーザーの期待や疑問に即座に回答することで、自分が探している情報であると認識してもらいましょう。
✖ 改善が必要なファーストビューの例
また、比較系キーワード（比較・おすすめ・違い・乗り換えなど）の場合、競合との差別化ポイントや選ばれる理由を。課題系のキーワード（〇〇できない、〇〇したい、〇〇削減、〇〇効率化など）の場合は、解決策を提示します。
比較系キーワードで流入したユーザーへの訴求例
| 流入キーワードの例 | ファーストビューの訴求 |
| 「勤怠管理システム 比較」 | ・導入企業の95%が継続利用 ・中小企業に選ばれる勤怠管理 |
課題系キーワードで流入したユーザーへの訴求例
| 流入キーワードの例 | ファーストビューの訴求 |
| 「請求書 作成 手間」 | ・請求書発行の手間をゼロに ・クリック1つで作成から送付まで完了 |
| 「採用 応募 集まらない」 | ・応募が集まらない採用を、母集団形成から立て直す |
| 「問い合わせ対応 工数 削減」 | ・問い合わせ対応の工数を半減 ・よくある質問は自動で回答 |
また、次の例のように、広告文とランディングページの訴求がずれていると、同じくユーザーの期待に応えることはできません。すぐに改善することをおすすめします。
広告文（ユーザーの期待）とランディングページがずれている例
| 広告文（ユーザーの期待） | ランディングページの訴求 | 何がずれているか |
| 「営業DXツール」 | 「働き方改革を支援します」というメインコピーを置く | テーマのずれ。営業の話を期待したのに、働き方改革のテーマで迎えられる |
| 「請求書の発行を自動化」 | 「企業の成長を加速する経営基盤」というメインコピーを置く | 具体度のずれ。具体機能を期待したのに、抽象的なビジョンで返される |
| 「中小企業向けの勤怠管理」 | 大企業の導入事例とエンタープライズ機能を前面に出す | ターゲットのずれ。「自分向けだ」という感覚が薄れる |
| 「初期費用0円ではじめられる」 | 高機能アピール中心で、料金や無料の条件に触れない | 条件・価格のずれ。いちばん知りたい「お金の話」の答えがない |
| 「他社サービスとの比較」 | 比較材料がなく、自社の理念やこだわりばかりを訴求する | 検討段階のずれ。比較したいユーザーに、判断材料を出せていない |
コンサルタントの実践アドバイス
ファーストビューのキャッチコピーは、一度作って終わりではありません。広告運用データやユーザーフィードバックをもとに、継続的にブラッシュアップしましょう。とくに、流入キーワードごとの直帰率やコンバージョン率を分析し、最も響く表現を見つけていきましょう。
要点3：サービス内容とサービス名を明確に伝える
ユーザーは、広告を見た時点で具体的なサービス名やサービス内容を理解していないことが多いです。LPを見てもサービス内容がわからない、サービス名がわからない状態だと、読み進めてもらえません。
ファーストビューで、「これは何のサービスなのか」「サービス名は何か」がすぐにわかるように設計しましょう。
✖ 改善が必要なファーストビューの例
たとえば「ビジネスの効率化を実現」という表現では、何のサービスかまで具体的にわかりません。そこで、「営業資料作成を自動化するクラウドサービス」のように、動詞と名詞をセットで表現することが必要です。
よく、企業の理念や壮大なビジョンなど、抽象的な表現を用いているランディングページがありますが、ユーザー視点で見ると必要な情報ではありません。
抽象的すぎるコピーの例
- 「○○業界の未来を、今ここから」
- 「DX時代の○○に、革新的なソリューションを」
- 「貴社の成長を支えるベストパートナー」
- 「あらゆる業務を、もっとシンプルに」
〇 参考にしたい好例
bellFace：電話を使った面談システムであること、サービス名がわかりやすく明示されている
ANDPAD：施工管理ツールであること、サービス名がわかりやすく明示されている
要点4：最大の提供価値を1メッセージで伝える
複数の提供価値を持つサービスで、ファーストビューに「これ1つで全部できます」という訴求をしているケースがあります。開発側からすると、「コストも安いし、満足度も高い」「この機能もあの機能も伝えたい」と、複数の価値を並べて訴求したくなるものです。
しかしユーザーからすると、たくさんの価値を並べられても、結局何が自分にとってメリットなのか、瞬時に判断できません。
LPのファーストビューでは、最大の提供価値を1つに絞り込み、ユーザーに瞬時に価値を伝えるほうが効果的です。視覚的な優先順位をつけて、主訴求を大きく、ほかは小さく下部に配置するのがよいでしょう。
✖ 改善が必要なファーストビューの例
ターゲット別に広告出稿している場合は、ターゲットに応じて提供価値を絞り込むとよいでしょう。
〇 参考にしたい好例
ジョブカン経費精算：「時間削減」に特化したメインメッセージ
HRMOS労務：「価格」に特化したメインメッセージ
要点5：サブメッセージでメインメッセージを補強する
メインメッセージを練りに練ったのに、サブメッセージが目立ちすぎて邪魔をしていたり、そもそもサブメッセージがないことがあります。効果的にサブメッセージを入れることで、メインメッセージに納得感を与え、ユーザーにとってわかりやすい訴求になります。
✖ 改善が必要なファーストビューの例
サブメッセージの例
| サブメッセージのタイプ | 例 |
| メインメッセージで伝えきれていない内容 （対象・範囲・条件） | ・中堅〜中小企業向けに最適化 ・初期費用0円 ・最短即日で導入 |
| 数字での裏打ち （実績・継続率・削減率） | ・導入20,000社 ・継続率99.7% ・作業時間を80%削減 |
| 競合との差別化ポイント （◯◯に特化・業界最安） | ・大量の請求処理に特化 ・自社工場直販だから中間マージンゼロ |
| 社会的なトレンド （乗り換え急増） | ・他社からの乗り換えが急増中 ・導入企業、続々拡大中 |
〇 参考にしたい好例
kintone：メインメッセージの「みんなつくれる」の理由を、サブメッセージで「ノーコード・ローコード」と種明かしして補強している
要点6：「信頼」の裏付けを提示する
要点5のサブメッセージのなかでも、重要なのが信頼の裏付けとなる情報の提示です。BtoBの商品・サービスを導入する際、「その企業やサービスは信頼できるか」を重視する企業は多いです。検討に進む背中を押す情報として、第三者からの評価や客観的なデータなど、信頼の裏付けを示せるとよいでしょう。
✖ 改善が必要なファーストビューの例
裏付けとなる情報の例
- サービスを導入した顧客のロゴを3〜6社並べる。大手企業や知名度の高い企業だと効果的
- 「導入社数○○社」「継続率○○%」などの実績数値
- 第三者認証マーク（プライバシーマーク、ISOなど）
- 受賞歴
- メディア掲載実績
〇 参考にしたい好例
楽楽明細：「シェアNO.1」をメインコピーの横に配置、導入企業のロゴをファーストビュー内に並べている
要点7：ファーストビューで完結するデザインで見せる
ファーストビューをこのページだけで完結しているようなデザインにすることで、ファーストビューに集中してもらうというテクニックです。
具体的には、ファーストビューの高さ（約600px）で主要コンテンツを完結させ、その下のセカンドビューとの間に余白を設けます。
サイズの例
| ファーストビュー | キャッチコピー＋提供価値＋CTAを高さ600px内におさめる |
| 余白 | 250px～300px |
| ヘッダーナビゲーション | 最小限に抑える ※アンカーリンクでページ内セクションに移動する設計も有効だが、 LPでは基本的にナビゲーションを最小化しコンバージョン導線に集中させる |
| 見出し | 大きさは、 サービス名 > ベネフィット > サブ訴求の順番 |
| コントラスト | CTAボタンは背景と明確に区別できる色 |
補足：セカンドビュー以降の配慮
ファーストビューで興味を持ってもらえたら、その後の本文も読みやすく設計しておきましょう。コツは、画面を「1回スクロールして見える範囲（約600px）」ごとに区切り、その1画面に伝えたいことを1つだけ置くことです。1画面に情報を詰め込みすぎると、ユーザーはどこを読めばいいのかわからず、途中で読み疲れてしまいます。反対に「1画面＝1メッセージ」にしておけば、スクロールするたびに話がひとつずつ展開していくので、テンポよく最後まで読み進めてもらえます。
このとき気をつけたいのが、スクロールしても画面の上部に残り続けるヘッダー（追尾ヘッダー）です。これがあると、その高さの分だけ実際に見える範囲は狭くなります。区切りを考えるときは、ヘッダーの高さも差し引いたうえで、1画面およそ600pxを目安にするとよいでしょう。
ファーストビュー最適化チェックリスト
自社のLPを開き、ファーストビューを見ながら、各項目に当てはまるかをチェックしてください。チェックが入らない項目が、改善の余地がある箇所です。ファーストビューのキャプチャとチェックリストをAIに張り付け、チェックしてもらうこともできます。
要点1：ファーストビューにCTAを設置する（最優先）
☐ スクロールせずに、CTAボタン（またはフォーム全体）が見える位置にある
☐ CTAがファーストビュー内のひと目でわかる場所にある
☐ 「お問い合わせ」「商談」だけでなく、心理的ハードルの低いCTAを用意している
☐ 文言が、得られる価値を具体的に示している
☐ 文言が、不安や手間を打ち消している
☐ ボタンの上下にマイクロコピーを添えている
☐ CTAボタンが背景と十分なコントラストで、埋もれず明確に視認できる
☐ ボタンに十分な余白があり、サイズは44×44px程度を確保している
要点2：ユーザーの期待や疑問に応える
☐ 広告文とファーストビューの訴求がずれていない（テーマ・具体度・ターゲット・価格条件・検討段階）
☐ 比較系キーワードの流入には、差別化ポイントや選ばれる理由を提示している
☐ 課題系キーワードの流入には、その課題の解決策を提示している
☐ ユーザーが「これは自分が探していた情報だ」と即座に認識できる
要点3：サービス内容とサービス名を明確に伝える
☐ 「これは何のサービスか」がひと目でわかる
☐ サービス名が明示されている
☐ 動詞と名詞をセットで具体的に表現している
☐ 抽象的なビジョンや理念だけの表現になっていない
要点4：最大の提供価値を1メッセージで伝える
☐ メインメッセージで訴える価値を1つに絞り込んでいる
☐ 複数の価値を同列に並べていない
☐ 主訴求を大きく、そのほかを小さく下部に置くなど、視覚的な優先順位がついている
☐ ターゲット別に出稿している場合、ターゲットに応じて提供価値を絞り込んでいる
要点5：サブメッセージでメインメッセージを補強する
☐ メインメッセージを補強するサブメッセージがある
☐ サブメッセージが目立ちすぎてメインを邪魔していない
☐ 対象・範囲・条件、数字の裏打ち、差別化、トレンドなど、メインを納得させる内容になっている
要点6：「信頼」の裏付けを提示する
☐ 導入企業ロゴ、実績数値、第三者認証、受賞歴、メディア掲載など、信頼の裏付けを示している
☐ 導入企業ロゴは3〜6社程度を並べている
☐ 「導入社数」「継続率」などの客観的な数値がある
要点7：ファーストビューで完結するデザインで見せる
☐ キャッチコピー＋提供価値＋CTAを高さ約600px内におさめている
☐ ファーストビューとセカンドビューの間に250〜300pxの余白を設けている
☐ ヘッダーナビゲーションを最小限に抑え、コンバージョン導線に集中させている
☐ 見出しの大きさが「サービス名 ＞ ベネフィット ＞ サブ訴求」の順になっている
☐ 追尾ヘッダーがある場合、その高さを差し引いて1画面=約600pxを設計している
まとめ
ファーストビューは、広告から訪問したユーザーが「読むか、離脱するか」を決める数秒の判断を左右する場所です。7つの要点を押さえるだけで、直帰を減らし、コンバージョン率の改善につながる導線を作れます。
まずはチェックリストで、対応が必要な点を見つけてください。すべてを一気に改善できなくても、優先順位の高い要点から進めましょう。
まだLPの土台ができていない場合は、標準ワイヤーフレームでまず80点のLPを作り、そのうえで本記事の7つの要点で広告の流入文脈に合わせて磨き込む、という流れがおすすめです。
※関連記事：BtoB商材のLP（ランディングページ）の標準ワイヤーフレーム
広告の運用データを見ながら、効果を測りつつ少しずつ改善を継続してみてください。
