Blog · Homepage ·

ホームページのファーストビュー、何を見せるべきですか?

ホームページを開いた瞬間に見える最初の画面を、業界ではヒーローエリアと呼びます。訪問者の多くはこの画面だけで読み続けるか離れるかを決めるのに、多くのホームページはこの場所をかっこいいスローガンと大きな画像だけで埋めています。この記事では、最初の画面で訪問者が離れる理由と、そこに必ず入れるべき要素を扱います。

一言で要約

ホームページのファーストビュー(ヒーローエリア)は、何をしている会社か、誰のためのサービスか、なぜ信頼できるか、次に何をすればよいかの4つに、スクロールなしで答える必要があります。かっこいいコピーより、訪問者の質問に先に答える画面が問い合わせにつながります。

ブラウザの最初の画面カードの上に見出しブロックとボタン、訪問者の視線の流れを表現した3Dイラスト
離れる理由

訪問者が最初の画面で離れるサイン

読んでも何の会社かわからない

「新しい価値を創ります」のような抽象的なスローガンは、どの会社に付けても成立します。訪問者が最初の一文を読んでも業種とサービスを推測できないなら、その画面はまだ何も説明していないのと同じです。

誰のためのサービスか見えない

訪問者が最初に確認するのは「ここは自分の悩みを扱う場所か」です。対象顧客とその状況が画面に表れていなければ、ぴったりの顧客でさえ自分には関係ない場所だと判断して離れてしまいます。

画像がメッセージの代わりになっている

大きな写真や動画が画面いっぱいに広がり、文字が薄く重ねてあるだけの構成は、雰囲気は伝えても判断材料を渡せません。画像はメッセージを支える役割であり、説明の代わりにはなれません。

次の行動がない

説明を読んで関心が生まれても、次に何をすればよいか見えなければ流れが途切れます。ボタンがない、あるいは「詳しく見る」のようにどこへ続くのか曖昧なボタンしかなければ、関心は行動につながりません。

入れる要素

最初の画面に入れるべき4つのもの

何をしている会社かを一文で

業種・サービス・提供方法が読み取れる具体的な一文を、画面で最も大きな文字に置きます。検索から来た訪問者が探していた言葉と重なれば理想的です。かっこいい表現より、すぐ理解できる表現が優先です。

誰のためのサービスか

対象顧客と、その人たちが抱える状況を見出しか補助文に込めます。全員に向けて話すと誰にも届きません。対象を絞って語るほど、当てはまる顧客にはより正確に刺さります。

信頼できる根拠をひとつ

運営年数、累計実績数、資格や認証のように、事実として確認できる根拠をひとつ配置します。根拠のない形容詞を重ねるより、確認可能な事実がひとつあるほうが第一印象の信頼をつくります。

次の行動を案内するボタン

相談申し込み、見積もり依頼のように、次のステップが明確なボタンをひとつ置きます。ボタンが多いと選ぶのが難しくなるため、主要な行動をひとつ決め、まだ判断の早い訪問者向けの補助導線は控えめなトーンで区別します。

チェックする

ファーストビュー点検チェックリスト

  • 初めて来た人が最初の画面だけで何の会社か言える
  • 誰のためのサービスかが最初の画面で読み取れる
  • 事実として確認できる信頼の根拠がひとつ以上見える
  • 次の行動につながるボタンがスクロールなしで見える
  • モバイル画面でも上の4つが切れずに見える
覚えておくこと

5項目のうち2つ以上が崩れているなら、最初の画面から整理する時期です。ただし、ファーストビューを整えても訪問や問い合わせの増加を保証することはできません。最初の画面は判断が始まる地点にすぎず、比較段階の情報と問い合わせ導線まで続いてこそ成果につながります。

よくある質問

このテーマでよく確認される内容です

最初の画面に会社のスローガンを大きく入れてはいけませんか?

スローガン自体が問題なのではなく、それだけで何をしている会社か伝わらないなら、画面で最も大きな場所を譲る理由がありません。説明になる一文を主役に置き、スローガンは補助の位置に置くのが安全です。

最初の画面には情報を多く入れるほど良いですか?

いいえ。最初の画面の役割は読み続けるか判断する材料を渡すことであり、すべての情報を伝えることではありません。何の会社か、誰のためか、なぜ信頼できるか、次に何をすればよいかの4つに答えたら、残りは下のセクションに回すのがよいです。

ヒーローエリアに動画や大きな画像を使ってはいけませんか?

使って構いません。ただし画像はメッセージを支える役割であるべきで、文字を隠したり読み込みを大きく遅らせたりするなら、かえって損になります。特にモバイルで、画像のせいで見出しとボタンが押し出されていないか確認が必要です。

最初の画面のボタンはいくつが適切ですか?

主要な行動ボタンひとつを基本としてお勧めします。相談申し込みのように事業目標に直結する行動をひとつ決め、まだ比較段階の訪問者向けの補助リンクは視覚的に控えめなトーンで区別すると、選びやすくなります。

関連ソリューション

このテーマを実際に適用するモジュールです

関連記事

あわせて読みたい記事です