「ファーストビューの見た目が良くないから、デザインを作り直そう」。LPからの問い合わせが伸びないとき、最初に手が伸びるのは配色やメインビジュアルであることが多いものです。LPのデザインギャラリーが充実していて、成果を出しているページほど写真や余白の使い方が違って見えるため、原因も見た目の側にあると受け取られやすいのでしょう。
しかし、これまで多くの企業サイトやサービスページの文章を作ってきた弊社の立場から言えるのは、ファーストビューで先に詰まるのは見た目ではなく言葉のほうだということ。誰に向けたページで、何が手に入り、なぜ信じてよいのか。この3点が文章として決まらないまま配置だけを動かしても、直したあとに良くなったかどうかを判断する基準が手元に残りません。
本記事では、ファーストビューを構成する5つの要素から、デザインに入る前に書いておきたい4行のコピー、PCとスマートフォンでの表示領域の考え方、改善の進め方までを、言葉を作る側の視点で順を追ってお伝えします。
- ファーストビューの範囲が閲覧環境ごとに変わる理由
- ファーストビューを構成する5つの要素と、それぞれが答える問い
- デザインに入る前に書いておく4行のコピーの作り方
- PCとスマートフォンでの表示領域の見積もり方と、高さの決め方
- 広告の言葉とのズレの直し方、公開後の改善を進める手順
LPのファーストビューとは
LPのファーストビューとは、ページを開いた読者がスクロールせずに最初に目にする範囲を指します。制作の現場では頭文字を取って「FV」と略されることも多く、Webの用語としては「アバブ・ザ・フォールド」と呼ばれる場合もあり、もとは新聞を折りたたんだときに上半分へ来る面、つまり売店に並べた状態で通行人の目に入る領域を意味する言葉でした。紙の折り目が画面の下端に置き換わったと考えると、範囲の感覚をつかみやすいはずです。
ここで押さえておきたいのは、ファーストビューが固定サイズの1枚絵ではないという点にあります。同じLPでも、大型モニターで見る人と手のひらのスマートフォンで見る人とでは、最初に表示される高さがまったく違います。デザインの上から600ピクセルを切り取った範囲が、そのまま全員に届くわけではありません。
経営者ファーストビューというのは、要するに上部のメインビジュアルのことですよね。デザイナーに良い画像を作ってもらえば済む話だと思っていました。
Writers-hub編集部
メインビジュアルはその中の一要素です。ただ、ファーストビューは画面の高さで切り取られる範囲にあたるため、同じデザインでも機種によって見える量が変わります。1枚の絵として完成させるより、どこで切れても意味が通る順番で情報を積む設計と考えるほうが、実務では扱いやすくなります。
つまりファーストビューとは、デザイン上の一区画というより、読者が読み進めるかどうかを決める最初の接触面のことだと捉えるのが実態に近いといえます。LPそのものの役割や作り方の全体像については、LP（ランディングページ）とは何かを整理した記事もあわせてご覧ください。
関連記事：コンテンツマーケティングの基礎知識を総まとめ｜やり方から成果につなげる方法まで徹底解説
ファーストビューで読者が下す判断
「ユーザーは3秒で判断する」という言い方をよく見かけます。ただ、この種の秒数は調査の設計によって幅が出るもので、出どころのはっきりしない数字を前提に置いても設計の手は動きません。実務で使えるのは、時間の長さより、読者が何を確かめているかという中身のほうです。
読者がファーストビューで確かめているのは、次の3点に集約できます。
- これは自分向けのページか（対象の一致）
- ここで何が手に入るのか（提供価値）
- 書いてあることを信じてよいのか（根拠）
3つのうちどれか1つでも答えが出ないと、読者は下へスクロールする理由を持てません。とりわけ広告から流入した読者は、自分で探して辿り着いたわけではないぶん、離れる判断が早くなります。検索結果から来た読者なら「せっかく開いたのだから」と少し読み進める場合もありますが、広告の場合は戻る操作までの距離が近いのです。
だからこそ、ファーストビューでは3つの答えを同時に置く必要が生じます。順を追って説明していく余裕はなく、対象・価値・根拠を同じ画面内で示し切ることが求められる場所だといえるでしょう。
関連記事：ホワイトペーパーとは？意味と種類、リード獲得につながる作り方を解説
LPのファーストビューを構成する5つの要素
ファーストビューに置く部品は、役割で分けると5つになります。どれかが欠けたら不成立というより、それぞれが先ほどの3つの問いのどれに答えるかが決まっている、と考えると設計しやすくなります。
メインコピー
最も大きく表示する1行で、提供価値を言い切る役割を担います。ここで求められるのは表現の巧みさより、読み終えた瞬間に「何をしてくれるサービスなのか」が像を結ぶことです。サービス名や企業スローガンをそのまま置くと、初めて訪れた読者には情報がほとんど渡りません。社名の認知がある企業でない限り、価値を説明する側の文を優先してください。
サブコピー
メインコピーだけでは伝わらない条件や範囲を補います。対象者の限定（「従業員50名以下の企業向け」）、提供形態（「オンラインのみ」）、費用の目安といった、読者が自分に当てはまるかを判断するための材料を置く場所だと考えてください。メインコピーで広く受け止め、サブコピーで絞る組み立てが基本の形になります。
メインビジュアル
写真やイラストは、文字を読む前に状況を伝えます。サービスを使ったあとの状態が想像できる写真、あるいは管理画面そのものを見せるスクリーンショットが有効な場面は多いはずです。逆に、業種と結びつかない汎用的な人物写真は、置いても読者の判断材料になりません。
CTAボタン
ファーストビューの時点で行動できる導線を用意します。読み終えてから下部で決めてもらう構成もありますが、すでに比較検討が進んだ読者は上部で行動したいと考えるものです。文言は「詳しくはこちら」ではなく、押した先で何が起きるかが分かる形にするのが原則になります。「料金表を見る」「3分で診断する」のように、次の画面を予告する書き方が向いています。
信頼の証拠
導入社数、継続率、受賞歴、取得資格、掲載メディアなど、主張を裏づける事実を小さく添えます。数字を出せない場合でも、対応年数や監修者の所属を書くだけで読者の受け取り方は変わるものです。ここが空白のままだと、メインコピーがどれだけ整っていても、誰が言っているのか分からない主張として処理されてしまいます。
関連記事：ランディングページとは？4つのタイプと基本構成、成果が伸びないときの見直し順
デザインより先に書く4行の台本
5つの要素を並べる前に、ひとつ挟んでおきたい工程があります。ワイヤーフレームにもデザインツールにも触れず、日本語の文章として4行を書き切る作業です。参考サイトの紹介を中心にした記事ではあまり触れられない部分ですが、ここを飛ばすとデザインの修正が延々と続きます。
「〇〇で困っている△△の方へ」の形で、対象を一文にします。ここで「すべての企業へ」と書きたくなったら、対象が定まっていない合図です。広告の配信設定やターゲティングの条件をそのまま文に起こすと、ずれが見つかりやすくなります。
「このページから申し込むと、〇〇できるようになる」と、読者の側に起きる変化で書きます。機能の説明ではなく状態の変化で書くのがポイントで、「集計機能つき」ではなく「毎月の集計作業をやめられる」と表現してください。
2行目の主張を裏づける事実を1つ挙げます。導入実績、第三者による評価、無料で試せる条件など、読者が自分で確認できる形のものに限ります。ここに書ける材料が1つも見つからないときは、ファーストビューではなくサービスの説明材料そのものを先に整える段階です。
「まず資料をダウンロードしてほしい」「まず料金を見てほしい」と、依頼したい行動を1つに絞ります。複数の行動を並べると、読者は内容の理解に加えてどれを選ぶかの判断まで求められることになります。
4行が書けたら、1行目と2行目をメインコピーとサブコピーに、3行目を信頼の証拠に、4行目をボタンの文言へ割り当てます。5つの要素に何を載せるかは、この時点でほぼ決まった状態になっているはずです。
この順番を挟む利点は、デザインへの修正指示が具体的になる点にあります。「なんとなく違う」が「2行目が読み取れない」に変わるだけで、やり取りの回数は目に見えて減っていきます。デザイナーに渡すのが感想ではなく、どの行が伝わっていないかという指摘に変わるからです。
広告の言葉とファーストビューのズレ
LPへの流入が広告中心である場合、ファーストビュー単体で完結する設計は成り立ちません。読者はすでに広告の文言を読んだうえでクリックしているため、そこで受け取った期待とページの1行目が食い違うと、内容を読む前に離脱します。
たとえば広告見出しで「初期費用0円」と打ち出しているのに、LPのメインコピーが「業務効率を高めるクラウドサービス」だったとしましょう。書かれていること自体は間違っていません。ただ、読者が確かめに来た「初期費用0円」がどこにも見当たらないため、別のページに飛ばされたと受け取られてしまいます。
広告文とLPを別々の担当者が作っている場合、この食い違いは高い確率で起きます。広告の管理画面に入っている見出しと説明文をすべて書き出し、LPの1行目と並べて読むところから始めてください。
検索から流入するLPでも考え方は同じです。読者が打ち込んだ語がファーストビューのどこにも出てこないページは、開いた瞬間に「ここではない」と判断されます。読者が直前に見た言葉を、そのままの語で最初の1行に置くのが、最も費用のかからない改善だといえます。
複数の広告グループを1つのLPで受けているなら、ズレはどこかで必ず発生するものです。訴求ごとにLPを分けるか、流入元に応じてファーストビューの文言だけを差し替える仕組みを入れるか、どちらかの判断が必要になります。
広告の言葉とページの言葉、書き分ける時間が取れていますか
広告の見出しごとにファーストビューを書き分けようとすると、用意する文章の本数が一気に増えます。弊社では、訴求ごとのコピーの型づくりから日々の書き分けまでを、社内のご担当者と分担する形でお手伝いしています。
ファーストビューのサイズと表示領域の考え方
「ファーストビューの推奨サイズは何ピクセルか」という質問をよく受けます。結論から言えば、全員に同じ範囲を見せられる固定値は存在しません。画面の解像度に加えて、ブラウザのアドレスバーやブックマークバーの有無、スマートフォンの機種ごとの画面比率によって、実際に表示される高さが変わるためです。
それでも設計の起点となる目安は要りますので、実務では次のように見積もっています。
| PC | スマートフォン | |
|---|---|---|
| 想定する横幅 | 1200px前後にコンテンツを収める | 375px前後を基準にする |
| 最初に見える高さの目安 | 600〜700px程度 | 550〜650px程度 |
| 切れやすい要素 | 画面下部のボタン | サブコピーから下のすべて |
| 最優先で入れるもの | メインコピーと証拠 | メインコピーとボタン |
※ 上記は制作時の設計目安であり、閲覧環境やブラウザのUI表示によって上下します。
表のとおり、スマートフォンで最初に入る情報量はPCに比べて大きく減ります。PC向けに組んだ配置をそのまま縮めると、サブコピーとボタンが画面の外へ押し出される事故が起きがちです。したがって設計の段階で、どの要素なら切れてよいかを先に決めておく必要が出てきます。
画面の高さいっぱいにファーストビューを広げる指定（100vh）をスマートフォンで使うと、アドレスバーの表示と非表示で高さが変わり、ボタンが画面下に隠れる場合があります。近年のブラウザで使えるsvhやdvhといった単位に切り替えるか、高さを固定せず要素の余白で調整するほうが崩れにくくなります。
高さの指定に神経を使うより、先に決めておきたいのは順番のほうです。上からメインコピー、証拠、ボタンと並べておけば、どこで切れても意味の通る形は保たれます。
参考にするLPで見るべき箇所
ファーストビューを作り直すとき、他社のLPを集める作業そのものは有効です。ただし、集めたページの配色やあしらいを写しても、成果までは移りません。同じ見た目でも、載っている言葉が自社の読者に向いていなければ判断材料にならないからです。
参考サイトを開くときは、次の観点で分解して読むことをおすすめします。
- 1行目が誰に向けて書かれているか（対象を絞っているか、広く受けているか）
- 提供価値が機能で書かれているか、読者側の変化で書かれているか
- 証拠として何を置いているか（数字、実績、第三者の評価のいずれか）
- ボタンの文言が、押した先の行動を予告しているか
- スマートフォンで開いたとき、どこまでが最初に見えているか
とりわけ見落とされがちなのが、最後の項目です。ギャラリーサイトの多くはPC表示の画面を並べているため、そこだけを見て設計を決めると、スマートフォンからの流入が中心のLPでは実際の見え方を確かめないまま進んでしまいます。参考にしたいページは、必ず自分のスマートフォンで開き直してください。
業種やテイストで絞り込めるギャラリーサイトを使うと、自社に条件の近いページを集めやすくなります。
成果が出ないファーストビューの共通点
ここまでの逆を並べると、手を入れる優先順位が見えてきます。弊社が相談を受けるLPでも、つまずいている箇所はおおむね重なっています。
- 会社の紹介や事業内容の説明から始まっていて、読者の得が書かれていない
- 修飾語は多いが、結局どの業務が楽になるのかを読み取れない
- ボタンの文言が「詳しくはこちら」だけで、押した先を想像できない
- 主張を裏づける事実がひとつも置かれていない
- 画像の容量が大きく、文字が表示されるまでに間がある
- スマートフォンで開くとボタンが画面の外にある
上から3つは言葉の問題、下から3つは実装の問題です。順番として先に手を入れたいのは言葉のほうで、表示速度をどれだけ改善しても、読んだ人が自分向けだと判断できなければ結果は変わりません。
Web担当者社内のレビューで「情報を詰め込みすぎ」と指摘されました。ただ、削ってしまうと伝えたいことが伝わらなくなりそうで、手が止まっています。
Writers-hub編集部
削ると考えるより、4行の台本のどれに当たるかで仕分けてみてください。台本に該当しない文はページの下側へ移すだけで、内容そのものを捨てる必要はありません。ファーストビューは情報を減らす場所ではなく、読ませる順番を決める場所だと考えると整理しやすくなります。
ファーストビューを改善する手順
すでに公開しているLPに手を入れる場合は、作り直しから入らず、現状を測るところから始めます。感覚での判断を重ねると、変更が効いたのかどうか分からないまま工数だけが積み上がっていくためです。
直帰率、スクロール到達率、フォームまでの遷移数を確認します。ヒートマップを入れているなら、どの高さで読者が止まっているかも合わせて見てください。改善後の比較基準になるので、変更前の数字は必ず控えておきます。
対象、価値、根拠、行動の4つのうち、どれが読み取れない状態かを判定します。社内の人間は前提を知っているぶん判断が甘くなるため、事業を知らない人に5秒だけ画面を見せ、何のサービスだったかを答えてもらう方法が有効です。
メインコピーとボタンと写真を同時に変えると、数字が動いたときにどれが効いたのか分からなくなります。変化の幅が大きいメインコピーから順に、1つずつ入れ替えてください。
数日の数字で結論を出すと、曜日や広告の配信量の影響を取り違えます。もとの申し込み件数が少ないLPほど必要な期間は長くなるため、変更前に「どれだけ件数が集まったら判断するか」を決めておくと迷いません。
4つの工程のうち、実務でいちばん省略されやすいのが最後の待つ工程です。変更した翌日に数字が動いていないと不安になるものですが、そこで別の案に切り替えてしまうと、検証そのものが成立しなくなります。
変更した内容と日付、そのときの数字を1つの表に残しておくと、担当者が変わったあとに同じ検証を繰り返す事態を防げます。効かなかった案の記録も、次にどこを疑うかを決める材料になります。
ファーストビューの内製と外注の線引き
ファーストビューの制作を社内で進めるか外部に依頼するかは、作業の種類で切り分けると判断しやすくなります。デザインの実装と、載せる言葉の設計は別の仕事だからです。
- 公開中のコピーの差し替えや文言の微調整
- 広告の管理画面と連動した訴求の入れ替え
- 自社の実績数値や導入企業名の更新
- 対象と提供価値を言語化するところからの設計
- 訴求ごとに複数パターンのコピーを用意する作業
- 社内では気づけない前提の説明不足を洗い出す作業
実際のところ、どちらか一方に寄せる必要はありません。言葉の型を一度外部と作り、日々の差し替えは社内で回す形が、費用と速度の両面で扱いやすいと感じています。文言をひとつ変えるたびに見積もりと発注が挟まる体制では、検証の回数が伸びないからです。
外部に依頼する場合も、丸ごと任せるより、先ほどの4行を自社で書いてから渡すほうが仕上がりは早くなります。対象と提供価値を最も正確に知っているのは、日々問い合わせを受けている社内の担当者だからです。
コピーを書ける人が、社内に一人しかいない状態になっていませんか
LPのファーストビューだけでなく、サービスページも記事も同じ担当者が抱えている企業は多いはずです。弊社は、書き手の確保から社内での確認手順の設計まで、文章づくりの体制そのものをお手伝いしています。
よくある質問
ファーストビューの設計について、打ち合わせの場でよく挙がる質問をまとめました。
ファーストビューはスクロールせずに見える範囲の全体を指し、メインビジュアルはその中に置く写真やイラストのことです。ヘッダーやキャッチコピー、ボタンもファーストビューに含まれます。
使えます。ただし読み込みが遅いと、文字が表示される前に離脱を招きます。自動再生する場合は音を出さず、動画が再生されない環境でも意味が通る静止画を先に表示させておいてください。
必須ではありません。画面いっぱいに広げると下に続きがあることが伝わらず、かえってスクロールされにくくなる場合があります。次のセクションの一部が少しのぞく高さに抑える方法もよく使われます。
置いたほうが有利な場面は多いといえます。比較検討を終えた読者は、説明を読まずに申し込みたいためです。ただし高額な商材や検討期間の長いサービスでは、上部のボタンを資料請求に、下部のボタンを問い合わせに分ける形が向いています。
まとめ｜ファーストビューは絵より先に4行
ファーストビューは、LPの中で最も多くの人に読まれ、最も早く判断が下される場所です。だからこそ、デザインの巧拙だけで決着をつけようとすると、作り直しの回数ばかりが増えていきます。
先に決めるのは、誰に向けたページか、何が手に入るか、なぜ信じてよいか、次に何をしてほしいかの4行です。この4行を文章として書き切れていれば、5つの要素に何を載せるかは自動的に決まり、修正の指示も具体的な形になります。広告や検索から流入させているなら、読者が直前に見た言葉と最初の1行が揃っているかどうかも、あわせて確認してみてください。
私たち合同会社Writers-hubは、企業のサービスページやオウンドメディアの文章を制作してきました。LPのコピーづくりも、記事と同じく「誰に何を伝えるか」を決めるところから始まります。社内で書き手が足りない、あるいは何から直せばよいか判断がつかないという段階でしたら、状況の整理からご一緒できます。
どの1行から直せばよいか、決めきれないままになっていませんか
自社のLPを開いて、対象・価値・根拠のどれが読み取れないかを一緒に見ていくところからでも構いません。現状のページと広告の文面をお持ちいただければ、先に直したい箇所をその場でお伝えします。
