サイトの改善相談で「アクセスはあるのに問い合わせが来ない」というお客様のページを見ると、ファーストビューの設計に問題があることがよくあります。写真は綺麗なのに、何のサービスか伝わらない。雰囲気はいいのに、次にどこを見ればいいか分からない。こうした状態のページは、来てくれたお客様を入り口で帰してしまっています。
- ファーストビューで伝えるべき3つの情報
- 離脱率を上げてしまうファーストビューの典型パターン
- キャッチコピーの作り方——お客様に刺さる言葉の選び方
- CTAボタンをファーストビューに置くべき理由
- スマートフォンと PCで確認すべきポイント
ファーストビューで伝えるべき3つの情報
お客様がファーストビューを見て「もう少し読んでみよう」と思うためには、次の3つが瞬時に伝わる必要があります。
何をしてくれる場所か
「産後の骨盤ケア専門の整体院」「奈良のWordPress制作専門のデザイナー」のように、一言でサービスの内容と専門性が伝わる言葉が必要です。「ようこそ」「はじめまして」から始まるファーストビューは、この情報が欠けています。お客様は「何をしてくれるか」が分からなければ、次を読もうという気持ちになりません。
誰のためのサービスか
「産後のお母さん向け」「男性の白髪が気になる方向け」のように、対象となるお客様を明示することで「自分ごと」として読んでもらえます。ターゲットを絞ることで「自分には関係ない」と感じる方が離脱しますが、それは問題ありません。ターゲットに刺さることのほうがずっと重要です。
次に何をすればいいか
「まずはこちらへ」「予約はこのボタンから」のように、次の行動を示すCTA（Call to Action）がファーストビュー内にあることが重要です。興味を持ったお客様がスクロールしなくても行動できる状態を作ります。
離脱率を上げる典型パターン
| 離脱につながりやすいパターン ✕ | 改善の方向性 ◎ |
|---|---|
| 大きな写真だけで、テキストがほぼない | 写真の上にキャッチコピーとサービス名を重ねる |
| 「ようこそ〇〇へ」から始まる挨拶文 | 「誰に・何を・どんな価値を」の一文から始める |
| スライドショーが3〜4枚自動で切り替わる | 1枚の静止画またはシンプルなスライド（最大2枚） |
| CTAボタンがなく、どこをクリックすればいいか分からない | 「まず相談する」「メニューを見る」ボタンを目立つ位置に配置 |
| スマートフォンで文字が小さく、読めない | スマートフォンで最低16px以上・行間1.7以上を確保 |
キャッチコピーの作り方
ファーストビューで最も重要なテキストがキャッチコピーです。「かっこいい言葉」より「お客様に刺さる言葉」を選ぶことが大切です。以下の型を使うと書きやすくなります。
ファーストビューは「見せたいもの」ではなく「お客様が知りたいこと」を置く場所。作り手の視点からお客様の視点に切り替えることが、改善の出発点です。
確認すべきチェックポイント
- ファーストビューを見た3秒で「何のサービスか」が分かるか
- 「誰向けのサービスか」がキャッチコピーまたはサブコピーで伝わっているか
- CTAボタンがファーストビュー内に1つ以上あるか
- スマートフォンでファーストビューを開いて、文字が読めるか確認したか
- スライドショーを使っている場合、最大2枚・自動切り替えは控えめな速度か
- 「ようこそ」「はじめまして」ではなく、価値を伝える言葉から始まっているか