SECTION 01

ファーストビューが「離脱の9割」を決めている事実

ホームページ改善のご相談でまず最初にお伺いするのは、「どの画面を最初に見直したいですか」という問いです。多くの経営者様は、料金ページや事例ページ、お問い合わせフォームを挙げられます。ところが実際にアクセス解析とヒートマップを突き合わせて見ていくと、問い合わせが増えない本当の理由は、そこに辿り着く前のトップページのファーストビューにあることがほとんどです。

平均滞在時間3秒の壁

スマートフォンが主流になって以降、訪問者がページを開いてから離脱するかどうかを判断する時間は、年々短くなっています。私たちがクライアント様のサイトで計測しているヒートマップの傾向でも、トップページに到達してから戻るボタンや別タブへ移動するまでの中央値は、概ね3〜5秒の範囲に収まります。この数秒のあいだに、訪問者は「このサイトは自分に関係があるか」「読む価値があるか」「信用してよさそうか」を、ほぼ無意識に判定しています。

ここで誤解してほしくないのは、「3秒は短すぎるから訪問者が悪い」という話ではないという点です。訪問者の立場になれば、検索結果からいくつものサイトを順番に開き、読む価値のあるものだけを選んで滞在していく動きは、ごく自然な行動です。ですから私たちが取り組むべきなのは、「3秒という短時間のなかで、このサイトは自分に関係がある、と判断してもらえる画面」を、最初の1スクロールに設計し込むことになります。

FV改善前後でCVRが大きく動く構造的理由

CREVIAがこれまで改修に関わった熊本の事業者様の中には、「ホームページ全体ではなくファーストビューだけを書き換えた結果、問い合わせ数が明確に伸びた」というケースが複数あります。具体的な数字はクライアント様との守秘があるため、一般化した形でお伝えしますが、共通しているのはファーストビューに「提供価値」「対象者」「信頼要素」「CTA」の4つが揃っていなかった状態から、揃えた状態へ書き換えたという単純な事実です。

裏を返すと、ファーストビュー以外の構造がどれだけ整っていても、最初の画面で「誰に何を提供しているサイトか」が伝わらなければ、その先のコンテンツは読まれません。これは情報設計上の順序の問題であり、ホームページ全体の出来不出来よりも、先頭ブロックの完成度のほうが、実際のCVRには大きな影響を与えます。

FVが弱いサイトに共通する5つの症状

改修のご相談をいただく前の段階でも、ファーストビューを拝見するだけで「ここを直せば問い合わせが増える余地がある」と判断できるサイトには、いくつかの共通した症状があります。以下の5つのうち2つ以上に当てはまる場合、ファーストビューの書き換えを優先的に検討してよいでしょう。

1. 1

   キャッチコピーが抽象的で「誰向けか」が分からない

   「お客様第一」「地域No.1を目指して」のような表現だけで、実際の提供価値と対象者が書かれていない状態。

2. 2

   画像がフリー素材で、事業の実態が伝わらない

   どの業種のサイトでも通用するような汎用写真だけで、自社ならではの現場感・人・成果物が映っていない状態。

3. 3

   実績・年数・資格などの信頼要素がファーストビュー内にない

   対応年数、取引先数、有資格者数、受賞歴など、訪問者が安心材料にできる数字が最初の1画面に出ていない状態。

4. 4

   CTA（行動喚起ボタン）が1つも配置されていない

   「問い合わせ」「資料請求」「無料診断」など、次に取ってほしい行動がファーストビュー内で提示されていない状態。

5. 5

   スマホで開いたときに文字と画像の重なりが読みにくい

   PCでは整って見えても、スマホ表示でキャッチコピーが画像と被る・文字が小さすぎる・ボタンが押しにくいといった表示崩れが起きている状態。

ファーストビューは「訪問者が続きを読む判断」の最前線。以降のコンテンツの読了率は、このブロックの完成度にほぼ線形で比例します。

SECTION 02

ファーストビューに載せるべき6要素（これ以外は削る）

