ユーザーはサイトに訪れたときにファーストビューと呼ばれる画面を最初に見ることになり、この時点で自分が求めている情報があるかどうかの判断をします。

したがって、ファーストビューでユーザーが有益でないと判断した場合、画面をスクロールすることなくWEBサイトから離脱してしまうケースも少なくありません。

ファーストビューはユーザーがWEBサイトに滞在するかどうかが大きく分かれる重要なタッチポイントになります。コンテンツの魅力を十分に伝えるための具体的なファーストビューのデザイン方法やポイントを解説していきます。

WEBサイトのファーストビューで大事なこと

WEBサイトのファーストビューでは、デザインが重要です。ファーストビューではメインビジュアル、方向性、導線のデザインが明確になっている必要があります。ユーザーがサイトに訪れたときにまず探すのは、自分が求めている情報があるかどうかです。

そのためファーストビューで情報がユーザーに入った瞬間に、サイトを読み進める価値があると判断してもらう必要があります。そこで目を引くにはまずはデザインが重要となるわけです。

ファーストビューとメインビジュアルとは何か

ファーストビューとは、サイトに訪れたときに最初に表示される画面のことです。Above The Fold（アバブ・ザ・フォールド）の俗称であり、どちらもユーザーがWEBサイトに訪れた際にスクロールせずに見える画面の領域のことを指します。

本記事では俗称であるファーストビューという単語で解説をしていきます。

次に、メインビジュアルですが、ファーストビューのメインビジュアルは、WEBサイトに訪れたユーザーの目に映る最も大きな画像やイラストのことです。メインビジュアルがユーザーの求めている情報とかけ離れていると、サイト滞在率が大きく下がります。

そのためメインビジュアルのデザインがサイトの全体像であることが理想です。メインビジュアルからユーザーが得られるメリットを画像やイラストで想像させることで、ユーザーのスクロールが始まります。

メリットだけでなく、メリットによってどんな利益が得られるのかというベネフィットを示すことができれば、さらにユーザーの滞在率は上がります。メインビジュアルは文章よりも多くの情報とイメージを瞬間的にユーザーに伝えることができますので、ターゲットを意識したデザインが重要です。

効果的なファーストビューの作り方

次に、効果的なWEBサイトのファーストビューを作成するうえで大事なポイントを７つご紹介します。

方向性を決めてキーワードとイメージを組み込む

「ターゲットが求めているもの」と「ターゲットに与えるメリットとベネフィット」の方向性がファーストビューでわかるようにしなければなりません。そのためにどんなキーワードとイメージが合っているのかを洗い出して決めます。

この時点で方向性のキーワードとイメージがうまく噛み合っていないとユーザーは必要な情報を得られないと判断しスクロールすることなくWEBサイトから離脱してしまいます。

メインビジュアルと同様に少ない文章で多くをイメージさせ、瞬間的に判断してもらえるかがポイントになりますので、ターゲットが求めているものからベネフィットまでを意識してください。

ファーストビューに導線を入れる

ファーストビューで離れてしまうユーザーを繋ぎ止めるためには、商品やコンテンツの詳細、資料請求やお問い合わせフォームなどをファーストビュー内に設置してユーザーが迷わないようにします。

ファーストビューからのリンクが何もないとスクロールして詳細情報を探しに行かなければなりません。しかし、あらかじめファーストビュー内に導線の設置ができればスクロールしなくても素早く詳細情報にアクセスができます。

導線を設置するにあたってはスマホとパソコンでの表示のされ方が変わるためサイズ感も大切です。スマホでの表示画面とパソコンでの表示画面のサイズ感を考慮して視認性が悪くならない設置が必要となります。

ファーストビューの3秒で自分に有益か判断する

ユーザーはサイトに訪れてわずか3秒で自分にとって有益であるかどうかを判断します。ファーストビューのデザイン性以外に、どんな情報を見てユーザーは判断しているのかを解説していきます。

