ファーストビューとは｜置く 4 つの要素、スマホと PC の高さの目安、業種別の見出しの文例

ファーストビューとは、Web ページを開いたときに、スクロールしないで最初に見える範囲のことです。日本でよく使われる呼び方で、英語では「Above the fold（折り目より上）」と呼ぶのがふつうです。

LP（ランディングページ）では、来た人がこの範囲を見て、読み進めるか、戻るかを決めます。だから、ファーストビューに何を置くかで、その下が読まれるかどうかが変わります。ただ、「3 秒で決まる」「ファーストビューで 7 割が離れる」のような数字には、出どころが分からないものが多くあります。この記事では、確かめられる調査と統計だけを使って、何を置くか、どれくらいの高さに収めるか、どんな見出しを書くか、公開したあとにどう確かめるかを順に書きます。

全部を読む時間が無いときは、次の表から自分に近い所を選んでください。

ファーストビューとは、開いてスクロールせずに見える範囲

ファーストビューは、ページを開いた瞬間に、スクロールしなくても画面に入っている部分です。どこまでがファーストビューかは、見る人の画面の大きさで変わります。縦の長いスマホなら広く、縦の短いスマホやノートパソコンなら狭くなります。決まった高さがあるわけではありません。

紙の新聞を折って店に並べたとき、折り目より上だけが見えます。Above the fold という英語は、ここから来ています。Web でも同じで、ファーストビューは「まだ何もしていない人に、最初に見せられる場所」です。

見られている時間は、最初の画面に集まる

ファーストビューが大事だと言われる理由は、人がページを見ている時間の多くが、最初の画面に集まるからです。

Web の使いやすさを調べている Nielsen Norman Group は、120 人がいろいろなサイトを見たときの視線を記録し、2018 年に結果をまとめました。1920×1080 の画面で、ページを見ていた時間のうち 57% がスクロールせずに見える範囲、17% が 2 画面目にありました。最初の 3 画面までで 81% になります。

同じ記事は、2010 年の調査（1024×768 の画面）では、最初の画面の割合が 80% だったと書いています。最初の画面の外も、前より見られるようになっています。ですから「ファーストビューに全部を詰め込む」必要はありません。ただ、最初の画面がいちばん見られる場所であることは今も変わりません。調査は、いちばん大事な情報と主なボタンを、最初の画面に置くよう勧めています。

なお、この調査はパソコンの画面での結果です。スマホでの割合は、この数字とは違うと考えてください。スマホの方が 1 画面が小さいので、最初の画面に入る量はさらに少なくなります。

LP とホームページでは、ファーストビューの役目が違う

ファーストビューの役目は、ページの種類で変わります。

ホームページのトップなら、何の会社かと行き先を見せる

ホームページのトップのファーストビューは、LP と違い、1 つの行動に絞れません。来る人の目的がばらばらだからです。置くのは、何の会社かが分かる一言、相手ごとの入口、連絡の手段の 3 つです。

• 何の会社かが分かる一言: 「さいたま市の外壁と屋根の塗装の会社です」のように、業種と地域を書きます。理念の言葉だけでは、初めて来た人に伝わりません
• 相手ごとの入口: 「見積もりを頼みたい方」「施工の例を見たい方」「採用の情報を見たい方」のように、来た人が自分の目的を選べる行き先を置きます
• 連絡の手段: 電話の番号や問い合わせのボタンを、メニューの中だけでなく最初の画面にも見せます

写真を画面いっぱいに置き、ロゴだけを重ねたトップは見た目は整いますが、何の会社かは下までスクロールしないと分かりません。会社の名前を知らずに来る人がいるなら、一言を足します。

この記事のこのあとの節では、主に LP のファーストビューを書きます。LP とホームページの違いそのものは、LP とはにまとめました。

ファーストビューに置く 4 つと、置かなくてよいもの

LP のファーストビューに置くのは、見出し、サブ見出し、信頼の材料、ボタンの 4 つです。来た人は、この 4 つで「自分に関係があるか」「信じてよいか」「どうすればよいか」をつかみます。

見出し：誰の何がどうなるか

見出しは、ファーストビューでいちばん大きく、いちばん先に読まれる文です。会社の思いや、かっこいい言葉を置きたくなりますが、来た人が知りたいのは「自分の困りごとに答えてくれるか」です。対象と結果が分かる言葉を選びます。書き方の例は、あとの節でまとめて並べます。

