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

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

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

ファーストビューとは

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

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

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

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

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

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

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

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

ユーザーは3秒でWebサイトを判断すると言われます。「人は意思決定と行動を3秒で行っている」とされており、さまざまな研究でも「3秒ルール」が利用されています。

たとえば、大阪大学大学院の研究は「通行人がポスターに目を向ける時間は約3秒」という結果が出ています。これはWebサイトを閲覧する際も同様とされています。

3秒はファーストビューの閲覧、もしくはファーストビューを見て少しスクロールする程度の時間です。この間にユーザーはWebサイトの信頼性や有用性を判断し、閲覧するか決定します。

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

一般的にファーストビューでの直帰率はLPで70％以上、コーポ―レートサイトで40％～60％程度とされています。つまり10人のうち、4人～7人はファーストビューを見ただけでWebサイトから離れていることになります。

ファーストビューの直帰率が高いことは、SEOとしても好ましくありません。

Webサイトを閲覧してもらうためには、ファーストビューの段階で信頼性や有用性をユーザーに伝えることが重要です。

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

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

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

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

たとえば、自然由来の原料にこだわった化粧品なら「自然由来」とわかるビジュアルが望ましいです。透明感のある雰囲気や自然を感じさせる緑・水色などのカラーを使うと良いでしょう。逆に、若い女性が気軽に購入できるような化粧品なら、ポップなビジュアルが向いています。

印象に残るビジュアル作りで大切なことは、目的とターゲットを明確にしておくことです。たとえば女性向けの化粧品なのにメインビジュアルに男性が使用されていたら、ユーザーは「自分のことではない」と感じてWebサイトから離れてしまいます。ターゲットを明確にした上で、ユーザーに「自分のことだ」と思わせるビジュアルを作りましょう。

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

明確なキャッチコピーも、ファーストビューの重要な要素です。明確なキャッチコピーはユーザーの理解を深め、場合によってはコンバージョンの改善につながることもあります。

キャッチコピーで大切なのは、曖昧で抽象的な言葉を使わないことです。先述したように、ユーザーはWebサイトを閲覧するかを3秒で判断しています。3秒で商品や企業、ブランドがユーザーのニーズと合致しているかを伝えるためには、定量的かつ直接的な表現が適しています。短い言葉でベネフィットを伝えることが重要です。

一般的にキャッチコピーは短ければ短いほど伝わりやすいとされており、多くても25文字以内に収めることがベストとされています。比喩や言葉遊びをうまく利用すると、より印象に残るキャッチコピーになるでしょう。

権威付けや実績の訴求

LPやサービスサイトの場合は、権威付けや実績の訴求も効果があります。

たとえば「○年連続売上No.1」や「○○さんも愛用」「医師監修」といった言葉に目を引かれ、商品やサービスに興味を持った経験はないでしょうか。これは「ハロー効果」と呼ばれる認知バイアスによるもので、一部のポジティブな情報が全体の印象にも影響を与える心理的な傾向です。マーケティングでは、このような人の認知特性を踏まえたうえで、実績や第三者評価を分かりやすく伝える表現が用いられることがあります。

権威付けや実績で訴求する場合は、根拠となる情報が分かると、ユーザーに安心感を与えやすくなります。たとえば「シェアNo.1」と記載する場合は、調査を行った企業名や調査時期を補足したり、受賞歴がある場合は表彰内容が分かるビジュアルを掲載したりすると、より信頼性の高い訴求につながります。

3. CTA（導線）の設置

ファーストビューにはCTAを設置しましょう。CTAとは「Call To Action」の略で、日本語では「行動喚起」と言います。資料請求や問い合わせなど、ユーザーに一定の行動させるために目立つデザインでボタンを配置する場合が多いです。

CTAをファーストビューに設置する理由は、ユーザーの行動をスムーズに促すためです。CTAはページ下部やフッターに設置されるケースも多い一方で、すでに問い合わせや資料請求を検討してWebサイトを訪れるユーザーも存在します。そのようなユーザーにとって、CTAがファーストビューにあることで、ページをスクロールすることなく次の行動に進むことができます。

ファーストビューにCTAを設置することで、ユーザーはスクロールの手間を省くことができ、問い合わせや資料請求へとスムーズにつながります。その結果、ユーザーの離脱を防ぎ、機会損失の低減にもつながるでしょう。

CTAのテキストは具体的な行動を記載しましょう。「資料請求はこちら」「お問い合わせはこちら」などが望ましいです。「20秒で完結」など行動のハードルが下がるようなマイクロコピーを付けるとより効果的です。

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

ファーストビューはデバイスに合ったサイズにしましょう。デバイスに合ったサイズになっていないと、Webサイトが閲覧しにくく、ユーザーが離脱してしまいます。

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	横表示時に高さが狭くなるので重要情報は上に

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