3秒勝負！ファーストビューは最重要！おすすめのデザインとポイントを解説！

ファーストビューはWebサイトのデザインの中でも重要視するべきポイントです。そのWebサイトの結果をファーストビューが決めると言っても過言ではありません。

そこで、今回の記事ではWebサイトで結果を残すために、ファーストビューについて以下のポイントを中心に紹介します。

ファーストビューとはユーザーがWebサイトにアクセスした際に、最初に表示される部分のことを意味します。主にページの上部にあたる部分です。

ユーザーの利用している媒体によって、表示されるファーストビューは異なりますので、それぞれの媒体で最適なファーストビューを設定することが大切です。特に近年ではスマホに適したWebデザインが求められています。

総務省が発表している令和2年の「情報通信白書」によると、63.8%のユーザーが「スマホ」によってインターネットを利用しているそうです。このようにスマホでのユーザーが多いことから、ファーストビューのデザインのあり方も変わりつつあります。

ファーストビューが悪いと、コンバージョンが悪化します。これはサイト運営における最も大きな損失です。Googleアナリティクスで、直帰率が計測ができますが、ファーストビューが悪いとこの直帰率の数値が上がります。

どんなにいい商品・サービスを販売してようと、ファーストビューが悪ければコンバージョンの数は上がりません。

ファーストビューの概要を把握したところで、ここからはなぜファーストビューが大切であるのかを解説します。ここで大切なポイントは以下の通りです。

ファーストビューの目的は、Webサイトの続きを読みたいと思わせることです。そのため、ファーストビューではユーザーに「続きを読ませたい」と思うデザインにしなくてはいけません。

たとえば、あるワードを検索してたどり着いたWebサイト。

あなたはスクロールせずにそのWebサイトを何秒間見続けますでしょうか。人によってまちまちだとは思いますが、平均的には3秒間ファーストビューを見続けるといわれています。

その3秒の間でユーザーは読み進めるメリットや利益を考えて、離脱するかどうかを決めます。たった3秒の間に有益なWebサイトだとユーザーに思わせるためにも、ファーストビューのデザインが大切です。

ユーザーの直帰率が低く、滞在時間が長ければ長いほど、Webサイトの価値は高まります。とはいえ、滞在時間がSEOに直接関係する可能性は低いです。

しかし、滞在時間が長いWebサイトはユーザーがコンテンツを吟味する可能性が高まりますので、CTRやCVRが高い傾向にあります。Webサイトの滞在時間を高めるためにも、良質なファーストビューデザインが必要です。

ファーストビューでは3秒間しか滞在しないと述べましたが、そこで有益だと判断したユーザーはWebサイトの続きまで読み進めることになります。読み進めれば読み進めるほどサイトの滞在時間が長くなりますので、結果的にCTRやCVRが高くなる可能性が高まります。

つまり、つまり、1人でも多く直帰するユーザーを減らし、ユーザーの滞在時間を高めて、Webサイトの成果を出すためにもファーストビューのデザインが大切ということです。

突然ですが、「ファーストビュー 重要性」というワードで検索したとしましょう。検索した結果、検索したキーワードと関係ない内容を紹介している記事を見かけたら、あなたはどのように思いますか？

きっと関係のない説明に飽き飽きして、他のWebサイトに移動してしまうでしょう。このようにWebサイトに訪れるユーザーは何気なく訪れるサイトに対しても、結論を最初に求めている場合が多いです。

そのため、求めている情報を得られなさそうなファーストビューを設定している記事であれば、時間の無駄と判断してサイトから離脱してしまいます。離脱率を低下させるためにも、ユーザーにとって有益であることをファーストビューで伝えなければいけません。

ファーストビューのみで明確に情報を伝え切るのは難しいかもしれませんが、なるべく意欲的に読みたくなるようなファーストビューデザインが大切です。

ここではおすすめのファーストビュー設定を4つ紹介します。ファーストビューのデザイン設定に困ったら参考にしてみてください。

ファーストビューに動画を設定すると、以下のメリットが発生します。

動画は画像よりも多くの情報を含んでいます。動画で伝わる情報は画像や文字よりも視覚に訴えかけてきますので、ユーザーはストレスなく情報を取得可能です。

さらにファーストビューで動いている新鮮な情報をユーザーに与えることで、ユーザーはワクワク感が抑えられずに思わずスクロールする可能性が高まります。

ユーザーの離脱率を下げるためにも動画は効果的なデザインでしょう。ただし、動画をファーストビューで使う際に注意していただきたい点があります。

それが以下の2つです。

動画の容量が大きすぎると、サイトのリロード速度が遅くなる可能性があります。近年ではWebサイトの動きが遅いことを理由に離脱している人も数少なくありません。特に動画を高画質で伝えるとなると、容量が大きくなりがちです。

そのため、ファーストビューに動画を設定する際には大きくても10MB以下の動画を設定するようにしてください。