サブ見出し：見出しで言いきれなかった条件

サブ見出しは、見出しのすぐ下に置く 1〜2 行の文です。見出しで「何をするか」を言い、サブ見出しで「どこで」「誰に」「いくらから」「どう頼めるか」を足します。見出しに条件を全部入れると長くなって読まれないので、2 つに分けます。

信頼の材料：確かめられる事実だけ

信頼の材料は、「この会社に頼んで大丈夫か」に答える物です。資格、許可の番号、創業の年、取引先の名前、実際の施工や店の写真など、読む人があとで確かめられる事実を置きます。

「満足度 98%」「実績多数」のような言葉は、何人に、いつ、どう聞いたかが分からないと、かえって疑われます。数字を出すなら、調べた時期と人数を小さく添えます。実績や声の見せ方は、LPO とはの「実績や声は、確かめられる形で書く」にも書きました。

ボタン：押したあとに起きること

ファーストビューには、ボタンを 1 つ置きます。広告を見てすでに決めかけている人や、2 回目に来た人は、最初の画面で押せると助かります。ボタンの文字は「送信」「詳しくはこちら」ではなく、「無料で見積もりを頼む」「空いている日を見る」のように、押すと何が起きるかが分かる言葉にします。

ボタンの文言の決め方と、ページのどこに何個置くかは、CTA とはに詳しく書きました。

置かなくてよいもの

ファーストビューは狭いので、次の物は下の段に回します。

• メニューの項目をたくさん並べること: LP では、来た人をほかのページへ散らさない方が、申し込みまで進みます
• 会社の沿革や代表のあいさつ: 頼むかどうか迷っている人が、下まで読んでから確かめる物です
• 料金表の全部: 「いくらから」の一言は置き、細かい表は下の段に置きます
• よくある質問: 疑問が出るのは、中身を読んだあとです
• 説明の無い大きな写真: 写真だけでは、何のページか分かりません。写真を置くなら、見出しが一緒に見える大きさにします

ファーストビューの大きさの目安

ファーストビューの大きさは、見る人の画面で決まります。デザインを作るときや、制作を頼むときは、よく使われている画面の大きさを統計で確かめ、その中でいちばん狭い画面に 4 つが収まるかを見ます。

スマホは、縦 667 の画面でも 4 つが見えるか

アクセスの統計を集めている StatCounter の 2026 年 10 月の数字では、日本のスマホの画面の大きさは次の順でした。数字は、スマホの画面で使われる「CSS の px（ピクセル）」の幅と高さです。

幅は 375〜414 の間に集まっています。高さは 667 から 915 まで広く分かれます。いちばん縦が短い 375×667 でも 4 つが見えるように作れば、ほかの画面でも押し出されにくくなります。

上の図は、写真の高さを 400px にしたページの例です。縦の長い画面では、見出し、サブ見出し、信頼の材料、ボタンの 4 つが全部見えます。縦の短い画面では、ボタンが画面の外に出ます。作る人が新しいスマホで確かめると、この違いに気づきません。

また、表の数字は画面そのものの大きさです。実際にページを見られる高さは、ブラウザのアドレスの欄や、下のタブの棒の分だけ低くなります。ですから、4 つは画面の高さより少し余裕をもって収めます。

高さを「画面いっぱい」にするときの落とし穴

ファーストビューの写真を「画面の高さいっぱい」に広げる作り方があります。CSS では 100vh という単位で書くことが多いのですが、スマホではこれが見える範囲より大きくなることがあります。

web.dev の解説によると、100vh はブラウザのアドレスの欄が隠れたときの高さで決まります。ページを開いた直後はアドレスの欄が出ているので、100vh の写真は画面からはみ出し、写真の下に置いたボタンが見えなくなります。web.dev は、アドレスの欄が出ているときの高さに合わせる 100svh や、出入りに合わせて変わる 100dvh を使う方法を紹介しています。いまは主なブラウザのどれもが、この新しい単位に対応しています。

制作を頼むときは、「スマホでは、アドレスの欄が出ている状態で、ボタンまで見えること」と伝えると、この落とし穴を避けられます。

PC は、横 1366・縦 768 でも崩れないか

同じ StatCounter の 2026 年 10 月の数字では、日本のパソコンの画面は 1920×1080 が 27.17% でいちばん多く、1536×864 が 8.86%、2560×1440 が 6.91%、1366×768 が 5.08% と続きます。

