ファーストビュー
概要とマーケティングにおける重要性
サイトを開いた時に最初に画面に表示される領域(スクロールせずに見える部分。英語では "above the fold" とも呼ぶ)。
サイトの直帰率(離脱率)を大きく左右する最重要領域であり、ユーザーはアクセスから「3 秒以内」に『これは自分のためのサイトか?』を判断するとされる。PC・タブレット・スマートフォン(SP)で画面サイズと縦横比が全く異なるため、デバイス別の厳密な設計が必要不可欠である。
実務における「必須要素」と視線誘導
要素はシンプルであるべきで、【① メインコピー(1 行)+サブコピー(1 行)】【② キービジュアル(KV)】【③ CV ボタン(コンバージョン)(CTA)】の 3 つで十分。
- 視線と配置のセオリー:PC では「Z の法則(左上から右下へ)」、SP では上から下へ視線が動く。ペルソナの目線で「これは自分のためか」「次に何をすべきか」が即わかる構成にする。
- SP 特有の UI 配慮:SP では必ず PC と別構成にし、片手でスマホを持った時に「親指が届く位置(画面下部など)」に CV ボタンを配置する。
Web 担当者に求められる「フィルター役」としての機能
ファーストビューにおいて最も大事なのは、ユーザーを「自分事化」させること。同時に、目立つ場所だからと情報を詰め込みすぎるとごちゃついて逆効果になるため、適切な「余白(ホワイトスペース)」が必要になる。
社内の「情報を全部入れたい」という誘惑に対し、担当者がフィルター役となって暴走を抑え、余白と情報量のバランスを決める(引き算のディレクションをする)ことが現場での最大のミッションとなる。
やってはいけない「現場の落とし穴」と防衛策
- 社内政治によるカオス化:経営層や営業部門から「あれも入れろ、これもアピールしろ」と情報追加要望が次々に入り、結果的に誰にも刺さらないチラシのような詰め込み画面になる。
- コピーの「内向き」化:メインコピーが「業界をリードする〇〇」といった企業側の自己満足(ポエム)になっており、顧客(ペルソナ)の課題解決に全く刺さらない。
- 動画 KV による SEO の自滅:かっこよさを優先して重い動画 KV を入れた結果、表示速度が致命的に悪化する。※これは Google の Core Web Vitals(特に LCP スコア)を急落させ、SEO の順位低下を招くため、実装時は速度とのトレードオフを厳しく判断する必要がある。
- デザインの破綻:SP で閲覧した際にメインの被写体や CV ボタンが見切れてしまっている。
- CV ボタンの同化:CV ボタンの色がサイトのメインカラーに溶け込んでしまい、押せるボタンとしての存在感(アフォーダンス)がない。
- ハリボテの構成:ファーストビューだけ豪華に作り込んだものの、2 ビュー目以降のコンテンツがスッカスカでユーザーが冷めて離脱する。
言葉をよく利用する人
- デザイナー
- Web 担当者(発注側)
- マーケター
- ライター / コピーライター
- ディレクター
会話上での使用例
営業からファーストビューへの要素追加要望が次々来た場面
-
営業
トップのファーストビューに、実績と強み3つとお客様の声も入れてもらえませんか。
-
Web担当者
お気持ちは分かるんですが、全部詰め込むとどれも刺さらなくなってしまうんです。ペルソナの現場マネージャーが一瞬で自分ごとだと感じる要素を1つに絞らせてください。実績やお客様の声は、少しスクロールした先の専用セクションでしっかり見せましょう。
-
営業
なるほど、最初の画面は絞った方がいいんですね。お任せします。
スマホ版でファーストビューのボタンが見切れていた場面
-
デザイナー
PC版のファーストビューに、CVボタンを配置しておきました。
-
Web担当者
ありがとうございます。ただiPhoneの実機で見るとボタンが画面の外に出てしまっていて。スマホは別設計にして、ボタンを2つ用意しましょう。キービジュアルの上に大きく1つ、それと画面下に追従で常に出る1つ、この二段構えでお願いできますか。
-
デザイナー
了解です。スマホ用に組み直します。