ファーストビュー（FV）とは？作り方から参考例までわかりやすく解説致します！

人間の印象は第一印象で9割が決まると言われています。Webサイトに関しても同じことが言われており、サイトの印象はサイトに飛んですぐ目にするファーストビューでほとんどが決定すると言われています。この記事ではサイト運営に関して重要とされるファーストビューに関してわかりやすく解説致します。

ファーストビュー（FV）とは？

ファーストビュー（FV）とは、Webサイトを表示した際に最初にスクロールせずに見える範囲のことです。人のイメージは第一印象で9割が決まると言われているようにファーストビューも僅か数秒でそのWebサイトのイメージを形作ります。
そのため、ファーストビューを整えることはCVや直帰率に大きな影響を与えます。ファーストビュー作成はサイト構築において重要な作業工程です。
また、ファーストビューを作成する際には注意しなければならないポイントがあります。
それはファーストビューはパソコンで表示する場合とスマートフォンで表示する場合でファーストビューの範囲が違うということです。そのため、サイトを構築する際は色々な端末で試しながら、効果的なファーストビューを制作することが重要です。

ファーストビュー（FV）の作り方

サイト訪問者はそのサイトに自分が求めている情報や商品があるかを瞬間的に判断します。そこで、ファーストビューを作成する際は、サイト内容やサービス内容が直感的に伝わるデザインにすることが求められます。
そのためには、情報を絞りシンプルで伝わりやすいデザインにするといいでしょう。サイト訪問者に多くの情報を伝えようして、画面いっぱいに情報が掲載してしまうことがよくあります。ファーストビュー作成では画像や動画といったツールを活用し、サイト訪問者の興味を引くようなキャッチコピーを作り、シンプルに仕上げることが求められます。
例えば、株式会社アートトレーディングでは、15年以上にわたって蓄積下ノウハウを活かし、新規のECサイト制作、既存サイトからの移転・乗り換え並びに、運営代行・コンサルティング・在庫連携・物流まで幅広くサポートをしていることに加えて、ECサイト運営に欠かせないフルフィルメントの代行も行っています。
しかし、これらの業務の詳細を書くことを避け、ファーストビューではその業務内容をすべて書くことを避け、会社の雰囲気が分かる画像とそのサービス内容が瞬時に分かるようなフレーズのみを画面の中央に掲載しています。

また、ファーストビューには閲覧者が見たい情報にすぐに飛べるような分かりやすい導線を作ることも重要です。
例えば、この会社の詳細やサービスの内容を詳しく知りたい場合は右上にある英単語の項目をクリックするだけですぐに飛ぶことができますし、下にスクロールをした場合も提供しているサービス内容を分かりやすいイラスト付きで見ることができます。
また、このファーストビューはスマートフォンで開くことも考慮され作られています。スマートフォンで開いた場合は下の写真のように表示されます。

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

キャッチコピー

ファーストビュー作成において、キャッチフレーズの作成は最も重要な過程の一つです。キャッチコピーは短い言葉でサイト制作者が伝えたいメッセージを表現します。そのため、ファーストビューを作成する際にはその方向性を定めるためにキャッチコピー作りを写真やイラスト作成前に行うといいでしょう。
また、キャッチコピーを作成する際は瞬間的にサイトの内容を認知させるために、お客様のメリットを明確に示し、サイト全体の情報を要約するようにするといいでしょう。

写真・イラスト

キャッチコピーの作成が終了したら、次は写真・イラストの作成を行いました。写真やイラストはキャッチコピーの内容を踏まえ選定、作成するといいでしょう。また、この時に注意しなくてはならないのが写真やイラストのサイズです。
PCの場合は一般的に幅1000px・高さ550px、スマートフォンの場合は幅360px・高さ600pxの画面サイズで閲覧される場合が多いとされています。そのため、この両者に対応した写真やイラストを選定、作成する必要があります。
また、最近では動画を使うサイトも増えてきています。動画は写真やイラストに比べ多くの情報を伝えられるというメリットに加えて、より伝えたいメッセージを臨場感を持って表現することができます。

CSSの書き方