パソコンでも、実際に見える高さは、ブラウザの上のタブやアドレスの欄、パソコンの下のタスクバーの分だけ低くなります。1366×768 のノートパソコンでは、見える高さはかなり限られます。大きな画面で作ったファーストビューが、狭いノートパソコンで見出しとボタンの間が切れていないかを確かめます。

LP の作り方全体の中で、どの順番でデザインとスマホの見え方を決めるかは、LP の作り方の「デザインを整え、スマホで確かめる」に書きました。

見出しとサブ見出しの書き方と、業種別の文例

ファーストビューの見出しは、読む人の困りごとへの答えを、具体的な言葉で書きます。うまく書けないときは、次の 3 つの穴を埋めると形になります。

1. 誰の: 誰向けか（地域、立場、困っている状況）
2. 何を: 何をしてくれるか、何が手に入るか
3. どうなるか: 頼んだあとにどうなるか、何が楽になるか

3 つを全部見出しに入れると長くなるので、見出しには「何を」と「どうなるか」、サブ見出しには「誰の」と頼むための条件を入れると収まります。

業種別の文例

次の文例は、どれも架空の会社のものです。そのまま使うのではなく、自分の会社の事実に置き換えてください。

伝わりにくい見出しは、どの会社にも当てはまる言葉でできています。会社名を隠したときに、ほかの会社の見出しと入れ替えても通じてしまうなら、まだ具体的になっていません。

なお、文例の「1 回 40 分」「1 時間にします」のような数字は、自分の会社で本当に言える数字に置き換えてください。消費者庁の案内では、景品表示法は、中身を実際より著しく良いと見せる表示を禁じています。効き目や性能をうたう表示は、根拠の資料を出すよう求められることもあります。根拠の無い数字や、いちばん良かった場合だけの数字は、見出しに書きません。

直す前と後の、ファーストビュー全体の例

見出しだけでなく、4 つをまとめて直した例を並べます。架空の外壁塗装の会社の LP です。

直す前は、どの言葉も会社の側の思いで、読む人が知りたい「自分の家の、何を、どこまで、いくらで頼めるか」に答えていません。直した後は、築年数で対象を絞り、困りごとの名前（ひび割れ、色あせ）を出し、断りやすさ（その場で決めなくてよい）まで書いています。「安心・丁寧」のような言葉は、資格や写真のように確かめられる物に置き換えました。

広告や検索の言葉と、見出しをそろえる

広告から来る LP では、広告の文に書いた言葉を、見出しにも使います。「外壁 ひび割れ 補修」で検索して広告を押した人が、開いたページの見出しに「住まいに、確かな品質を」と書かれていたら、違うページに来たと感じます。「外壁のひび割れ」という同じ言葉が見えると、そのまま読み進めてもらえます。

広告ごとに言葉が大きく違うなら、広告ごとに見出しを入れ替える方法もあります。どこから来たかで見出しを変える進め方と、変えたあとの確かめ方は、LPO とはに書きました。

見出しは画像にせず、文字で書く

見出しを、写真の上に文字を載せた 1 枚の画像にして作ることがあります。これは避けます。画像の中の文字は、スマホで小さくなって読めなくなったり、読み上げの機能で読まれなかったり、検索エンジンにも伝わりにくくなったりします。直すたびに画像を作り直す手間もかかります。

写真の上に文字を重ねたいときは、写真を背景にして、文字はページの文字として載せます。写真が明るいと白い文字が読めなくなるので、写真を少し暗くするか、文字の後ろに色を敷きます。

写真・動画と表示の速さ

ファーストビューの写真は、ページの印象を決めますが、重いと表示が遅れます。表示が遅いと、見出しを読む前に帰る人が出ます。

最初の大きな写真が、表示の速さの物差しになる

Google の web.dev は、ページの中でいちばん大きな画像や文の塊が表示されるまでの時間を LCP（Largest Contentful Paint）と呼び、2.5 秒以内を良い目安としています。測るときは、開かれた回のうち遅い方の 4 分の 1 を除いた値（75 パーセンタイル）を使い、スマホとパソコンを分けて見ます。

LCP になるのは、画像、動画の表紙の画像、CSS で置いた背景の画像、文の塊などです。LP では、ファーストビューの大きな写真がこれになることが多くあります。つまり、ファーストビューの写真を軽くすることが、そのまま表示の速さを良くすることにつながります。