ここからは、CVRを動かすファーストビューに共通して揃っている6つの要素を整理します。いずれも特別な演出は必要なく、訪問者が「このサイトは自分に関係がある」と判断するために必要な情報を、最小限かつ過不足なく配置する、という考え方に基づいています。逆に言えば、この6つ以外の情報は、ファーストビューからは積極的に削っていただくほうが、問い合わせ数は伸びやすくなります。

① 提供価値（ワンフレーズで言語化する）

最初に置くべきなのは、「このサイトが誰にどんな価値を提供しているか」を1行で伝えるワンフレーズです。いわゆるキャッチコピーと呼ばれる要素ですが、文学的に凝る必要はまったくありません。むしろ、装飾的な表現や抽象語を避け、提供価値そのものを平易な日本語で書くことが最優先です。「お客様第一」や「選ばれ続けて◯年」のような形容では、提供価値が伝わりません。「◯◯で困っている方の、△△を解決します」という素朴な構文のほうが、読者の認知負荷は一気に下がります。

② 対象者（「誰向けか」を明示する）

提供価値と同じくらい重要なのが、「誰に向けたサービスか」の明示です。ホームページを改善する経営者様の多くが、「間口を広げたい」という思いから対象者をぼかしてしまいがちですが、実はその逆で、対象者を明示するほど問い合わせ数は増えます。理由はシンプルで、訪問者は自分に関係のない情報に時間を割かないからです。「熊本市内の小規模飲食店のオーナー様へ」「開業3年以内の士業の方へ」と書かれていれば、該当しない人は早々に離脱してくれ、該当する人は「自分のための情報だ」と感じて読み進めてくれます。

③ 信頼要素（数字・年数・第三者評価）

提供価値と対象者が書かれていても、「この会社に頼んで大丈夫か」という不安が残っていては、CTAは押されません。その不安を最短で解消するのが、信頼要素です。対応年数、累計取引社数、地域での実績、有資格者数、業界団体の所属、受賞歴、第三者メディアでの掲載など、数字や固有名詞で担保できる情報を、ファーストビュー内に最低1つ以上配置してください。CREVIAのサイトで言えば、Web業界歴と累計支援社数、熊本を拠点にしていることが、信頼要素に相当します。

④ メインCTA（1つに絞る）

ファーストビュー内のCTAは、1つに絞るのが鉄則です。「お問い合わせ」「資料請求」「LINEで相談」「無料診断」を全部並べると、訪問者は選ぶこと自体が負担になり、結果としてどれも押さない、という状況が起きます。最も問い合わせに繋がりやすい主導線を1つ選び、それを目立つ位置・目立つ色で設置する。他の導線は、ファーストビューの下、あるいは別の場所に配置する、という設計が基本です。

⑤ 視線誘導（Fパターン／Zパターンの使い分け）

人間の視線は、Webページを開いた瞬間にランダムに動くわけではありません。テキスト中心のページでは、左上から右方向へ、少し下がってまた左から右へ、という「Fパターン」で流れます。画像とテキストが組み合わされたランディングページ的なレイアウトでは、左上→右上→左下→右下と動く「Zパターン」が優勢です。ファーストビューを設計するときは、この視線の流れに逆らわず、左上から右下へ向かって情報の優先順位を並べることで、読者の認知を助けることができます。

⑥ 補助情報（サブコピー・スクロール誘導）

最後に、メインコピーだけでは補いきれないニュアンスや、次の章への誘導を担う補助情報を置きます。サブコピーは1〜2行程度で、メインコピーの説明や補強に徹してください。加えて、ファーストビューの下端に「↓」マークや「続きを読む」相当の視覚的な誘導を置くと、スクロールが始まる率が目に見えて変わります。小さな工夫ですが、スマホユーザーに対しては特に効きます。

SECTION 03

PCとスマホでFV設計が全く違う理由

ファーストビューを考えるときに多くの方が陥るのが、「PCで作ったデザインをそのままスマホに縮小する」発想です。現実には、訪問者がサイトを開く端末の比率は、業種にもよりますがスマホ経由が6〜8割を占めることがほとんどで、PC版の流用ではスマホ側のCVRが思うように伸びません。PCとスマホでは、見えている画面の形が根本的に違うからです。

PCの横長レイアウト：3カラム黄金比

