デジタルマーケターの方向け
お役たち資料 限定公開中

国内外のDX先進事例の紹介に加えて 今年話題となったAIの進化やDX人材育成までを網羅

#DX白書2023

大きな反響をいただいた「#DX白書2022」を大幅にアップデートし、ディズニー等のDXの次に進もうとしている企業の先進事例やそれらを取り巻くAI/Web3などのDXトレンド紹介、そしてDXを推進するための人材戦略まで、検討のヒントになる情報を多数詰め込んだ内容となっております。

デジタルマーケターの方向け
お役たち資料 限定公開中

TikTokに興味はあるもののどうすればいいかわからない方

縦型動画を試してみたいけど、アサイン、ディレクションに対してノウハウが無い方

一度は試してみたけど、成果が出ず伸び 悩んでいる方

DX推進のご担当者、事業責任者の方

新規事業や組織改革を担う事業責任者の方

マーケティング担当、Web担当の方

2022/05/30 (Mon)
ファーストビュー改善の重要性とは?効果を出す7つのポイントを解説

著者: Kaizen 編集部

ファーストビュー改善における7つのポイント

サイト制作において重要な要素の1つであるファーストビュー。

ファーストビューの良し悪しによってユーザーがサイトの続きを見るかどうかが決まることが多く、たとえ商品やサービスが良くてもファーストビューに魅力を感じなければ、そのままページを離脱することもあります。

逆に言えば、ファーストビューを改善することで離脱数を減らし、サイトから獲得できるCV数を増やすことができます。

売上げにも大きな影響を与えるため、サイト改善を行う際にはファーストビューから着手することが多くあります。

今回の記事では、ファーストビューを改善するにあたってのポイントや改善事例などを幅広く紹介します。

Webサイト改善のお役立ち資料をご覧いただけます

デジタルの顧客接点強化の必要性が増す中、Webサイトは重要な役割を持ち、サイト改善は欠かせない施策の一つです。成果をあげるためにも適切な設計と、検証と振り返りを行い改善サイクルを回すことが大切です。

コンバージョン改善や売上UPの実現を目指したい方へ、これまでKaizen Platformが1,000社・50,000回以上の施策支援から得た知見や実績に基づいた『サイト改善で成果を上げるノウハウガイド』をお届けします。

LPOやEFO、A/Bテストをはじめとしたサイト改善における打ち手にお悩みの方、ノウハウがないとお困りの方はぜひ参考にしてみてください。お役立ち資料をダウンロードする

▼目次

1.ファーストビューとは?

2.ファーストビューの重要性

3.ファーストビュー改善の手順

4.ファーストビューを成功に導く7つのポイント

5.ファーストビューの改善事例

6.まとめ|ファーストビューを改善しCV数を増やそう

 

1.ファーストビューとは?

ファーストビューとは、ユーザーがWebサイトに訪れたときにスクロールせずに表示される部分のことを指します。下記のように、機器のディスプレイの大きさによってファーストビューの範囲は異なります。

ファーストビューの位置を示したイラスト

ファーストビューで主に表示される内容は、サイトのタイトル、サービス内容、実際の商品の画像、商品を表現するキャッチコピーなどです。

最近ではファーストビューに画像や文字だけでなく、動画を入れるサイトも多く見られるようになりました。

ファーストビューは限られたスペースであるため、いかに端的に情報を伝えられるかが重要です。

 

2.ファーストビューの重要性

ファーストビューが重要だと考えられる理由は、ファーストビューの内容によってサイトの離脱率が大きく変化するからです。

ファーストビューでWebサイトを離れてしまう割合(直帰率)は高く、ランディングページで70%以上、コーポレートサイトで40%~60%が平均とされています。

またユーザーがサイトを訪れて、そのまま閲覧するか離脱するかを決める時間は3秒とも言われています。

せっかくサイトに集客できても、ファーストビューで魅力を伝えられなければ大半のユーザーが数秒で離脱してしまいます。

そのためユーザーにサイトの全体を見てもらうには、ファーストビューにおいて短時間で伝えたいことが伝えられるような構成にする必要があります。

 

3.ファーストビュー改善の手順

実際にファーストビューを改善する際には、どのような手順で行うべきでしょうか。

基本的には通常のサイト改善と変わらず、下記のような手順となります。

  • ターゲットを決める
  • 課題の仮説を立てる
  • 改善施策を実施
  • PDCAサイクルを回す

