ファーストビューの重要性とは？知らないと損する8つの注意点を解説

ファーストビューは、サイト運営の目的を達成する上で非常に重要な要素の一つです。

Webページを開いた時にパッと目に入る画面のため、Webサイトだけでなくその企業の印象まで左右しかねません。しかし、ファーストビューについて「どれほど重要なのかわかっていない」「具体的にどんなデザインが良いのかわからない」という方は多いのではないでしょうか。

そこでこの記事では、ファーストビューの重要性や作成時の注意点などをお伝えしていきます。

ファーストビューが重要だと言われている理由は下記の通りです。

Webサイトを最適化する上で、なぜファーストビューが重要になるのでしょうか。その理由について見ていきます。

ユーザーはサイトにアクセスして3秒でページに滞在するかどうかを判断します。3秒間という短い時間では「ファーストビューを見て少し下にスクロールする」もしくは「ファーストビューをただ見るだけ」といったことしかできません。

つまり、ユーザーはファーストビューを見るだけで「このサイトは自分にとって有益なものであるかどうか」を判断しているということになるのです。逆に、ファーストビューがターゲットの心を掴むものであれば、自然とユーザーの滞在率を向上させることができます。

ファーストビューのデザインについて下記の記事にて詳しく紹介しておりますので、あわせてご覧ください。

ファーストビューはサイト内の滞在時間や離脱率に大きく影響します。なぜなら、ファーストビューを見て3秒で離脱するユーザーの割合は、全体の約60％と言われているからです。

ファーストビューでユーザーの心を掴むことができなければ、10人のうち6人がサイトを離脱してしまうということですから、ファーストビューの作成には必ず力を入れるべきと言えるでしょう。

ファーストビューのデザインを作成する際に気を付けることは下記の通りです。

以下では、それぞれの注意点について詳しく解説していきます。滞在率を向上させるファーストビューを作成したい人はぜひ参考にしてみてください。

ファーストビューには、

など、さまざま要素が盛り込まれます。しかし人が即座に認識できる情報には限りがあるため、要素を詰め込み過ぎないことが重要になります。

では、人が即座に認識できる情報とは、一体どの程度のものなのでしょうか。下記をご覧ください。

ファーストビューは、この2つを基準にして作成する必要があります。

これらの基準を意識し、「キャッチコピーや商品名などで文字を使い過ぎていないか」「画像や入力用フィールドなどといったコンテンツを詰め込み過ぎて情報過多になっていないか」などといった点を改めて見直してみましょう。

メインビジュアルで使用する画像・動画などの大きさには気を付けましょう。なぜならメインビジュアルには、多くの情報を魅力的に伝えることができるメリットがある一方、情報過多になってしまったり、ページの表示速度を低下させてしまったりするデメリットもあるからです。

表示速度の低下は離脱率の悪化につながってしまう可能性が高いため、画像や動画を使用している場合は表示速度のテストを定期的に行うようにしましょう。

ファーストビューを作成する際は、ワン画面でのレイアウトを意識しましょう。ユーザーが自社のサイトにアクセスした際、最初に表示される画面がどういった印象を与えるのかを意識し、最適化を行っていくことが大切です。

特に画像や動画の配置をどこに持っていくかはとても重要になります。微調整を繰り返し、ユーザーに最も刺さりやすい配置箇所を見つけましょう。

キャッチコピーや画像を使用する際は、ユーザーを惹きつけるものにしましょう。

「ユーザーを惹きつけるコンテンツ」とは下記のようなポイントを押さえたキャッチコピーや画像を指します。

この3つのポイントを押さえるだけでユーザーを惹きつける画像やキャッチコピーを作成することが可能です。

メインキーワードを入れることで、ユーザーに「サイトとの関連性」を示すことができるため、滞在率の向上につなげることができ、ターゲットのベネフィットを加味したキャッチコピーを入れることで「続きを読みたい」とユーザーに思わせることができます。

ファーストビューに力を入れるのは良いことですが、その下に続くコンテンツやデザインとの統一感を出すことも忘れないようにしましょう。統一感がないデザインにしてしまうとユーザーに「ファーストビューで期待した情報が無さそう」と思われて、離脱率の悪化につながってしまう可能性があるからです。

したがって、ファーストビューで使用する「画像」「基調とする色」が下に続くコンテンツと合っているかは必ず確認しておきましょう。

ファーストビューに動きをつけてユーザーの興味を引く方法もあります。普通あまり動くことのないサイトの背景を動かすことで、ユーザーは思わず手を止めてしまうのです。

しかし、動きのつけすぎには注意しましょう。アニメーションを使用し過ぎるとページが重くなって表示速度が遅くなったり、アニメーションが作動するまでにユーザーが離脱してしまったりする可能性があるからです。

ファーストビューの情報を整理してスッキリと見やすいデザインにするか、動きのある魅力的なデザインにするかはサイトのコンセプトに合わせると良いでしょう。どちらが正解ということはありませんので、自社サイトに合っている方を選択することが大切です。

コンセプトによってファーストビューのパターンを変えましょう。ここでマクドナルドのホームページを見てみます。

マクドナルドは、新商品やサービスの更新頻度が高く、多くの商品を有しているため、メインビジュアルには定番のスライドショーを採用しています。マクドナルドのサイトを見る人は当然「商品やクーポン」に興味があるため、それらを効率的に見せることができるスライドショーを採用しているのでしょう。

こういったことから、ファーストビューを作成する際は「ユーザーが何を求めているのか」を軸に決めることが大切であるということが分かります。

昨今は、ほとんどのユーザーがモバイルでサイトにアクセスしているため、ファーストビューをスマホ対応にしておくことも大切です。

