ホームページはトップページがとても大事!第一印象はファーストビューがポイント!
# Web デザイン
2021/03/03
「人は第一印象が大事」とよく言います。その第一印象を決めるのが人の見た目や話し方、しぐさ・立ち振る舞いで、初めて出会ってからだいたい5秒という短い時間で決まってしまいます。
それと同様にホームページでは、一番最初に見られることが多いトップページがホームページの印象を決めるといって過言ではありません。トップページをパッと見た時に「何のサイトかわからない」「見にくい」「自分が探しているものではない」と思われるといくらホームページへのアクセスがあってもすぐにページから離脱して、他のページを探しにいってしまいます。
この記事では、トップページのどういったところを意識して作成すれば、良い印象を与えられるトップページになるのかを紹介します。
トップページの役割は?
トップページはホームページの印象を決める「顔」であり、そこからさらにユーザーを他のページへ案内するコンシェルジュのような存在でもあります。
まずはトップページの代表的な役割を見ていきましょう。
ユーザーのニーズとマッチしていることを一目でわからせる
ユーザーがトップページにアクセスしたときに一目で自分が求めている情報があると思ってもらうことがとても重要です。ユーザーはページにアクセスした瞬間に、「自分にとって有益か」「知りたい内容があるか」といったことを即座に判断しています。その判断対象になるのがファーストビューになります。 ファーストビューは、ユーザーがページにアクセスしたときに最初に表示されている部分のことです。
トップページのファーストビューには、画像や動画とキャッチフレーズを組み合わせて印象的な見た目にしているメインビジュアルがほとんどです。そのメインビジュアルでユーザーが求めている情報があるサイトだということを一目でわかるように作りこむことがポイントとなります。
ユーザーの求めている情報へスムーズに導いてあげる
ユーザーが求めている情報へスムーズにたどり着けるようにするのもトップページの重要な役割でもあります。
ポイントは、ユーザーが求めているものが何なのかを明確にして、その欲求を満たす情報はここにあるよということが分かるようにできる限り分かりやすく入り口を設置してあげることが大切です。
ファーストビューで知りたい情報があるのはわかったければ、その情報がどこにあるのかが分からない、もっとホームページの中に入っていかないとその情報への入り口が見つからないといったことでは、ストレスを感じて、ホームページから出ていってしまいます。
また、他に気をつけることとして、運営者が見せたい情報をメインにして導線を作っていくと、ユーザーが求めている情報とマッチせず、違和感を感じさせてしまうので注意が必要です。
お知らせやイベントなどの新着情報を伝える
キャンペーンやイベントなどのユーザーにメリットとなる情報や臨時で伝えなければならないお知らせなどをアナウンスすることもトップページの役割の一つです。
キャンペーンやイベントは、お得感や特別感を感じるのでより見込みのあるユーザーの獲得が期待できます。また臨時のお知らせは、お客様に対しての配慮が出来ていることで安心感を持ってもらえます。見せ方や配置する位置は優先度によって違ってきますが、重要なお知らせの場合は、ファーストビューに目立つように設置するのも一つの方法です。
使用する画像について
文章も大切ですが、パッと見た時に目に入ってくるのは画像です。役割の部分でも紹介しましたが、メインビジュアルでは画像とキャッチフレーズをあわせたものがほとんどです。それが第一印象に大きく影響します。では、トップページで使用する画像のポイントを紹介します。
一目で業種や特徴がわかる画像を使う
何のホームページなのか画像を見てすぐにイメージできる画像を使うことポイントになります。飲食店なら料理の写真を。その中でも和食・洋食・中華といった種類によって、料理の写真も変わってきます。簡単に言えば、業者がわかる写真を使用するということです。また、会社やお店のコンセプトや特徴に特化した写真を使うことでオリジナリティを出すこともできます。
サイズの大きい画像を用意する
ホームページに掲載する場所によっては、大きい画像が必要になる部分もあれば、小さい画像の方が良い部分があります。画像というのは、サイズが大きいと容量も大きくなり、画像を読み込むの時間がかかる場合があります。なので、その部分部分に最適化されたサイズの画像を使うことがベストです。
最適化する前のもとの画像サイズが大きい場合は問題ないのですが、もとの画像が小さく、使用したい画像サイズに満たない場合、どうしようもありません。引き伸ばしできたとしても画像が荒れてしまい、とても見ずらい画像になってしまうためです。大は小を兼ねるとよく言ったものです。もととなる画像はサイズの大きい画像を用意しましょう。
サイトにマッチするカラーの画像を使う
会社のイメージカラーや背景色、サイトカラーにマッチしなければ、良い画像でもどこか浮いてしまい、印象がぶれて伝わってしまう場合があります。ページ全体をみて、使用している画像がページにマッチしているか確認しましょう。
トップページの文字・文章について
文字や文章は的確に伝えたいことをユーザーに伝えることができる要素です。文章を作成する際のポイントを紹介します。
短くてわかりやすいキャッチコピー
ファーストビューのキャッチフレーズやトップページの見出しも一目見て、何のホームページなのか、内容が伝わるように短くてわかりやすくすることが重要です。トップページに入ってきたばかりのユーザーは細かい文字はあまり読まず、キャッチフレーズや見出し等の強調されている文字を見て、どういったホームページかを判断しています。具体的に細かく伝えたいからといって、それらが長くなってしまうとストレスを感じて、ホームページから出て行ってしまい、伝えたいことも伝わらなくなってしまいます。
フレッシュな内容を表示する
サイトが定期的に更新されていることで、一度サイトに訪問したユーザーが再訪してもらいやすくなります。ほとんど更新していないサイトより、定期的に更新されているサイトの方が気になるものです。
また、更新がされていないことで、ユーザーに不安や不信感を与えてしまう恐れがあるため、定期的に最新の情報を掲載していきましょう。
レイアウトについて
ユーザーに内容が伝わりやすく、ストレスなくホームページを移動してもらうには、画像やテキスト、ボタンの配置もよく考えないといけません。トップページのレイアウトを決める際のポイントを紹介します。
シンプルでわかりやすく
トップページでは情報を詰め込みすぎず、必要最低限のシンプルな情報を心掛けて、レイアウトしたほうが内容が伝わりやすいです。情報が多いとわかりづらくなり、ユーザーが迷ったり、混乱したりする可能性があるためです。
優先順位が高いものから上に表示する
複数のコンテンツが配置されてページが出来上がるのですが、それぞれのコンテンツに優先順位をつけて、伝えたいことをページの上部に表示するようにします。というものも下にあるコンテンツはスクロールしないといけないので、目につくまでに時間がかかります。
全体的な流れを考えながらコンテンツの優先順位をつけ、レイアウトするように注意しましょう。
ポイントを押さえて、良い印象を与えられるトップページを
今回は、良い印象を与えられるトップページを作成する際のポイントを紹介しました。 ホームページを訪れたユーザーにとって、トップページのクオリティで商品やサービス、会社の印象を決定する要素になりえます。画像やテキスト、レイアウトなどを作成する際には、ユーザーの目線を意識し、伝えたい情報をユーザーにわかりやすく工夫することが大切です。
紹介したポイントを参考に、よりよいトップページを作成しましょう。