ファーストビューのデザインを改善する3つのポイント　

Webサイトの成否を分けるのは、「ファーストビューのデザインでほぼ決まる」と言っても過言ではありません。

なぜなら、検索エンジンから初めて訪れた人にとって、そのサイトをじっくり読み進めるかどうかを判断するのは、たった3秒だと言われているからです。

閲覧者はページを開いた瞬間は、細かい文字を読むよりも先に、全体のイメージを見るんですね。

この記事では、ブログサイトやコーポレートサイトのファーストビューを改善する3つのポイントを解説します。直帰率（最初の1ページだけ見て別のサイトに移動してしまった割合）が高いようなら、改善に役立ててくだい。

ファーストビュー とは

ファーストビューとは、Webサイトを訪問した時に、スクロールせずに最初に見ることができる範囲のことです。

大きなパソコンのモニターなら広い範囲を見ることができますし、スマートフォンなら限られた狭い範囲しか見ることができません。

ファーストビューのサイズ

ブラウザのシェアを調べるときに便利なgs.statcounter.comによると、PCの場合、日本では 1920×1080、1366×768 あたりがよく使われているモニターサイズのようです。

実際にブラウザを開く時は、モニターサイズよりも小さいサイズで開くことを想定すると、高さは600〜700pxくらいがファーストビューの範囲に収まるサイズです。横幅は1000〜1200pxほどの範囲です。

スマホの場合は、機種によってディスプレイサイズは様々ありますが 375×667、360×640、414×896 あたりが多いようです。

ファーストビューのデザインを改善する3つのポイント

訪問者が最初の3秒で読み続けるかどうかを判断するのは、次の3点です。

1. このサイトは何のサイトか？
2. 欲しい情報が載ってそうか？
3. わかりやすいデザインかどうか？

ファーストビューを改善する際には、この3つのポイントを改善します。

1.　このサイトは何のサイトか？ を改善する

ページを開いた瞬間に何のサイトなのかを理解してもらうためには、会社のロゴのポジションにわかりやすいキャッチコピーを入れます。

多くのコーポレートサイトでは、左上に会社のロゴを配置していますよね。

これは、多くの人が左上から読みはじめて、“Fの字” のような視線の動きをするからです。横書きの本を読んでいく時のような動きですね。

このロゴのポジションは、大企業でない限り、会社名やロゴを必要以上に目立たせる必要はありません。

なぜなら、検索からあなたのWebサイトに訪れる人は、自分にとって利益がある内容かどうかを知りたいのであって、あなたの会社名を知りたいわけではないからです。

メインビジュアルで何のサイトか分かるようにする

トップページの場合は、「メインビジュアル」と呼ばれる大きな画像を配置させます。

メインビジュアルを配置させる理由は、一瞬でどんなサイトなのかを分かりやすくさせるためです。ですので、何のサイトなのかがわかるような画像やコピーが必要です。

例えば、車屋さんなのに、イメージアップを図ろうと青空や草原の写真を載せても、訪れた人には伝わりません。

あなたの会社が “商品” を扱っている場合は、商品画像や関連する写真を大きく扱うことでイメージが伝わりやすくなります。“サービス” を扱っている場合は、言葉を大きく扱うことでサービスの内容が伝わりやすくなります。

スポンサード リンク

2.　欲しい情報が載ってそうか？ を改善する

「欲しい情報が載ってそうか？」をすぐに理解してもらうためには、「グローバルナビゲーション」と呼ばれる《メニュー》の内容を確認します。

このメニューの内容で、どんな情報が載ってそうかを判断できるからです。

訪問者にとって知りたい情報ほど左に配置させるとわかりやすくなりす。たまに会社側がアピールしたい情報順に配置させているサイトを見かけますが、これは避けた方が賢明です。すべては訪問者のために作ってください。

ただし、スマホに関しては一度に見ることができる範囲が少ないので、メニューは隠すように施します。これはレスポンシブデザインを採用することで可能です。

わかりやすい場所にCTAを配置する

ファーストビュー内には、訪問者に取って欲しい行動のためのCTA（コール・トゥ・アクション）を配置します。

• 資料請求
• お問い合わせ
• 電話番号

などの記載です。

求める行動（CTA）は複数設けずに、できるだけ1つにしておくことが大切です。

3.　わかりやすいデザインかどうか？ を改善する

Webサイトが開いた一瞬で「読み進めたい」と思ってもらうためには、わかりやすいデザインであることが大切です。

わかりやすいデザインとは、訪問者にとってのわかりやすさです。

そのためには、まずはあなたの会社の商品や業界をイメージしやすいような色使い・デザインにする必要があります。あなたが個人的に好きなデザインではなく、お客さんが理解しやすいデザインです。

デザインを考える際に参考になるサイトを紹介します。

WEBデザインの見本帳

⇒ WEBデザインの見本帳

ビジネスで使うWebサイトは、できればベースは白を基本にします。真っ白である必要はありませんが、人は白い余白に安心感を抱きます。

• ビジネス系は、青など寒色にエンジの差し色で誠実さと力強さを演出
• 医療系は、緑や茶色の自然色で癒しの演出
• 飲食系は、黄色やオレンジなど暖色で食欲増進や楽しさの演出

業種によって、このようなデザインの傾向があります。

そのうえで、あなたの商品・サービスが真面目なイメージなら、色味と色数を抑えて垂直線・水平線といった真っ直ぐなラインを意識するとイメージが伝わりやすくなります。楽しいイメージなら、カラフルでまるい形や手書きの雰囲気が合います。

それから、お客さんが年配の方が多いのなら、文字は少しだけ大きめにする。これも立派なデザインの一部です。

スポンサード リンク

まとめ

Webサイトではファーストビューが大切です。Webサイトに訪れた訪問者は、見続けるかどうかを3秒で判断すると言われています。その3秒を乗り越えるためには、次の3つの問いをクリアすることが大切です。

• このサイトは何のサイトか？
• 欲しい情報が載ってそうか？
• わかりやすいデザインかどうか？

これら3つのファーストビューを改善すれば、３秒で離脱される危険はなくなるはずです。もしもあなたのサイトに改善の余地があった場合には、参考にしてみてください。

ただし、コーポレートサイト形式のファーストビューを改善しただけでは、「問い合わせ」の数は増えません。

次の記事では、その理由を解説しています。
Next⇒「【要注意！】小さな会社がコーポレートサイトを作ってしまう落とし穴とは」

もしも「自分のビジネスではどんなWeb集客をすればいいの･･･？」という疑問があれば、当サイト（Web活用術。）の特別コンテンツを参考にしてみてください。