ファーストビューとは？ホームページをすぐ閉じられる原因と改善方法

ファーストビューとは？

ファーストビューとは、ホームページを開いたときに、スクロールせずに最初に見える画面の範囲のことです。英語では、新聞を折りたたんだときに上半分に見える部分を指す言葉から、「above the fold（アバブ・ザ・フォールド）」とも呼ばれます。

ファーストビューの範囲は、見る人の機器によって変わります。同じページでも、パソコンの大きな画面では見出しと写真、ボタンまで見えるのに、スマホでは写真だけで画面が埋まり、見出しはスクロールしないと出てこない、ということが起こります。ファーストビューを確かめるときは、パソコンとスマホの両方で見るのが基本です。

この項目は、ガーディアンの無料のホームページ診断では、新・七つの大罪の「大罪-6 ファーストビュー」にあたります。検索結果に出るタイトルや説明文と、実際に開いた画面の中身が食い違っていないかを確かめる項目で、77's Check!! には同じ項目がない、新・七つの大罪ならではの項目です。ほかの診断項目の解説は、ホームページ診断の項目解説の一覧から読めます。

ファーストビューに置く4つの要素

ファーストビューの役割は、開いた人に「探していたページに来た」と分かってもらい、次の一歩を選べるようにすることです。そのために、次の4つがそろっているかを見ます。

4つのうち、この診断の項目が特に見ているのは1つ目の「見出し」です。検索から来た人は、検索結果のタイトルと説明文を読んだうえでクリックしています。つまり、検索結果は「このページを開けば、これが分かります」という約束で、ファーストビューの見出しはその約束への最初の答えにあたります。

ファーストビューが整っていないと、何が起きるか

ファーストビューが整っていないと、開いた人は「探していたページではない」と判断し、中身を読む前に離脱してしまいます。せっかく検索や広告で来てもらっても、最初の画面で引き返されれば、問い合わせの手前で止まってしまいます。

ファーストビューが重いのは、ページを見る時間の多くがそこに向けられているためです。ユーザビリティの研究で知られる Nielsen Norman Group が120人の目の動きを調べた研究（2018年4月の記事）では、ページを見ている時間の57％が、スクロールせずに見える範囲に向けられていました。また同社は、Microsoft Research が20万件を超えるページの滞在時間を分析した研究（2010年）をもとに、利用者はページを10〜20秒で離れることが多いと紹介しています（2011年9月の記事）。

検索結果との食い違いには、もう1つの面があり、それは検索結果の表示そのものへの影響です。Google は、検索結果に出すタイトル（タイトルリンク）を、ページの title 要素だけでなく、ページに表示される大見出しや h1 などの見出しからも自動で決めると説明しています。説明文（スニペット）も、主にページの中身から自動で作られる仕組みです。検索用の文と画面の見出しが食い違っていると、検索結果に意図しないタイトルが出ることもあり得ます。

この項目は、ページを作った人や社内の人が見ても気づきにくいのが特徴です。社内の人はページの中身を知っているので、見出しが分かりにくくても、写真だけでも、何のページかが分かってしまうためです。検索から初めて来た人の目で見ることが、確かめるときの出発点になります。

自社のホームページで確かめる方法

ファーストビューは、検索結果と開いた画面を見比べることで確かめられます。まずはパソコンとスマホだけでできる方法から始め、最後に表示の速さを無料の道具で確かめます。

1. 自社が見つけてほしい言葉で検索し、検索結果を控える
   社名ではなく、お客様が探すときに使いそうな言葉（例：「〇〇市 外壁塗装」）で検索し、自社のページのタイトルと説明文を書き写します。トップページだけでなく、主なサービスのページでも行います。
2. そのページをスマホで開き、最初の画面だけを見る
   検索結果からページを開き、スクロールせずに見える範囲だけを見ます。見出しが画面に入っているか、写真やお知らせだけで埋まっていないかを確かめます。パソコンでも同じ手順で見てください。
3. 検索結果の言葉と、見出しの言葉を見比べる
   手順1で控えたタイトル・説明文の言葉が、最初の画面の見出しやその近くに出てくるかを見ます。検索結果で「外壁塗装」と約束しているのに、開いた画面が「快適な住まいを、未来へ」だけなら、食い違っていると考えます。
4. 画面を覆う表示がないかを見る
   開いた直後に、ページ全体を覆うお知らせ、メールの登録のお願い、チャットの窓などが出て、中身が隠れていないかを確かめます。スマホでは、小さな表示でも画面の大部分を覆うことがあります。