動画を置くなら、止められるようにする

ファーストビューに動画を流すと、何をする会社かが伝わりやすくなる一方、重くなり、動きが気になる人もいます。置くなら、短く切って小さく書き出し、表紙の画像を付けます。

W3C のアクセシビリティの基準（WCAG 2.2）では、自動で始まり、5 秒より長く続き、ほかの内容と一緒に表示される動きには、止める、隠すなどの手段を付けることを求めています（達成基準 2.2.2、レベル A）。音の無い動画を繰り返し流すなら、止めるボタンを付けます。

やりがちな失敗

ファーストビューの失敗は、作る人の画面では気づきにくい物が多くあります。よくある 5 つを並べます。

スライダーで何枚も回す

ファーストビューに、写真と文が数秒ごとに入れ替わるスライダー（カルーセル）を置くと、伝えたいことが全部入るように思えます。ただ、来た人が見るのは、その瞬間に出ている 1 枚だけです。

Nielsen Norman Group は、5 秒ごとに入れ替わる表示で、大事な特売の案内が見えていたのは全体の時間の約 20% だけだった例を挙げ、自動で入れ替わる表示は読み終わる前に変わり、広告のように見えて無視されやすいとしています。伝えたいことが 3 つあるなら、1 つを見出しにして、残りは下の段に順に並べます。

ロゴと会社名だけ、写真だけになっている

ホームページのトップをまねて、大きな写真の上にロゴと会社名だけを置くと、広告から来た人には何のページか分かりません。会社名を知らない人が来る LP では、会社名より「何をするか」を大きく書きます。

スマホでボタンが見えない

パソコンで作ったファーストビューを、スマホで確かめていないと、写真が縦に伸びてボタンが下に押し出されます。上の図のように、縦の短い画面でとくに起きます。作る人の手元のスマホだけでなく、375×667 の画面でも確かめます。

画面を覆う案内を、開いた直後に出す

ページを開いた直後に、画面全体を覆うポップアップで登録やクーポンを案内すると、見出しが読まれる前に閉じられます。Google 検索セントラルは、ページの中身を覆い隠す表示を避け、画面のごく一部を使うバナーにするよう案内しています。案内を出すなら、少し読んでもらってから、画面の一部に出します。

文字の色と写真の色が近い

明るい写真の上に白い文字、暗い写真の上に黒い文字を載せると、作った画面では読めても、屋外のスマホでは読めなくなります。写真を暗くする、文字の後ろに色を敷くなど、文字と後ろの色の差をはっきりさせます。

公開したあとに確かめる方法

ファーストビューが良いかどうかは、作った人の感覚では決まりません。公開したあとに、来た人がファーストビューの次へ進んでいるかを数で確かめます。

ファーストビューの次の段で、どれだけ減っているかを見る

ページの段ごとに、そこまでスクロールした人の割合（到達率）を見ます。ファーストビューは開いた人の全員が見るので、次の段の到達率が、ファーストビューを見て読み進めた人の割合になります。

どれくらい減れば多いかは、業種や来る元で変わるので、ほかの会社の数字とは比べません。比べる相手は、直す前の自分のページです。

直したら、前と後を比べる

ファーストビューを直したら、直す前の期間と直した後の期間で、次の段の到達率とボタンのクリックを比べます。このとき、変えるのは 1 か所だけにします。見出しと写真を同時に変えると、どちらが効いたかが分かりません。

訪問が少ないうちは、率が大きく揺れます。直した版に 100 件ほどの訪問がたまるまでは、結論を急がない方が安全です。前後の比べ方と、比べるときの記録の付け方は、LPO とはの「変えたあとの確かめ方」に書きました。

Nobori でファーストビューを作って確かめる

LP とサイトを作る Nobori では、ファーストビューを作るところから、公開後に次の段でどれだけ減っているかを見るところまで、1 つの画面で進められます。

到達率とクリックのヒートマップ、版で比べる機能は、Free を含む全部のプランで使えます。一方で、ページそのものを 2 つの案に分けて、同じ期間に半分ずつ見せる比べ方は、Nobori のページにはありません。ファーストビューの直しは、前後で比べて確かめます。

Nobori で進める順番