画像・イラストの選定や作成が終了したら、次はその画像をウィンドウの高さに合わせるためにコードを調整します。この際にプログラミング言語の一つであるCSSを変更すると簡単に調節することができます。
調整する項目はの二つです。まずは、「background-size」をcoverにします。「background-size」をcoverにすることでどの比率になっても隙間ができなくなります。
次に「height」を100vhに指定したら作業は完了です。この作業により画像はウィンドウの高さに調節されます。また、この作業工程のみではスマートフォンだとアドレスバーなどがうまく表示されない場合があるのでその際は「JavaScript」も調節する必要があります。
以上の工程が簡易的ではありますが、ファーストビューの作り方になります。クオリティーの高いファーストビューを作ろうとすれば、さらに複雑な作業が必要となってしまいます。自社だけで対応できない場合は、業務委託をするか、ショッピングカートASP型を使いECサイトを構築するなどの対応が必要となるでしょう。
参照：ファーストビューの画像・要素をウィンドウの高さに合わせる方法

ファーストビュー（FV）の参考例

ファーストビューを整えることはサイトの離脱率を下げることにも大きく繋がります。また、ファーストビューを作成する際はシンプルかつ直感的にサイトや自社の内容を伝えることが求められます。

宇野カバン

宇野カバンは手作りのランドセルを50年以上にわたり販売する老舗です。写真やキャッチコピーも非常にシンプルであり、このサイトが何を売っているのか、どんなお店なのかが一目見てわかるようなデザインになっています。

Washi-nary

「Washi-nary」は丸重製紙企業組合が運営するECサイトです。このECサイトは「ワインの世界を楽しむように、和紙の世界を楽しんで欲しいという」という想いから設立され、和紙の魅力を伝えるともに和紙の販売を行っています。
このファーストビューでは和紙を身近に感じてもらうために、日常で和紙を使用してる写真に「感性を刺激する和紙専門店」というシンプルなキャッチコピーを付け加えています。また、このファーストビューでは写真やキャッチコピーは数秒ごとに切り替わるように設定されており、サイト訪問者を飽きさせない工夫がなされています。

@suria

「suria」はヨガウェアブランドで「＠suria」というECサイトを運営しています。アパレル関係のECサイトということもあり、清潔感のあるおしゃれなデザインに加えて、「日々自然を愛そう、地球を愛そう」といった意外性のあるキャッチコピーはサイト閲覧者の目を引きます。また、このECサイトも写真やキャッチフレーズが数秒ごとに切り替わるように工夫がなされています。

まとめ

いかがでしたでしょうか。この記事ではファーストビューについてご紹介致しました。ファーストビューとは、Webサイトを表示した際に最初にスクロールせずに見える範囲のことを指す言葉であり、サイトの離脱率とも深く関わります。
ファーストビューを作成する際は、PCとスマートフォンで閲覧した場合でも、サイト訪問者にサイトの内容が直感的に伝わるようにレイアウトを整える必要があります。この記事がファーストビューを作成する上でお役に立てば幸いです。

関連記事

・東京・大阪のECサイト制作会社20選を徹底比較！失敗しないための選定ポイントとは？
・見やすいECサイトをデザインするコツとは？Shopifyでのデザイン事例もまとめてみました！
・ランディングページ（LP）とは？売れるランディングページの作り方や構成も徹底解説。

ECサイト制作ならアートトレーディング

世界170か国以上のNo.1シェアを誇るグローバルECプラットフォーム「shopify」を導入した自社ECサイト制作をご提案いたします！
当社は、15年以上の実績・100社以上のECサイト構築運用 経験でお客様のお悩みを解決してまいりました。
新規のECサイト制作、既存サイトからの移転・乗り替えだけでなく、運営代行・コンサルティング・在庫連携・物流まで幅広くサポートが可能です。
EC支援といってもお客様の状況はさまざまです。これからECサイトを展開したい、サイトはあるが販売促進のノウハウが欲しい、スタッフが足りなくて人手が欲しい等々…。
現在の状況を分析し、ニーズに合った提案を行い、実践し、ECサイトだけでなくお客様ともども成長していただけるような支援を行います。