ペルソナを設定する

ペルソナとは実際に人物が実在するかのようにユーザー像を設定することです。ペルソナの決め方は大きく分けて2つに分類され、デモグラフィックとサイコグラフィックと呼ばれる分類方法で決めていきます。

この2つの客観的な要因を精査し、提供するサービスの方向性を決めます。たとえば「キャンプをしたい男性」よりも「30歳の都内営業マン、キャンプ中でもお客と連絡が取れるように電波が飛んでるキャンプ場を探してる男性」としたほうが具体的なサービスを提供できます。

このように細かいペルソナを設定することで、商品やサービスをより具体的に提供することができるだけでなく、狙うユーザーの方向性が明確になります。

万人受けを狙うのではなくユーザーのペルソナを詳細に決めることで、より一層ユーザーへの理解も深まり、コンテンツ発信が円滑に最適化されていきます。

USPを伝える

USP（Unique Selling Proposition）とは他社にはない独自の強みです。単に強みをアピールするのではなく、ユーザーに対して自社だけが提供できるサービスをアピールしていくことが大切です。重要なポイントは、ペルソナの設定でもあったように万人に受け入れられようとしないことです。

USPをユーザーにアピールすることができれば、商品購入やサービス契約してもらえる大きな要因になります。自社だけの強みは簡単に見つかる訳ではありませんが、逆に弱みを強みとしてアピールする方法もあります。

例えば、「起業したばかりで実績がない」は弱みですが、「起業に必要な最新の情報を提供できる」とすることで信頼性が高いサービスとして認識してもらえます。

自社にUSPが何もないと考えている場合であっても、発想の転換や自分自身をペルソナとして設定することで見えてくるUSPもあります。何が提供できるのか視野を広げることでUSP設定してください。

WEBサイトの表示速度を上げる

WEBサイトの表示速度が遅いとファーストビューを見られる以前にユーザーは離脱してしまいます。表示速度に関しては「Googleが掲げる10の事実」でも提唱されていて、SEO対策としても重要なポイントです。

Googleの調査ではページの表示速度が表示速度が1秒から3秒に落ちると、直帰率は32%上昇すると公表されています表示速度が1秒から5秒に落ちると、直帰率は90%上昇するといわれているので、ファーストビュー以前に表示速度の問題はクリアしておく必要があります。（参考：Find out how you stack up to new industry benchmarks for mobile page speed、Think with Google）

WEBサイトのページ速度を上げるためにはシンプルな構成を心がけ、不必要な画像を使用しないことです。極力サーバーへのリクエストを減らして、わかりやすいファーストビューの構築をしてください。

スマホを意識したサイズ感にする

スマホ対応のファーストビューの構築は必須です。WEBサイトによっては9割近くのユーザーがスマホからのアクセスであるとのデータが出ています（参考：インターネット利用環境、スマホが9割、PCは横ばい…LINEの定点調査、Media Innovation）。

ファーストビューのメインビジュアルもスマホのサイズに合っていないと、必要な情報がユーザーに届かずに離脱されてしまう可能性があります。スマホのサイズに合わせたファーストビューがユーザー獲得に繋がります。

適切なファーストビューのサイズはパソコンとスマホによって変わりますので、ファーストビューの方向性によって適切な画像サイズの設定をしてください。

滞在率を高めるファーストビューのデザイン

ユーザーのペルソナ設定やWEBサイトの方向性、メインビジュアルのイメージによって効果的なデザインパターンも変わります。WEBサイトの方向性を加味した、ファーストビューのデザインパターンを解説していきますので参考にしてください。

スライドショー

画像出典：育ててく住まいあとリノ

ファーストビューに有効なデザインタイプのなかでも定番なのがスライドショーです。コンテンツ発信が頻繁におこなわれるWEBサイトに向いています。ファーストビューで一度に複数のコンテンツ情報がユーザーに伝わるので、限られた空間を最大限に活用できます。

