FV(ファーストビュー)を作る際のポイントやデザイン事例100選を紹介！

webサイトにおいて、FV(ファーストビュー)は特に大事な要素の1つです。

ユーザーは、自分に関係ないサイトだと判断すれば、すぐに離脱します。50~70%のユーザーがFVで離脱するというデータもあるので、FVでユーザーを惹きつけることは必須です。

この記事では、FVを作る際のポイント / 注意点 / デザインパターン / 事例などをを紹介します。事例だけ見たい方は、目次から飛んでご覧ください。

※ これ以降、ファーストビューはFVと記載します。

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

FVとは、webサイトの中でユーザーの画面に最初に表示される部分を指します。ページ読み込み直後に見える部分・スクロールせずに閲覧できる領域です。

メインビジュアル(MV)やキービジュアル(KV)と呼ばれることもあります。

FV(ファーストビュー)の重要性

FVにまつわるデータには、下記があります。

• FVでの離脱率はLPで70％以上 / コーポレートサイトで40％～60％が平均
• ユーザーはページを訪れてから3秒程度でそのページに留まるかどうかを判断する
• ユーザーの55%がページを開いた後、15秒以内に離脱する
• FVに明確なCTAを配置することで、成約率が最大で200%向上する

様々なデータがありますが、FVがサイトにおいて、超重要なことは疑う余地がありません。

FV(ファーストビュー)に入れるべき要素

ファーストビューに入れるべき要素は、業種によって変わります。大事なことは、どんな業種やサイトタイプでも、顧客目線で下記のことを考えることです。

• 顧客は何を知りたいか
• どんな訴求をすれば興味を持ってもらえるか
• どんな情報があれば親切か

一般的なサイトと店舗ビジネスで例を出します。

FV(ファーストビュー)のポイントや注意点

それぞれ詳しく紹介します。

ヘッダーやキャッチコピーは日本語にする

よくヘッダーやキャッチコピーを英語にしているサイトを見かけますが、成果重視のサイトであれば、やめたほうが良いです。

FVでは、下記が重要です。

• 一瞬で自分ごと化してもらう
• 迷いなく欲しい情報にアクセスしてもらう

確かに、英語にしたほうがスタイリッシュには見えます。何を目的にサイトを用意しているのか、良く考えてデザインは決めると良いでしょう。

主要ページに飛べるようにする

主にヘッダーのメニューから、主要ページには、なるべく少ないクリック数で飛べるようにすべきです。

PC表示の際に、メニューを隠さないことはもちろんのこと、スマホでもメニューが少ない場合は、下記のように露出した方が良いです。(左はヘッダーにメニュー固定 / 右は画面の下部にメニュー固定)

メインターゲットに響くキャッチコピーにする

キャッチコピーは、カッコ良さより、メインターゲットに響くかどうかを意識すべきです。

• 誰に何を提供しているのか
• 顧客はそのサービスを使うとどうなるのか
• 申し込むにはどうすれば良いのか

この3点が一瞬で分かるようにしましょう。

※ この表は横スクロールできる場合があります。

※ この表は横スクロールできる場合があります。

CTAとマイクロコピーを配置する

CTAとは、Webサイトにおいてユーザーにとってもらいたい行動へ誘導するボタンやリンクのことです。

FVにおけるCTAは、下記のようなボタンやフォームになります。

• 無料相談申し込み
• 資料請求
• 会員登録の有無

ボタンと一緒に『アクションを起こすメリット』や『今すぐアクションを起こさないと損する理由』をマイクロコピーとして記載すると良いです。(参考：下記の図)

CTAに関しては、下記の記事で詳しく解説しています。

心理効果を使う

例えば、下記のような文言を追加すると、人気がある印象を与えられます。

• 5人に1人が使っています。
• 10万個完売から再入荷
• 1分に1つ売れています

これは、バンドワゴン効果というもので、『多数が評価しているものが良いものだと感じ、さらにその評価を増大させる心理効果』です。

他にも下記の記事で、様々な心理効果について紹介しています。

余計なアニメーションや演出を入れない

成果重視のサイトであれば、不必要なアニメーションや演出は入れない方が良いです。

運営側のやりたい事・見せたいことと、顧客の関心ごとは必ずしも一致しません。常に顧客目線で、顧客のためのサイトだという意識を持って、サイト制作はすべきです。

画像や動画を使用する