PC版のファーストビューは、横長の画面が前提です。左右に空間の余裕があるので、メインコピーと画像を左右に並べる2カラム構成、あるいはメインコピー・サブコピー・CTAを縦に重ね、右側に画像を配する3カラム風のレイアウトが読みやすくなります。このとき、左側のテキスト領域と右側の画像領域の比率は、概ね4対6〜5対5の範囲に収まると、視線の流れを崩さずに情報が伝わりやすくなります。

横長レイアウトで注意したいのは、画面の横幅が1920pxを超える大型ディスプレイで閲覧されたときの見え方です。コンテンツ幅が広がりすぎると、視線の移動距離が長くなり、メインコピーとCTAの結びつきが弱くなります。コンテンツの最大幅を1200〜1440pxに制限し、両脇に余白を持たせる設計にしておくと、大型ディスプレイでも読みやすさが維持されます。

スマホの縦長1カラム：高さ600〜720pxの最適解

スマホのファーストビューは、縦長1カラムが原則です。横に情報を並べる余裕はほぼなく、上から順に「メインコピー→サブコピー→信頼要素→CTA」と積み上げていく設計になります。このときの理想的なファーストビューの高さは、概ね600〜720pxの範囲です。それ以上長くなると、CTAまで辿り着く前に離脱される確率が上がりますし、それより短いと必要な情報が収まりきりません。

スマホでの設計で見落とされがちなのが、iOS SafariやAndroid Chromeの「アドレスバーの表示状態によって画面高さが変わる」挙動です。これに対応するには、CSSの高さ指定に`100vh`だけを使うのではなく、`100dvh`（ダイナミックビューポートハイト）を併用する必要があります。表示崩れの多くは、この1行を知っているか否かで防げるものです。

タブレット境界での崩れを防ぐCSS

PCとスマホの中間サイズ、いわゆるタブレット領域では、レイアウトが崩れやすい境界があります。具体的には、画面幅768〜1024pxの範囲で、PCレイアウトを無理に縮小した結果、メインコピーが2行折り返して画像と重なる、CTAボタンが画像の下に落ちる、といった不具合が頻発します。メディアクエリで768px・1024px・1280pxの3段階を意識し、それぞれの幅でファーストビューが破綻していないかを目視確認する習慣をつけると、大半の崩れは回避できます。

SECTION 04

CVRを上げる画像の選び方（NG例3つと推奨3つ）

ファーストビューに使う画像は、訪問者が最初に認知する情報のうち、コピーに匹敵する比重を占めています。にもかかわらず、画像選びで失敗しているサイトは非常に多く、その結果として信頼獲得に繋がらないケースがよく見られます。ここでは、避けるべき画像3パターンと、代わりに使うべき3パターンを整理します。

NG① 汎用素材写真がCVRを下げる理由

真っ先に避けたいのが、国内外の汎用ストックフォトサイトで配布されている、いわゆる「どの会社のサイトでも見たことがある写真」です。スーツ姿の笑顔のビジネスパーソンが握手している写真、整然としたオープンオフィスの俯瞰写真、ダイバーシティを意識した多国籍の会議室写真——これらはどれも綺麗な写真ではありますが、訪問者には「どこかで見たことのある絵」として素通りされます。提供価値や対象者の情報と噛み合わないまま画像が浮いてしまい、むしろ信頼感を下げる方向に働きやすいのが実情です。

NG② 人物写真とターゲット属性のミスマッチ

次に避けたいのが、人物写真とサイトのターゲット属性が一致していないケースです。熊本の小規模飲食店向けサービスのサイトで、欧米系の若いビジネスパーソンの写真を使う、といった選び方は、訪問者に対して「このサービスは自分のためのものではない」という印象を与えてしまいます。人物を載せる場合は、年齢・性別・国籍・服装の雰囲気を、必ずメインターゲットに合わせてください。熊本の中小企業向けサイトであれば、日本の中小企業の経営者層・従業員層をイメージできる人物を選ぶのが基本です。

NG③ 情報過多な1枚絵