サイト全体の改善方法については「5万回超の施策で見えた、サイト改善の成功パターンとは」でも詳しく解説しています。参考にしてください。

 

3-1.ターゲットを決める

ファーストビューを改善するにあたっては、まずターゲットを決めることが何よりも重要です。

ファーストビューでユーザーを惹きつけるためには、ターゲットを絞ってメッセージを伝える必要があります。

そのため、ターゲットを細かく設定しましょう。

例えば30代女性をターゲットにしてファーストビューを作成するときには、子育てしている主婦なのか、仕事で忙しいビジネスパーソンなのかといった細かい設定を考えます。

そうすることで、現在のファーストビューでどの部分がターゲットに刺さっていないかなど課題が見つかり、改善しやすくなります。

ターゲットを定めるために利用したいのが、ペルソナと呼ばれる「企業が提供する製品・サービスにとって最も重要で象徴的な顧客モデル」を設定する方法です。

ペルソナを設定する際には年齢や性別といった大まかなものだけでなく、勤務先や職種、居住地、家族構成、使用アプリやサービスなども決めていきます。

ユーザーの情報を細かく設定することで、製品・サービスを購入したいと思うユーザーの背景がイメージでき、ニーズや刺さるメッセージを考えやすくなるでしょう。

ペルソナについては「【事例付き】2社のペルソナマーケティングから進め方やメリットを解説」でも詳しく解説しています。参考にしてください。

 

3-2.課題の仮説を立てる

次に、ファーストビューの課題に対する仮説を立てます。仮説を立てることで、それを解決するための施策に繋げることができます。

仮説は1つだけでなく複数立てて、それらに合った施策を実施しましょう。例えば、下記のような仮説が挙げられます。

  • 訴求内容がターゲットに刺さっていない
  • 訴求内容がユーザーの目にとまりにくい
  • ファーストビューからCVページに飛べない

課題の仮説の立て方については「成果に繋がるWebサイト改善|課題を抽出する4つのポイント」でも詳しく解説しています。参考にしてください。

 

3-3.改善施策を実施

次に仮説に基づいた施策を実施します。

施策の内容はさまざまです。例えばファーストビューからCVページに飛べないならば、ファーストビューに目立つCVボタンを設置するなどの施策があります。

仮説と同様に施策も複数考えて、どれがターゲットに刺さるのかA/Bテストを行ってみましょう。

A/Bテストについては「1,000社以上の取り組みで分かったABテスト4つの勝ちパターン」でも詳しく解説しています。参考にしてください。

 

3-4.PDCAサイクルを回す

最後に「PDCAを回し、改善を継続する」ことが重要です。ファーストビューの改善は、一度で終わりません。市場環境や自社のビジネス課題の変化に応じて、さらなる改善が必要になります。

PDCAを回し続けることで、時代やユーザーのニーズに合わせた持続的な成果が見込めるファーストビューを構築できます。

 

4.ファーストビューを成功に導く7つのポイント

実際にファーストビューの改善に取り組むとき、特に効果が出る手法を紹介します。

具体的には下記の7つがポイントとなります。

  • 商品の内容が分かる画像を入れる
  • ユーザー目線のキャッチコピーを入れる
  • デザインをシンプルにする
  • CVボタンを挿入する
  • 動画を入れ込む
  • デバイスに合ったサイズに調整する
  • 数字による権威づけをする

これらの中から自社のサイトに合ったものを選び、ファーストビュー改善に取り組んでください。

 

4-1.商品の内容が分かる画像を入れる

ユーザーが商品やサービスを具体的にイメージできるよう、ファーストビューに商品画像を挿入します。

特に複数の商品を扱っている企業では、スライドショーなどで複数の画像を表示できるようにすることがおすすめです。

スライドショーには、ファーストビューのように限られたスペースでも多くのコンテンツを見せられるという強みがあります。

事例

大手ハンバーガーチェーンのマクドナルドでは、ファーストビューに期間限定の商品や新商品をスライドショーで載せることでユーザーの興味を引くようにしています。

マクドナルドのサイトのファーストビュースクリーンショット

※引用:マクドナルド

 

4-2.ユーザー目線のキャッチコピーを入れる

ただ商品の紹介をするのではなく、ターゲットとなるユーザーが自分ごとと思えるようなキャッチコピーを入れます。

例えば、ユーザーが抱えているであろう悩みを提示したり、商品やサービスを利用することでユーザーが得られるメリットを伝えたりといった方法が挙げられます。

事例

