サイトの印象を左右する!?魅力的で効果的なファーストビューを制作するために知っておきたいこと!

EC戦略・マネージメント編 ネットショップ開業 集客施策(SEO・広告)

人間の印象は第一印象で9割が決まると言われています。

これはWebサイトに関しても同じことが言われており、サイトの印象はすぐ目にするファーストビューでほとんどが決定すると言われています。

ファーストビューが良ければ閲覧時間が伸び、逆にいに沿わないと離脱率が上がる傾向にあります。

このようにファーストビューは大事なものですので、今回はサイト運営に関して重要とされるファーストビューに関してわかりやすく解説していきます。

 

ファーストビュー(FV)とは

ファーストビュー(FV)とは、Webサイトを表示した際に最初にスクロールせずに見える範囲のことで、ファーストビューも僅か数秒でそのWebサイトのイメージを形作ります。

そのため、ファーストビューを整えることはCVや直帰率に大きな影響を与えます。
ファーストビュー作成はサイト構築において重要な作業工程であることは必ず踏まえてください。

また、ファーストビューを作成する際には注意しなければならないポイントがあります。

パソコンで表示する場合とスマートフォンで表示する場合でファーストビューの範囲が違うため、サイトを構築する際は色々な端末で試しながら、効果的なファーストビューを制作することが重要になります。

 

ファーストビュー(FV)の作り方

サイト訪問者はそのサイトに自分が求めている情報・商品があるかを瞬間的に判断します。

そこで、ファーストビューを作成する際は、サイト内容やサービス内容が直感的に伝わるデザインにすることが求められるため、情報を絞りシンプルで伝わりやすいデザインにすると良いでしょう。

逆にサイト訪問者に多くの情報を伝えようとして、画面いっぱいに情報が掲載されてしまうことがよくあり、求めている情報がわかりにくいと離脱されます。

ファーストビュー作成では画像や動画といったツールを活用し、サイト訪問者の興味を引くようなキャッチコピーを作り、シンプルに仕上げていきましょう。

また、ファーストビューには閲覧者が見たい情報にすぐに飛べるような分かりやすい導線を作ることも重要です。

例えば、会社の詳細やサービスの内容を詳しく知りたい場合はメニュー項目をクリックするだけですぐに飛ばせたり、下にスクロールをした場合も提供しているサービス内容を分かりやすいイラスト付きで見せたりとPC・スマホともに工夫が求められます。

このようにファーストビューを作成する場合は、サイト内容が直感的に伝わるようにしつつも、閲覧者が知りたい導線を確保する必要があります。

 

キャッチコピー

ファーストビュー作成において、キャッチフレーズの作成は最も重要な過程の一つです。

キャッチコピーは短い言葉でサイト制作者が伝えたいメッセージを表現しますので、ファーストビューを作成する際にはその方向性を定めるためにキャッチコピー作りを写真やイラスト作成前に行うといいでしょう。

また、キャッチコピーを作成する際は瞬間的にサイトの内容を認知させるために、お客様のメリットを明確に示し、サイト全体の情報を要約しましょう。

 

写真・イラスト

キャッチコピーの作成が終了したら、次は写真・イラストの作成を行いましょう。

写真やイラストはキャッチコピーの内容を踏まえて選定、作成をすすめるべきですが、この時に注意しなくてはならないのが写真やイラストのサイズです。

PCの場合は一般的に幅1000px・高さ550px、スマートフォンの場合は幅360px・高さ600pxの画面サイズで閲覧される場合が多いため、この両者に対応した写真やイラストを選定、作成する必要があります。

また、最近では動画を使うサイトも増えおり、写真やイラストに比べ多くの情報を伝えられるというメリットに加えて、より伝えたいメッセージを臨場感を持って表現することができますので、都度サイズに合わせていきましょう。

 

直帰率が上がってしまうファーストビューの失敗例

ファーストビューで意識したいポイントをご紹介しましたが、逆にファーストビューの失敗例をご紹介します。失敗例を知ることで、良いファーストビューの特徴を押さえましょう。

 

失敗例1:ターゲットが定まっていない

ターゲットの設定が曖昧になっているというケースも少なくありません。

多くのユーザーが訪問したり、CV率が高かったりするサイトは、どのような顧客がユーザーとして訪問するかを明確にしていますので、ターゲットが明確にできないと、訴求ポイントがずれてしまう可能性があります。

ペルソナを作成する際、併せてカスタマージャーニーマップも考えられると良いでしょう。
ペルソナの動きをより具体的にすることで、どのように訴求したらいいのか、現状のサイトの改善点などが見えてきます。

 

失敗例2:デザインにこだわりすぎている

デザインにこだわりすぎてしまうと、かえってユーザーを困らせてしまう場合があります。

おしゃれな雰囲気のサイトにしようと思い、英語表記が多くなったり、アニメーションが長すぎたりしてしまうと、読者からすると内容がわかりにくく感じられるでしょう。

またデザインが複雑だと、文章が読みにくいだけでなく、サイト全体の動作が重くなる場合もあります。

デザインにこだわる場合は、以下のようなユーザーにとっての使いやすさを大切にしたうえで、どんなデザインが求められているかを考えましょう。

  • ユーザーが読みやすいか
  • ユーザーの目的は達成しやすいか
  • ページはすぐに表示されるか
  • どのデバイスでも適切に表示されるか

特に「どのデバイスでも適切に表示されるか」は、ユーザビリティの向上やWebサイトの評価、SEO対策にも関わってくるため、重要視してください。

 

失敗例3:重要なコンテンツがわからない

Webサイトのトップページには、ユーザーにとって必要な情報を盛り込みたいもので、企業理念や難しいコピーを掲載しているところもありますが、検索してきたユーザーが知りたい内容とマッチしない可能性があります。

訪れたユーザーにとってわかりやすいかどうか、導線を改めて確認しましょう。

 

まとめ

今回はファーストビューについてご紹介致しました。

ファーストビューとは、Webサイトを表示した際に最初にスクロールせずに見える範囲のことを指す言葉であり、サイトの離脱率とも深く関わります。

ファーストビューを作成する際は、PCとスマートフォンで閲覧した場合でも、サイト訪問者にサイトの内容が直感的に伝わるようにレイアウトを整えてください。

 

この記事を書いた人

大山悠帆

ECマーケティング事業部マネージャー コンサルタント/コンテンツ編集担当/通販エキスパート資格

元システムエンジニア。BtoBからBtoC案件、動画制作スタッフとしてクライアントの売上改善や業務改善をサポート。
社内では営業改善、マーケティングを担当。多くのスキルと幅広い経験を活用してWEB業界に従事。
様々なジャンルにチャレンジしています。

EC運営に役立つ資料が満載!

 

EC運営に役立つセミナーを毎月開催中!

 

当社のEC運営代行サービスについて

関連記事