デザイン術

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

投稿日:2015-09-11 更新日:

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

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

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

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

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

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

スポンサード リンク

ファーストビュー とは

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

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

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

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

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

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

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

スポンサード リンク

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

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

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

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

スポンサード リンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

などの記載です。

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

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

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

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

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

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

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

WEBデザインの見本帳

WEBデザインの見本帳

⇒ WEBデザインの見本帳

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

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

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

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

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

スポンサード リンク

まとめ

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

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

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

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

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

追伸

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

Web集客の成功講座
Web集客のはじめ方|知識ゼロから戦略を見つけて実践まで解説

「Webを使ってビジネスの売上を伸ばしたいんだけど、何をどうすればよいのかわからない・・・」もしもこんな悩みがあったとしたら、こちらの『Web集客のはじめ方』を最後まで読んでみてください。 あなたのビ ...

続きを見る

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

Twitter で

スポンサード リンク

こちらもチェック!

今すぐ受け取る白地
  • この記事を書いた人

高木浩一

心理学と脳科学が好きなマーケター/Web集客の専門家。 大企業のマジメな広告デザインから男性を欲情させるアダルティな広告デザインまで、幅広い分野を経験した元グラフィックデザイナー。心理面をカバーしたマーケティングとデザインの両方の視点をもつ。 個人が個人として活躍する時代に向けて「使えるマーケティング」をモットーに情報発信中。

-デザイン術
-, ,

Copyright© Web活用術。 , 2019 All Rights Reserved.