Webデザインにおいて、ファーストビューは特に重要視される要素のひとつです。ユーザーが最初に目にする領域であるファーストビューで興味を引けなければ、その先のコンテンツまで読まれないことも少なくありません。

ただし、ファーストビューの改善には、Webデザインの考え方やユーザー視点を踏まえた設計が求められます。専門的な知識がなくてもポイントを押さえることで改善は可能です。本記事では、ファーストビュー設計の基本的な考え方と、改善の進め方をご紹介します。

ファーストビューのデザインを作成する前には、他社のサイトを参考にすることで、どんなデザインにしたいか具体的なイメージを持つことが出来ます。シフトが手掛けてきた様々なデザインをぜひ参考にしてください。
サイトデザインの参考に！シフトデザイン集⇒

ファーストビューとは

ファーストビューとは、Webサイトを開いた際に最初に画面に映る領域です。

英語ではfold（新聞の折り目）より上という意味で「Above the fold」と呼ばれます。サイトのタイトルやイメージ画像、キャッチコピーなどが掲載されており、Webサイトの第一印象を決める箇所であることから、非常に重要な部分です。

メインビジュアルとの違い

ファーストビューと混同されがちなのが「メインビジュアル」です。

メインビジュアルとはファーストビューに含まれる画像で、ファーストビューが「領域」であるのに対し、メインビジュアルは「画像単体」を指します。キービジュアル、メイン画像などとも呼ばれます。

メインビジュアルの役割は、言葉だけでは伝わらない企業やブランドのイメージを視覚で伝えることです。たとえばシフトのWebサイトでは、シフトが制作したWebサイトが日常の風景の中に映し出された写真をメインビジュアルとして採用しています。これによってシフトがWebサイトの制作会社であることをユーザーに伝えています。

メインビジュアルはファーストビューの大半を占め、役割も似ていますが、明確に区別した方が良いでしょう。特に外部の制作会社に依頼する際は、これらの用語を使い分けることで制作会社との齟齬を防げます。

【3秒で判断？！】ファーストビューの重要性

ファーストビューは、Webサイトの中でも特に重要視される領域です。では、なぜファーストビューがそれほど重要とされているのでしょうか。ここからは、その理由や役割について解説していきます。

ユーザーは3秒でサイトを判断する

Webサイトにアクセスしたユーザーは、3秒以内に「このサイトを見るかどうか」を判断すると言われています。

3秒はファーストビューの閲覧、もしくはファーストビューを見て少しスクロールする程度の時間です。この3秒の間に、どのようなサービスや商品を提供しているのか、自分にとって価値のある情報が得られそうかが伝わらなければ、ユーザーはページを離脱してしまう可能性があります。

そのため、ファーストビューでは伝えたい情報を端的にまとめ、視覚的にも分かりやすく設計することが重要です。

ファーストビューの直帰率は70％以上！

ファーストビューでは、ユーザーの離脱が起きやすいという傾向があります。

たとえば、ランディングページではファーストビューだけでの直帰率が70％以上、コーポレートサイトでも40％〜60％程度になるケースがあると言われています。つまり10人のうち、4人～7人はファーストビューを見ただけでWebサイトから離れていることになります。

そのため、ファーストビューではどのようなサービス・商品を提供しているのか、誰に向けた情報なのかを分かりやすく伝え、ユーザーが「もう少し見てみたい」と思える設計にすることが重要です。

ファーストビューをデザインするときの5つのポイント

ファーストビューでユーザーを惹きつけるには、ビジュアルやキャッチコピー、CTAなどが重要です。またファーストビューのサイズや表示速度なども、ユーザーの閲覧を促す大切な要素になります。ここではファーストビューのデザインで重要な5つのポイントをご紹介します。

1. 印象に残るビジュアル

ファーストビューでは「印象に残るビジュアル」を活用しましょう。印象に残るビジュアルとは、商品やサービスの内容がひと目で伝わる画像や動画のことです。

