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サイトが挙げられるでしょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

ファーストビューのデザインについてプロに相談してみる

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

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

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

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

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

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

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

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

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

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

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

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

ここからは、おしゃれなファーストビューデザイン事例をご紹介します。さまざまな業界のファーストビューデザインをご紹介するので、ぜひ参考にしてみてください。

積水ハウス株式会社のファーストビューは「暮らし」をイメージさせたデザインが特徴です。不動産・住宅関連のサービスを提供する同社ならではのファーストビューといえるでしょう。

家の一室と、書籍といったシンプルな画像が用いられていますが、「家族の存在」をイメージさせるクオリティの高い一枚が採用されています。

キャッチコピーも画像もシンプルでありながら、人の心に訴えかけるおしゃれなデザインです。

株式会社トンボ鉛筆のサイトのファーストビューは、自社商品をおしゃれに訴求している点が特徴です。文房具の個性を演出しつつも、その魅力もきちんと伝えられています。

どこか楽し気な雰囲気もある画像を採用していて、見ているユーザーのワクワク感を引き出すような工夫も施されています。

「文房具」と聞くと地味なイメージを感じる方もいますが、同社のファーストビューなら、「おしゃれ」「楽しい」といったキーワードも浮かぶのではないでしょうか。

株式会社バンダイナムコホールディングスは、アミューズメント関連のサービスを手掛ける企業です。ファーストビューは、同社らしい遊び心満載のスライドが採用されています。

自社が手掛けたゲームやショップをカラフルかつポップに取り上げていて、ユーザーが楽しめるように工夫されている点が特徴です。

インパクト抜群のファーストビューでもあるため、ユーザーの関心を引きやすく、離脱しにくい設計になっています。

株式会社河合電器製作所は、小さな遊び心を持たせたファーストビューが特徴です。ファーストビュー内に配置されている人物が動いたり、画面下部から風船が飛んでいったりと、見ていて楽しい仕掛けが施されています。

また、時折自動車が通り過ぎていくなど、ユニークな演出も採用されています。

業界としては難しそうなイメージや、自分とは無関係そうといった印象があるものの、ファーストビューで親しみやすいデザインを取り入れているため、ユーザーが抵抗を感じにくいのが魅力です。

株式会社オートクチュールは、高級な寝具を扱う企業です。ファーストビューでもおしゃれな寝室の画像を採用していて、高級感や特別感を抱かせる設計となっています。

背景の窓に映る雲がゆっくりと動いたり、スクロールすると一機に動的なデザインが画面いっぱいに広がったりするなど、遊び心も満載です。

「眠り」をテーマにしているデザインであるため、全体的にトーンが落ち着いていて、リラックス感を得られる点もポイントです。

ファーストビューのデザインについてプロに相談してみる

ファーストビューを作るにあたり、「そもそもどうしたら良いのか」「どのように作れば良いのか」などは気になるポイントなのではないでしょうか。ここからは、ファーストビューを作るのが初めての方でも失敗しないために「ポイント」を解説していきます。

ファーストビューを作るにあたり、まず押さえておきたいポイントが、「商品の内容が分かる画像を使うこと」です。商品の見た目はもちろんのこと、魅力や利用シーンなどが分かるような画像を使用することで、ユーザーが購入するメリットや購入した後の使い方をイメージしやすくなります。

購入に至るまでの心理的ハードルも下がりやすくなり、結果的に購入へのステップまで進んでもらえるチャンスが高まります。そのため、商品の内容が分かる画像を使用することは重要です。

ファーストビューでは、情報を盛り込みすぎないように注意し、シンプルなデザインに設計することが重要です。商品やサービスの魅力をしっかり伝えたい！と、あれこれと情報を詰め込みすぎてしまうケースは少なくありません。

しかし、たくさんの情報を盛り込んだところで、ユーザーがすべてを覚えているわけではありません。また、すべての情報にしっかりと目を通してくれる可能性も低いのが現状です。

そのため、「本当に知ってほしい魅力」「他社とは違うこだわりの部分」など、本当に知ってほしい情報のみをピックアップして整理しましょう。情報を取捨選択し、シンプルなデザインに設計することで、ユーザーが内容を理解しやすくなります。

アピールポイントは多くても2～3つまでにおさえ、ファーストビューの設計に取り入れてみましょう。

ファーストビューでは、CTAボタンの設置を忘れないようにしましょう。ファーストビューは、ユーザーの関心が高まっている部分であり、アクションを促しやすい点が特徴です。

ファーストビューにCTAボタンが設置されていないと、せっかく盛り上がっていたユーザーの気持ちが、スクロールと同時に下がっていってしまい、結果的にアクションを起こさないまま離脱してしまう恐れがあるのです。

そのため、ファーストビューに「資料請求」「お問い合わせ」などのCTAボタンを設置する必要があります。「まずはまとめて資料請求してみる」といった、初動のハードルを下げるような文言を取り入れたCTAボタンがあると、よりユーザーの行動を促しやすいでしょう。

ファーストビューを作るにあたって、必須のポイントといえるのが「デバイスごとに適したサイズになるよう調整すること」です。現代では、パソコンだけではなく、タブレットやスマホなどでもWebサイトを閲覧するのが一般的です。

とくに、近年はスマホの普及が拡大していることもあり、通勤や就寝前、すき間時間などにスマホでインターネットを閲覧するユーザーが多い傾向にあります。

きちんとデバイス事にサイズを調整できていないと、「スマホやタブレットでは見づらい」といったファーストビューになってしまうかもしれません。せっかくアクセスしたユーザーが「見づらい」という理由で離脱してしまう恐れがあるため、取りこぼすことのないようにすべてのデバイスで見やすくなるように調整しましょう。

ファーストビューを作る際に実践すべきなのが、「数字を用いた訴求」です。

例えば、「自社のツールを導入すれば売上が向上できます」といった内容で訴求するよりも、「自社のツールを導入すれば、今よりも売上が30%以上も向上できます」と、数字を用いたほうがより具体性が増します。

数字を使うことで、メリットを強調できたり、権威性の高さをアピールできたりする効果が得られるものです。ぜひ、取り入れられる数字があれば、積極的に活用していきましょう。

ここではファーストビューをデザインする上で注意しておきたいことを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に気軽にご相談ください。