ファーストビューとは

ファーストビューとは、Webサイトを訪れた際、最初に目に入る領域を指します。そのサイトの第一印象が決まる部分なので、ページの内容や特徴を伝える重要な役割を担います。

ファーストビューは言い換え例として「above the fold」と呼ばれることがあります。「above thw fold」は直訳すると「折り目の上」で、新聞で最初に目に入る一面のトップを指す言葉です。

WebマーケティングにおいてはWebサイトで最初に目に入る部分を指す言葉として用いられており、世界的にはファーストビューよりもabove thw foldが一般的です。ファーストビューは和製英語であるため、日本以外では通用しないことに注意しましょう。

ファーストビューに表示されるのはヘッダー・グローバルナビゲーション・メインビジュアルが多いです。

ファーストビューに最適な横幅と高さ

ファーストビューに最適な横幅と高さを以下の流れで解説します。

• パソコン｜横幅1000px〜1200px・高さ550px〜650px
• スマートフォン｜横幅350px〜365px・高さ600px～650px

ファーストビューに最適な横幅と高さは、ユーザーが利用するデバイスによって異なります。利用頻度の高いデバイスのサイズをリサーチし、最適な横幅と高さに調整することが重要です。

画面を大きくしすぎると1ピクセルが小さくなり、文字や要素が細かくなりすぎます。一方で画面を小さくしすぎると、画面が広がって情報を見つけるのが困難です。

必ず、最適な横幅と高さを参考にしましょう。

パソコン｜横幅1000px〜1200px・高さ550px〜650px

パソコンの場合、ファーストビューは横幅1000px〜1200px程度、高さ550px〜650px程度に収めるのが理想です。

Webトラフィック解析を行うStatcounterが発表した統計（2025年6月〜2026年6月）によると、日本のパソコンの使用状況は以下のとおりです。

（画像引用：Statcounter Global Stars「Desktop Screen Resolution Stats Japan（June 2025 - June 2026）」）

1920px×1080px・1536px×864px・2560px×1440pxの主要3サイズが、全体の3割を占めています。

スマートフォン｜横幅350px〜365px・高さ600px～650px

スマートフォンの場合、横幅は350px〜365px程度、高さは600px～650px程度に収めるのが理想です。

Statcounterが発表した統計（2025年6月〜2026年6月）によると、日本のスマートフォンの使用状況は以下のとおりです。

（画像引用：Statcounter Global Stars「Mobile Screen Resolution Stats Japan（June 2025 - June 2026）」）

スマートフォンは414px×896pxと375px×812pxの2サイズがそれぞれ2割以上を占めて最も多く、3位の390px×844pxがそれに続いて利用されています。

ファーストビューで成果を出す6つのポイント

ファーストビューで成果を出すポイントは以下の6つです。

1. 商品やサービスがわかる画像や動画を挿入する
2. タレント起用でユーザーの興味を引く
3. 心に響くキャッチコピーを入れる
4. デバイスに適したサイズ設定にする
5. ユーザーの目を引きやすいCTAボタンを挿入する
6. 具体的な数字を入れてアピールする

それぞれについて解説していきましょう。

1.商品やサービスがわかる画像や動画を挿入する

ファーストビューで成果を出すためには、ユーザーに紹介したい商品やサービスが一目でわかる画像や動画を挿入してみましょう。「何の商品・サービスなのか」がわかりやすいと、ユーザーの興味を引きやすいためです。

単に商品・サービスを掲載するのではなく、魅力的に見えるように画像や動画を工夫するとよいでしょう。具体的な方法の例は以下の3つです。

• スライドショーやアニメーションで多くの情報を与える
• 動画で具体的なイメージを伝える
• タレント起用でユーザーの興味を引く

スライドショーで多くの情報を与える

伝えたい商品やサービスが複数ある場合は、スライドショーが効果的です。

限られた範囲内で多くの情報を与えられます。スライドが動き続けることで楽しい印象を与え、ユーザーを飽きさせません。ただし、スライドの更新に手間がかかるのが難点です。

動画で具体的なイメージを伝える

動画は動きがあるため、画像より短時間で具体的なイメージを伝えられます。静止画よりユーザーの興味を引きつけやすいためです。ただし、画像より容量が大きくなるため、表示速度には注意しましょう。

動画を入れる場合はサウンドオフにすることも忘れてはいけません。外出時にユーザーが閲覧した場合、サウンドオンだとすぐに離脱されるためです。

2.タレント起用でユーザーの興味を引く

商品やサービスのイメージとマッチするタレントを起用することで、ユーザーの興味を引きつけられます。著名人の写真はユーザーの目に止まる可能性が高いためです。