たとえば、自然由来の原料にこだわった化粧品であれば、透明感のある雰囲気や自然を感じさせる色使いなど、特徴が直感的に伝わるビジュアルが適しています。

印象に残るビジュアル作りで大切なのは、目的とターゲットを明確にしておくことです。表現の方向性やビジュアルのトーン、色使いがターゲットと合っていないと、ユーザーは無意識のうちに「自分向けではなさそう」と感じ、Webサイトから離れてしまいます。ターゲットを明確にした上で、ユーザーに「これは自分のためのサービス・商品だ」と直感的に伝わるビジュアルを設計することが重要です。

2. 明確なキャッチコピー

明確なキャッチコピーは、ファーストビューでユーザーに「どんなサービス・商品なのか」を瞬時に伝えるための重要な要素です。内容が一目で理解できれば、ユーザーは自分に関係のある情報だと判断し、ページを読み進めやすくなります。

キャッチコピーで大切なのは、曖昧で抽象的な言葉を使わないことです。先述したように、ユーザーはWebサイトを閲覧するかどうかを3秒以内に判断しています。その短い時間で価値を伝えるには、「誰に・何を・どのようなメリットがあるのか」が直感的に伝わる、定量的で直接的な表現が効果的です。短い言葉でベネフィットを明確に伝えましょう。

また、一般的にキャッチコピーは短いほど伝わりやすいとされており、多くても25文字以内に収めるのが目安です。内容が明確であることを前提に、比喩や言葉のリズムを工夫すると、より印象に残るキャッチコピーになります。

権威付けや実績の訴求

LPやサービスサイトでは、権威付けや実績の訴求もキャッチコピーを補強する要素として効果的です。「○年連続売上No.1」「○○さんも愛用」「医師監修」などの実績や第三者評価は、サービスや商品の信頼性を直感的に伝えることができます。

これは、一部のポジティブな情報が全体の印象に影響を与える「ハロー効果」によるものです。実績を訴求する際は、数値や評価の根拠が分かる情報を添えることで、ユーザーにより安心感を与えられます。

3. CTA（導線）の設置

ファーストビューにはCTAを設置しましょう。CTAとは「Call To Action」の略で、Webサイトの訪問者に特定の行動を促すためのテキストやボタンなどの要素のことです。お問い合わせや資料ダウンロードなどが該当します。

CTAをファーストビューに設置する理由は、ユーザーの行動をスムーズに促すためです。CTAがページ下部やフッターにある場合、すでに問い合わせや資料請求を検討しているユーザーにとっては、目的のCTAを探す手間が発生します。ファーストビューにCTAを設置することで、スクロールすることなく次の行動に進めるため、ユーザーの離脱を防ぎ、機会損失の低減にもつながります。

また、CTAは配置だけでなく、テキストの分かりやすさも重要です。「資料請求はこちら」「お問い合わせはこちら」など、具体的な行動を示す文言を用いることで、ユーザーは次に何をすればよいかを直感的に理解できます。「20秒で完結」など、行動のハードルが下がるマイクロコピーを添えるのも効果的です。

4. デバイスに合ったサイズ

ファーストビューは、閲覧されるデバイスに合ったサイズで設計することが重要です。デバイスに適していないサイズの場合、コンテンツが見づらくなり、ユーザーの離脱につながる可能性があります。

Webサイトは主にパソコン、スマートフォン、タブレットといった複数のデバイスで閲覧されるため、それぞれに合わせてメインビジュアルや文字サイズを調整しましょう。特にタブレットは縦横どちらの向きでも閲覧されることが多いため、両方の画面サイズを考慮した設計が必要です。

すべてのデバイスに対応したい場合は、「レスポンシブデザイン」を採用するのがおすすめです。レスポンシブデザインとは、画面サイズに応じてレイアウトを自動で最適化する手法を指します。ただし、レスポンシブデザインであってもデバイスごとに見え方が異なるため、実機やシミュレーターで確認し、必要に応じて調整を行いましょう。

参考として、デバイスごとの主流なディスプレイ解像度と、ファーストビューの高さの目安を表にまとめました。なお、実際のサイズはコンテンツやデザインによって異なる場合があります。