3つ目のNGは、1枚の画像の中に情報を詰め込みすぎているパターンです。キャッチコピーも、サービス名も、料金も、電話番号も、全部画像として1枚に焼き込んでしまうと、スマホで縮小表示されたときに読めなくなります。さらに、画像として焼き込まれた文字はSEO上のテキスト情報としてカウントされないため、検索エンジンからの評価も受けにくくなります。文字はHTMLのテキストとして記述し、画像はあくまで「雰囲気を伝える補助」として割り切るのが、現代の設計の基本です。

推奨① 実物・現場・顧客の3パターン

汎用素材を避けた代わりに、何を使えばよいかというと、答えはシンプルで「実物」「現場」「顧客」の3パターンです。実物は、自社で提供している商品そのものや、施工後の完成写真、調理後の料理、整った内装、完成した成果物などを指します。現場は、店舗の店内、工場の稼働風景、スタッフの作業中の表情、オフィスの実景です。顧客は、お客様の了承のもとで撮影した利用シーンや笑顔の写真です。いずれも「その会社でしか撮れない写真」であり、訪問者に対して独自性と信頼性を同時に届けてくれます。

推奨② スマホ撮影でも十分に伝わる理由

「実物・現場・顧客の写真を使うとなると、プロのカメラマンに依頼しないといけないのでは」と心配される方も多いのですが、必ずしもそうではありません。近年のスマートフォンのカメラ性能は非常に高く、自然光の入る時間帯にきちんと撮影された写真であれば、Webサイトの主役画像として十分に使えます。重要なのはカメラの機種よりも、「どのシーンを切り取るか」の設計です。キャッチコピーが語っている価値と、その場で起きていることが一致している写真を選べば、訪問者の納得度は高まります。

推奨③ 動画背景の使いどころ

近年増えているのが、ファーストビューの背景に短尺の動画をループ再生する演出です。うまく使えば、静止画では伝わらない現場の空気感や、商品の質感を届けられますが、注意点がいくつかあります。モバイル通信での読み込み負荷、音声の自動再生の扱い、動画ファイルサイズによる初回表示速度への影響——これらを見落とすと、ページ表示速度が落ちてかえって離脱率が上がることもあります。動画は必ず最適化し、可能ならスマホ側では静止画に差し替える、といった工夫が必要です。

SECTION 05

コピーライティング設計：1行で伝える黄金公式

ファーストビューのメインコピーは、1行〜2行の短い文字列に、事業のすべてを圧縮する作業です。書き方に迷う経営者様が非常に多い領域ですが、実は型がはっきり決まっているので、型に沿って書くだけで、平均以上の仕上がりになります。

「誰に／何を／どう変えるか」の3要素公式

最も再現性の高い型は、「誰に」「何を」「どう変えるか」の3要素を明示する書き方です。たとえば「熊本の小規模飲食店オーナーへ、集客に悩む日々を、Googleマップ1位で毎日満席に変えます」。この1文の中に、対象者・提供価値・結果が揃っています。読者は最初の5文字で「自分向きか」を判断し、中盤で提供価値を把握し、最後で結果を想像できます。3要素が揃っているかどうかを、コピーを書いたあとに必ずチェックしてください。

業種別テンプレート（飲食／美容／整体／クリニック／不動産／採用）

3要素公式に当てはめた、業種別のコピー例を並べます。そのまま使うのではなく、自社の実情に書き換える土台としてお使いください。

CREVIAの「1行コピー添削」基準

CREVIAでホームページ制作・改善をご依頼いただく際、メインコピーの原稿を拝見すると、多くの場合は3要素のうち1つか2つしか書かれていません。私たちの添削作業は、足りない要素を特定し、実情に沿った言葉で補うという非常に地味な作業です。派手な比喩や韻を踏んだ表現は使いません。派手さは読者の判断を早めず、むしろ遅らせるからです。シンプルに情報が揃っていることこそが、CVRを動かす最大の要因だと考えています。

SECTION 06

CTA設計：クリック率を変える4要素

ファーストビューの最後に配置するCTA（Call To Action、行動喚起ボタン）は、コピーと画像で温めた訪問者の気持ちを、最終的な行動に変換する接点です。ここで手を抜くと、せっかく読み込んでくれた訪問者が、「良さそうな会社だ」と感じたところで滞在を終えてしまいます。CTAのクリック率を動かす要素は、色・文言・位置・マイクロコピーの4点に集約されます。