タレント起用には通常、多額の契約料が発生しますが、タレントサブスクを活用することでコストを抑えられます。タレントサブスクとは、定額料金を支払うことで自社広告やWebサイトにタレントの写真素材を利用できるサービスです。

なお、タレントサブスクについてはこちらの記事で詳しく解説しています。

3.心に響くキャッチコピーを入れる

強調したいメッセージを入れたキャッチコピーで、離脱率を下げられます。ユーザーに自身がターゲットであることを認識してもらえるためです。

キャッチコピーを考える際、見るだけでターゲットが明確にわかる内容にしましょう。ターゲットは幅広い層ではなく、ある程度絞り込むことで心に刺さりやすくなります。リズム感を意識することも大切なポイントです。

ユーザーにとってのメリットを入れることで、その後もWebサイトを読み進めてもらえます。

4.デバイスに適したサイズ設定にする

ファーストビューで成果を出すためには、デバイスに適したサイズ設定にしましょう。ファーストビューの理想的なサイズはデバイスによって異なるためです。

パソコンやスマートフォンなどさまざまなデバイスで閲覧することを考慮して、最適なサイズ設定を行います。大きすぎても小さすぎても、ユーザーにメリットを伝えられません。スクロールしなくても、画面の上から下まで表示されることが理想です。

5.ユーザーの目を引きやすいCTAボタンを挿入する

ファーストビューで成果を出すために、ユーザーの目を引きやすいデザインのCTAボタンを挿入しましょう。ユーザーの行動に直接影響を与える重要な部分であるためです。

CTAは「Call To Action」の略で「行動喚起」を意味し、具体的には会員登録や資料請求、商品の申し込みなどを指します。色や影をつけることで、ボタン部分を押せることを認識してもらう仕組みが効果的です。

6.具体的な数字を入れてアピールする

商品やサービスの実績などを数字で入れると信頼性が高まり、ファーストビューの成果を高められます。多くの人が利用する商品であることがわかると、自分も購入しようとする気持ちが働くためです。バンドワゴン効果とも呼ばれます。

あいまいな数字ではなく、ランキング順位や顧客満足度など、具体的な数字を出すようにしましょう。メダルや王冠のイラストを利用するのも効果的です。

ファーストビューのデザイン参考例

ファーストビューのデザイン参考例を3つ紹介します。

• マクドナルド
• kintone（サイボウズ株式会社）
• ライフネット生命

マクドナルド

最初に紹介するのはファストフードで有名なマクドナルドのファーストビューです。

公式サイトのファーストビューでは、PRしたい限定商品やキャンペーンが次々とスライドショーで表示されます。

（画像引用：マクドナルド公式サイト）

キャラクターとコラボしたデザインを使い、ユーザーに強い印象を与えています。上部にナビゲーションが設置されているので、定番メニューやキャンペーンなど検索したい情報が見つけやすいのも特徴です。

kintone（サイボウズ株式会社）

次に、サイボウズ株式会社が提供するkintoneの公式サイトのファーストビューをご紹介します。

ファーストビューには、紹介したいサービスのキャッチコピーと紹介文が大きく表示され、ユーザーの目を引きつけています。

（画像引用：サイボウズ株式会社｜kintoneサービスサイト）

法人向けサービスで、ファーストビューを見ただけで「何をしてくれるサービスか」を数秒で理解させる設計の事例です。また、「アプリ作成体験」「セミナー」のCTAでユーザーを上手く誘導する導線もつくっています。

ライフネット生命

最後に、ライフネット生命の公式サイトのファーストビューの紹介です。

ファーストビューの画像中央に「顧客満足度 2年連続 第1位」の文言を大きく掲載しているのが特徴的です。

（画像引用：ライフネット生命公式サイト）

保険サービスで重要視される、安心感をファーストビューでアピールしている事例です。また、電話や見積もりなどのユーザー導線もわかりやすく配置されています。

ターゲットに響くファーストビューを作成して離脱率を下げよう

ファーストビューとは、Webサイトで最初に目に入る部分のことです。ファーストビューはユーザーの離脱率に影響する重要な部分であるため、効果的なものを作成しなければいけません。

効果的なファーストビューを作成するためには、画像や動画を挿入したり、キャッチコピーを入れたり、さまざまな工夫が必要です。

ファーストビューで一瞬にしてユーザーの心を掴むためには、有名タレントの素材を使うことも有効な手段の一つです。

IPプラットフォームのSkettt（スケット）なら、5,000名以上のタレントの中からご希望に合わせたタレント活用の提案、クリエイティブの制作まで一気通貫で任せることができます。

さらに最短で契約期間1か月から利用可能というメリットもありますので、ぜひお気軽にお問合せください。