Webサイトを開いたとき、最初に画面へ表示される部分を「ファーストビュー」と呼びます。
サイト名やメイン画像、キャッチコピーなどが配置されることが多く、ユーザーがそのWebサイトを見るかどうか判断するきっかけにもなる場所です。
ただし、派手なデザインにすればよいわけではありません。何のWebサイトなのか、次に何をすればよいのかが伝わることが大切です。
ファーストビューとは？
ファーストビューとは、Webページを開いたときにスクロールせずに見える範囲のことです。
英語では「Above the Fold」と呼ばれることもあります。
Webサイトでは、一般的に次のような要素が配置されます。
- ロゴやサイト名
- メインビジュアル
- キャッチコピー
- ナビゲーション
- ボタンやリンク
ただし、見える範囲は端末や画面サイズによって変わります。
パソコンでは見えていても、スマートフォンでは画面の下へ隠れることもあります。
ファーストビューが重要な理由
ユーザーはWebサイトを開いたあと、最初に見える情報から「自分が探しているページか」を判断します。
そのため、ファーストビューで内容が伝わらないと、そのままページを離れてしまう可能性があります。
何のWebサイトか伝えやすい
初めて訪れた人は、そのWebサイトについて何も知らない場合があります。
たとえば会社のWebサイトなら、
「何を提供している会社なのか」
「誰に向けたサービスなのか」
といった情報が分かると、続きを見る理由が生まれます。
最初の画面だけで全部説明する必要はありませんが、サイトの目的は伝わる状態にしておきましょう。
次の行動を案内できる
お問い合わせ、商品を見る、サービス内容を確認するといった次の行動を案内する場所としても使えます。
ただし、ボタンをたくさん並べると、どれを選べばよいか分からなくなることがあります。
そのページで特にしてほしい行動を整理し、優先順位を付けることが大切です。
CTAの役割について詳しく知りたい場合は、こちらの記事も確認するとボタン配置を考えやすくなります。
ファーストビューの役割は、すべての情報を詰め込むことではありません。「このWebサイトは自分に関係ありそう」と感じてもらい、次へ進みやすくすることです。
ファーストビューに入れたい基本要素
必要な要素はWebサイトによって異なりますが、初心者のうちは3つを意識すると整理しやすくなります。
何についてのページか分かる言葉
キャッチコピーや見出しを見て、ページの内容が分かるようにします。
おしゃれな言葉だけで意味が伝わらない場合は、補足となる文章を入れてもよいでしょう。
内容に合った画像
メイン画像は大きく表示されることが多いため、Webサイト全体の印象にも影響します。
ただし、見栄えだけで選ばず、サービスやページ内容と関係する画像を使うことが大切です。
次へ進むための導線
サービスページへのリンクやお問い合わせボタンなど、ユーザーが次へ進むための導線を用意します。
すぐに問い合わせを求める必要がないページなら、「サービスを見る」「詳しく見る」といった案内でも構いません。
情報を詰め込みすぎない
重要な場所だからといって、ファーストビューにすべての情報を入れる必要はありません。
文章、画像、ボタン、実績、ニュースなどを大量に並べると、どこを見ればよいのか分かりにくくなります。
まずは、
「誰に」「何を伝え」「次にどうしてほしいか」
を整理してみましょう。
残りの情報は、スクロールした先で順番に説明できます。
スマートフォンでも確認する
ファーストビューは画面サイズによって見え方が変わります。
パソコンでは横に並んでいた文章と画像が、スマートフォンでは縦に並ぶこともあります。
その結果、重要なコピーやボタンが画面外へ移動する場合があります。
レスポンシブデザインについて詳しく知りたい場合は、こちらの記事も確認しておくと端末ごとの考え方を整理できます。
ファーストビューは見た目だけで決めない
ファーストビューはデザインの話として扱われることが多いですが、見た目だけではありません。
重要なのは、ユーザーがページを開いたときに迷わないことです。
文字が読みやすいか、目的が伝わるか、必要なボタンが見つかるかなど、使いやすさも一緒に確認しましょう。
まとめ
ファーストビューは、Webサイトを開いたときにスクロールせず見える範囲です。
ユーザーが最初に目にする場所だからこそ、何のWebサイトなのか、どんな情報があるのかを分かりやすく伝える必要があります。
ただし、情報を詰め込むことが目的ではありません。
「誰に何を伝え、次にどうしてほしいか」を整理して、必要な情報だけを配置することがファーストビューを考える基本です。
コメント