5. 表示の速さを、無料の道具で確かめる
   Google が無料で公開している PageSpeed Insights にページの URL を入れると、表示の速さの目安を確かめられます。最も大きな画像や文字の塊が表示されるまでの時間（LCP）は、2.5秒以下が「良好」の目安とされています。

まとめて確かめたい場合は、無料診断で20項目を一度に確かめられます。ファーストビューのほかに、検索に載る状態かどうかやスマホ対応など、ホームページの基本となる項目をあわせて確かめられます。

ファーストビューで離脱される、よくある原因

ファーストビューで離脱される原因は、大きく分けて4つあります。どれも、見た目の印象を大切にしたり、伝えたいことを増やしたりした結果として起きやすいもので、作りそのものの良し悪しというより、検索から来た人の目で見直す機会がなかったことによるものです。

大きな写真やスライドが、最初の画面を埋めている

イメージ写真や、数枚の写真が切り替わるスライドが画面いっぱいに広がり、見出しが小さい、または見出しがないという作りです。パソコンでは見出しが写真の上に重なって見えても、スマホでは写真だけで画面が埋まることがあります。見出しの文字が画像の中に描き込まれている場合は、検索エンジンや読み上げの機能に文字として伝わりにくい点にも注意が要ります。

検索用の文と画面の見出しを、別々に作っている

title や説明文（meta description）は検索の担当者や制作会社が、画面の見出しはデザインの担当者が、と別々の人が別々の時期に作ると、言葉が食い違いやすくなります。サービスの名前を変えた、主力の商品を入れ替えた、といったときに、片方だけが更新されることもよくあります。

お知らせや挨拶が、最初の画面を占めている

最初の画面に、会社の理念や代表の挨拶、古いお知らせが大きく置かれていると、検索から来た人が探している答えは、その下に押し出されてしまいます。社内で伝えたいことと、訪れた人が最初に知りたいことは、同じとは限りません。

画面を覆う表示や、重い画像で待たせている

開いた直後に出るポップアップやチャットの窓が中身を隠していたり、大きな画像や動画のせいで表示に時間がかかったりすると、見出しを読んでもらう前に離脱されます。Google も、ページ全体を覆う表示は利用者の閲覧を妨げ、検索での評価にも影響するおそれがあるとして、避けるよう求めています。

改善の方法（対策は3つ）

ファーストビューは、見出しの言葉をそろえ、最初の画面の作りを整え、食い違いが起きない手順を持つことで改善できます。写真を差し替えなくても、見出しの文字を直すだけで済む場合も少なくありません。対策は、自社でできること、制作会社に頼むこと、仕組みで保つことの3つです。

対策1：ページごとに「検索結果の約束」と「見出し」をそろえる

最初にすることは、主なページごとに、検索結果に出ている言葉と、最初の画面の見出しを並べた表を作ることです。対象は、トップページと主なサービスのページ、問い合わせの多いページから始めると、手間に対して効果を確かめやすくなります。

表の形は「ページ／お客様が検索に使う言葉／検索結果のタイトル／検索結果の説明文／最初の画面の見出し／そろっているか」がおすすめです。お客様が検索に使う言葉は、営業の場でよく聞かれる言い方や、問い合わせの文面に出てくる言葉から拾います。Google の無料の道具 Search Console を使っている場合は、検索パフォーマンスのレポートで、どんな検索語でページが表示され、クリックされているかを確かめられます。

表ができたら、見出しを検索結果と同じ言葉に書き直しましょう。形は「〔検索に使われる言葉〕＋〔誰に向けたものか〕＋〔このページで分かること・できること〕」にするとまとめやすくなります。たとえば、検索結果で「〇〇市の外壁塗装｜見積もりと施工の流れ」と出ているページなら、最初の画面の見出しも「〇〇市で外壁塗装をお考えの方へ」から始め、その下に見積もりや施工の流れへの入口を置きます。

目安として、主なページ5〜10枚分の表づくりと見出しの書き直しは、担当者1人で2〜3時間ほどです。自社で行えば費用はかかりません。

対策2：最初の画面の作りを、制作会社に整えてもらう

見出しの位置や大きさ、写真の扱い、ボタンの置き場所、表示の速さといった作りの部分は、制作会社に頼みます。対策1で作った表を渡せば、どのページで何をそろえたいかが一度で伝わります。

頼むことは主に4つあります。1つ目は、スマホでもパソコンでも、見出しがスクロールせずに見える位置に入るようにすることです。見出しが画像の中に描き込まれている場合は、文字で表示する形に変えてもらいます。2つ目に、見出しの近くに根拠と問い合わせの入口を置いてもらいます。3つ目は、大きな画像や動画を軽くし、最初の画面の表示を速くすることです。LCP の2.5秒以下を目安に、PageSpeed Insights で直す前と後を比べてもらうと、変化が分かりやすくなります。4つ目に、ポップアップやチャットの窓が、開いた直後に中身を覆わない出し方に変えてもらいます。

