WEBサイトが読まれるかは3秒で決まる！？

よく、「第一印象は3秒で決まる」という言葉を耳にしますよね。

これは対人に限ったことではなく、実はWEBサイトにおいても同じなのです。
対人の場合には、身だしなみや表情、声のトーン、話の内容といった要素から第一印象が判断されます。

WEBサイトも、ターゲットは自分なのか（何のサイトか）、求めている情報があるか、読み進めるメリットはあるか、
このような要素からわずか3秒でユーザーは判断しているのです。

ファーストビューとは

ファーストビューとは、WEBサイトを開いた時に最初に表示される部分のことで
スクロールせずに見える範囲を指します。

スクロールせずに見える範囲なので、
大きい画面では広く見ることができますし、小さいスマホなどの画面では見える範囲は狭くなります。

ユーザーのブラウザウィンドウのサイズや画像解像度によっても見える範囲は異なるので閲覧環境を考慮することも大切です。
この範囲については、PCでは高さ550px、スマホは高さ460pxであればカバーできると言われています。

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

先程述べた通り、ファーストビューによってユーザーはサイトを読み進めるか判断しています。
また、ファーストビューは直帰率とも関係があります。
ファーストビューでサイトから離脱する割合は
コーポレートサイトで40～60%、ランディングページで70%以上と言われる程です。

ユーザーの約半分以上がファーストビューでサイトから離れていることを考えると
ファーストビューが如何に重要か理解できると思います。

WEBサイト運営側としては、
サイトの続きを読ませるために（読まれることを前提にして）サイトを作っていますし
見てもらうことでコンバージョンにもつながってきます。

せっかく作ったサイトも、見られなければ勿体ないですよね。

そのため、WEBサイトの顔となるファーストビューの部分は、
コンバージョンや滞在時間を左右する大切な要素なので、しっかりと考えて制作する必要があるのです。

ファーストビューで意識するポイント


ファーストビューでは以下の要素を明確にする必要があります。

ターゲットは誰なのか

まずは、WEBサイトのターゲットを明確を明確にしておくことは重要なポイントです。
最初にサイトのターゲットが自分であることをユーザーに認識させられなければ、離脱につながります。

ターゲットが明確になっていないと、
サイト内の情報にもまとまりがなくなってしまうので、ファーストビューでは簡潔にわかりやすく情報を載せることが大切です。
多くの情報を与えたいと考えてしまいますが、選択肢が多くなりすぎては誰に向けたサイトなのか、わからなくなってしまいます。

ユーザーに伝えたいことは何か

ターゲットを明確にした上で、次に、伝えたいことは何かがポイントとなります。
ファーストビューという限られた範囲の中で、
何を伝えたいのか、またどのように情報を掲載するかを考える必要があります。
ユーザーにサイト内の続きを読ませるためには、ここが重要です。

ユーザーが求めている情報は何か

ユーザーが欲しい情報はどのような内容か（サービスや商品などの情報）を
把握しておく必要があります。
サイト運営側がユーザーに伝えたいことが明確になっても
ユーザーが求めている情報とマッチしてなければユーザーは離脱してしまいます。

そのWEBサイトが存在する意味や目的を含めて、
ユーザーが探している情報はどのような内容なのかが把握できていなければ、
情報の整理ができずに、情報が溢れてしまいます。

要素をサイトに反映させる


上記で、ファーストビューにおいてポイントとなることをご紹介しました。
方向性を元に、キャッチコピーやデザインに関わる部分など具体的に考えていきます。

メインビジュアル

メインビジュアル（TOP画像）はまず目に入る画像で、印象を左右する大事な部分になります。
サイト内で文章のみで訴求するよりも、一目でわかるような画像で訴求することでユーザーの興味を引くこともできます。

メインビジュアルでは、パッと見て何のサイト（サービスや商品など）か分かるような画像やコピーが必要であり、
重要なポイントはコピーでベネフィットが伝わるようにすることです。

ここでユーザーが求めていることと、ユーザーに与えたいことがズレているとユーザーの離脱の原因にもなってしまいます。

また、メインビジュアルには情報を盛り込み過ぎないようにしましょう。
画像に文字を載せすぎてしまうと、「一目でわかる」ということからも離れてしまい、
結局何が言いたいのか、どこに目を向ければ良いのかわからなくなってしまいます。

画像と文字のバランスもポイントの一つになるのでとにかく情報を盛り込むのではなく、
直感的に理解できるようなコピーで画像と全体のバランスを考えて、シンプルに分かりやすくすることがオススメです。

キャッチコピー

キャッチコピーで重要なことは、「ユーザー目線」です。
ユーザー目線のキャッチコピーにするには以下のことを意識すると良いでしょう。

  • ユーザーに、自分がターゲットであると認識させる
  • ユーザーのベネフィットを入れる
  • 検索キーワードを入れる

このサイトを見ることで求めていることや疑問が解決すると思わせることで、自分がターゲットと認識させることができます。
そして、この商品やサービスを利用することで、ユーザーにとってどのようなメリットがあるのかが伝わると良いでしょう。

バナーやコンテンツの配置など導線を確保する

ファーストビューでユーザーに訴求して、
サイトを読み進めてもらったり、コンバージョンに結び付けるためには導線の確保が重要です。

繰り返しになりますがファーストビューはスクロールせずに最初に表示される範囲のことです。
なので、導線を確保することは重要ですが
この範囲内に情報量が多すぎては読まれないですし、そもそも読む気もなくなってしまいます。

そのためファーストビューで表示される範囲には
最も伝えたい情報を1つないしは2つ程度に絞り込みましょう。
また、コンテンツの一部を表示してユーザーの気を引くようにすることや
スクロールを促す矢印やボタンをメインビジュアルに入れることもオススメです。

また、ユーザーがサイト内を移動しやすいようにするには
グローバルメニュー（グローバルナビゲーション）の整理も忘れないようにしましょう。
グローバルメニューはサイト上部や左側に設置されていることが多く、
ユーザーはここを見て次何を見ようか決めたり、リンク先に移動することが多いので
直感的に理解できるように整理してリンク先を設置することも必要です。

差し色や文字の大きさもポイント

ファーストビューでは行動を促すためのお申込みやお問い合わせなどのボタン（CTA：Call To Action＝行動喚起ボタン）を設置することも重要です。

その際に、「押せるボタン」であることを認識してもらわなければいけません。
お問い合わせボタンなどは、直接コンバージョンに結び付く大切な部分なので
他とは色を分けて目立たせることや、立体感を出してみると良いです。

また、ターゲットユーザーの年齢層に合わせて文字の色や大きさを変えることもおすすめです。
たとえば少し年齢層が高い場合には文字の大きさを大きくしてみたり、
さらには色味なども淡い色よりも濃い色にしてみることで見やすくなります。

これらはサイト全体に言えることでもありますが、
差し色などでポイントになる部分を目立たせたりターゲットに合わせて色味や文字を変えること、配色のバランスを見直してみることも大切であり、
ここが直帰率の改善にも結び付きます。

要素を詰め込みすぎには注意

まずはファーストビューでユーザーの心を掴めれば、離脱を防ぎ滞在時間が長くなることにもつながります。

ファーストビューという限られた範囲の中でユーザーに伝えたいことはたくさんあると思いますが
情報がありすぎては本当に伝えたいことが伝わらなくなってしまいます。
ですので無理やり多くの情報を盛り込むのではなく、
適切な量と質でポイントとなる情報を掲載するようにしましょう。