ファーストビューを11種類の型に分け、AIへの指示文・動く見本・コードを載せています。
ファーストビューはどの型を選ぶか
ファーストビューは、ページを開いてスクロールする前に見える範囲です。読み手はここで読み進めるかどうかを決めるので、型を選ぶときは見た目より先に、来る人が何をしに来たかを考えます。読んで納得してから動く人が多いなら見せ方の型、すぐに探したり申し込んだりしたい人が多いなら行動の入口の型が合います。
| こんなとき | 向いている型 |
|---|---|
| 形のないサービスで、言葉で伝えたい・写真がまだない | 一文訴求型 |
| 場所や雰囲気を、よい写真1枚で見せられる | 画像主体型 |
| 製品の画面や商品の写真と、説明の両方を見せたい | 左右分割型 |
| 作る様子や場所の空気を、動きで見せたい | 動画背景型 |
| コースや商品が2〜3個あり、どれも同じくらい案内したい | スライダー型 |
| 比べて選ばれる商品で、導入の実績を示せる | 根拠添え型 |
| セミナーや期間限定キャンペーンの締め切りが迫っている | 告知型 |
| 来る人の立場や用件で、案内する先が変わる | 入口分岐型 |
| 商品を見てもらえば選んでもらえる通販サイト | 商品選択型 |
| たくさんの中から条件で探してもらう | 目的入力型 |
| プランが多く、どれが合うか読み手が決めにくい | 診断開始型 |
根拠添え型の数字やロゴは、一文訴求型・左右分割型の見出しの下に足して使うこともできます。
スライダーを最後から先頭へ切れ目なく送る動きは、アニメーション集のループの動き（無限カルーセル）にあります。
どの型でも守ること
- 見出しは h1 にして、何のページかを1文で言う。社名やスローガンだけでなく、誰に何を届けるのかを書きます。
- SP で最初の行動まで見えるようにする。402px 前後の幅で、見出しから最初のボタン（または入力欄）までがスクロールせずに見えるかを確かめます。
- 行動は1つを主役にする。塗りのボタンは1つにして、ほかは文字のリンクや控えめなボタンにします。
- 最初に見える画像は遅らせて読み込まない。
loading="lazy"を付けず、width・heightを書いて、読み込みの途中でレイアウトが動かないようにします。 - 自動で切り替わるスライドにしない。読む前に変わってしまい、2枚目以降はほとんど見られません。いくつか見せたいときも、スライダー型のように読み手の操作で切り替え、何があるかを名前で見せます。
よくある質問 (FAQ)
ページを開いて、スクロールせずに見える範囲のことです。画面の大きさで変わるので、決まった高さはありません。ノートPC（縦 700px 前後）とスマホ（縦 650px 前後）の両方で、見出しと最初の行動が収まっているかを確かめます。
自動で切り替わるスライドはおすすめしません。多くの人は1枚目しか見ず、文字を読み終える前に切り替わることもあります。見せたいものが複数あるなら、最初の画面では1つに絞り、残りはその下のセクションに並べます。2〜3個を同じくらい見せたいときは、スライダー型のように、切り替えを読み手に任せてスライドの名前をボタンに出します。
目安は20〜30字。SP で表示して2〜3行に収まるくらいです。言いたいことが入りきらないときは、見出しは結論だけにして、理由や条件は下の補足の文へ移すと収まります。
大きな写真は表示の速さに影響するので、軽くしてから置きます。横幅は 1920px ほどまでにし、WebP などの軽い形式にします。SP には小さい写真を出し分け（
srcset）、最初に見える写真には loading="lazy" を付けません。