ファーストビューとは…ユーザーがWebページへランディングした際に表示される最初の範囲を意味し、最初の表示画面でユーザーがスクロールしてしっかりと読むかどうか？あるいはそこで十分満足して購入ボタンを押すかどうか？などサイトの成果にも直結する非常に重要な要素です。
というのも、せっかくSEOで上位表示して検索結果からランディングしたにも関わらずファーストビューで求めている内容と異なると感じてしまえばユーザーはブラウザバック・離脱してしまうでしょうし、スクロールしてその先を読み進めてくれることもありません。
要は、ぱっと見で目を惹く何かがなければユーザーの期待値に答えることができず、うまく誘導させることができずにページから離れてしまうため、ごちゃごちゃしない・ニーズに合致した画像で見せる・ぐっと来るコピーを配置するといった対策が必要で、あれこれ見せたい気持ちもわかりますが、そういった細かな部分はユーザビリティを考慮した上で導線を適切に配置し、余計な物は置かないことが重要となってきます。
つまりユーザーは目で欲しい情報コンテンツなどを探し、解決するまで検索行動を繰り返すため、ご自身のページで検索を終わらせるつもりで作成することがポイントで、冒頭に何が記載されているのかを明確にする必要があるというわけです。
これらを考慮すると記事ページの場合だとイメージ画像とキャッチコピーが必須で、LPの場合だと申し込みや購入を促すボタンが必須となり、それぞれ読み進めさせるための改善と即決させる見せ方に注力するべきであり、ページの特性・目的によってポイントやコツが異なります。
では、今回はサイトの成果にも大きく影響する“ファーストビュー”について、意味や効果的な見せ方などについて詳しくご説明していきたいと思います。
ファーストビューとは
“ファーストビュー”とはユーザーが最初に目にする表示範囲を意味し、最初のインパクトでどれほど印象付けるのか？興味を持ってもらうためのキャッチコピーなどが重要で、単純に商品やサービスなどの特徴や機能をただ並べても成果に繋がりにくく、せっかく狙ったキーワードで上位表示できていても効果的とは言えません。
というのもユーザーは直接的にその“モノ”を手に入れたいと思っていても、実はそれを手に入れた後の自分を間接的にイメージしており、もし記事ページだとしたら理解する・解決するなど何らかの“知りたい”物事を見つけることによって滞っていた部分から先に進めることができ、一方でLPの場合だと一瞬でベネフィットを伝えることができればファーストビューで購入ボタンを押すはずです。（顕在層の場合だとすでに機能や効果などは把握しているので。）
そのため、記事ページとLPは訴求するポイントが若干異なり、読み進めて最終的にCTA（コール・トゥ・アクション）で行動を起こしてもらうのか？ぱっと見のインパクトやキャッチコピーで即決してもらうのか？この辺りを念頭にページを作成すると良いでしょう。
どちらにしてもまずはコピーです。ご自身の記事（LPを含む）で解決できると伝わるキャッチコピーが非常に重要で、この文言ひとつだけを改善することでコンバージョンがアップしたという例も珍しくありません。それくらいサイトの成果に影響する重要な考え方なので、しっかりと理解して仮説・改善・検証を繰り返すべきです。
とは言え、基本は重要なもの意外置かないというのが鉄則で、ごちゃごちゃしたページでは伝わるものも伝わりませんし、ユーザーもどこに何があるのか迷ってしまいます。それを改善するにはグローバルメニューの文言をわかりやすくしたり、必要最低限のカテゴリーに整理したり…他にも様々な改善点が見つかるはずですので、ユーザビリティも考慮した上で作成するとわかりやすいかもしれません。
ファーストビューの重要性
ファーストビューは上記の通りWebマーケティングとして蔑ろにできない要素で、もちろん全てのページに対して言えることなんですが、トップページやLPを制作する際に重要視するべきで、例えば…集客用の記事ページでユーザーを納得させ、後は購入させるだけの状態でLPへ誘導、ぱっと見だけで申し込み・購入ボタンを押してもらえるような作り込みが大切です。
そして、このファーストビューだけでCVできない場合はユーザーが何らかの引っかかりを感じたり、もう少し情報収集してから行動に移したいと思わせてしまうと他社との比較・検討によってさらに何か後押しするための材料が必要となってしまいます。
それを避けるためにもファーストビューでは機能性だけを謳うのではなく、それを得られたことによってどうなれるのか？どのようなベネフィットがあるのか？をキャッチコピーやそれをイメージ付ける画像で表現するべきで、他にもCVボタン以外のリンクを全て排除したり、ユーザーの注意が散漫になってしまうようなデザインを避けたりと…様々な改善方法が考えられます。
というのも、スクロールさせずにファーストビューだけでCVさせることが重要であって、最初の表示画面には何が必要なのかを意識してください。もしじっくりと読みたいユーザーなら下までしっかりと読みますので当然ファーストビュー以外のコンテンツも重要ではありますが、どちらにしても機能性ではなく何が得られるのかが最も知りたい部分でデメリットも書くべきです。
このようにファーストビューでその先のユーザー行動が変わりますので、ページの特性を考慮した上でデザインを行い、もちろん最近だとPCよりもスマホからの検索も増えているため、そちらのファーストビューもレスポンシブデザインなどの導入によって考える必要があります。
ファーストビューのデザイン
ファーストビューの目的を理解できればどういったデザインにするべきかおわかりいただけるかと思います。
最初は見た目重視であれもこれも詰め込みがちですが、一旦整理してユーザビリティも考慮した上で使いやすいページ作りを念頭に置き、その後にファーストビューで何をさせたいのかを考慮して不要なモノを取り除いていくと良いでしょう。
もしイメージが重要であればスクロールしなくともメインビジュアルをカルーセルやスライドで見せる方法もありますし、あくまでシンプルなデザインでクリックさせたいボタンを一番目立つようにしたり、不安を取り除くマイクロコピーなど色々な工夫が必要です。
このことからファーストビューでユーザーへ伝えることは少ない方が理解しやすいということが言えます。まずはクリックさせたりスクロールして完読してもらったりと目的を明確にするとわかりやすいかもしれません。
ただし、ブランディングなど品質のイメージを踏襲することも大切です。イメージカラーやポイントカラーなどユーザーが持つイメージとあまりにかけ離れたデザインだと間違ってクリックしたのかと思わせてしまいますので、ブランドカラーをうまく活かしてシンプルに構築すると良いかと思われます。
そしてアナリティクスで流入しているデバイスをチェックして、ほとんどがモバイルからの流入であればそこまでPCに時間を使うよりもスマホで改善した方が効率的ですので、どういったユーザー層にリーチしているのか一度チェックし、ペルソナに当てはめてデザインを作り込むというのもひとつの手です。
サイズ（幅・高さ）について
ファーストビューとは言ってもPCの場合、そもそものモニターサイズにもよりますし、ユーザーがどういったブラウザのサイズでWebページを閲覧しているのかわかりません。全画面だったり若干小さめに開いているケースなど様々です。
さらにスマホの場合だと近年サイズも大きい機種が増え、さらに横で閲覧しているユーザーも考慮しなければいけません。
そのため、ファーストビューは画面全体で見せるのではなく、なるべく上の方に重要なイメージやコピーを配置することが大切で、アナリティクスを活用してご自身のサイトに流入しているユーザーのデバイス、モニターサイズなどを把握しておきましょう。
全てのデバイス・サイズに対応するのではなくレスポンシブデザインを活用して最小の表示サイズでファーストビューを考えていくというこです。
PC用の場合
まずはこの場合、下記の資料を参考にしてみると…以下のサイズが多いことから、多少ブラウザサイズを小さめにして表示していることを考慮すると、高さ650px程度・幅1200px程度で考えてみると良いでしょう。
また、近年PCよりもスマホからの検索が増えている状況ではありますが、コンバージョンに関しては扱う商品やサービスにも大きく左右されます。
例えば高価な商品を購入する場合などじっくりと詳細情報を調べるならスマホよりもPCを優先させるべきでしょうし、何をコンバージョンとするのかにもよりますので、まずは目的を明確にしてみてください。
- 1920×1080
- 1366×768
- 1536×864
この範囲でメインイメージやキャッチコピー、マイクロコピーやボタンを配置し、他にも必要であればグローバルメニューや各種導線をシンプルにデザインしていきます。
そして、トップページやLPの場合は特にファーストビューで即決させるだけの見た目と説得力のあるコピーがポイントとなってきますから、ユーザーが何を欲しがっているのか？しっかりと調査してニーズと合致させることが大切です。
希に何をして良いのかわからない・使い勝手がわかりにくい…といったユーザビリティを考慮していないサイトも見かけますが、そういったサイトだと恐らく成果は上がらないかと思われますので、このページで何をさせたいのか？目的をしっかりと設定すると自ずと色やフォントサイズなど何を優先するべきかわかるはずです。
スマホ用の場合
こちらもPCと同様に下記の使用を参考にしてみると以下のサイズが多く、スマホでは全画面で閲覧するためブラウザサイズの概念がありませんから、これらを考慮すると高さ650px程度・幅375px程度で考えてみると良いでしょう。（レスポンシブデザインで対応しているケースが多いかと思いますので、サイズというよりも解像度を意識した方が良いかもしれません。）
※iPhone12/12Proや13/13Proの登場による390×844のサイズも大きく伸びているのがわかります。
こちらもPC同様、なるべく上の方に重要な要素を配置して見やすくデザインしていくことが大切です。特に最近では実に様々なサイズのスマホが登場しているため、ビューポートをうまく活用して可能な限り横で見るケースにも対応しておくことが理想です。
参考：iOS Resolution // Display proerties of every iPhone, iPad and iPod touch Apple ever made
- 375×667
- 414×896
- 375×812
また、スマホに限らずユーザーは表示された画面で様々な情報を読み取り、3秒でそのページに留まるか否かを判断すると言われています。そのため、見せたいモノ・言いたい事はなるべくひとつに絞り、ぱっと見で何のサイトかわからないといったデザインだけは避けましょう。
この辺りに関しては様々なLPを紹介しているサイトもありますので参考にしてみると良いでしょう。他にも様々なサイトを見て制作意図を考えてみるというのもひとつの手です。ぱっと見で何か惹かれるものがあればなぜそう思ったのか？色々と考察してみると何かのヒントになるかもしれません。
ファーストビューの改善方法
上記の通りユーザーは3秒でそのページに滞在するかどうか判断します。そのため、ページ内で興味を持った位置やユーザーが注目している場所、もしくはどこまでページをスクロールして離脱したのか？ユーザー行動を可視化した“ヒートマップ”を参考にしてみると便利です。
というのもトップページやLPの目的は主にコンバージョンです。そのCVを達成できないということは何か理由があるわけで、例えば以下のような場合にユーザーは離脱します。
- 欲しい情報とは異なる
- 内容がすぐに把握できない
- 違うことに気を取られる
- 安心感がない（例：すぐに課金されそう）
- スマホ対応していない
そのため、冒頭でもお伝えした通りユーザーが求めるイメージ画像やキャッチコピー、そしてそれらを補足する説明文や押しやすいボタンやマイクロコピーによってCVを後押しするような文言など様々な改善点が考えられ、これらをヒートマップでチェックするというわけです。
ちなみにこのヒートマップとは訪問ユーザーがどこをクリックしたのか？クリック数はもちろん、離脱した位置やサーモグラフィーによって集中して見られている場所を可視化でき、無料版や有料版ともにいくつかのツールが公開されています。
こういったページ内でのユーザー行動はアナリティクスやサーチコンソールだと把握しきれませんから、うまくツールを活用して改善を行いましょう。
例えば集中して見られている箇所があるのにクリックされていない、もしくはクリックされていてもコンバージョンに繋がっていないとしたらクリックされない理由やクリックした後に遷移するページの内容をチェックしてみてください。要は仮説と実施、その検証を繰り返して改善を繰り返すというわけです。
まとめ
今回はユーザーがページにランディングした際、最初に目にする表示範囲“ファーストビュー”について意味や重要性、改善方法などについて詳しくご説明しました。
このようにファーストビューでは様々な要素を詰め込みたくなるかもしれませんが、そのページでユーザーに何をしてもらいたいのか？をしっかりと目標を定めることによって自ずとデザインも固まってくるはずです。
他にもユーザーが求めている物事をバランス良く配置し、目を惹かせる・一瞬はっとさせるなど…まずは興味を持ってもらうことが重要で、そもそも3秒以内にこのまま滞在して閲覧するかどうかを判断するため、不必要なコンテンツはファーストビューにわざわざ置く必要もありません。
そして最も気にするべき点は、それによって何が得られるのか？ベネフィットをうまく伝えることに尽きます。いくら機能性や割安感を謳ってもユーザーは“モノ”が欲しいわけではなく、潜在的にそれを手にした後の自分を意識しているので、ご自身が何かを購入する際の心理状況などを考えながらファーストビューを構築していくと良いでしょう。
「キーワードファインダー」
キーワード選定でお悩みですか？
「キーワードファインダー」なら、検索ボリュームから順位チェック、関連語や新しいキーワードの発見など、アクセスを伸ばすために重要なキーワード選定を自動取得、一括管理が可能！
また、自動取得したキーワードは、ご自身のサイトだけでなく競合の順位も取得します。この整理された情報を元にあなたの集客経路の拡大にお役立てください！
関連記事
検索順位を改善するには正しいSEOの知識が必要です
