デザイン

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

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

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

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

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

もしも、あなたのWebサイト(コーポレートサイト型)に訪れた人の直帰率(最初の1ページだけ見て別のサイトに移動してしまった割合)が高いようなら、ファーストビューの改善が必要かもしれません。

ランディングページ(LP)のファーストビューの改善方法は「【ランディングページの作り方】ファーストビューの重要ポイント」の記事で解説しています。

スポンサード リンク

ファーストビュー とは

ファーストビューとは、Webサイトを訪問した時に、スクロールせずに最初に見ることができる範囲のことです。大きなパソコンのモニターなら広い範囲を見ることができますし、スマートフォンなら限られた狭い範囲しか見ることができません。

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

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

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

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

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

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

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

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

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

Fの字とメインビジュアル

多くの人は、Webサイトを見る時には、左上から始まって “Fの字” で視線を移していきます。横書きの本を読んでいく時のような動きです。

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

ですが、大企業でない限り、会社のロゴを目立たせる必要はありません。なぜなら、あなたのサイトに訪れる人は、自分にとって利益がある内容かどうかを知りたいのであって、会社名を知りたいわけではないからです。

会社名で何業か分かるなら問題ありませんが、会社名でどんなビジネスなのか分かりづらい場合は、誰のためのどんなサイトなのかが分かるキャッチフレーズが必要です。

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

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

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

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

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

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

コーポレートサイトメニューと目的

ファーストビュー内に、訪問者に取って欲しい行動のためのボタンを配置します。「資料請求」や「お問い合わせボタン」、「電話番号」の記載です。求める行動(CTA:コール・トゥ・アクション)は複数設けずに一つにしておくことが大切です。

訪問者に求める行動を一つにする理由は、「CTAとは?コンバージョン率を上げるための種類と考え方」の記事で解説しています。

そして、「グローバルナビゲーション」と呼ばれる《メニュー》を配置させます。このメニューの内容で、どんな情報が載ってそうかの判断ができます。

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

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

レスポンシブデザインとは

レスポンシブデザインとは、画面の大きさによって自動的にレイアウトが変化する仕様のことです。スマホ対応になっていないサイトは、検索順位が下がるおそれがあります。

関連記事:Web初心者にもわかるSEO対策の基本知識

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

わかりやすいデザインとは、訪問者にとってのわかりやすさです。ひと目でどんなサイトなのか分かるかどうかが大切です。

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

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

WEBデザインの見本帳

WEBデザインの見本帳

WEBデザインの見本帳

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

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

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

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

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

まとめ

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

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

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

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

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

この記事が役に立ったら
\いいね !/

Twitter で

スポンサード リンク

あなたのWebサイトは成績優秀なセールスマンとして働いていますか?

集客できるWebサイトをつくる「チェックリスト」を無料公開中です。

こちらのPDFレポートで診断チェックするだけで、あなたのWebサイトがお客さんを連れてくる方法がわかります。

● 申し込みを生むデザインがわかる
● 信頼を獲得する方法がわかる
● 刺さるコピーライティングがわかる
● Webで利益を生み続ける方法がわかる

さらに、計18,000文字を超える「診断チェックリスト補足解説講座」を読めば、集客できるWebサイトの秘密が詳しくわかります。あなたのWebサイトが優秀なセールスマンに変わる方法です。

プレゼントは突然終了する可能性がありますので、今すぐ診断チェックしてみてください。

診断チェックしてみる