デバイス	主流の解像度（px）	ファーストビュー高さの目安（px）	備考
PC（デスクトップ）	1920×1080	600〜700	画面全体を意識しつつ、CTAがスクロールせず見える高さ
PC（ノートPC）	1366×768	500〜600	小さめノートでも上部コンテンツが収まる高さ
タブレット（縦向き）	768×1024	400〜500	主要コンテンツが折り返さない高さ
タブレット（横向き）	1024×768	450〜550	画面幅に合わせて比率を調整
スマートフォン（縦向き）	360×640	300〜400	小画面でも重要情報がスクロールなしで見える
スマートフォン（横向き）	640×360	250〜350	横表示時に高さが狭くなるので重要情報は上に

参考：Screen Resolution Stats Japan

5. 表示速度

ファーストビューの表示速度にも配慮しましょう。表示速度が遅いとユーザーがWebサイトから離脱する可能性が高くなります。

Reproが実施した「タイムパフォーマンス意識とWebサイト・アプリの表示速度に関する調査」によると、Webサイトやアプリから離脱した経験として69.5％の人が「ページが表示されるまでに時間がかかりすぎた」と答えています。Googleの調査でも、表示速度が遅くなるほど離脱率が上がるという結果が出ています。また表示速度は検索順位にも関連しているため、表示速度が遅いと検索順位が下がる可能性があります。

表示速度を上げるには、画像・動画の最適化やファイルサイズの圧縮が効果的です。ページが軽くなれば、その分表示速度は速くなります。2.5秒以内での表示が理想的とされています。

なお、表示速度の測定は「PageSpeed Insights」の利用がおすすめです。

出典：Why marketers should care about mobile page speed

ファーストビューでよくある失敗

ファーストビューはWebサイトの顔となる部分のため、インパクトが大切です。ただやりすぎてしまうとかえってユーザーに意図が伝わらない場合があります。ここではファーストビューでよくある失敗をご紹介します。

情報量が多く、訴求が伝わりにくい

よくある失敗の1つ目は、ファーストビューの情報量が多すぎることです。ファーストビューに情報を詰め込み過ぎると、ユーザーへの訴求力が落ちてしまいます。

先述したように、ユーザーは3秒でサイトを閲覧するか判断します。そのためユーザーに伝えたい情報を厳選して、3秒で伝わるようにまとめることが重要です。情報を整理して、視線の動きなどを意識しながらファーストビューをデザインしましょう。

また人の目はコントラストが強い箇所に集中します。余白や色をうまく使って、重要な内容に目が行くようにしましょう。

デザインに拘り過ぎて、内容が伝わらない

デザインに拘り過ぎて、内容が伝わらなくなるのもよくある失敗例です。英語やアニメーションを使ったおしゃれなファーストビューは確かに目を引きますが、ユーザーにとってわかりやすいとは限りません。英語表記はユーザーが意味を理解するのに時間がかかりますし、アニメーションも表示速度が遅くなる要因となる場合があります。

デザインに拘ることでWebサイトの目的を達成できる場合は、拘っても問題ありません。そうでない場合は、視認性を優先しましょう。ユーザーに伝えたい情報がしっかり伝わることが最も重要です。

ファーストビューを改善する手順

ファーストビューを改善するには、ターゲット・ペルソナを設定し、仮説と施策を立てて実行します。ここでは、ファーストビュー改善の手順をご紹介します。

ターゲット・ペルソナを設定する

まずはターゲット・ペルソナを設定しましょう。ターゲットとペルソナを設定することで、ファーストビューのイメージが明確になります。

重要なのはペルソナの設定です。ターゲットは「30代女性」のように大まかな属性のみを設定しますが、ニーズが多様化している現代では、より細かなユーザーをイメージする必要があります。たとえば、

• 32歳　女性
• 既婚。7歳の息子がいる
• 都内のIT企業にエンジニアとして勤務
• 趣味はスポーツで特にテニスが好き
• 応用情報技術者試験を受験したいと考えているが、勉強時間が確保できないことが悩み

