ファーストビュー
First View (Above the Fold)ふぁーすと・びゅー
ファーストビューとは、Webページを開いたときにスクロールせずに見える領域のこと。英語では「Above the Fold（折り目より上）」と呼ばれ、新聞を折りたたんだときに見える面を指す言葉が由来です。ここで読者がしているのは読むことではなく、このページを読み進めるかどうかの判定です。判定に落ちた瞬間、以下に書かれた内容の良さは結果に影響しません。
下に良いことを書いても、上で判定に落ちれば読まれない
Webサイトを改善するとき、多くの会社はまず「情報が足りない」と考えます。実績を増やし、説明を丁寧にし、ページを追加する。しかしアクセス解析を見ると、たいていの人は最初の画面で戻っています。足りないのは情報量ではなく、最初の画面での判定材料です。読者は検索結果から次々にページを開き、自分に関係あるかどうかを短時間で振り分けています。この振り分けは丁寧に読んで行われるわけではなく、目に入った言葉と全体の印象で行われます。
ここで問題になるのが、多くのサイトのファーストビューが会社側の言いたいことで埋まっていることです。大きな風景写真、「お客様と共に、未来へ」といったスローガン、自動で切り替わるスライダー、巨大なロゴと広い余白。これらは印象づくりには役立ちますが、読者が判定に使う情報は1つも含んでいません。読者が知りたいのは「これは自分向けか」「何をしてくれるのか」「他とどう違うのか」「次に何をすればいいか」の4点だけです。言いたいことと、知りたいことがすれ違っている状態が、最初の画面で起きています。
さらにスマートフォンの普及によって、この領域は物理的に狭くなりました。パソコンの大きな画面で作った設計をそのまま縦長の画面に置くと、ヘッダーと大きな画像だけで最初の画面が埋まり、肝心の言葉は画面の外へ押し出されます。制作側はパソコンの画面で確認しているため、この状態に気づきません。中小企業のサイトでは訪問者の多くがスマートフォンからという場合も珍しくないため、確認する画面を変えるだけで課題が見つかることがよくあります。逆に言えば、ここは費用をかけずに直せる場所です。写真の差し替えやデザインの作り直しをする前に、言葉を1行入れるだけで結果が動くことがあります。
最初の画面で読者がしているのは、読むことではなく、自分に関係あるかどうかの判定。
顧客心理の視点で見ると、ページを開いた直後の読者はまだ何も期待していない状態です。検索して開いただけで、その会社に興味を持ったわけではありません。この段階で相手が探しているのは「自分の状況と重なるもの」です。だから「業界No.1の技術力」よりも「〇〇にお困りの中小企業向け」のほうが手が止まります。前者は会社の話、後者は読者の話だからです。もう1つ働いているのが失敗を避けたい気持ちです。関係のないページを読む時間を無駄にしたくないので、少し分かりにくいと感じた時点で戻る判断をします。ここで確かめる手間をかけてくれる読者はほとんどいません。だからファーストビューでは、飾ることよりも疑いようがないほど分かりやすく書くほうが効きます。中小企業なら、対応できる地域・規模・業種を具体的に書けるという強みがあります。「全国のあらゆる企業に」より「〇〇県の従業員50名以下の製造業に」のほうが、該当する人には強く届きます。
仕組み化の視点では、ファーストビューを4つの枠を持つ型として扱います。①誰向けか ②何ができるか（相手が得る結果） ③どう違うか（他社でも言える言葉は削る） ④次の一歩（CTAを1つ）。この4枠を決めておけば、新しいページを作るたびに悩む必要がなくなり、担当者が変わっても品質が落ちません。さらに、枠が固定されていると検証もしやすくなります。今週は②の文言だけを変える、来週は④のボタンだけを変える、という形で1つずつ試せるからです。逆に、毎回ゼロからデザインを起こしていると、何が効いたのか分からないまま作業だけが増えます。この型を全ページのテンプレートに組み込み、公開前チェックに「4枠が埋まっているか」を入れておくのが、人手をかけずに品質を保つ方法です。
AI活用の視点では、3つの検証が手早くできます。1つ目は第一印象の再現で、ファーストビューに含まれる文字だけを書き出してAIに渡し、「この情報だけで、誰向けの何のサービスか分かるか」「分からない場合、何が足りないか」を答えさせます。読者に近い状態で読ませることになるため、社内では気づけない抜けが見つかります。2つ目は見出しの候補出しで、サービスの中身と想定読者を伝えたうえで、主見出しの案を複数出させて選ぶ。3つ目は削る判断の補助で、「他社のサイトにもそのまま書けてしまう表現」を指摘させると、独自性のない言葉が浮かび上がります。そのうえで、ヒートマップや顧客追跡の仕組みでスクロール到達率を見れば、言葉を変えた結果として読み進める人が増えたかを数字で確認できます。ただし判定するのは人です。AIは無難で当たり障りのない表現を選びやすいので、最後は現場の言葉に直してください。
図解：最初の画面に何が入っているか
下の図は、スマートフォンで最初に見える範囲に何を入れるべきかを示したものです。点線が画面の下端で、それより下はスクロールしないと見えません。右側は入れるべき4つと、それを押し出してしまいやすいものです。
事例で見る：国内・海外
Nielsen Norman Group ── 人はページを読まず、上部を拾い読みする
米国のUX研究機関Nielsen Norman Group（NN/g）は、視線計測を用いた読み方の研究を長年公開しており、Webページの利用者は文章を最初から順に読むのではなく、拾い読み（スキャン）で必要かどうかを判断すること、そして視線が画面の上部と左側に集まりやすいことを繰り返し報告しています。アルファベットのFの形に近い動きをする「F字型パターン」として知られる現象もその一例です。ここから読み取れるのは、ファーストビューは「読ませる場所」ではなく「拾い読みで意味が取れる場所」として設計すべきだということです。実務としては2点に落ちます。1つは、長い一段落を置かないこと。拾い読みでは文章の塊は飛ばされるため、短い見出しと1行の説明に分けたほうが届きます。もう1つは、判定に必要な言葉を上に寄せること。装飾の下や画像の中に書かれた言葉は、視線の通り道から外れやすくなります。なお、これらの研究における具体的な数値や割合は調査条件によって変わるため、ここでは扱いません。
地域密着企業のサイト ── 大きな風景写真の上に、1行を足す
たとえば、地域で施工やメンテナンスを手がける企業のWebサイトを考えます。よくある構成は、ファーストビューが画面いっぱいの施工現場の写真と「確かな技術で、地域の暮らしを支えます」というスローガン、その下にお知らせ一覧、という形です。写真は美しく、会社の姿勢も伝わります。しかし訪問した人からすると、どの地域に対応しているのか、どんな依頼を受けているのか、いくらぐらいなのか、どこから相談すればいいのかが何も分かりません。とくにスマートフォンでは、写真とスローガンだけで最初の画面が埋まります。ここで行う改善は、デザインを作り直すことではありません。写真の上に重ねる形で、①「〇〇市・〇〇市の戸建て住宅向け」②「屋根と外壁の点検・補修を、見積まで無料で」③「創業〇年／年間〇件の施工実績」（数えられる事実のみ）④「無料で点検を依頼する」という4つを短く置くだけです。加えて、写真の高さを画面の6割程度に抑え、④のボタンが最初の画面に入るようにします。実務上のコツは、作業をスマートフォンの実機で確認しながら進めることと、変更前後で最初の画面からの離脱と、下までスクロールした人の割合を記録しておくことです。これは特定企業の実績ではなく、地域密着型のサイト改善で取りやすい代表的な進め方です。
現場での使い方：5ステップ
- 自分のスマートフォンで開き、スクロールせずに見えるものを書き出す複数の端末で試す。パソコンの画面だけで確認していると、この課題は絶対に見つからない。
- 4つの枠が埋まっているかを確認する誰向けか／何ができるか／どう違うか／次の一歩。1つでも欠けていれば、そこが最初に足す場所。
- 写真より先に、言葉を直す撮影やデザインの作り直しは費用も時間もかかる。まずは既存の写真の上に1行を重ねるだけで確かめる。
- 高さを削る巨大なロゴ、広い余白、自動で切り替わるスライダーを疑う。次の一歩のボタンが最初の画面に入る状態にする。
- 離脱とスクロール到達率で確認し、1か所ずつ変える最初の画面で戻った人の割合と、下まで読んだ人の割合を分けて見る。同時に何箇所も変えない。
関連用語
まとめ：判定に必要な言葉を、画面の中に入れておく
ファーストビューは、スクロールせずに見える領域です。ここで読者がしているのは読むことではなく、自分向けかどうかの判定です。だから必要なのは印象づくりではなく、誰向けか・何ができるか・どう違うか・次の一歩という4つの判定材料を、画面の中に収めることです。風景写真やスローガン、スライダー、広い余白がそれらを画面の外へ押し出していないかを、必ずスマートフォンの実機で確認する。文言の点検や候補出しはAIに任せ、最後は自社の言葉に直す。写真を替える前に言葉を1行足す、という順番を守れば、費用をかけずに読み進める人が増えていきます。