1. 見本かテンプレートから LP を作り、最初のセクションの見出し、サブ見出し、信頼の材料、ボタンを自分の会社の言葉に直す
2. 「画面の幅」をモバイルにして、ボタンまで最初の画面に見えるかを確かめる。見えなければ、写真の高さか文字の大きさを、モバイルの幅でだけ小さくする
3. 公開前のチェックで、写真の上の文字やボタンの文字の読みにくさの知らせが出ていないかを見る
4. 公開して、訪問がたまったら「読まれ方」で、最初のセクションの次でどれだけ減っているかを見る
5. 見出しを 1 か所だけ直して公開し直し、「版で比べる」で前の版と比べる

業種と目的ごとに、Nobori で作って公開しているサイトの見本があります。Free はカードの登録が要らず、フォームつきの LP 1 枚を作って公開し、到達率とクリックを見るところまで試せます（月の訪問は 1 万まで、フォームの回答は月 100 件まで）。プランごとの違いは料金のページで確かめられます。

よくある質問

ファーストビューとトップページは、同じ意味ですか

違います。トップページはサイトの入口になる 1 枚のページのことで、ファーストビューはどのページにもある「開いて最初に見える範囲」のことです。トップページにも、LP にも、記事のページにも、それぞれのファーストビューがあります。

ファーストビューの高さは、何 px で作ればよいですか

決まった数はありません。日本のスマホでは 375×667 から 412×915 まで広く使われているので、いちばん縦が短い 375×667 でも見出しとボタンが見えるように作ります。実際に見える高さはアドレスの欄の分だけ低いので、余裕をもって収めます。

ファーストビューにボタンは必ず要りますか

LP なら置きます。広告を見て決めかけている人や、2 回目に来た人がすぐ押せるようにするためです。ボタンが 1 つあっても、まだ決めていない人は下へ読み進めるので、困ることはほとんどありません。

「ファーストビューは 3 秒で決まる」は本当ですか

この数字の元になった調査は、確かめられませんでした。確かめられるのは、ページを見ている時間の多くが最初の画面に集まるという視線の調査です。秒数にこだわるより、最初の画面で誰の何のページかが分かるかを確かめる方が役に立ちます。

スマホとパソコンで、別のファーストビューを作るべきですか

別のページを作る必要はありません。同じ見出しとボタンのまま、スマホでは写真を低くする、文字を小さくするなど、並べ方と大きさだけを変えます。言葉まで分けると、直すときに片方だけ古いままになりがちです。

ファーストビューを直す前に、何を確かめればよいですか

公開しているなら、次の段の到達率がほかの段よりずっと大きく減っているかを先に見ます。大きく減っていないなら、ファーストビューより下の段や、フォームを直す方が効くことがあります。

ファーストビューに料金を書いた方がよいですか

書ける事業なら、「いくらから」の一言を置くと、料金が気になって帰る人を減らせます。細かい料金表は下の段に置きます。見積もりで決まる事業なら、「見積もりは無料」のように、頼むまでにお金がかからないことを書きます。

写真と動画、どちらを置けばよいですか

まずは写真で足ります。動画は何をする会社かが伝わりやすい一方で、重くなり、止める手段も要ります。写真で見出しとボタンが最初の画面に収まり、表示も速いことを確かめてから、動画が要るかを考えます。

公開の前に確かめること

ファーストビューを公開する前に、次の 6 つを確かめます。

• 見出しで、誰の何がどうなるかが分かる
• サブ見出しに、対象、範囲、頼みやすさのどれかが入っている
• 信頼の材料が、あとで確かめられる事実になっている
• ボタンの文字で、押したあとに起きることが分かる
• 375×667 のスマホと 1366×768 のパソコンで、見出しとボタンが最初の画面に見える
• 見出しを画像にせず、写真の上の文字が読める色の差になっている

参考にした公式ページ（2026 年 11 月 8 日に確認）

• StatCounter: Mobile Screen Resolution Stats Japan・Desktop Screen Resolution Stats Japan
• Nielsen Norman Group: Scrolling and Attention・Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility
• web.dev: Largest Contentful Paint（LCP）・ビューポートの新しい単位（svh・lvh・dvh）の解説
• Google 検索セントラル: Avoid intrusive interstitials and dialogs
• 消費者庁: 表示規制の概要（景品表示法）
• W3C: Understanding Success Criterion 2.2.2: Pause, Stop, Hide
• Nobori: LP とフォーム・料金