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

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

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

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

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

▼目次

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

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

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

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

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

6. ファーストビュー改善のためのツール

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

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

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

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

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

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

ファーストビューのサイズ

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

• PC：横幅1000px〜1200px　高さ550px〜600pxくらいまで（ソリッドレイアウトの場合）

• タブレット：横幅768px　高さ1080pxまで

• スマートフォン：横幅375px　高さ600pxまで

使うデバイスによって、ファーストビューのサイズは変わりますが、上記のサイズを意識してファーストビューを作成すれば基本的に問題ありません。

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

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

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

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

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

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

ファーストビュー改善はLPOにおける重要施策

LPOとは、Landing Page Optimization（ランディングページ最適化）の略語で、コンバージョン獲得を目的としたマーケティング施策の一種です。広告や自然検索を通じて訪れたユーザーに対し適切な訴求や導線設計を行うことで、CVRの向上を目指します。

ランディングページでの直帰率が非常に高いことから、ファーストビューの改善はLPOにおける重要な施策の1つと言われています。

ランディングページの離脱率を減らすことで、CVRの向上に大きく繋がるため、ファーストビューでユーザーを惹きつけられる内容にできるかが特に大切です。

LPOの詳細については「【詳解】LPOとは？CVR改善の5つのポイントと改善事例を解説」でも解説しています。併せてご覧ください。

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

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

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

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

STEP1：ターゲットを決める

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

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

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

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

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

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

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

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

STEP2：課題の仮説を立てる

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

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

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

STEP3：改善施策を実施

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

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

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

STEP4：PDCAサイクルを回す

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

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

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

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

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

1）商品の内容が分かる画像を入れる

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

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

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

事例

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

※引用：マクドナルド

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

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

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

事例

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

※引用：アース製薬

3）デザインをシンプルにする

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

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

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

4）CTAボタンを挿入する

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

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

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

CTAの詳細については「CTAとは？8つの改善策でユーザーの行動喚起を最大化させる方法」で解説しています。併せてご覧ください。

5）動画を入れ込む

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

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

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

動画の効果については「【事例付き】動画でLPの訴求力を改善すればCVR120％改善も」で解説しています。併せてご覧ください。

6）デバイスに合ったサイズに調整する

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

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

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

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

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

7）数字による権威づけをする

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

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

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

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

1）SBI損害保険株式会社

引用：SBI損害保険株式会社

施策概要

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

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

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

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

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

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

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

参考URL
プライスリーダーからゲームチェンジャーへ。SBI損保の新たな挑戦

2）山陰合同銀行

施策概要

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

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

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

課題
Webサイトの改善を行う必要があったが何が正解か分からなかった。特に教育ローンは申し込みの多い時期と閑散期で大きな差が見られたので、Webサイトからの申込者を獲得したかった。

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

結果
LPからの申込数が116％に増加

参考
銀行内のDXを進めながら、地域企業のICT導入をサポート。山陰合同銀行が示す、地域に寄り添った新しい銀行の在り方

3）オリエントコーポレーション

施策概要

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

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

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

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

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

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

結果
あとリボの申込率が120.2％まで改善

参考
UI・UX改善により、半年で約10万CV向上に成功。ユーザー第一に「新時代のオリコ」を目指して

6. ファーストビュー改善のためのツール

1）KAIZEN UX

KAIZEN UXはA/Bテスト、CVR改善などUX改善をトータルで実施するプロフェッショナルである「Kaizen Platform」が、長年蓄積したノウハウをパッケージ化したサービスです。

自社Webサイトのページにタグを挿入するだけで、HTMLやCSS、PHPなどをコーディングする必要なく、Webサイト改善のための環境を活用可能。高機能テストツール、分析機能、パーソナライズ機能などが搭載されており、効果的にファーストビューを改善できることが特徴です。

レガシーシステムが、比較的まだ多く残っている金融業界などでも簡単に導入してサイト改善に寄与してくれます。

• タグを1行追加するだけでUI変更できる
• フォームの改善メソッドを独自に保有
• UXに強い専門人材がサイト改善に伴走してくれる

↓資料ダウンロードはこちら（無料）

KAIZEN UXのユーザーレビュー・口コミ

2）Optimizely

Optimizelyは米Optimizely社が提供する、世界No.1シェアを誇るA/Bテストの最適化プラットフォームです。

Optimizelyは特別なコーディングスキルを要さず、直感的に操作できるため、誰でも簡単にテストを実施できるため、高速で改善サイクルを回すことが可能で、ファーストビューのABテストを短時間で実施できるのが特徴です。

世界8,000社で活用されており、様々な企業から信頼を得ています。分析できる点が幅広く、デバイス、ブラウザ、キャンペーン、または任意の切り口でセグメント分析が可能です。

• セグメント分析が細かくできる
• 短時間でテストを回せる
• リアルタイムでアプリ更新ができる

参考：Optimizely正規代理店ギャプライズ｜No.1ABテストツール

3）DLPO

DLPOはDLPO株式会社が提供する、国内で800社以上の導入実績があるPOツールです。

オーディエンス全体だけでなく、流入元やセグメント別のAB・多変量テストを実施することができます。

800社以上の導入・改善実績に基づいた、実装・導入マニュアルやサポートサイトの他、実際の活用事例を提供しており、はじめての利用でも、安心して運用を行うことができます。ファーストビューの改善事例もあるため、ファーストビュー改善にも役立ちます。

多変量テストにより、CVRの高いページの検出だけでなく、どうしてCVRが高かったのかを理解することができます。

• 複数のプラットフォームと連携ができる
• ユーザーごとでLPの表示内容を自動最適化
• 手厚いサポート

参考：DLPO株式会社 - LPOツール「DLPO」でABテスト・多変量テスト・パーソナライズを実施

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

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

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

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

よくある質問

Q. ヒートマップとは何ですか？

ファーストビューとは、ユーザーがWebサイトに訪れたときにスクロールせずに表示される部分のことを指します。

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

詳しくは「1. ファーストビューとは？」をご覧ください。

Q. ファーストビューはなぜ重要なのですか？

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

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

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

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

詳しくは「2. ファーストビューの重要性」をご覧ください。

Q. 効果の出るファーストビューはどのようなものですか？

ファーストビューで特に効果が出る手法は下記の7つです。

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

詳しくは「4. ファーストビューを成功に導く7つのポイント」をご覧ください。