ファーストビューとは、ページを開いて最初に見える範囲のことです。スクロールしなくても目に入る領域を指します。
ここで何を見せるかは、サイト制作の中でも特に議論になる部分です。社長は会社の理念を載せたい、営業は問い合わせボタンを大きくしたい、制作会社はかっこいい写真を提案する。全員の意見が違います。
この記事では、ファーストビューに何を置くべきかを、判断できる形で整理します。
前提：見られている時間は驚くほど短い
Webサイトを開いた人が「このページは自分に関係あるか」を判断するのにかかる時間は、数秒と言われています。関係ないと判断されれば、その時点で戻るボタンが押されます。
つまりファーストビューの仕事は、サイトの魅力を伝えることではなく、「あなたが探しているものはここにあります」と示すことです。
この違いは重要です。魅力を伝えようとすると、抽象的で美しい言葉を置きたくなります。「未来をつくる」「心をつなぐ」。しかし、これらは読み手の探しものに答えていません。
載せるべき4つの要素
1. 誰の、何を解決するのか
一行で言い切ります。専門用語を使わず、来訪者が自分のことだと分かる言葉で。
- ✕「トータルソリューションで企業の成長を支援します」
- ○「広島の中小企業向け、Web集客の代行サービス」
前者は何をしている会社か分かりません。後者は、対象と地域とサービス内容が3秒で伝わります。「かっこよさ」より「分かること」が先です。
2. 信用の根拠
初めて来た人は、この会社が本物かどうかを判断しようとしています。判断材料を1つ置いてください。
- 導入社数、施工実績数、創業年数
- 受賞歴、認定資格、メディア掲載
- 誰でも知っている取引先のロゴ
数字がひとつあるだけで、印象がまったく変わります。「1,200社が導入」「創業45年」「施工実績3,000棟」。誇張は不要ですが、事実として言えることは書いてください。
3. 次にする行動
来訪者に何をしてほしいのかを示します。ボタンは1種類、多くても2種類までに絞ります。
3つ以上並べると、選択のコストが発生して誰も押しません。「資料請求」「お問い合わせ」「無料相談」「見積依頼」が全部並んでいるサイトをよく見かけますが、来訪者から見れば違いが分かりません。主要なボタン1つ＋補助的なリンク1つが扱いやすい形です。
4. 現在地が分かる情報
自分がどこにいるのかが分かるように、ロゴと会社名を必ず置きます。当たり前のようですが、デザイン優先でロゴを極端に小さくしているサイトは少なくありません。
地域密着のビジネスなら、ここに地域名を入れるのも有効です。「広島の」「札幌市中央区の」という一語が、対象かどうかの判断を助けます。
よくある失敗
失敗1：スライドショーで複数の訴求を並べる
複数の内容を順番に切り替えるスライドは、一見すると多くを伝えられそうです。しかし実際には、2枚目以降はほとんど見られません。人は数秒で判断するので、切り替わる前に判断が終わっています。さらに、動くものは無意識に「広告」と認識されて視線が逸らされる傾向があります。伝えたいことが複数あるなら、スライドではなく縦に並べてください。
失敗2：抽象的なキャッチコピーだけを置く
「あなたの毎日に、彩りを。」のようなコピーは、ブランド認知がある企業なら成立します。しかし認知のない企業がやると、何の会社か分からないまま離脱されます。抽象的なコピーを使いたい場合は、すぐ下に具体的な説明を添えるのが安全です。
失敗3：画面いっぱいの写真で、下に何かあることが分からない
大きな写真は印象的ですが、画面の高さいっぱいに敷き詰めると、スクロールすれば続きがあることが伝わりません。特にノートPCの小さい画面では、写真だけで画面が埋まります。対策は単純で、次のセクションの一部を画面の下端に少し見せておくことです。これだけでスクロール率が変わります。
失敗4：モデルの素材写真を使う
海外のビジネスパーソンが握手している写真、といった素材写真は、来訪者に何も伝えません。むしろ「実体のない会社」という印象を与えることがあります。自社の写真がないなら、写真をやめて文字とレイアウトで構成するほうが、はるかに信用されます。
業種別の考え方
| 業種 | ファーストビューの主役 |
|---|---|
| 飲食・宿泊 | 写真。雰囲気が判断材料そのもの |
| 医療・クリニック | 診療時間とアクセス。探しているのはまずこれ |
| 士業・BtoB | 一行の説明と信用の根拠。写真は補助 |
| EC | 商品と価格。キャンペーンがあればその告知 |
| 採用 | 社員の顔と、働く場所の実像 |
| SaaS | サービス名＋1行説明＋管理画面のイメージ |
医療機関のサイトで、院長の写真とメッセージがファーストビューを占めているケースは非常に多いのですが、来訪者が最初に探しているのは診療時間です。主役を決めるのは、作り手の伝えたいことではなく、来訪者の探しものです。
決めるときの進め方
1. このページに来る人を1種類に絞る：トップページには複数の人が来ますが、ファーストビューで狙う相手は1種類に決めます。全員に向けると誰にも刺さりません。
2. その人が最初に確認したいことを書き出す：営業担当に「お客様から最初に聞かれることは何ですか」と聞くのが早いです。現場の答えが、そのままファーストビューに載せるべき情報です。
3. スマートフォンの画面で確認する：これが最も重要です。ファーストビューの議論は、PCの大きな画面で行われがちですが、実際の閲覧の多くはスマートフォンです。スマホの画面では、PCで見えていた要素の半分も入りません。デザイン案を確認するときは、必ずスマホ表示を先に見てください。
TEHON での見比べ方
TEHON では、掲載サイトのPC表示とスマートフォン表示の両方を並べて掲載しています。ファーストビューの検討には、この2つを見比べるのが有効です。
- PCでは成立しているが、スマホでは何が削られているか
- 削られずに残っているものは何か（＝その企業が最優先と判断した要素）
スマホ表示に残っている要素こそ、そのサイトの本当の優先順位です。この視点で見ると、単に「かっこいい」で終わらない読み取りができます。参考デザインギャラリーから、自社と同じ業種・目的で絞り込んでご覧ください。
まとめ
- ファーストビューの仕事は、魅力を伝えることではなく「探しものはここにある」と示すこと
- 必要なのは4つ。誰の何を解決するか／信用の根拠／次の行動／現在地
- スライドショー、抽象コピーのみ、素材写真は避ける
- 主役は業種で変わる。決めるのは作り手ではなく来訪者の探しもの
- 議論はスマートフォンの画面で行う
ファーストビューは、サイトの中で最も少ない面積に、最も多くの判断が集まる場所です。ここに時間をかける価値は十分にあります。
マザーハンズでは、広島・東京を拠点にWebサイトの制作とマーケティング支援を行っています。ファーストビューの設計からご相談いただけます。お問い合わせよりどうぞ。