また、あまり尺が長すぎる動画だとユーザーが飽きてしまう可能性があります。あくまでもファーストビューでは、Webサイト全体のイメージを伝える手段として動画を利用するようにしましょう。

ファーストビューでは、大きな文字で分かりやすくシンプルなデザインにするのも効果的です。文字をファーストビューの主役に置くことで、以下のようなメリットが発生します。

3秒と限られた時間の中で情報を伝えるのであれば、シンプルかつ分かりやすいデザインの文字をファーストビューに設定するのも効果的です。

文字の大きさによって印象は変わりますし、フォントによっても与える印象は変わってきます。たとえば、明朝体であれば真面目なイメージを与えますし、ゴシック体では面白いという印象を与えます。

何を書くかによって与えるイメージも変わりますが、フォントによっても与える印象が変わるところが文字の面白さでもあるでしょう。ただし、ファーストビューのデザインで文字を使うのであれば、シンプルなデザインのフォントにしましょう。

Webサイトの中では、達筆な文字で書かれたファーストビューも存在します。しかし、達筆であるがゆえに何を書いているのか分からず、ユーザーが離脱してしまう場合がほとんどです。

Webサイトの独自性を高めたい気持ちは分かりますが、ユーザーの満足度を考えるのであれば分かりやすいフォントを採用するようにしてください。

近年ではスライド形式のファーストビューを設定しているWebサイトも散見されます。有名どころのWebサイトでいえば、マクドナルドのWebサイトが挙げられるでしょう。

参照：https://www.mcdonalds.co.jp/

このようなスライド式のファーストビューに設定すると、以下のメリットが発生します。

スライド形式のファーストビューは、伝えるコンテンツが多い場合や更新頻度が高い場合のWebサイトに向いているでしょう。

ニュースを伝えるWebサイトや売り込みたい商品が多いWebサイトなどが当てはまります。限られたスペースで多くのコンテンツをアピールできる一方で、更新する手間やビジュアルのテイストをWebサイト全体に合わせる必要がある点は注意が必要です。

特にマクドナルドのようにメニューの入れ替わりが激しい企業のWebサイトでは、スライドの更新を頻繁に行わなくてはいけません。

そのため、ある程度のリソース確保が必要になります。

キャッチコピーのみで情報を伝えるのは至難の技ではありますが、活用しきれれば最高のファーストビューになります。簡潔な内容であればあるほど情報が伝わりやすくなりますので、メリットが伝わりやすいキャッチコピーの設定が必要です。

キャッチコピーを考える際には、以下のポイントに注意した上で考えるとうまくいく可能性が高いです。

キャッチコピーを考える際には不特定多数の人に伝わるようなキャッチコピーを考えるよりも、ペルソナを絞って考えた方がユーザーに刺さりやすいです。

ターゲットにとってののベネフィットを明確に伝えましょう。ベネフィットとは、その商品・サービスを通じて得られる利益・価値のことを指します。「照明」を例として説明します。

販売するのは「照明」ですが、ターゲットにとっては「明るい部屋」を得ることになります。LEDの照明であれば「長期間電球を交換しなくても、ずっと明るい部屋を保てて楽」という価値を得ることになります。

商品・サービスを購入する人は、商品・サービスが提供するベネフィットが、自分が求めているものかどうかを、ファーストビューで瞬時に判断しようとしています。

また、Webサイトに訪れるユーザーを増やすためにもSEOを加味した上でのキャッチコピー設定も大切になります。SEOの知識がない方であっても、検索されやすいキーワードを検索した上でキャッチコピーを考えることは可能です。

キャッチコピーを魅力的にするためにも、明確な数値をキャッチコピーに忍び込ませるのもよいかもしれません。いずれにせよキャッチコピーをファーストビューに設定するのであれば、熟考した上でキャッチコピーを設定するようにしてください。

ここではファーストビューのデザインで良い例と悪い例を紹介します。ファーストビューで失敗しないためにも、悪い例は参考にしないようにしましょう。

ファーストビューでの良い例は簡単にいってしまえば、結果が伴うデザインです。どんなに不格好なデザインであってもCTRやCVRが高ければ、それが良いファーストビューとなります。

しかし、ファーストビューで不格好な場合は結果が伴わない場合がほとんどです。そのため、多くの場合はシンプルかつスマートなファーストビューが良い例とされています。

どのようなファーストビューが良いのか、いくつかポイントを挙げてみます。

以上のような条件を満たしているシンプルなデザインは、良いファーストビューとされています。ファーストビュー全体の印象は決してオシャレな必要はありません。

むしろ、オシャレにしようとゴチャゴチャ手を加えると、本当に伝えたい情報が伝わらない可能性も出てきます。そして、ここでもう一度Webサイトの設計段階で明確にしてある、ゴール設定を振り返ってみてください。

あなたのデザインしたファーストビューは、Webサイトのゴール設定に貢献できているでしょうか。もし、ゴール設定がぶれるようなファーストビューを設定しているようであれば、今すぐにファーストビューを作り直すべきです。

ファーストビューの悪い例として挙げられるデザインは以下の通りです。