画像や動画は、一瞬でイメージを伝えられる効果があります。

テキストだけだと、圧迫感が出るので、画像 / 動画 / イラストなども使って、サービスなどの良さを伝えましょう。

下記は、弊社で運営している、小説の執筆ツールのサービスサイトです。ツールは、テキストで説明するよりも動画で見てもらった方がわかりやすいため、このようにしています。

顧客が知りたい情報を載せる

顧客目線で、どんな情報があると良いか考えることが重要です。

例えば、病院の場合、下記のような情報が知りたい方が多いでしょう。

• 予約・相談のための電話番号
• アクセス方法
• 診断時間

これらを意識すると、下記のような構成になります。

体調が悪い時に、欲しい情報に辿り着けないのは、とてもストレスに感じるでしょう。FVで知りたいことが全て分かればベストです。

FV(ファーストビュー)のデザインパターン

FVには、ある程度のデザインパターンがあります。

ここでは良く採用するデザインパターンを紹介します。

左にテキスト右に画像

参考：ホテル・旅館のお仕事探し｜もしも、この宿ではたらいたら

左にテキスト / 右に画像を置くと、画像と文字の両方が見やすいメリットがあります。多くのサイトで採用されているデザインパターンです。

左にテキスト右にイラスト

参考：攻撃遮断くん | 国内シェアNo.1のクラウド型WAF

左にテキスト / 右にイラストも多くのサイトで採用されています。上の例のように、そのサイト専用に制作したイラストもあれば、有料素材を使う場合もあります。

人の写真を使う

参考：司法書士 大阪｜天王寺のゼロア司法書士事務所

対面で対応するビジネスでよく人の写真が使われます。幼稚園やスクールなど、雰囲気がわかった方が良いサイトでは、複数人が写った写真を採用すると良いでしょう。

背景に画像を使う

参考：株式会社オフィスコーポレーション

背景全面に画像を使うパターンもよく採用されます。雰囲気が伝わる写真があれば有効ですが、デメリットとして下記の点があります。

• 写真によっては、文字が見にくくなる
• 見るデバイスによっては、文字と人の顔が被ったりしてしまう

画像の加工やテキストの装飾で、うまくカバーすると良いです。

背景に動画を使う

参考：株式会社ビーワークス | Beeworks Co., Ltd

各デバイスのスペックが上がったことにより、背景に動画を使うケースも出てきました。より多くの情報を伝えたいときには、特に良いでしょう。

管理画面のスクショを使う

参考：Resumee（レジュミー） | 大手・成長企業の求人データベース

SaaSやツールなどを提供している場合、右側に管理画面のスクショを置くケースは多いです。また、BtoBでは、FVにクライアント様のロゴを置くのも、良くやる方法です。

フォーム露出

参考：模写修行 - 実務レベルを体験するためのコーディング練習教材 -

弊社のサービスです。登録フォームをFVに置くことで、CVRが高くなります。BtoBサイトでも良く使われる手法です。

フォームを常に固定

参考：サプリメント・健康食品のOEM受託製造なら「サプリスタンダード」

フォームを常に右側に固定するパターンです。フォームの項目が少ない場合は、画面の下部に固定しているサイトもあります。PCで閲覧されることが多いサイトでは、特に有効です。

動画でサービスを伝える

参考：弊社サービス(公開前)

弊社のサービスです。小説の執筆ツールなので、テキストで説明するよりも、動画でイメージを掴んでもらうことを狙っています。ツール系では良くやる手法です。

ロゴを使う

参考：株式会社A.YANG | リユースを通じええやんを創造

コーポレートサイトでは、ロゴやロゴマークを使ったデザインをすることもあります。サービスサイトで、キャラクターを使う場合もあります。

テキスト中心

参考：MESON（メザン）｜空間コンピューティングカンパニー

テキスト中心のシンプルなパターンです。余計な要素を排除しているので、テキストを読んでもらえる可能性が高まるかもしれません。

検索フォームを置く

参考：海外ツアー・ホテルの予約はNEWT

検索が重要なサービスでは、FVに検索を置くことが多いです。サービスサイトで良く採用されるパターンです。

スライダーを使う

参考：ファッション通販ZOZOTOWN・セール開催中！

ECサイトや情報が多いサイトでは、FVをリンク付きのスライダーにして、より多くの情報を見せることがあります。コーポレートサイトや採用サイトでは、ギャラリー的に写真をスライドさせる場合もあります。

