ファーストビューの意味と重要性：ユーザーの興味を引くファーストビューとは

WEBページを利用して集客を行う際、最も重要なことの1つがファーストビューです。ファーストビューでユーザーを引き込めるかどうかが、商品・サービスの売上を大きく左右します。より多くのユーザーに届くファーストビューを作りたいと考えている方も多いはず。
そこで本記事では、ファーストビューの重要性や離脱との関連などとともに、ファーストビューの制作デザインのコツを解説します。

ファーストビューとは

ファーストビューとは、ユーザーがそのWEBサイトを訪れたとき、初めて目にする部分のことです。より具体的に言えば、サイトのトップページにおいて、スクロールなしで見られる部分ということになります。直訳すると「最初に見る景色」となりますが、ファーストビューという言葉自体は和製英語であり、世界共通で使用されている用語ではありません。英語では「above the fold」という言葉がファーストビューと同義で使われています。これは「折り目の上の部分」という意味です。

ファーストビューの重要性

ファーストビューはそのサイトを訪れたユーザーがほぼ100％確実に目にする部分です。ユーザーはサイトを訪れたとき、最初のページを3秒見てそのサイトにとどまるか否かを判断すると言われています。つまり、ファーストビューはユーザーにサイトへの興味を持ってもらうための最も重要な部分だと位置付けられるのです。
ファーストビューにおいて重要なことは、ユーザーにこのページのターゲットは自分であると感じさせること、そしてページを読み進めることで自分に利益があると思わせ、興味を引くことです。これらの要素を網羅できるようなデザインを備え、より多くのユーザーにサイトを閲覧してもらうことがファーストビューの目指すところと言えます。

ファーストビューとユーザー離脱の関係性

ファーストビューでユーザーに十分な情報を提供できないと、ユーザーはそのサイトからすぐに離脱してしまう可能性があります。ファーストビューでどれほどのユーザーが離脱しているかをはかるためのデータとして活用できるのが直帰率です。直帰率はそのページから始まるサイトにおいて、そのページのみを閲覧してそのまま離脱したユーザーがどれくらいいるのかを表したデータ。直帰率によって、ファーストビューを見てからほかのページにアクセスせず、そのままサイトを離れた人の割合を調べることができます。

ファーストビューの直帰率はコーポレートサイトで40～60％、ランディングページでは70％を超えるとも言われています。つまり、半数以上のユーザーはファーストビューから先に進まず、すぐにそのサイトを離れているということです。自サイトの直帰率が高い場合は、ファーストビューに何かユーザー離れを起こすような問題点があるのかもしれません。サイト内への誘導が上手くいっていないと考え、早急に改善のための施策を検討しましょう。

ユーザーに見られるファーストビューデザインとは

ファーストビューとなるページを作る上では、意識しておくべきことが複数あります。それでは、制作デザインの具体的なコツを解説します。

#ターゲットを絞り込みデザインを考える

ファーストビューのデザインを制作する上でまず考えたいのは誰をターゲットにするかです。マーケティングにおいてはペルソナを設定することが非常に重要ですが、ファーストビュー制作においても同じことが言えます。ターゲットを設定することで、ページのデザインの方向性が自ずと定まってきます。例えばターゲットを「28歳女性・会社員・毎日の料理を時短できるアイテムを探してる」など、詳細に設定することがポイント。詳しければ詳しいほど、そのターゲットの興味関心を引くにはどのようなデザインにすれば良いのか考えがまとまりやすくなります。反対にターゲットが曖昧だと、どのユーザーにも今一つ訴求しきれないぼんやりしたページデザインになる可能性があります。このようなデザインでは、ユーザーの興味を引き付けられず、結果多くの離脱が発生するでしょう。ターゲットを明確にし、そこにフィットするデザインを考えることは重要なコツです。

#サイトの主旨が一目でわかるデザインにする

サイトの主旨が一目で理解できるわかりやすいデザインを意識することも大切です。「このサイトは何の会社が運営しているのか」「どのような商品・サービスを紹介しているのか」これらがすぐに理解できるデザインがベスト。何を目的としたサイトかわからない場合、多くのユーザーはサイトをさらに閲覧して調べたりしません。すぐに離脱してしまいます。つまり、「多少わかりにくくてもユーザーがほかのページを見て判断してくれるだろう」と考えてはいけないということです。ECサイトであれば、取り扱っている商品・ブランドなどを明確にし、何を販売しているのかしっかり発信することが重要です。ファーストビューでそのページの要点がわかるようなデザインを考えましょう。

#キーとなる要素をバランスよく盛り込む