① 色：高コントラストが原則

CTAボタンの色は、サイト全体の配色から浮き立つ高コントラストの色を選ぶのが原則です。「コーポレートカラーに合わせる」と言って背景と近い色でボタンを作ってしまうと、訪問者の視線が素通りします。CREVIAのコーポレートカラーであるブラウン（#9D643E）のような落ち着いた色は、本文の読ませどころとは相性が良いのですが、CTAに使う場合は周囲の背景を白〜クリームに固めて、ボタンが浮いて見える設計にしておく必要があります。

② 文言：「お問い合わせ」より強い動詞

CTAの文言は、「お問い合わせ」よりも具体的な次の行動を示す動詞のほうがクリック率が高くなります。「無料で診断を依頼する」「30秒で料金を確認する」「資料をダウンロードする」など、訪問者が押した直後に何が起きるかを想像できる表現にしてください。「押すと何が起きるか分からないボタン」は、訪問者の認知負荷を上げ、結果として押されません。

③ 位置：ファーストビュー内必須＋複数配置

CTAはファーストビュー内に最低1つ配置することが必須です。これがないと、訪問者が「問い合わせたい」と感じたその瞬間に、押せる場所がないまま滞在が終わってしまいます。加えて、ページ中盤と最下部にも同じCTA、または文脈に合わせた別パターンのCTAを配置してください。スクロール位置によって問い合わせのモチベーションは変わるため、主要な読了ポイントごとにCTAを置いておくのが、CVRを安定させる現実解です。

④ マイクロコピー：不安の先回り

最後に見落とされがちなのが、CTAボタンの直下・直上に添える短い説明文、いわゆるマイクロコピーです。「無料」「所要時間30秒」「営業時間 平日 9:00 – 18:00」「入力はメールアドレスのみ」といった一行を添えると、訪問者が「ボタンを押したら何が起きるのか」「どれくらい時間がかかるのか」「自分の情報を取られすぎないか」といった不安を先回りして解消できます。マイクロコピー1行の有無で、ボタンクリック率が大きく変わるケースは珍しくありません。

CTAの実装で、フォームの置き方そのものに悩みがある場合は、お問い合わせフォームで離脱される理由も合わせてお読みいただくと、ボタンを押したあとの導線まで含めて設計できます。

SECTION 07

ヒートマップで「FVのどこで離脱しているか」を数字で掴む

ファーストビューの設計は、設計して終わりではありません。実装した後に、訪問者が実際にどこで離脱しているかをヒートマップで計測し、改善サイクルに乗せるところまでで1セットです。設計案が正しいかどうかを、感覚ではなく数字で検証する仕組みを持つことで、初めてCVRは安定して伸びていきます。

流入後3秒のマウス軌跡で分かること

ヒートマップツールの中でも、マウスの軌跡をトラッキングする機能は、ファーストビュー改善の現場で最も重宝します。訪問者のマウスが最初に止まる場所、動き始める方向、CTAボタンの手前で迷って止まる軌跡——これらを見ていると、コピーのどこで引っかかっているのか、画像とCTAのどちらに視線が先に行っているのか、といった細部が手に取るように分かります。静止した設計図では検知できない「現場の違和感」を、ヒートマップは教えてくれます。

スクロール到達率でFVの長さが適切か判定する

スクロールマップという別の機能を使うと、訪問者がどの高さまでページを読み進めているかが可視化されます。ファーストビューの下端までしか到達していない訪問者が多ければ、メインコピーや画像に「続きを読みたい」と思わせる要素が不足していると判定できますし、ファーストビューを過ぎてすぐ離脱が多い場合は、2セクション目の情報密度や導入が弱いことを示唆します。ヒートマップは、設計の仮説を数字で検証する最短ルートです。

改善→検証→再改善のサイクル