FV(ファーストビュー)のデザイン事例100選

参考になるファーストビューの事例を100個紹介します。

株式会社エヌ・シー・エヌ 採用サイト

※ この表は横スクロールできる場合があります。

安井鍼灸接骨院

※ この表は横スクロールできる場合があります。

シニアジョブ｜中高年の仕事探し（転職・派遣・パート）求人情報サイト

※ この表は横スクロールできる場合があります。

いろはにほけん株式会社｜静岡県三島市大場の保険代理店

※ この表は横スクロールできる場合があります。

大浦忠義 建築計画事務所｜建築設計から土地活用の相談まで幅広くサポートする設計事務所｜千葉県船橋市

※ この表は横スクロールできる場合があります。

高校生採用情報 | 王将フ－ドサ－ビス

※ この表は横スクロールできる場合があります。

BlueBank（ブルーバンク）｜法人向けあと払い・ビジネスカード

※ この表は横スクロールできる場合があります。

THE BODY PROFESSIONAL

※ この表は横スクロールできる場合があります。

訪問歯科｜訪問歯科を始めるならデンタルサポートにお任せ

※ この表は横スクロールできる場合があります。

富山県のおしゃれな注文住宅｜コネクトホーム

※ この表は横スクロールできる場合があります。

千趣会イイハナ - 【プリザーブドフラワー完成品仕入】店舗様、法人様専用

※ この表は横スクロールできる場合があります。

産婦人科専用の電子カルテ | f-kartet（エフ・カルテット）

※ この表は横スクロールできる場合があります。

山水亭｜味と美しさが認められて50年【高級おせちの通販】

※ この表は横スクロールできる場合があります。

自治体・民間企業様向け運送サービス｜株式会社悦興運

※ この表は横スクロールできる場合があります。

万建設興業YESS建築｜大型システム建築

※ この表は横スクロールできる場合があります。

東大阪市のゴミ収集、処理なら関西興業株式会社

※ この表は横スクロールできる場合があります。

幸南食糧株式会社｜おくさま印のおいしいお米

※ この表は横スクロールできる場合があります。

岐阜県でパッケージ・包装資材なら片桐株式会社

※ この表は横スクロールできる場合があります。

痩身専門セルライト対策｜幹細胞培養液のバイオエステBTB

※ この表は横スクロールできる場合があります。

夜 建築を学ぶ!第2本科 建築学科(夜)募集のご案内 | 修成建設専門学校

※ この表は横スクロールできる場合があります。

商談獲得などの営業支援はネオキャリア｜インサイドセールス・営業代行

※ この表は横スクロールできる場合があります。

【公式】サクルート | 1通300円〜のスカウト代行

※ この表は横スクロールできる場合があります。

記事作成代行Pro | SEO対策・SEOコンサル・コンテンツSEO代行業者

※ この表は横スクロールできる場合があります。

EDIMO | 企業の課題に向き合うためのコンテンツメーカー | 株式会社LIG

※ この表は横スクロールできる場合があります。

お墓のレンタルサービス大樹 | 石川県金沢市にあるお墓のサブスクサービス

※ この表は横スクロールできる場合があります。

ランチパイ 丨株式会社湖池屋

※ この表は横スクロールできる場合があります。

Goldwin Online Store - ゴールドウインオンラインストア

※ この表は横スクロールできる場合があります。

アーク ペーパードライバースクール｜名古屋・愛知・岐阜・三重の運転講習

※ この表は横スクロールできる場合があります。

大阪の遺品整理・生前整理・買取ならエンディール｜遺品整理士在籍の専門業者

※ この表は横スクロールできる場合があります。

自費リハビリ施設 - アールリハビリステーション｜社会医療法人 愛仁会

※ この表は横スクロールできる場合があります。

【公式】uniam（ユニアム） - 獣医師・栄養士監修ねこ専門のフレッシュフード

※ この表は横スクロールできる場合があります。

やりたいこと探しコーチング「自己理解プログラム」- 自己理解プログラム

※ この表は横スクロールできる場合があります。

NO TOWN（ノータウン）

※ この表は横スクロールできる場合があります。

ITで、こまったを、よかったに。- ビットスター株式会社

※ この表は横スクロールできる場合があります。