スマホに対応していないサイトのファーストビューだと、こちらが意図していないデザインがユーザーに表示される可能性があります。たとえば「キャッチコピーの文字が小さくなっている」「画像が大きすぎて全体が表示されていない」などといった不具合を起こす可能性があり、離脱率に悪影響を与えてしまう恐れがあります。

「どちらでアクセスがあった際でも問題のない状態にしたい」という場合は、スマートフォンとPCにどちらでも対応できるレスポンシブデザインにしておくと安心です。

スマホサイトのファーストビューデザインで大切なポイントを下記の記事にて詳しく紹介しておりますので、あわせてご覧ください。

前述した通り、ファーストビューに入れる内容はできるだけ絞ることが大切です。数ある中から要素を絞っていく中で、最低限入れておきたい3つのパーツは下記の通りです。

それぞれのパーツが持つ意味と作成する際のポイントについて解説していきます。

ヘッド部分（ページの最上部）に入るキャッチコピーは、ユーザーの興味を引き、離脱を防ぐ役割があります。

キャッチコピーは、ユーザーに「続きを読みたい」と思わせることが大切であるため、セールスライティングではなくベネフィットを加味した文章を書きましょう。

つまり、キャッチコピーには「商品名」「商品の価格」などを記載するのではなく「商品を使うことで得られる効能」「サービスを利用することで得られるメリット」などを書くのが適切です。

また、トンマナを統一し、キャッチコピーだけが浮かないようにする工夫も重要です。サイト全体の雰囲気に合わせたキャッチコピーを作成しましょう。

キャッチコピーについては下記の記事にて詳しく紹介しておりますので、あわせてご覧ください。

メインビジュアルとは、トップ画面に配置されている画像やアニメーションなどを指します。動きをつけることでキャッチコピーより多くの視覚情報を提供したり、滞在率の向上を図ったりすることが可能です。

メインビジュアルを作成する際も、キャッチコピーと同じようにベネフィットを強調した内容にしましょう。ベネフィットに加え、具体的な数字による権威付けを行うことで更に高い効果を発揮することもあります。たとえば「リピート率の高さ」「顧客満足度」などといった数値をメインビジュアルに入れるといった方法がおすすめです。

Web上には、さまざまな商品やサービスがあるためユーザーも「これだ！」というものを決められずにいます。そこで「No.1」「リピート率99％」といった数字で安心感を与え、購入や契約につなげることが大切なのです。

CTAとは「Call To Action」の頭文字をとった造語であり、日本語では「行動喚起」と訳します。行動喚起とは、サイトに訪れたユーザーに対し「資料請求」「問い合わせ」などといった行動を促すための施策です。たとえば、「問い合わせはこちら」「さらに詳しく見る」などと書かれたボタンはCTAに該当します。

CTAは基本的にランディングページの下側に設置されることが多いですが、ファーストビューに設置するのも効果的とされています。「商品の購入」「サービスの契約」といった行動喚起は心理的ハードルが高いためファーストビューでの設置に向きませんが、「資料請求」「お問い合わせ」などといった行動は心理的ハードルが低いためCTAを設置する価値が十分にあります。もちろん、サービスや商品の内容により効果は変わるため、ユーザーの反応を見ながら適宜調整することが大切です。

次に、クリックされやすいボタン（CTA）を作るポイントもチェックしておきましょう。

商品やサービスに合わせて柔軟な調整を行いましょう。

ファーストビューには、重要なタグやメッセージを配置するレイアウトがおすすめです。レイアウトとは、タイトル、見出し、画像などといった配置を分かりやすく表した図表を指しています。

たとえば、下記が王道なWebサイトのレイアウトです。

ファーストビューは、上記画像の「ヘッダー部分のみの表示」になるため、メインコンテンツやサブコンテンツは上部しか映りません。そのため、メインコンテンツの上部にユーザーの興味を引くような工夫を施したり、ヘッダー部分でユーザーのベネフィットを訴求するようなキャッチコピーや、画像などを設置したりする必要があるのです。

また、ファーストビューの領域にWeb広告を差し込んでいるサイトをたまに見かけますが、広告が最初にくると「何を発信しているサイトなのか」を分かりづらくしてしまう可能性があるため注意しておきましょう。

次に、ファーストビューを作成する際の参考にしたい企業のホームページを3つ紹介します。

画像付きで「ホームページの長所」を紹介していきますので、ぜひ参考にしてみてください。

ロックアイランドツアーカンパニーが運営するWebサイトの長所は下記の通りです。

色鮮やかな島の写真が印象的なファーストビューです。画像の真ん中にはユーザーのベネフィットに訴求するキャッチコピーが添えられています。文字が白色であるためサイトの背景も白色にして統一感と見やすさを向上させています。

JapanTaxi株式会社が運営するWebサイトの長所は下記の通りです。

ファーストビューで表示される写真は、時間経過で切り替わる仕様になっています。白とネイビーを基調としたキャッチコピーと背景の写真が力強く、印象に残りやすいのが最大の特徴です。

NTTドコモが運営するWebサイトの長所は下記の通りです。

NTTドコモのサイトは、ログインすることで個別でのおすすめ情報やdポイントの残高などが表示される仕組みになっています。レイアウトを比較的大きめに作ることで、年配の方でも問題なく見えるようにしている点が大きな特徴です。

本記事では「ファーストビューの重要性」「ファーストビュー作成の際に気を付けること」などについて解説してきました。

サイトを最適化していく上で、ファーストビューの改善は非常に効果的な手段の一つです。特に離脱率が高いWebサイトにおいては、ファーストビューの改善が必須であると言っても過言ではありません。

ファーストビューの改善方法やリソース不足でお悩みの方は、ぜひTHINkBALにご相談ください。