などが良いでしょう。ポイントは「実際に存在する個人」をイメージすることです。

課題の仮説と改善施策を立てる

次に現在のファーストビューにおける課題を考えます。ヒートマップなどの分析ツールを利用して現状を把握し、現状に基づいた仮説を立ててみましょう。たとえばビジュアルはよく見られているのに、CTAがあまり見られていない場合は、CTAの印象が薄い可能性があります。

なお仮説を立てる際は、理由と期待値を同時に考えましょう。理由とは「キャッチコピーが定量的ではないから、伝わりにくいのでは？」という仮説の裏付け。期待値とは「明確な数値にしたらコンバージョン率が2％ほどアップするのでは」という施策実行後に期待できる成果です。

改善施策を実行に移す

仮説と施策を立てたら実行しましょう。たとえば「CTAの印象が薄い」という課題に対して「背景とCTAのコントラストが弱いのでは？」という理由があった場合、背景とCTAのコントラストが強い色合いに変更してみます。

施策を実行する際に意識したいのは、できる限り1つずつ検証することです。複数の施策を同時に実行すると、どの施策が成果に影響したのか判断しづらくなる場合があります。そのため、可能であれば施策ごとに実施・検証を行い、効果を整理しながら改善を進めることが重要です。

ただし、複数の施策を同時に実行する必要がある場合は、検証の目的を明確にしたうえで、影響範囲が重ならないように設計することが重要です。

成果を分析し、継続的に改善する

施策実行後は成果を分析します。効果があれば継続し、効果がなかった場合は新たな仮説を立てて再度実行しましょう。

大切なのは、PDCAサイクルを回して改善を継続することです。成果は一朝一夕には上がりませんし、市場や社会は常に変化します。継続的に改善を行うことで徐々に成果が生まれ、環境の変化にも対応できるでしょう。

Webサイト改善の流れやポイントについては、こちらの記事で詳しく解説しています。気になる方はぜひご一読下さい。
▼成果が出るWebサイト改善！流れやポイント、事例についても紹介

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

ここからはファーストビューのデザイン例をご紹介します。素材や演出によって向いているWebサイトは違いますので、自社と近い目的のものを参考にしてください。

素材別ファーストビュー

まずは素材に着目したファーストビューの具体例をご紹介します。

写真

写真は「リアル」や「ベネフィット」を伝えるのに有効です。たとえば、基礎化粧品のブランドサイトで肌の美しい女性の写真があったら「自分もこの商品を使えば同じになれるのでは」という期待を持ったことがある人は多いと思います。また誠実そうな人物の写真が掲載されていると「信頼できる」というイメージを抱くでしょう。

このように写真は自分事としてイメージしやすいことが特徴です。正確なイメージを伝えられるため、詳細な情報を伝えたい場合や信頼感を演出したい場合に向いています。実際の人や空間、商品・サービスの様子をリアルに伝えたい場面で、写真は有効な表現手法です。

なお写真は静止画のほか、複数枚をスライドショーにする、画面を2分割するスプリットスクリーンなど、見せ方にも複数のパターンがあります。

動画

動画は多くの情報を伝えたい場合に適しています。利用したリアルなイメージを伝えられる、興味を引きやすいなどのメリットもあります。トレンドに敏感なファッション業界や、できるだけリアルで豊富な情報を発信したい観光業などは動画を利用すると良いでしょう。

ただし、動画は容量に注意が必要です。容量が重いと表示速度が遅くなり、ユーザーの離脱率が高くなります。また、ページを開くのと同時に音声が再生されると、閲覧環境によっては不快に感じられる場合があるため、音声が出ないよう配慮しましょう。

イラスト

イラストは独自性をアピールできるのが特徴です。また現実にないものも表現可能で、ユーザーに想像してもらいたいときに適しています。

イラストは手書き風やアニメーションなど、さまざまな表現があります。写真と比較すると親しみやすさやワクワク感を演出しやすいため、やわらかい印象やカジュアルな雰囲気を伝えたいWebサイトに適しています。