イラスト・漫画(マンガ)教室 egaco(エガコ)

※ この表は横スクロールできる場合があります。

ラボ出版｜CDで聞く英語絵本

※ この表は横スクロールできる場合があります。

BtoB・企業間後払い決済/請求代行サービス「NP掛け払い」

※ この表は横スクロールできる場合があります。

高機能クラウドPOSレジ「スマレジ」 - iPad/iPhoneアプリを使った無料で始められるPOSレジ | クラウドPOSレジならスマレジ

※ この表は横スクロールできる場合があります。

株式会社セガ

※ この表は横スクロールできる場合があります。

Payme（ペイミー）｜給与前払いサービス

※ この表は横スクロールできる場合があります。

OCT 大阪工業技術専門学校 | 一級建築士合格者 全国トップクラス！

※ この表は横スクロールできる場合があります。

【新卒採用担当者向け】OfferBox | ダイレクトリクルーティングサービス

※ この表は横スクロールできる場合があります。

キャリア支援｜Agent Kikkake

※ この表は横スクロールできる場合があります。

退職代行サービスを頼むなら弁護士+労組運営のローキがおすすめ！24時間無料相談実施中。

※ この表は横スクロールできる場合があります。

外資就活ドットコム - 掲載とスカウトで優秀な新卒学生の採用を実現

※ この表は横スクロールできる場合があります。

NISAで資産形成を始めるなら |楽天証券

※ この表は横スクロールできる場合があります。

洗濯のアライさん | 住友商事と白洋舍の洗濯代行サービス

※ この表は横スクロールできる場合があります。

練馬区上石神井の胃カメラ、大腸カメラなら、かわい内科 胃と大腸内視鏡 クリニック｜内科、健康診断、発熱外来

※ この表は横スクロールできる場合があります。

【公式】MOBILE TOILET／モバイルトイレ − 行きたい、のそばにトイレが行く

※ この表は横スクロールできる場合があります。

オンラインでマンションを売るなら、ゴジュパー｜時間も仲介手数料も50％

※ この表は横スクロールできる場合があります。

クラウド型RPA「AUTORO（オートロ）」 | AUTORO

※ この表は横スクロールできる場合があります。

保育園向け紙おむつのサブスク【おむつカンパニー】

※ この表は横スクロールできる場合があります。

invox受取請求書 – 請求書の受取から入力・支払・計上業務を自動化するインボイス制度対応の請求書受領システム

※ この表は横スクロールできる場合があります。

石川隆規税理士事務所｜相続専門｜東京・中野区

※ この表は横スクロールできる場合があります。

昨日までの売上を今日使えるVISAビジネスカード「Cycle byGMO」｜決済代行ならGMOイプシロン株式会社

※ この表は横スクロールできる場合があります。

尾石動物病院｜大分市

※ この表は横スクロールできる場合があります。

宅トラ｜宅配型トランクルームで何もせずに速攻！お部屋スッキリ！

※ この表は横スクロールできる場合があります。

LUUP（ループ） | 電動キックボードシェア/シェアサイクルアプリ

※ この表は横スクロールできる場合があります。

AQUA TXシリーズ公式サイト

※ この表は横スクロールできる場合があります。

「成果の最大化」と「低価格」を両立するSNSマーケティングツールCast Me!

※ この表は横スクロールできる場合があります。

高野山でペットと眠る納骨堂 宝珠の間｜高野山 遍照尊院

※ この表は横スクロールできる場合があります。

DGFT請求書カード払い｜借り入れ無しで請求書を最大60日間先延ばし

※ この表は横スクロールできる場合があります。

医師限定手術教育プラットフォーム | 株式会社OPExPARK

※ この表は横スクロールできる場合があります。

fondesk ＜フォンデスク＞ - 月1万円から使えるSlack、Chatworkに対応した電話代行サービス

※ この表は横スクロールできる場合があります。

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

※ この表は横スクロールできる場合があります。

民泊清掃代行のM’s B（エムズビー）

※ この表は横スクロールできる場合があります。

マタニティウェディング│アニヴェルセル

※ この表は横スクロールできる場合があります。

ドライバーの仕事探しなら『GOジョブ』| GOジョブ

※ この表は横スクロールできる場合があります。

関東害獣駆除相談センター｜株式会社ベアーズホーム

※ この表は横スクロールできる場合があります。

メンズひげ脱毛おおば｜所沢店

