"売れる" HPのファーストビューの作り方：
3秒で離脱されない 設計

01ファーストビューで答えるべき "3つの質問"

訪問者が無意識に問うているのは以下です。

• 何の会社か（業種・サービス）
• 自分に関係あるか（誰向けか）
• 次に何をすればいいか（CTA）

この3つに3秒で答えられないと離脱されます。

02必須5要素

1. キャッチコピー

15〜25文字で、お客様の悩みや欲求に直結する言葉。例：「見てから決めれるWEB制作」

2. サブコピー

キャッチを補強する1〜2行。具体的な価値・数字を入れる。

3. メインビジュアル

業種が一瞬で伝わる写真 or イラスト。プロ撮影が望ましい。

4. CTAボタン

"無料相談"・"資料請求"・"今すぐ予約" などの行動誘導。1個 or 2個まで。

5. 信頼の証

"○○年実績"・"○○社導入"・"認定資格" など、第一印象で信頼を作る要素。

03避けるべき5つのNG

• キャッチコピーが 抽象的：「世界を変える」← 何の会社か不明
• スライダー：1〜2秒で切り替わり、誰も読めない
• CTAが 3つ以上：迷って行動できない
• 動画自動再生：通信量・離脱増加
• 文字が読みにくい：画像背景に白文字 + 影なし

04業種別の参考フォーマット

美容室・治療院

「○○駅徒歩○分 / ○年実績」+ 店内写真 + LINE予約CTA

士業

「○○のご相談、初回無料」+ 先生の顔写真 + 無料相談CTA

SaaS / BtoB

「○○課題を○○で解決」+ 製品スクリーンショット + 資料ダウンロード

EC

「商品名 + 強み」+ 商品の高品質写真 + 購入CTA

05テストして改善する

ファーストビューは "正解" がない。A/Bテスト で複数パターンを試して、コンバージョン率を比較するのが王道。

少なくとも 3〜6 ヶ月運用してデータを取り、年に1〜2回見直す習慣を。