ホームページのファーストビューを改善する。離脱率を下げる冒頭の設計

ホームページを開いた瞬間に見える画面——これがファーストビューです。お客様はここで「自分に関係があるサイトかどうか」を数秒で判断します。どれだけ良いコンテンツが下にあっても、ファーストビューで離脱されれば読まれません。離脱率を下げるための冒頭設計の考え方を解説します。

サイトの改善相談で「アクセスはあるのに問い合わせが来ない」というお客様のページを見ると、ファーストビューの設計に問題があることがよくあります。写真は綺麗なのに、何のサービスか伝わらない。雰囲気はいいのに、次にどこを見ればいいか分からない。こうした状態のページは、来てくれたお客様を入り口で帰してしまっています。

---

この記事で分かること

・ファーストビューで伝えるべき3つの情報

・離脱率を上げてしまうファーストビューの典型パターン

・キャッチコピーの作り方——お客様に刺さる言葉の選び方

・CTAボタンをファーストビューに置くべき理由

・スマートフォンと PCで確認すべきポイント

---

ファーストビューで伝えるべき3つの情報

お客様がファーストビューを見て「もう少し読んでみよう」と思うためには、次の3つが瞬時に伝わる必要があります。

01. 何をしてくれる場所か

「産後の骨盤ケア専門の整体院」「奈良のWordPress制作専門のデザイナー」のように、一言でサービスの内容と専門性が伝わる言葉が必要です。「ようこそ」「はじめまして」から始まるファーストビューは、この情報が欠けています。お客様は「何をしてくれるか」が分からなければ、次を読もうという気持ちになりません。

02. 誰のためのサービスか

「産後のお母さん向け」「男性の白髪が気になる方向け」のように、対象となるお客様を明示することで「自分ごと」として読んでもらえます。ターゲットを絞ることで「自分には関係ない」と感じる方が離脱しますが、それは問題ありません。ターゲットに刺さることのほうがずっと重要です。

03. 次に何をすればいいか

「まずはこちらへ」「予約はこのボタンから」のように、次の行動を示すCTA（Call to Action）がファーストビュー内にあることが重要です。興味を持ったお客様がスクロールしなくても行動できる状態を作ります。

離脱率を上げる典型パターン

離脱につながりやすいパターン ✕

改善の方向性 ◎

✕ 大きな写真だけで、テキストがほぼない

◎ 写真の上にキャッチコピーとサービス名を重ねる

✕ 「ようこそ〇〇へ」から始まる挨拶文

◎ 「誰に・何を・どんな価値を」の一文から始める

✕ スライドショーが3〜4枚自動で切り替わる

◎ 1枚の静止画またはシンプルなスライド（最大2枚）

✕ CTAボタンがなく、どこをクリックすればいいか分からない

◎ 「まず相談する」「メニューを見る」ボタンを目立つ位置に配置

✕ スマートフォンで文字が小さく、読めない

◎ スマートフォンで最低16px以上・行間1.7以上を確保

キャッチコピーの作り方

ファーストビューで最も重要なテキストがキャッチコピーです。「かっこいい言葉」より「お客様に刺さる言葉」を選ぶことが大切です。以下の型を使うと書きやすくなります。

型1 「悩み」を言葉にする

「産後の腰痛、我慢しなくていいです」「更新できないホームページ、作り直しませんか」——お客様が抱えている悩みをそのまま言葉にします。「これ、自分のことだ」と感じてもらうことが目的です。

型2 「ベネフィット（得られる変化）」を示す

「3回で体が変わる、産後骨盤ケア」「公開後も自分で更新できるWordPressサイト」——サービスの特徴ではなく、お客様が得られる変化・嬉しい未来を言葉にします。

型3 「誰に向けたか」を明示する

「産後のお母さんへ」「ITが苦手な個人事業主の方へ」——ターゲットを冒頭に示すことで、該当するお客様が「自分向けのページだ」と感じて読み続けてもらえます。

ファーストビューは「見せたいもの」ではなく「お客様が知りたいこと」を置く場所。作り手の視点からお客様の視点に切り替えることが、改善の出発点です。

確認すべきチェックポイント

✔ ファーストビューを見た3秒で「何のサービスか」が分かるか

✔ 「誰向けのサービスか」がキャッチコピーまたはサブコピーで伝わっているか

✔ CTAボタンがファーストビュー内に1つ以上あるか

✔ スマートフォンでファーストビューを開いて、文字が読めるか確認したか

✔ スライドショーを使っている場合、最大2枚・自動切り替えは控えめな速度か

✔ 「ようこそ」「はじめまして」ではなく、価値を伝える言葉から始まっているか

ファーストビューの設計、一緒に見直しましょう

今のサイトのURLを教えていただければ、改善点をお伝えします。まずはご相談ください。