ファーストビューはなぜ重要？WEBサイトデザインのポイントや参考例を紹介

2023年10月27日 2023年10月27日

ＷＣＡ編集部

ECマーケティング

ECサイト集客

ECサイト運営

ECサイト制作

WEBサイトやECサイトなど自社のサービスの魅力を伝えるためには、まずページを見てもらう必要があります。ユーザーにページを見てもらうためには、一目見た時にユーザーの気を引くような仕掛けをサイトに施すことが大切です。

どんな業界であっても、人気のWEBサイトはもれなくファーストビューにこだわっています。ファーストビューとは、サイトを開いたときに最初に表示される部分、スクロールせずに見えている部分のことです。ECサイトユーザーなどは、ページを開いてファーストビューを見てから数秒のうちに離脱するかどうかを決めるといわれています。つまり、どれだけファーストビューでユーザーの目を引き、サイトを見たいと思ってもらえるかが売り上げなどにもつながっていくのです。

今回はそんな重要な役割を占めるファーストビューについて、デザインするときに注意すべきポイントや参考となる例などを紹介していきます。

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

前述した通り、ユーザーはサイトを訪れて数秒でそのサイトに留まるかどうかを判断しているといわれています。ファーストビューでそのページから離脱するユーザーの割合はランディングページで70%以上、コーポレートサイトでも40~60%に上るともいわれており、ファーストビューにこだわることがサイト全体の売り上げアップにもつながります。

ユーザーがファーストビューを目にしたときに「サイトのターゲットは誰か」「伝えたいメッセージは何か」「サイトに留まるメリットはあるか」などを判断するため、ターゲットに対してしっかりと刺さるメッセージやデザインを設計していくことが大切です。

WEBデザインのポイント

WEBデザインを設計するときには、まずファーストビューで伝えたい要素を優先度が高い順にリストアップするようにしましょう。ターゲットやサイトが伝えたいメッセージ、商品の情報やアピールポイントなど、伝えたい要素を明確にしていくことが大切です。その他にも大切な要素を紹介していきます。

ヘッドコピー

ヘッドコピーとは、キャッチコピーのなかでも最上位に置く、最も伝えたいテキストのことです。ファーストビューの中でも、商品のアピールやメリット、利点などを分かりやすく伝えるために非常に重要な要素となります。コピーの中に具体的な数値を入れるなど、ユーザーの興味を引いたり、買いたくなったりするようなコピーを置くようにしましょう。

メインビジュアル

メインビジュアルとは、ファーストビューの中で目に入る一番大きな画像のことです。多くのユーザーにとってWEBサイトを訪れた時に最初に目に入る要素であり、メインビジュアルの質がサイト全体の印象を左右するほど重要な役割を担っています。人物や商品を大きく映す手法や、ヘッドコピー自体をメインビジュアルの中に入れてしまう手法など、効果的な生かし方はさまざまありますが、伝えたいメッセージが分かりやすくシンプルであることが大切です。

CTAボタン

CTAボタンとは、行動喚起を促すボタンのことです。ファーストビューの中にリンクやクリッカブルなバナーなどを設置し、商品購入ページなどへの導線を作ることで、興味を持ったユーザーをすぐに行動へとつなげることができます。そのため、なるべくユーザーにとって分かりやすく、クリックしやすい位置に設置するようにしましょう。

ターゲットコール

ターゲットコールとは、商品やサービスのターゲットを明確にすることです。誰に向けている商品やサービスなのか、誰に使ってほしいものなのかなどを明確にすることで、WEBサイトを訪れ興味を持ったユーザーの離脱率を下げることができます。

WEBデザインの参考例

ここではファーストビューの設計に成功し、集客などにも成功している各サイトを紹介していきます。どんなところがよくて成功しているのか、ぜひ参考にしてみてください。

Amazon

Amazonは世界最大級のECサイトであり、WEB集客ラボの調査によると、2021年の日本のWEBサイト訪問者数ランキングでは第7位にランクインしています。

ファーストビューを見てみると、メインビジュアルとしてはスライダーバナーが設置されており、セール情報やAmazon primeのおすすめ作品など、その時々で旬な情報を余すことなく発信しています。スライダーバナーの下には人気の商品やタイムセールなど、ユーザーの目を引くような情報が多くファーストビューに組み込まれています。その他、ページ上部にはグローバルナビも設置されており、本やミュージック、新着商品など各カテゴリページへの導線がしっかりとつくられています。

食べログ

食べログは日本全国の料理店の情報や口コミなどが調べられる日本最大級のグルメレビューサイトです。価格コムグループが運営しており、全国各地のお店やランキング上位のお店が探せることから、多くのユーザーに愛用されています。

ファーストビューを見てみると、まず大きく料理の画像がメインビジュアルとして掲載されており、和食・洋食・中華・デザートなど代わるがわる画像が表示されていきます。大きなメインビジュアルの中にはお店が検索できる検索窓が設置されており、それ以外はほとんど何もなくシンプルで分かりやすくかつインパクトがあるつくりとなっています。

mercari

mercari（メルカリ）は日本最大級のフリーマーケットサイトです。ユーザーはメルカリを通して、出品された商品を購入、または自ら商品を出品して売却することができます。インターネットを通じて簡単に売買ができ、商品の送付なども簡単なことから多くのユーザーに愛されているサービスです。

ファーストビューでは、メインビジュアルとしてサービスのお得な情報などが掲載されており、そのすぐ下部にはおすすめの商品がいくつも掲載されています。すぐに購入へ移れるような導線が確保されていたり、上部には検索窓は出品用のボタンも設置されており、購入者・出品者の両方のユーザーを逃がさない工夫がなされています。