CREVIAがクライアント様と運用している基本サイクルは、2週間単位のPDCAです。1週目でヒートマップを見て仮説を立て、2週目の前半で実装、後半で計測を再開し、次の2週間で再検証する流れです。1回の改修で劇的に数字が変わるケースは多くありませんが、このサイクルを半年間継続したサイトでは、CVRが右肩上がりに動いていく傾向が見られやすくなります。改善は一発逆転ではなく、仕組みの話だと捉えてください。ヒートマップ運用の全体像を具体的に把握したい方は、ホームページ改善のやり方完全ガイド｜ヒートマップで『離脱箇所』を見える化で整理しています。

SECTION 08

業種別ファーストビュー設計チェックリスト（12業種）

最後に、業種別に「ファーストビューに必ず載せるべき情報」と「絶対に載せないほうがよい情報」を整理します。テンプレ的な当てはめではなく、それぞれの業種で訪問者が最初に知りたい情報の優先順位に基づいて並べています。

この表は完成形ではなく、業界の慣習と自社の強みに応じて微調整していく土台としてお使いください。大切なのは、訪問者が最初の画面で「自分向きか」「信頼できるか」「どう行動すればよいか」を把握できることであり、逆説的ですがそれ以外の情報はファーストビューに不要です。

ファーストビューは足し算ではなく引き算の設計。残す情報を厳選するほど、CVRは伸びます。

SECTION 09

CREVIAに相談する場合の流れ

自社だけでファーストビューを設計し切る自信がない、あるいは設計したが数字が動かない、という段階であれば、CREVIAが伴走役として対応可能です。熊本を拠点に、全国のクライアント様のホームページ制作・改善を継続的にサポートしています。

無料診断〜プラン選定〜公開までのフロー

1. 1

   お問い合わせフォームからご相談

   サイトURLと現状の課題を記入いただき、送信後2営業日以内にご連絡差し上げます。

2. 2

   無料の現状診断（オンライン／対面）

   ファーストビューを含む主要ページのヒートマップ分析と、改善余地の優先順位をご提示します。

3. 3

   プランのご提案

   部分改善／ページ単位リニューアル／全面リニューアルのいずれが適切かをご要望に応じてご提案します。

4. 4

   設計・実装・公開

   メインコピーの原案作成から画像選定、実装、公開まで伴走します。公開後のヒートマップ計測も標準で対応可能です。

5. 5

   月次の改善サイクル

   希望される場合、月次でヒートマップレビューと改善提案を継続するプランもご用意しています。

料金目安

ファーストビュー単体の改修であれば数万円台から、トップページ全体のリニューアルであれば十数万円〜、多ページ構成の全面リニューアルであれば別途お見積りとなります。具体的な金額はご要望と現状のサイト規模によって変わるため、まずは無料診断からお声がけください。金額次第の業務についても、ご要望に応じて柔軟に対応いたします。

FAQ

よくある質問

SUMMARY

まとめ｜ファーストビューは「6要素の引き算」が9割

本記事では、CVRを大きく動かすファーストビューの設計を、6要素・PC/スマホ別設計・画像選び・コピー・CTA・ヒートマップ・業種別チェックリストの観点から整理しました。要点は以下の3点に集約されます。

1. 1

   6要素が揃っているかを最初に確認する

   提供価値／対象者／信頼要素／CTA／視線誘導／補助情報。欠けている要素を足すだけで数字は動く。

2. 2

   PCとスマホは別物として設計する

   スマホは600〜720pxの1カラム、iOS対応に`100dvh`を併用。タブレット境界の崩れも確認する。

3. 3

   公開後はヒートマップで検証する

   改善は2週間サイクルで回すのが現実解。設計を数字で検証する仕組みを持つことが最重要。

ファーストビューの設計は、派手な演出や複雑なアニメーションを必要としません。必要な情報を揃え、不要な情報を削り、数字で検証する。この3点を徹底するだけで、多くのサイトで問い合わせ数は動きます。逆に、感覚で足し算を続けているサイトは、どれほどリニューアルを重ねてもCVRが横ばいのままです。

自社のファーストビューがどの程度6要素を満たしているか、判断に迷う段階であれば、CREVIAが無料診断から対応可能です。熊本を拠点に、全国のクライアント様のホームページ設計・改善に伴走していますので、ご要望に応じてお気軽にご相談ください。