※ この表は横スクロールできる場合があります。

【公式】王子のパーソナルトレーニングジム | 【AND EIGHT（アンドエイト）】

※ この表は横スクロールできる場合があります。

AGAライズクリニック

※ この表は横スクロールできる場合があります。

BEST SWING KAMATA 京急蒲田駅 徒歩4分 / JR蒲田駅 徒歩11分

※ この表は横スクロールできる場合があります。

パーソナルレッスン、女性限定クラス多数のK-1ジム目黒｜K-1 GYM MEGURO

※ この表は横スクロールできる場合があります。

トイレの故障や修理に緊急駆けつけ ｜ 水道の救急119番

※ この表は横スクロールできる場合があります。

グラムショップ┃いらないもの、壊れているもの捨てるならお金にしませんか？

※ この表は横スクロールできる場合があります。

sb.684.jp/isagol_aoringo

※ この表は横スクロールできる場合があります。

【ALPROS】英語習得へのショートカットを実現する短期集中型英語スクール

※ この表は横スクロールできる場合があります。

せきなび～在席管理・フリーアドレス管理ツール - Humap アスマークのHRサービス

※ この表は横スクロールできる場合があります。

薬局経営者から選ばれている信頼と実績の「医薬品ネットワーク」｜メディカルシステムネットワーク

※ この表は横スクロールできる場合があります。

戦略型ランディングページ制作｜株式会社ラヴィゴット

※ この表は横スクロールできる場合があります。

清掃ロボット｜アイリスオーヤマ

※ この表は横スクロールできる場合があります。

【Web広告】代理店の乗り換えは成果を出し続けるメディアハウスホールディングスへ｜メディアハウスホールディングス

※ この表は横スクロールできる場合があります。

通販EC企業向け 物流発送代行サービス | ベルーナBiz

※ この表は横スクロールできる場合があります。

Nest診療

※ この表は横スクロールできる場合があります。

ケアリッツの採用-介護事業- | 株式会社ケアリッツ・アンド・パートナーズ

※ この表は横スクロールできる場合があります。

記事制作の外注なら「成果につながるSEO記事作成代行」のウィルゲートにお任せください

※ この表は横スクロールできる場合があります。

山善の一人暮らしに『ちょうど良い』新生活セット2023｜株式会社山善

※ この表は横スクロールできる場合があります。

夏期講習について｜KEC個別指導メビウス

※ この表は横スクロールできる場合があります。

【初心者歓迎】東京都内で通い放題の音楽教室×バンドサークルなら｜MUZYX［ミュージックス］

※ この表は横スクロールできる場合があります。

地球であそぼう｜横浜駅5分！ダイビングライセンスを横浜で取得｜レーブ

※ この表は横スクロールできる場合があります。

弁護士保険12|事業者のミカタ

※ この表は横スクロールできる場合があります。

IT/Webエンジニアの転職・求人サイトFindy – GitHubからスキル偏差値を算出

※ この表は横スクロールできる場合があります。

肥後銀行 WEBカードローン

※ この表は横スクロールできる場合があります。

YOUTRUST | 日本のキャリアSNS

※ この表は横スクロールできる場合があります。

昼職への転職 | 大阪の人材紹介・転職支援 キャリアタッグ

※ この表は横スクロールできる場合があります。

クラウドローン - お金を借りたい個人と低金利の銀行ローンを最適マッチング

※ この表は横スクロールできる場合があります。

名古屋市にある高山歯科室のインプラント治療専門サイト | 名古屋栄・高山歯科室｜矯正、インプラント、歯周病

※ この表は横スクロールできる場合があります。

退職代行サービス「EXIT」｜明日から会社に行かなくてOK

※ この表は横スクロールできる場合があります。

シミエース｜クラシエ

※ この表は横スクロールできる場合があります。

サイト改善やリニューアルならLIBERAへ

このようなお悩みはありませんか？

• サイトが事業に貢献していない
• webマーケティングに力を入れていきたい
• サイトの改善点や活用方法を相談したい

弊社は、事業に貢献するサイト制作を得意としています。

見た目が良いサイトを作るだけでなく、マーケティングやサイト活用方法までアドバイスさせていただきます。

サイトに関するお悩みがある方は、お気軽に無料相談をお申し込みください。

弊社の制作実績(公開できる一部)

クリップボードにコピーしました