あわせて、ページの title と説明文（meta description）も、見出しと同じ言葉にそろえてもらいます。Google は title 要素について、ページごとに固有で、具体的で分かりやすい内容にすることを勧めており、説明文についても、ページの内容を正確に要約した、ページごとの説明を用意するよう案内しています。

費用と手間は、ホームページの作りによって変わります。見出しの文字を管理画面から差し替えられる仕組みなら、作業は小さく済むこともあります。最初の画面の組み立てを変える、画像を作り直す、といった作業が必要な場合は、まず今の作りを確かめてもらい、作業の範囲と費用を相談するのが確実です。

対策3：ページを変えるときに、検索用の文と見出しを一緒に見直す

一度そろえても、サービスの変更やページの更新のたびに、片方だけが変わって食い違いが戻ることがあります。食い違いを防ぐポイントは3つです。

1つ目は、ページの見出しを変えるときは title と説明文も、title や説明文を変えるときは見出しも、必ず一緒に見直すことを社内の手順に入れることです。制作会社に更新を頼むときの依頼文にも、この一文を入れておくと確実です。2つ目に、対策1で作った表を、四半期に1回など決まった時期に見直します。Search Console を使っている場合は、検索語の変化もあわせて確かめます。3つ目は、ポップアップやバナー、チャットの窓などを新しく入れるときに、スマホの最初の画面がどう見えるかを確かめてから公開することです。

制作会社に頼むときの伝え方

制作会社に頼むときは、「どのページで、検索結果のどの言葉と、見出しをそろえたいか」を表にして渡すと、確認が一度で済みます。検索用の文と画面の見出しは、作る担当や時期が分かれやすいだけなので、食い違いは頼めば直せる部分です。誰が悪いかではなく、これからそろえる手順を一緒に決めることを優先しましょう。

そのまま使える依頼文の例です。

あわせて、次の点を確かめてもらうと、作業の範囲と費用の見通しが立ちます。

• 最初の画面の見出しが、文字で表示されているか、画像の中に描き込まれているか
• スマホとパソコンのそれぞれで、見出し・根拠・問い合わせのボタンがスクロールせずに見えるか
• 各ページの title と説明文（meta description）を、見出しと同じ言葉にそろえられるか
• 最初の画面の画像や動画を軽くできるか。直す前と後の LCP の値
• ポップアップやチャットの窓が、開いた直後に中身を覆わない出し方にできるか

ファーストビューとあわせて確かめたい項目

ファーストビューは、訪れた人に選ばれる中身を整える項目（サイト接客力）の1つです。最初の画面に何を書き、どこへ案内するかに関わる、次の項目もあわせて確かめておくと、改善の効果を確かめやすくなります。

• USP（強み）の明文化：「誰の、どんな困りごとを、なぜ自社なら解決できるのか」が短い言葉になっているか。ファーストビューの見出しに置く言葉そのものです。
• title の設定：ページごとに、内容を表す固有のタイトルが付いているか。検索結果の「約束」の側を整える項目です。
• CTA（申込ボタン）：問い合わせや申し込みのボタンが、分かりやすい言葉で、見つけやすい位置にあるか。
• スマホ対応：スマホで開いたときに、文字や画面の幅が読みやすく表示されるか。

診断の項目ごとの解説は、ホームページ診断の項目解説の一覧から読めます。

よくある質問

まとめ

• ファーストビューとは、ホームページを開いたときに、スクロールせずに最初に見える画面の範囲のことで、見る人の機器によって範囲が変わります。
• ページを見る時間の多くはこの範囲に向けられ、訪れた人は開いてから十数秒のうちに読み続けるかを決めることが多いとされています。
• 検索結果のタイトル・説明文は「約束」にあたり、開いた画面の見出しがそれに応えていないと、すぐに離脱されやすくなります。
• 検索して控えた言葉と最初の画面を見比べ、画面を覆う表示と表示の速さもあわせて確かめます。
• 言葉は自社でそろえ、作りは制作会社に整えてもらい、ページを変えるときは検索用の文と見出しを一緒に見直す手順で保ちます。

ファーストビューは、作った人や社内の人ほど食い違いに気づきにくい項目です。中小企業のホームページを制作し、公開後の運用と改善まで支える株式会社ガーディアンでは、ファーストビューを含むホームページの基本の項目を確かめる無料のホームページ診断を用意しています。