ファーストビューの設計｜3秒で「関係ない」と判断されないために
ここで「自分に関係ない」と判断されれば、下に何を書いても読まれません。
訪問者がサイトを見るかどうかは、 最初に表示される画面でほぼ決まります。
ここで「自分に関係ない」と判断されれば、 どれだけ下に良い内容があっても読まれません。 ファーストビューは、デザインの見せ場ではなく判断材料の置き場です。
訪問者が最初に確認していること
BtoBサイトに来た人は、次の順に判断しています。
- ここは何をしている会社か
- 自分の課題に関係があるか
- 信用できそうか
- 次に何をすればよいか
1つめで答えられないサイトが非常に多くあります。 美しい写真と抽象的なキャッチコピーが並び、 スクロールして事業内容にたどり着くまで何の会社か分からない。 この構成では、検索から来た人の多くは戻ります。
入れるべき要素
| 要素 | 役割 | 優先度 |
|---|---|---|
| 事業内容が分かる一文 | 「何の会社か」に答える | 必須 |
| 対象が分かる言葉 | 「自分向けか」に答える | 必須 |
| 次の行動への導線 | 資料請求・相談・サービス一覧 | 必須 |
| 実績を示す数字 | 信用の裏付け | 高 |
| 写真・イメージ | 雰囲気と業種の伝達 | 中 |
| キャッチコピー | 印象づけ | 中 |
「対象が分かる言葉」は効果の割に使われていません。 「製造業向け」「従業員100名以上の企業向け」「関東エリア限定」といった 一言があるだけで、読み手は自分に関係があるかを即座に判断できます。
対象を絞ると機会を失うと考えられがちですが、 実際には合わない問い合わせが減り、商談化率が上がります。
数字は最も効く要素
信用の裏付けとして、数字は1つ入るだけで印象が変わります。
| 伝わらない | 伝わる |
|---|---|
| 豊富な実績があります | 導入実績 1,200社 |
| 創業以来、地域に根ざして | 創業48年／地域No.◯といった比較表現は避ける |
| スピーディーに対応します | お問い合わせから最短3営業日で着手 |
| 多くのお客様に選ばれています | 継続率94%（2025年実績） |
数字は出せる範囲で構いません。 「実績1,200社」が出せなくても、 「対応年数」「拠点数」「有資格者の人数」「取扱品目数」など、 どの会社にも書ける数字はあります。
スマートフォンでの見え方
ファーストビューの設計は、PCではなくスマートフォンを基準にしてください。 縦長の画面では、PCで見えていた要素の多くが画面外に押し出されます。
- 横長の写真は被写体が小さくなる：縦構図の別画像を用意する
- 長いキャッチコピーは3〜4行に折り返される：短くする
- ボタンが画面外に出る：導線を写真より上に置くか、追従させる
- 画面を写真で埋めると続きに気づかれない：次のセクションを少し覗かせる
最後の点は見落とされがちです。 スマートフォンで画面いっぱいに写真を表示すると、 「これで終わり」と受け取られてスクロールされないことがあります。 次の見出しが数十ピクセルでも見えていれば、続きがあると伝わります。
大きなスライドショーを置かない
| 問題 | 内容 |
|---|---|
| 2枚目以降が見られない | 多くの訪問者は切り替わる前にスクロールする |
| 読んでいる途中で消える | 文章を読み終える前に次に切り替わる |
| 表示速度が落ちる | 複数の大きな画像を読み込む |
| 何が主張なのか分からない | すべてを載せた結果、優先順位が消える |
「全部載せたい」という社内要望の結果として採用されることが多い形式です。 複数の事業やキャンペーンを平等に扱いたい気持ちは分かりますが、 結果としてどれも伝わりません。 1枚に絞り、残りは下のセクションに並べるほうが読まれます。
写真の選び方
- フリー素材の外国人オフィス写真は避ける：他社と同じ写真になる
- 自社の人・現場・製品が写っているものを優先する：実在感が信用になる
- 暗い写真の上に白文字を重ねない：読めない状態になりやすい
- 文字を画像に焼き込まない：検索エンジンに読まれず、修正もできない
写真の上に文字を重ねる場合は、必ず可読性を確認してください。 デザインの画面上では読めても、 明るい屋外でスマートフォンから見ると読めないことがあります。 背景に暗い半透明の層を敷くなどの処理が必要です。
確認のしかた
完成したファーストビューが機能しているかは、簡単に確認できます。
- 業界を知らない人に3秒だけ見せる
- 「何をしている会社だと思う？」と聞く
- 答えられなければ、情報が足りていない
社内の人でこのテストをしても意味がありません。 自社のことを知っているため、何が書かれていなくても理解できてしまいます。 家族や別業界の知人など、前提知識のない人に見てもらってください。
よくある質問
ファーストビューには何を入れるべきですか？
「何をしている会社か」と「誰向けか」の2つです。BtoBサイトでは、訪問者は自分の課題を解決できる相手かどうかを最初に判断します。雰囲気のよい写真とキャッチコピーだけでは、その判断ができません。
大きなスライドショーは効果がありますか？
期待されるほどの効果はありません。2枚目以降はほとんど見られず、切り替わることで読んでいる途中の文章が消えます。表示速度にも影響します。伝えたいことが複数あるなら、スライドではなく下にセクションを並べるほうが読まれます。
キャッチコピーは抽象的でもよいですか？
会社が広く知られているなら成立しますが、そうでなければ不利です。「未来を、つくる。」だけでは何の会社か分かりません。抽象的なコピーを使うなら、その下に事業内容が具体的に分かる一文を必ず添えてください。
ファーストビューの高さはどれくらいが適切ですか？
画面いっぱいにする必要はありません。特にスマートフォンで画面全体を写真が占めると、下に続きがあることに気づかれにくくなります。次のセクションの一部が見えている状態のほうが、スクロールされやすくなります。
掲載している金額は、一般的な発注で見かける水準をもとにした目安です。 実際の費用は要件・地域・体制によって変わります。必ず複数社から見積もりを取り、 「何が含まれていて、何が含まれていないか」を比べたうえでご判断ください。