ファーストビューで失敗しないためにも、少し多めに悪い例を列挙してみました。上記のどれかでも当てはまってしまっているファーストビューは、ユーザーの離脱率を高めてしまうでしょう。

目立たせようと、他のWebサイトと差別化を図ろうと、いろいろ試行錯誤する気持ちは分かりますが、多くの場合はその行動が裏目に出てしまいます。

また上記に該当していませんが、アニメーションが多いWebサイトも避けた方が無難です。要所でアニメーションを加えるのは、ユーザーを飽きさせない工夫といえます。

しかし、Webサイトの全てにアニメーションが設定されているWebサイトは、オシャレにしようとして悪目立ちしてしまいます。あくまでもシンプルで、ユーザーが分かりやすいファーストビューを心がけたデザインをするようにしてください。

ここではファーストビューをデザインする上で注意しておきたいことを3つ紹介します。ファーストビューデザインの初心者の方は失敗しないためにも、必ず以下の内容を注意した上で制作するようにしてください。

ファーストビューに限らず、Webサイトの画面は閲覧している媒体によって大きさが異なります。

日本で使われているパソコンのサイズは、「1920×1080」か「1366×768」がシェアのほとんどを占めているようです。さらに、スマホのサイズでのシェアは「375×667」がほとんどになっています。これらのことを踏まえた上で、ファーストビューの設定を進めなければいけません。

しかし、媒体ごとに設定していればキリがありません。そこで、レスポンシブデザインを採用するのをおすすめします。レスポンシブデザインとは、ユーザーがWebサイトを閲覧している媒体によってページのレイアウトを最適化する方法です。

CSSの知識があれば簡単に設定できますので、コーダーにレスポンシブデザインを注文してみるのもよいかもしれません。

ファーストビューの3秒の間に、ターゲットがベネフィットを感じられるかどうかが、コンバージョンに大きく影響を及ぼします。

ベネフィットを表現するコピーを考えられたとしても、そもそもターゲットのペルソナにずれがあると、せっかく考えたベネフィットメッセージが刺さりません。

例えば、「青汁」に対するニーズを持つ、健康を重視しているペルソナを想定したとします。

このペルソナが「健康重視」しているから、無農薬、非加熱処理、国産、栄養価を気にしていると思い、「圧倒的栄養価！安心・安全！飲むと疲れ知らず！」とメッセージを伝えてたが、コンバージョンが伸びなかった。そこでベネフィットメッセージを「酵素たっぷり、食事前に飲むだけで-5kg」に変更したら急に売れ出したとします。

ペルソナ設定では「健康を重視している」と思いきや、実際は「健康的な体系」を重視していた、ということです。

ペルソナ設定を誤ると、せっかく考えたベネフィットメッセージもターゲットに届かないので、ファーストビューを考えるときは、ペルソナの設定にずれがないか再確認し、複数のベネフィットメッセージを考えてみましょう。

ファーストビューで多くの情報を詰め込むのはおすすめできません。2つ以上のメッセージをファーストビューで伝えようとすると、ユーザーは情報選択に迷ってしまいがちです。

その結果、情報を取得するのを諦めてWebサイトから離脱してしまいます。どうしても複数の情報をファーストビューで伝えたい場合は、スライド形式のデザインを採用するようにしてください。スライド形式であれば、ユーザーがストレスなく複数の情報を取得できるようになります。

ただし、ユーザーを混乱させないためにも、あまり情報は詰め込みすぎないようにした上でスライド形式のデザインを採用するようにしてください。

ファーストビューで興味・関心を持たせることができたら、ターゲットは画面をスクロールして、続きの情報を見る行動を起こします。そこでファーストビューからの一連のストーリーを組み立て、申し込みまでの導線をスムーズにしましょう。

また、ファーストビューから移動するように仕向けることも大切です。矢印や次のコンテンツの一部だけをファーストビューに表示することで、次の情報にも興味を持たせることもできます。

動画を利用したファーストビューは、効果的に多くの情報を伝えられるようになります。

しかし、動画であるがゆえに注意していただきたい点が1つだけあります。それが動画の音声です。スマホが普及している現代社会では、Webサイトの訪問に場所と時間を選びません。

たとえば、電車で何気なくスマホをいじっていて、とあるWebサイトに訪れてみたとしましょう。そのWebサイトから大音量の音楽が流れてしまった経験はないでしょうか。

この場合、Webサイトをのんびりと閲覧している場合ではありません。すぐにWebサイトから離脱してしまいます。このような事態で機会損失を避けるためにも、Webサイトの動画コンテンツは基本的にサウンドオフにしておきましょう。

ここまでファーストビューのデザインについて以下の情報を中心に記載しました。

ファーストビューで失敗したくないのであれば、プロの力に頼ってみるのも1つの手です。THINkBALではWebサイト制作に関わるさまざまな知見をもとに、効果的なサイト制作を手助けします。

ファーストビューのデザインで迷ってしまったら、THINkBALに気軽にご相談ください。