ファーストビューでユーザーの興味を引き付けるためには、キーとなる要素は盛り込む必要があります。具体的には、メインビジュアルやヘッドコピー、CTAなどです。メインビジュアルとは、そのサイトの最も重要なビジュアルイメージのことです。ファーストビューに設置すれば、ユーザーに伝えたいことを一目で訴求できます。メインビジュアルの種類はさまざまで、例えばポピュラーなものとしてイラストや写真があります。また、アニメーションなど動きを持たせたものでユーザーの関心を引く方法も1つ。そのほか、動画やスライドはより多くの情報をユーザーに伝えたい場合に有効です。ヘッドコピーはページの中で初めに設置する文章のことを言います。サイトのコンセプトを含み、ユーザーが「このページの閲覧をしてみたい」と感じるようなキャッチーさも併せ持ったわかりやすい文章が求められます。

CTAは「行動喚起」を意味する「Call To Action」の略称で、申込みや購入、お問合せなどに繋がるボタンのことです。ECサイトではファーストビューにCTAを設置することで、ユーザーをよりスムーズに商品購入に誘導できます。このように、ファーストビューでユーザーの目を引き付けるために重要な要素が数多くあります。ただし、むやみに要素を詰め込み過ぎるのはNGです。重要な要素をできる限り多くユーザーに伝えたい、その気持ちが先行してあれもこれもと入れてしまうとページが煩雑化し、反対に最も伝えたいことが埋もれてしまう恐れもあります。各要素をバランスよく盛り込み、見やすい配置を意識することが大切です。

#自社の強みやページ閲覧によって得られる利益をわかりやすく伝える

ユーザーがそのページを訪れる最も大きな理由は「そのサイトから自分に有益な情報を得たい」ことです。ユーザーに大きなベネフィット（利益）を感じてもらうことが、ファーストビューの大きな役割となります。そのためには自社の強みとユーザーのベネフィットを上手く結びつけ、提示することが重要です。

例えば自社の強みをヘッドコピーに端的に盛り込めれば、ユーザーは一目見てその会社の魅力を理解し、自分にベネフィットがあるかを判断できます。ユーザーが求めるものにこの会社がどのようにフィットするのか、それが明確になっていなければユーザーはページを離脱しほかのサイトを探し始めるでしょう。ファーストビューの最終目的は、取り込んだユーザーをコンバージョンへと導くことです。いかにすれば自社の強みを届け、多くのユーザーに有益だと感じてもらえるか、この点を意識しながらデザインを練りましょう。

#数値などを活用し説得力を持たせる

数値的なデータなどを活用し、ページの説得力を持たせることもポイントです。例えばECサイトでよく見られるのは「売上ランキング○位」「お客様満足度○％」などというもの。商品・サービスがどれほど多くの顧客から支持されているのかを具体的な数値で示せば説得力が増し、ユーザーの信頼性をより高められるでしょう。活用できる数値がある場合は、ロゴ化したり背景色と色味を変えて目立たせたり、わかりやすく装飾し設置すると有効です。

#ページが重くならないよう工夫する

ファーストビューのデザインはビジュアルも非常に重要ですが、ページの表示スピードも同じくらい重要です。ページがなかなか表示されずイライラしてしまう経験は誰しもが持っているでしょう。ページの表示が遅いと、多くのユーザーは表示完了まで待つことなくページを離脱します。すなわち、スピーディーに表示されるページを作ることが多くのユーザーを取り込むことにも繋がります。ファーストビューのデザインにこだわると、ついいろいろなものを盛り込んでページが重くなってしまいがちです。しかし、どれだけキャッチーなページであろうと、それが全て表示されるまでにユーザーが離れてしまっては意味がありません。デザイン制作を進める上では、常にページの軽さを意識しながらバランスよく構築していくことがポイントです。

ファーストビューデザインのサイズと高さ

WEBページはパソコンやスマートフォンなど、人によって閲覧するデバイスが異なります。そのため、ファーストビューも各デバイスの画面のサイズに合わせて作る必要があります。
パソコンの画面サイズは幅が約1,400～2,000px、高さが約800～1,100pxほどです。画面の中にはツールバーなどWEBページ以外の部分もあるため、そのような箇所を考慮し、幅1,000～1,100px、高さ550pxほどで制作するのが良いでしょう。スマートフォンの画面サイズは幅が約400px、高さが約600～900pxとなっています。ファーストビューは幅約350px、高さ約600～650pxでサイズを考えるのが一般的です。ただし、スマートフォンはデバイスの向きを変えることで、表示される画面の幅・高さが変わります。向きを変えた場合の表示のされ方も考慮しながらファーストビューのサイズを考えてください。

ユーザーの興味関心を引き付けるファーストビューを制作し売上アップを目指そう

ファーストビューはサイトの玄関のようなものです。「このECサイトの中にあなたの求める商品があります」としっかり伝えることができれば、ユーザーはドアを開けて中に入って来てくれます。そのためには、デザインに工夫を凝らし、ユーザーへの訴求力の高いファーストビューを制作することが大切です。ぜひこの記事を参考に、ユーザーの興味関心を引き付けるファーストビューを制作し、売上アップを目指しましょう。