演出・構造別ファーストビュー

ここからは演出や構造別のファーストビューをご紹介します。素材にかかわらず、見せ方とユーザーの導線に注目してください。

大きな文字、タイポグラフィー

大きな文字やタイポグラフィーは、強いメッセージ性を演出できる表現手法です。シンプルでスタイリッシュな印象になり、視認性にも優れています。また、余白を多めに取ることで、メッセージをより際立たせることができます。

一方で、情報量を詰め込みすぎるとメッセージ性が損なわれるという側面もあります。そのため、短く簡潔で分かりやすいキャッチコピーを丁寧に検討することが重要です。

伝えたいメッセージを明確に打ち出したい場合や、第一印象で強く印象づけたい場面において、効果的に活用できます。

スライド

スライドは複数の画像や情報を見せたいときに適した方法です。複数の商品を扱っているWebサイトで重宝されます。コーポレートサイトや採用サイトでは、ギャラリーとして利用していることもあります。

動きを加えられる点はメリットですが、スライドの演出や切り替え方によってサイト全体の印象は大きく変わります。そのため、扱う画像のテイストや動きのトーンを揃えないと、統一感のないWebサイトになるため注意が必要です。

フォーム

ファーストビューにフォームを置く事例も増えています。ファーストビューはCTAの設置が一般的ですが、直接フォームを置くことによって、よりスピーディにコンバージョンにつなげられます。特にBtoBのWebサイトで多く見られる手法です。

また近年ではフォームやチャットなどを固定して、問い合わせや資料請求をしたいと思ったときに、迷わずアクションを起こせるような工夫をしているWebサイトもあります。

サイドメニュー固定

メニューをサイドに固定するファーストビューは、ヘッダー部分をすっきりさせ、メインビジュアルやキャッチコピーを強調しやすい点が特徴です。画面内の情報を整理しやすく、レイアウトによっては視線の流れをコントロールしやすくなります。

一方で、サイドメニューの固定は主にパソコン向けのレイアウトであり、スマートフォンでは画面サイズの制約から採用しづらい場合があります。そのため、パソコンでの閲覧が中心となるWebサイトや、横幅を活かしたレイアウトが必要な場合に向いた手法といえるでしょう。

目的に合ったデザインにすることが大事

ここまでさまざまなファーストビューのデザイン例をご紹介しましたが、最も重要なのは「サイトの目的に合ったデザインを選ぶこと」です。

たとえば、問い合わせや資料請求を増やしたい場合は、CTAやフォームがひと目で分かるレイアウトにすることで、ユーザーの行動を促しやすくなります。一方で、商品やサービスの印象を強く残したい場合は、写真や動画を用いて視覚的なインパクトを与えるデザインが効果的です。

このように、ファーストビューは見た目の良し悪しだけで判断するのではなく、達成したい目的から逆算して設計することが大切です。

紹介したデザイン参考例を見て、「自社サイトで目的に合うデザインはどれか」をイメージしたい方は、当社のデザイン集をぜひご活用ください。写真や動画、イラストなど、多彩なファーストビューの事例をまとめています。
▼サイトデザインの参考に！シフトデザイン集⇒

ファーストビューの改善なら制作会社へ

ファーストビューはユーザーがWebサイトの閲覧を決める重要な要素です。ご紹介したポイントをおさえれば自社でも改善はできますが、プロに相談することでより効果の高い改善ができます。

株式会社シフトでは、お客様の課題や要望を詳細にヒアリングしたうえで、UI/UXやSEO設計を踏まえ、お客様の目的に合ったファーストビューをご提案いたします。

「どう改善したらいいか分からない」「目的に合ったデザインが分からない」など、ファーストビューのデザインでお悩みを抱えている方はぜひこちらからお問い合わせ下さい。
⇒ファーストビューのデザインを相談する

まとめ

Webサイトの目的を達成するには、まず閲覧されることが大前提となります。ファーストビューでユーザーの心を掴み、最終的な目的達成につなげましょう。