オーラルケアの1種であるモンダミンを展開するアース製薬のサイトでは、ファーストビューに「お口の健康を守る。」とシンプルでありながら、ユーザーが商品を使うことでどのようなメリットを得られるかイメージできるキャッチコピーを入れています。

アース製薬のサイトのファーストビュースクリーンショット

※引用:アース製薬

 

4-3.デザインをシンプルにする

ファーストビューのデザインはできる限りシンプルにします。

ファーストビューに情報を詰め込みすぎると、そのサイトで本当に伝えたいことがひと目で伝わらない可能性があります。またCTAを挿入しても、情報量が多くどこにあるか分からなければクリック率が低下します。

シンプルなデザインの例としては、単独の画像または動画とWebサイトを紹介する短い見出し、ページをより詳細に説明する文のみで構成したものがあります。

シンプルなファーストビューデザインの例

 

4-4.CVボタンを挿入する

「購入」や「申し込み」のようなCVボタンをファーストビューに入れます。

すでにサービスや商品に対する購入意欲が高いユーザーには、サイト全体を見てもらう必要はありません。ユーザーがCVポイントを探す手間をなくすためにも、ファーストビューにCVボタンを挿入しましょう。

CVボタンのクリック率を高めるためには、サイズを大きくし周りより目立つ色を使うのがおすすめです。

 

4-5.動画を入れ込む

ファーストビューに動画を入れ込むこともおすすめです。

動画は画像や文章と異なり、動きによって商品やサービスの特徴を示せるので、ユーザーにイメージをより具体的に伝えられます。

また動画が与える情報量は写真やテキストに比べ約5,000倍と言われているため、短時間で多くの情報を与えてサイトへの関心を高め、そのまま読み進めてもらいやすくなります。

 

4-6.デバイスに合ったサイズに調整する

ファーストビューをデバイスに合わせたサイズに調整します。

ファーストビューのサイズが大きすぎる場合、スクロールしないとキャッチコピーなどを見られないこともあります。そうなるとユーザーに伝えたいことが伝わらず、離脱に繋がりかねません。

デバイス別のファーストビューのサイズは、株式会社ファストコーディングの調査において以下が標準だと報告されています。

  • PC:横幅960px〜1100px 高さ550px〜600pxくらいまで(ソリッドレイアウトの場合)
  • タブレット:横幅768px 高さ1080pxまで
  • スマートフォン:横幅375px 高さ600pxまで

もしファーストビューがPCに合わせたサイズだけの場合は、タブレットとスマートフォンに合った大きさのものも作りましょう。

 

4-7.数字による権威づけをする

商品やサービスの強みを具体的に伝えるために、数字を入れましょう。

特に「ランキング第1位」や「満足度90%」など数字による権威づけを装飾で目立たせて示すと効果的です。具体的なデータによりユーザーが信頼感や安心感を抱くことで、ページを読み進めてもらえます。

ランキング第1位や満足度90%のメダル

 

5.ファーストビューの改善事例

ここからは、実際のファーストビューの改善事例について紹介します。

 

5-1.SBI損害保険株式会社

SBI損害保険株式会社のサイトスクリーンショット

施策概要

SBIホールディングスのグループ企業で保険を取り扱うSBI損害保険株式会社。

自動車保険の中の「ダイレクト型(通販型)自動車保険」の競争が激化している現状に危機感を感じ、自社のサイトを他社と差別化したものにしようと考えました。

さまざまなサイト改善施策を実施した中で、自動車保険の内容をより端的に伝えるために下記のようにファーストビューに動画を設置しました。

その結果、新規自動車保険成約率が102.9%、見積りページの遷移率は100.2%まで改善しました。

SBI損害保険株式会社のファーストビュー改善。 before:商品の魅力が伝えきれていない、ファーストビューに見積ボタンが表示されていない after:動画化し商品訴求を強化、ヴィジュアルの縦幅を短縮、ファーストビューに見積りボタンを表示

課題

Webサイトで商品の魅力を伝えきれていなかった

施策

ファーストビューに動画を設置

結果

新規自動車保険成約率が102.9%、見積もりページの遷移率は100.2%まで改善

参考URL

https://kaizenplatform.com/case/sbisonpo

 

5-2.山陰合同銀行

山陰合同銀行のサイトスクリーンショット

施策概要

山陰地方で最大規模の銀行である山陰合同銀行。

