ホームページのファーストビューは、ユーザーが最初に目にする部分です。入れたい内容が多いと何を優先すればよいか迷い、どれも伝わらないファーストビューになりがちです。
この記事では、ページごとにファーストビューに入れる掲載内容と絞り込む基準を解説し、当社が制作したホームページの事例も紹介します。
ホームページのファーストビューが重要な理由
ファーストビューとは、ホームページを開いたときにスクロールせずに見える範囲のことです。ページの中でユーザーが最初に目にする部分なので、ホームページ制作ではどのページでも時間をかけて掲載内容を決めます。
ユーザーはファーストビューを見てページを読み進めるか判断する
ユーザーはページを開くと、まずファーストビューを見て、探している情報がこのページにあるかを判断します。検索結果や広告から来たユーザーはいくつかのページを見比べていることが多く、知りたい内容がありそうだと感じなければ、スクロールせずに戻るボタンを押して別のホームページへ移ります。
ファーストビューで離脱されると、その下にどれだけ役立つ内容やサービスの強みを書いていても、ユーザーには届きません。ページを最後まで読んでもらうには、ファーストビューで何のページかがすぐに分かり、続きを読みたくなる内容が伝わることが欠かせません。
ファーストビューで会社の印象が決まる
ファーストビューは、ユーザーが会社に対して最初の印象を持つ場所です。写真の雰囲気や色づかい、キャッチコピーの言葉選びから、信頼できそうな会社か、自分に合いそうな会社かをすぐに感じ取ります。
たとえば古い写真や画質の粗い画像が使われていると、書いている内容が正しくても、情報が更新されていない会社や細かいところに気を配らない会社という印象を持たれてしまいます。反対に、実際の店舗やスタッフの写真で雰囲気が伝わるファーストビューなら、初めて見るユーザーでも安心して問い合わせや来店を検討できます。
一度持たれた印象は、ページを読み進めても簡単には変わりません。ファーストビューで伝わる印象が、その後に読む文章の受け取られ方まで左右します。
ファーストビューに入れる掲載内容
ファーストビューに入れる掲載内容は、全ページに共通するものと、ページの役割によって変わるものがあります。ここでは、全ページ共通、トップページ、下層ページの3つに分けて解説します。
全ページ共通でファーストビューに入れる掲載内容
どのページのファーストビューにも入るのが、ホームページの一番上に表示されるヘッダーです。ヘッダーには、ロゴ、グローバルナビ、問い合わせボタン、電話番号を入れるのが基本です。
ロゴは、どの会社のホームページを見ているかを伝える役割があります。検索結果から下層ページに直接入ってきたユーザーは、どの会社のページなのかを知らないまま読み始めることが多いので、ファーストビューのロゴで会社名が分かるようにします。
ロゴをクリックするとトップページに戻れるようにしておくと、会社のことをもっと知りたくなったユーザーが迷わずに移動できます。
グローバルナビは、サービスや会社概要、実績など、ホームページの主なページへのリンクをまとめたメニューです。ファーストビューにグローバルナビがあると、ユーザーは今見ているページ以外にどんな情報があるかをすぐにつかめ、知りたいページへ移動できます。
問い合わせボタンや電話番号は、ユーザーに取ってほしい行動への入り口です。すでに会社を知っていて連絡先を探しているユーザーや、ページを読んで依頼を決めたユーザーが、どのページからでもすぐに問い合わせられるよう、ファーストビューのヘッダーに入れておきます。
ただし、ヘッダーに多くの要素を詰め込むと、ファーストビューの中でページの内容を見せる範囲が狭くなります。ヘッダーに入れるのは必要なものだけに絞り、ページごとの内容が見える範囲を残すことが大切です。
トップページのファーストビューに入れる掲載内容
トップページは、ユーザーが会社のことを初めて知る場所です。トップページのファーストビューでは、何の会社で、誰に向けてどんなサービスを提供しているのかを伝えることを優先します。
中心になるのは、キャッチコピーとメイン画像です。
キャッチコピーでは、事業の内容や他社との違いを短い言葉で伝えます。どの会社でも言えるような抽象的な言葉より、業種やサービスの内容が分かる具体的な言葉のほうが、ユーザーは自分に関係のある会社かどうかをすぐに判断できます。
メイン画像は、キャッチコピーの内容を目で見て分かるようにする役割があり、サービスを利用している場面や実際の店舗、商品の写真などを使います。
下層ページの役割ごとにファーストビューに入れる掲載内容
下層ページは、検索結果から直接訪れるユーザーが多いページです。下層ページのファーストビューに入れる掲載内容は、そのページの役割によって変わります。どのページでも、今どこのページを見ているかが分かるようにパンくずリストを入れておくと、ほかのページへ移動したいユーザーにも便利です。
ブログ記事のように文章が長くなるページでは、ファーストビューにメイン画像を入れたほうが効果的です。メイン画像でそのページに何が書かれているのかを要点で伝え、タイトルとリード文の途中までを見せることで、ユーザーは知りたい内容が書かれているページだと判断し、目次まで読み進めてくれます。
サービスの詳細ページのように、サービスの特徴を伝えることが目的のページでは、メイン画像は入れなくても問題ありません。ユーザーが知りたいのはどんな特徴があるサービスなのかなので、見出しのすぐ下からサービスの特徴を伝える形にしたほうが、スムーズに内容を読み始められます。
大きな画像を入れると特徴を伝える文章が下に押し下げられ、ユーザーはスクロールしなければ知りたい内容にたどり着けません。
カテゴリートップのように、中のページへの案内が目的のページでは、カテゴリーの見出しと短い説明だけを入れ、すぐ下に中のページの一覧やリンクを見せます。ただし、事業ごとにターゲットが違う会社が、カテゴリートップを事業の顔として見せたい場合は、トップページのようにキャッチコピーとメイン画像を入れることもあります。
ファーストビューの掲載内容を絞り込む基準
ファーストビューに入れたい内容をすべて入れようとすると、限られた範囲に収まらず、どれも伝わらなくなります。ここでは、ファーストビューの掲載内容を絞り込むときの基準を解説します。
ページを見てほしいターゲットに必要な内容
ファーストビューに入れる内容は、そのページを誰に見てほしいかで変わります。同じサービスでも、法人の担当者に向けたページと個人のお客様に向けたページでは、最初に知りたいことが違います。法人の担当者なら実績や対応できる範囲、個人のお客様なら料金の目安や利用の流れが気になることが多く、ファーストビューで伝えるべき内容も変わります。
ターゲットが決まっていないと、誰にでも当てはまる内容を並べたファーストビューになりやすく、結局どのユーザーにも響きません。ページごとにターゲットを決め、そのターゲットが最初に知りたいことを優先してファーストビューに入れることで、ユーザーは自分に向けたページだとすぐに判断できます。
他社との違いが伝わる内容
ユーザーは、いくつかの会社のホームページを見比べたうえで問い合わせ先を決めることが多いです。ファーストビューに他社と同じような内容しか入っていないと、ユーザーにはどの会社も同じに見え、比べる材料がないまま料金の安さだけで選ばれたり、別の会社のページへ移られたりします。
ファーストビューで打ち出す他社との違いは、ページごとに変わります。
トップページでは、創業からの年数や実績の件数、得意な分野や専門にしている業種など、会社全体として選ばれる理由を伝えます。
下層ページでは、そのページの内容の中で、ユーザーにとって魅力になる違いを伝えます。たとえば実績のページなら年間の実績件数など実績の多さが分かる数字を、サービスの詳細ページならほかの会社では対応していない内容や対応できる範囲の広さを、ファーストビューに入れます。
実績のページのファーストビューに料金の安さを入れても、ページの内容とつながらず、ユーザーには魅力として伝わりません。
ページの内容に合わせて打ち出す違いを変えることで、どのページから入ってきたユーザーにも、そのページを読み進める理由と、この会社を選ぶ理由が伝わります。
スマホの画面でも伝わる量
スマホの画面はPCより小さいため、PCのファーストビューに収まる内容が、スマホのファーストビューでは収まりきらないことがあります。PCの画面だけを見て掲載内容を決めると、スマホではキャッチコピーが途中で切れて見えたり、文字が小さすぎて読めなかったりします。
スマホでホームページを見るユーザーは多いので、ファーストビューの掲載内容は、スマホの画面でも伝わる量に絞り込みます。キャッチコピーはスマホで2〜3行に収まる長さにし、ボタンや画像を並べすぎないようにすることで、スマホの小さな画面でも一目で内容が伝わります。
デザインの段階でスマホの画面を確認しながら、ファーストビューに入れる量を調整することが大切です。
ファーストビューに入れないほうがよい内容
ファーストビューに入れないほうがよい内容は、スライダーやお知らせなどの決まった要素ではありません。同じ要素でも、目的があって入れるなら問題はなく、入れた理由によってはファーストビューの邪魔になります。ここでは、ファーストビューに入れないほうがよい内容を解説します。
見栄えの印象だけで決めたコンテンツ
見栄えがよいという理由だけで決めたコンテンツは、ファーストビューに入れないほうがよい内容です。大きな動画や何枚も切り替わるスライダー、雰囲気のよいイメージ写真などは、ファーストビューを華やかに見せてくれますが、それだけでは何の会社で何をしているのかが伝わらないことがあります。
たとえば、おしゃれな風景の写真と短い英語のキャッチコピーだけのファーストビューは、見た目の印象はよくても、ユーザーは自分が探している会社かどうかを判断できません。見栄えを優先して入れた動画やスライダーが重く、ファーストビューの表示に時間がかかると、内容を見る前にユーザーが離れてしまうこともあります。
ファーストビューの見栄えは大切ですが、見栄えはあくまで伝えたい内容を引き立てるためのものです。ファーストビューに入れるコンテンツを決めるときは、そのコンテンツでユーザーに何が伝わるのかを説明できるかを確かめ、説明できないものは外すか、ページの下のほうへ移します。
社内の都合だけで載せたいコンテンツ
社内の都合だけで載せたいコンテンツは、ファーストビューに入れないほうがよい内容です。ファーストビューの掲載内容を決めるときは、社内のさまざまな部署や担当者から、自分たちの事業をファーストビューに入れてほしい、取引先や受賞歴を目立つ場所に並べたい、社長のメッセージを最初に見せたいといった要望が出ることがあります。
すべての要望を入れると、ファーストビューは社内で伝えたいことを並べた場所になり、ユーザーが知りたいことが埋もれてしまいます。全部の事業を同じ大きさで並べたファーストビューは、社内では公平に見えても、ユーザーにはどの事業が自分に関係するのか分かりません。
社内から出た要望は、ユーザーにとって必要な内容かどうかで判断します。ユーザーにとって必要性が低い内容は、ファーストビューではなく、ページの下のほうや会社概要などの別のページに載せれば、社内の要望を活かしながらファーストビューの内容を絞り込めます。
当社が制作したホームページのファーストビューの事例
当社が制作したホームページのファーストビューの事例として、制作実績の赤岩治療院のホームページを紹介します。
赤岩治療院様のホームページでは、トップページと下層ページで、ファーストビューに入れる掲載内容を分けました。
トップページのファーストビューには、キャッチコピーと、院長が施術しているシーンの画像を入れました。一番の目的は、ホームページを見たユーザーに、施術を受ける場面を想起してもらうことです。治療院を探しているユーザーは、どんな場所でどのように施術されるのかが分からないと、予約をためらいがちです。
施術しているシーンをファーストビューで見せることで、自分が施術を受ける様子をイメージしてもらえるうえ、どんな人が施術するのかが分かり安心感が伝わります。
下層ページのファーストビューには、メイン画像を入れていません。下層ページは、専門的な内容を詳しく分かりやすく解説しているページが中心です。画像でイメージを伝えるよりも文章を読んでもらうことに注力したデザインにし、ファーストビューの見出しのすぐ下から解説が始まる形にしました。
同じホームページの中でも、ページの役割によってファーストビューに入れる掲載内容は変わります。赤岩治療院様のホームページでは、トップページでは施術の場面を伝え、下層ページでは専門的な解説を読んでもらうことを優先して、ファーストビューの掲載内容を決めました。
まとめ
ファーストビューは、入れたい内容をすべて並べる場所ではなく、ページの役割とターゲットに合わせて、伝える内容を絞り込む場所です。トップページと下層ページでは入れるべき内容が変わるため、ページごとに考えることが大切です。
当社では、ページごとの役割とターゲットを整理したうえで、ファーストビューに入れる掲載内容を提案しています。御社の事業やお客様について詳しくヒアリングし、ユーザーに伝わるホームページをご提案しますので、ホームページ制作をご検討中でしたらお気軽にご相談ください。