ユーザーには賑やかで活性感のあるイメージを与えることができるので、新商品の追加の頻度やコンテンツの更新が多く、ニュース的な発信をしているWEBサイトは活用してみてください。

反対にシンプルなファーストビューでわかりやすさを求めるような、特定のコンテンツを発信するWEBサイトには不向きなデザインパターンです。このタイプのサイトではわざわざスライドショーを選ぶメリットがなく、ユーザーにとっても導線がわかりづらくなる可能性があります。

デザインをイラスト化する

画像出典：イヤイヤ研

イラスト化することで、柔らかいイメージでサイトの方向性を主張することができます。生々しい情報をを柔らかいイメージとして発信できるので、苦手意識があっても触れやすいWEBサイトを作れます。

イラストは実写の画像に比べて、独特な世界観を演出できます。また、もう1つイラストの特徴としては親近感が湧きやすく、商品やサービスにも身近に感じてもらえます。

商品やサービスを利用してもらうハードルを下げてくれる役目をしてくれるので、ファーストビューを贅沢にイラストで埋める価値は十分にあります。

動画で世界観をアピール

画像出典：近畿大学病院

動画をメインビジュアルにすると圧倒的に世界観をアピールできます。WEBサイトの方向性やイメージを映像から短時間で情報を伝えることで関心が高まりやすく、ユーザーは離脱することなくサイトに滞在してくれます。

動画は画像よりも読み込むための容量が増えるため、速度表示に影響が出る可能性があります。速度表示が遅くなるほどユーザーの離脱が増えるのは明らかで、動画ファイルの容量を抑えたり、尺を短くするなどの最適化が必要です。

WEBサイトの世界観やイメージが、コンテンツや商品に大きな影響を持っているWEBサイトに向いています。WEBサイトの世界観を短時間でユーザーに伝えることができるので、アクセスしたばかりのユーザーにもコンテンツや商品への関心が高くなります。

スプリットスクリーンレイアウト

画像出典：Twitter

メインビジュアルの左には方向性を示したデザイン、右にはコンテンツへの導線を確保ができるのがスプリットスクリーンタイプです。ユーザーはWEBサイトのターゲットを即座に理解し、コンテンツへのアクセスにも迷うこともありません。

スプリットスクリーンレイアウトは、多くのコンテンツを発信したいWEBサイトにはやや不向きなインターフェースです。更新頻度やコンテンツが多いサイトは、前述のスライドショーを活用した方がファーストビューの観点からは有効です。

スプリットスクリーンレイアウトは、世界観や方向性のアピールと導線を両立することができるため、ユーザーの離脱を防ぐ有効的なファーストビューです。左のデザインを大きく、導線は最小限にするなどのレイアウトも可能なため、コンテンツ量に応じたデザインの変更ができます。

まとめ

WEBサイトを運営していく上でファーストビューがWEBサイトを離脱するか滞在するかの大きな分岐点になります。WEBサイトの方向性やペルソナを明確にしたファーストビューが離脱率を下げてコンテンツへの流入を増やします。デザインとはWEBサイトのビジュアルだけでなくURLのボタン配置であったり分かりやすくクリックしてもらうことも含まれます。総合的にユーザーが見やすいデザインを意識してWEBサイトを作ることが重要です。

SEOコンサルティングの東京SEOメーカーTOPへ戻る

 

この記事の監修者

上級SEOコンサルタント　坂口　直樹

新潟大学大学院を卒業後、事業会社で10年働く間にSEOに出会う。自身でサイトを多数立ち上げ、実験と検証を繰り返しながらSEOを研究。お金に変えることを目的とはせず、ユーザーに何が有益かを問い続け改良を繰り返すうち、「インターネット上の真実ではない情報を正してユーザーのためになる情報を発信する」という天啓を得る。現在は東京SEOメーカーの上級SEOアドバイザーとしてアサイン。