ホームページの顔であるファーストビューについて

ホームページを作成する上でコンテンツの内容やユーザビリティなど重視すべき点は多くありますが、ユーザーが最初に目にするのはファーストビューであり、ここでの印象がユーザーの行動に影響を与えるためしっかりと検討する必要があります。ホームページの顔であるファーストビューの役割は、ユーザーに「見たい」と思わせることであり、同時に魅力を伝えられないと離脱の原因になるといえるでしょう。最初に与える印象で「見るか・見ないか」の判断がされてしまいます。

今回はファーストビューの重要性や作成する上でのポイントを解説していきます。

ファーストビューとは

ホームページを訪れた際にユーザーが最初に目にする部分です。内容としては主にホームページのタイトルやヘッダー部分、商品や事業イメージ、キャッチコピーや最新情報、広告などの情報が入っていることが多いです。一番見られる部分ですので、大切な情報を精査して組み込みましょう。情報が散漫になってしまうと何を伝えたいか、なんのホームページかが伝わりづらくなってしまいます。

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

一般的にホームページに訪れたユーザーは、引き続き閲覧するかを3秒で判断していると言われています。またファーストビューで離脱してしまうユーザの割合は7割以上というデータがあり、実際に閲覧を続けるのは残りの3割ほど。その数字が多いか少ないかはホームページの目的により変わりますが、その3割からさらにお問い合わせや商品購入までしてくれるユーザーの人数と考えると非常に少ない数字なるのではと思ってしまうのではないでしょうか?

そのため、少しでも目的を達成する割合を増やすためにファーストビューは深く検討する必要があるコンテンツであるといえるでしょう。ファーストビューを確認した瞬間に、伝えたいこと、セールスポイントが伝えられるかどうかがその後の滞在時間に大きく影響すると言えることになります。

ファーストビューを作成する上でのポイント

1.ホームページの目的を明確にして内容を検討する

作成したホームページにはゴールとして定めた目的があるかと思います。例えば、商品を買ってもらう、サービスを利用してもらう、お問い合わせをもらう、採用応募を得る、など。ファーストビューではこれらのゴールを意識して掲載内容を検討しましょう。商品購入をしてもらいたい場合はその商品についてのアピールを記載し、商品ページへのリンクを配置してみたり、採用を目的とした場合は企業イメージやコンセプトとは別に、社員を募集しているということを明記しページへの誘導を図ってみましょう。

2.情報量の精査、直感的にわかりやすい導線の配置を考える

ファーストビューの情報が大事であることは間違いありませんが情報量が多すぎると読む気が失せてしまい、逆にユーザーに伝わらない危険性があります。できるだけ明確に主張したい情報を1つ~2つほどに絞るとよいでしょう。また導線についても「押せる」という認識がされないとスルーされてしまう可能性があります。デザインの統一性も大事ですが、導線は目立つように切り分けて検討した方が良いでしょう。

3.写真とコピー内容の関連性に気をつける

前提としてファーストビューに使用する写真はユーザーを惹きつけるものである必要があります。可能であれば自社で撮影し、ホームページのデザインに合わせた加工がされているのが好ましいです。では実際にファーストビューの写真として設定した際に掲載している文言との関連性はありますか??キャッチコピーや掲載している情報と写真が合っていないと充分にユーザーの興味を引くことができません。商品紹介の文言であればその商品の画像を、エレガントさを主張しているのであればエレガントな写真を使用し、しっかりと関連性をもたせましょう。

ファーストビューのデザイン事例

ファーストビューのデザインにおいてはホームページの用途や業種により適切な見せ方が違ってきます。それぞれ限られたスペースにどのような情報を掲載しているか確認してみましょう。

LINE株式会社

https://line.me/ja/

スライドショー形式でのファーストビューとなっています。展開するサービスごとにイメージが作成されており約3秒毎に切り替わる設定になっているようです。ファーストビューとしてはコンパクトにまとめられており、文言も簡潔に説明されているため、パッとみただけですぐに内容を理解できます。

リクルートホールディングス

https://www.recruit.co.jp/

こちらもスライドショー形式となっており、一枚一枚が更新された記事の紹介と導線の役割をはたしています。さらにプレスリリース、主要コンテンツの導線もファーストビューの中に配置されており、知りたい情報に素早くたどり着ける構成となっています。

Apple Inc.

https://www.apple.com/jp/

新規のプロダクトをファーストビューとして掲載しており、詳細ページと購入ページへのリンクを配置しています。多くの情報を見せず、商品画像、商品名、キャッチコピー、リンクと必要最低限の情報に留めています。ブランド、プロダクトイメージに沿ったデザインであることから興味が惹かれるコンテンツになっています。

The Okura Tokyo

https://theokuratokyo.jp/

こちらはファーストビューに動画を使用しています。ラグジュアリーなホテルの雰囲気を伝えられており、動きがあることで興味が惹かれます。また動画の下にはメニューの表示と、予約を行うことができるコンテンツを配置していることからビジュアル面、機能面にも考えられた構成となっています。

いかがでしょうか?ファーストビューの見せ方は多様です、ホームページの目的によりベストな見せ方を模索してみましょう。

まとめ

ユーザーが最初に目にする部分であるファーストビューはホームページのとなります。瞬間的に見るか、見ないかの判断を下されるコンテンツでもあります。今回の内容を参考にどう作り上げるべきなのか考えるきっかけになればと思います。