Webサイトに多くのユーザーが来訪していることを認識しながら、ずっと手を加えられていませんでした。そこでWebサイトの改善に踏み切ったものの、何が正解なのか分からず、細かく効果測定を行いながらトライアンドエラーを繰り返しました。

特に教育ローンでは、需要期と閑散期で申込数に差が出てしまうという課題があり、それをWebサイトの活用によって解決しようとしました。具体的には教育ローンのLPのファーストビューに利用シーンがパッと分かるビジュアルを配置し「実は入学時のみならず、部活や合宿でも活用できます」と訴求を強化することで、申込数をアップさせることができました。

獲得事例:LP 課題:教育ローンは、申込みの多い時期と閑散期で差が大きく、閑散期での申込率が課題 打ち手:利用シーンは学費だけでなく、学業にかかわる様々な場面での利用できることが認知されていないのではないか具体的な利用シーンを提示することで興味喚起となるのではないか

課題

Webサイトの改善を行う必要があったが何が正解か分からなかった。

特に教育ローンは申し込みの多い時期と閑散期で大きな差が見られたので、Webサイトからの申込者を獲得したかった。

施策

利用シーンが分かるビジュアルをファーストビューに設置

結果

LPからの申込数が116%に増加

参考URL

https://kaizenplatform.com/case/gogin

 

5-3.オリエントコーポレーション

オリエントコーポレーションのサイトスクリーンショット

施策概要

クレジットカードを提供するオリエントコーポレーション。

Webサイトからの会員登録数向上を目指し、UI・UX改善を実施しました。

主に取り組んだのは、特に収益率の高い「あとリボ」のコンバージョン率の改善です。

ファーストビューにメニューや説明が多かったので、あとリボの訴求と申し込みまでの導線を追加した結果、あとリボの申込率が120.2%に改善するという大きな成果に繋がりました。

あとリボのファーストビュー改善 before:ファーストビューにメニューや説明が多い、注力していないポイントサイトへの誘導導線が目立っている after:ファーストビューに注力商品であるあとリボの訴求と申込み導線追加、ヴィジュアルの縦幅を短縮

課題

Webサイトが見づらく、サイトからの会員登録数が増えなかった

施策

あとリボの申し込み画面およびマイページのTOP画面のUI改善等を行った

結果

あとリボの申込率が120.2%まで改善

参考URL

https://kaizenplatform.com/case/orico

 

6.まとめ|ファーストビューを改善しCV数を増やそう

サイトの離脱率を下げCV数を増やすためには、ターゲットに刺さるファーストビューにすることが重要です。

ターゲットが欲しい情報や興味を引く見せ方を考えてファーストビューを制作しましょう。

ファーストビューをはじめとしたWebサイト改善に取り組みたくても「始められない・継続できない・成果が出ない」という悩みをお持ちであれば、KAIZEN UXが解決します。訴求軸別でのLPの出し分け、フォームの改善、クロスセルやサイト内回遊の促進など、Webサイトの改善を一気通貫でサポートします。

詳しいサービス内容を知りたい方は、以下の資料をご覧ください。ダウンロードは無料です。

↓資料ダウンロードはこちら(無料)
Webサイトの改善を一気通貫でサポート『KAIZEN UX』

 

▼KAIZEN UXの口コミ・レビュー

林奈菜美さんのKAIZEN UXに関するレビュー|ミナオシ
Webサイトの改善を一気通貫でサポート『KAIZEN UX』

Webサイト改善にお悩みはありませんか?

サイト改善に取り組んでいる、あるいは検討しているけれど、「自社にノウハウがない」「施策の打ち手が分からない」「成果が上がらない」といったお悩みはありませんか?

いざサイト改善に取り掛かっても、導入したツールがうまく運用できていなかったり、施策がやりっぱなしで振り返りができておらず、成果に繋がらないケースは少なくありません。

LPOやEFO、A/Bテストをはじめとしたサイト改善施策では、成果をあげるための適切なKPI設計と施策の検証と振り返りによってPDCAサイクルを回すことが大切です。

そこで、サイト改善のノウハウや次の打ち手にお悩みの方へ、『サイト改善で成果を出すノウハウガイド』をお届けします。これまでKaizen Platformが1,000社・50,000回以上の施策支援から得た実績を元に、サイト改善に活用できるノウハウや成功事例をまとめました。

コンバージョン改善や売上UPを実現したい方、改善の打ち手に悩んでいる、ノウハウがないとお困りの方は、ぜひ参考にしてみてください。
お役立ち資料をダウンロードする

関連記事

記事一覧へ戻る