ファーストビューとは？コーポレートサイトの作り方とキービジュアル・動画の使い方

コーポレートサイトのトップページを作る・見直すときに、最初の画面に何を載せるかは最も悩むところです。写真にするか動画にするか、キャッチコピーは何にするか、お知らせやバナーも入れたほうがよいのか。決め手がないまま「印象的なビジュアル」を優先すると、見た目は良くても「何の会社か分からない」画面になりがちです。

コーポレートサイトのファーストビューは、優先する閲覧者に向けて「何の会社で、自分にどう関係があるか」を1つのメッセージで伝え、次に見るべきページへの入口を用意する場所です。

この記事では、ファーストビューの意味と重要性、メインビジュアル・キービジュアルとの違い、載せる要素、表現のパターンと選び方、作り方の手順、キービジュアルの作り方、背景に動画を使うときの注意点、当社の制作事例、公開後の改善方法までを解説します。

ファーストビューとは

ファーストビューとは、Webページを開いたときに、スクロールせずに最初に表示される範囲のことです。

トップページ全体ではなく、画面に収まる上部の部分だけを指します。表示される範囲は画面の大きさで変わり、パソコンでは横長、スマートフォンでは縦長の範囲になります。そのため「何ピクセルまで」と固定で決めるのではなく、自社サイトのアクセス解析で多く使われている画面サイズを確認し、その画面で伝えたいことが最初に収まっているかを確かめます。

ファーストビューが重要な理由

ファーストビューは、訪れた人が「このまま読み進めるか、前のページに戻るか」を判断する場所です。検索結果や広告、名刺に書かれたURLから訪れた人は、最初の画面で「探している会社か」「自分に関係がありそうか」を確かめます。ここで伝わらなければ、その下にどれだけ良い情報を載せても読まれません。とくにトップページは、取引先、求職者、金融機関など目的の違う人が最初に訪れるページなので、誰に何を伝えるかを決めておく必要があります。

ファーストビュー・メインビジュアル・キービジュアルの違い

3つは似た言葉ですが、指しているものが違います。

Web制作の現場では、メインビジュアルとキービジュアルをほぼ同じ意味で使うことも多くあります。言葉の違いを覚えるより、「サイトの中だけで使う画像か、会社や商品の象徴としてほかの媒体でも使うものか」で考えると整理しやすくなります。

コーポレートサイトのファーストビューに載せる5つの要素

コーポレートサイトのファーストビューには、ロゴ、キャッチコピー、メインビジュアル、メニュー、次の行動への入口の5つを、優先順位をつけて配置します。

このほか、スクロールできることを示す合図（矢印や「SCROLL」の表示）、重要なお知らせへのリンクを置くこともあります。要素を増やすほど1つずつの印象は弱くなるため、まず上の5つで足りるかを考えます。

ファーストビューの表現パターンと選び方

ファーストビューの表現は、キャッチコピー、写真、イラスト、アニメーション、動画、スライドショーの6つが代表的で、伝えたいことと用意できる素材から選びます。

どのパターンでも、キャッチコピーとビジュアルの内容がそろっていることが前提です。「技術力」をうたうなら工場や製品の写真、「人を大切にする会社」なら社員の写真というように、言葉を裏づけるビジュアルを選びます。

ファーストビューの作り方：5つの手順

ファーストビューは、デザインから始めるのではなく、閲覧者とゴールを決め、伝えるメッセージを1つに絞ってから、ビジュアルと配置を決める順で作ります。

1. 優先する閲覧者を決める：見込み客、求職者、投資家などのうち、トップページで最も重視する人を決めます。売上を伸ばしたいなら見込み客、採用を強化したいなら求職者というように、サイトの目的から選びます。
2. ファーストビューのゴールを決める：最初の画面を見た人に、次に何をしてほしいかを決めます。たとえば「事業内容のページへ進む」「導入事例を見る」「問い合わせる」などです。
3. 伝えるメッセージを1つに絞る：伝えたいことが複数あっても、ファーストビューで伝えるのは1つにし、残りは2画面目以降で順に伝えます。キャッチコピーの考え方はホームページのキャッチコピーの作成ポイントで解説しています。
4. メッセージを裏づけるビジュアルと色・書体を決める：業種と閲覧者の年齢層に合う配色と書体を選びます。たとえば、信頼感を出したいなら青系の色と落ち着いた書体、親しみやすさを出したいなら暖色や丸みのある書体、といった傾向があります。
5. パソコンとスマートフォンの両方で確認する：スマートフォンでは横長の写真が縦に切り取られ、コピーが写真に重なって読みにくくなることがあります。実機で、コピーが読めるか、ボタンが押しやすいかを確かめます。

例：閲覧者とゴールの書き出し方

次のように書き出してからデザインに入ると、ビジュアルの方向性がぶれにくくなります。

• 例1（部品加工の製造業）：閲覧者は、試作や小ロットの加工先を探している設計・購買の担当者。伝えるのは「難しい加工を短い納期で対応できること」。ゴールは、対応できる加工の一覧と事例を見てもらうこと
• 例2（介護事業所の採用強化）：閲覧者は、地域で転職先を探している介護職の経験者。伝えるのは「働く人を大切にしている職場であること」。ゴールは、採用情報と職員インタビューを読んでもらうこと

キービジュアルの作り方：「見て、覚えてもらう」ために

キービジュアルは、一度見た人に「あの会社だ」と思い出してもらうためのもので、目的を決め、ブランドの色と形を盛り込み、情報量を絞り、サイト以外の媒体でも使える形にすることが作り方の基本です。

見込み客は、一度サイトを見ただけで問い合わせるとは限りません。展示会で名刺を交換し、後日サイトを見て、資料を読み、ほかの会社と比べてから問い合わせる、というように何度か接点を重ねます。そのたびに同じ色・同じビジュアルに出会うと、会社を覚えてもらいやすくなり、安心感も積み重なります。

• 目的を決める：会社を覚えてもらうのか、新しいサービスを知ってもらうのか、採用のキャンペーンなのか。目的によって主役にするものが変わります
• ブランドカラーやロゴの形を盛り込む：色や形に共通点があると、媒体が変わっても同じ会社だと分かります
• 一目で分かる情報量にする：細かい説明は入れず、主役を1つにします
• ほかの媒体で使えるかを確かめる：会社案内、名刺、展示会のパネル、SNSのアイコンやヘッダー画像、採用説明会の資料などに展開できる構図と解像度で用意します

ファーストビューの背景に動画を使う場合のポイント

ファーストビューの背景に動画を使うと、現場の雰囲気や世界観を短時間で伝えられますが、表示速度・音・動きへの配慮を欠くと逆効果になるため、「短く、軽く、音なしで伝わる」動画にすることが条件です。

背景動画のメリットとデメリット

背景動画を使うかどうかは、次のメリットとデメリットを比べて判断します。

• メリット：静止画より目を引く。雰囲気・世界観・規模感を短時間で伝えられる。製造工程や働く様子など、文章では長くなる内容を見せられる
• デメリット：容量が大きく、ページの表示が遅くなることがある。スマートフォンでは通信量の負担になる。動きが苦手な人への配慮が必要。ブランドと合わない映像は逆効果になる。撮影・編集の費用がかかる

背景動画を用意するときのポイント

• 短くまとめて繰り返し再生する：背景動画は鑑賞してもらうコンテンツではなく、デザインの一部です。数十秒以内の短い映像を繰り返す形が一般的で、長く見せたい内容は別のページや動画コンテンツとして用意します
• 音声なしで伝わる内容にする：多くのブラウザは、音声付きの動画の自動再生を制限しています。自動再生は音声なしで行い、音を聞かせたい場合はオン・オフのボタンを見やすい位置に置きます
• 容量を抑える：再生時間を短くする、解像度を上げすぎない、適切に圧縮する、の3つで軽くします。ファイル形式は、多くのブラウザで再生できるMP4（H.264）を基本にし、より軽くできるWebMを併用する方法もあります
• 再生前に表示する静止画を用意する：読み込み中や動画を再生できない環境でも、代わりの画像（ポスター画像）でメッセージが伝わるようにします
• 一時停止できるようにする：自動で動き続ける映像には、止めるためのボタンを用意します。ウェブアクセシビリティのガイドライン（WCAG）でも、自動で始まり5秒より長く続く動きには、一時停止・停止・非表示のいずれかの手段を用意することを求めています
• スマートフォンでの扱いを決める：通信量や表示速度を考え、スマートフォンでは静止画に切り替える選択肢もあります
• 素材の権利を確認する：素材サイトの動画を使う場合は、商用利用の可否を確認します。ほかのサイトでも使われている映像は「どこかで見た」印象になるため、企業の顔となるトップページには、自社で撮影した映像が向いています

動画を入れたあとは、表示速度を計測して、ページの表示が遅くなっていないかを確認します。表示速度の基準と改善方法はWebサイトの表示速度の基準と改善項目で解説しています。

当社の制作事例に見るファーストビューの考え方

当社が制作したサイトでは、業種と優先する閲覧者によって、ファーストビューで最初に伝えることを変えています（社名は掲載許諾の方針により非公開です）。

どの事例も、ビジュアルの派手さではなく、「誰に何を最初に伝えるか」から決めています。業種ごとの事例は制作実績でご覧いただけます。

ファーストビューの公開前チェックリスト

公開前には、優先する閲覧者の立場に立って、次の項目を確認します。

• 初めて見た人が、何の会社かを最初の画面だけで説明できるか
• キャッチコピーに、業種や提供している価値が分かる言葉が入っているか
• ビジュアルが、キャッチコピーの内容を裏づけているか
• 伝えているメッセージが1つに絞られているか
• 取引先・求職者など、それぞれが探す入口がメニューから見つかるか
• スマートフォンで、コピーが写真に埋もれずに読めるか。ボタンを押しやすいか
• 動画や大きな画像で、表示を待たせていないか
• 動く要素は止められるか。文字と背景のコントラストは十分か

公開後にファーストビューを改善する方法

ファーストビューは公開して終わりではなく、アクセス解析で次のページへの移動やクリックの状況を見て、仮説を立てて直すことで成果に近づけられます。

1. 数字で現状を確認する：GA4で、トップページから次のページへ進んだ割合、ページの下までスクロールされた割合、ボタンのクリック数などを確認します
2. 仮説を立てる：「コピーで業種が伝わっていない」「ボタンが写真に埋もれて目立たない」など、数字の理由を考えます
3. 1か所ずつ変えて比べる：コピーとビジュアルを同時に変えると、どちらが効いたのか分かりません。変える箇所を絞り、可能であればABテストで比べます
4. 結果を記録して次に生かす：変更した日と内容を記録し、前後の数字を同じ指標で比べます

ABテストの進め方はABテストとは？やり方と目的で解説しています。

よくあるご質問

ファーストビューについて、よくいただくご質問にお答えします。

ファーストビューの高さやサイズに決まりはありますか？

決まった数値はありません。表示される範囲は画面の大きさやブラウザによって変わるため、自社サイトのアクセス解析で多く使われている画面サイズを確認し、その画面で伝えたいことが最初に収まっているかを確かめます。パソコンとスマートフォンは、それぞれ別に確認することが大切です。

スライドショーは使わないほうがよいですか？

使ってはいけないわけではありませんが、自動で切り替わる画像は、2枚目以降が見られる前にスクロールされることもあり、伝えたいことが分散しがちです。複数の事業を同じ重さで見せたい場合などに限り、枚数を少なくし、1枚目に最も伝えたいメッセージを置きます。切り替えを止められるようにしておくと親切です。

ファーストビューにお知らせやバナーを入れるべきですか？

お知らせやキャンペーンのバナーを並べると、最初の画面で伝えるメッセージが弱くなります。休業日などの重要なお知らせは細い帯で短く表示し、通常のお知らせは2画面目以降に置くのが一般的です。

背景動画は表示速度に影響しますか？

影響します。動画は画像より容量が大きくなりやすく、対策をしないとページ全体の表示が遅くなることがあります。短い映像にする、圧縮する、再生前の静止画を用意する、スマートフォンでは静止画に切り替える、といった対策をとり、公開前に表示速度を計測して確認します。

キャッチコピーは自社で考えるべきですか？

会社の考えや強みを一番知っているのは自社ですが、それを短い言葉にするのは意外に難しいものです。制作会社に依頼する場合も、ヒアリングで「お客様に選ばれている理由」「社長がよく口にする言葉」などを伝えると、自社らしいコピーになりやすくなります。当社では、ヒアリングの内容をもとにキャッチコピーを作り、ブランディング設計書として合意してからデザインに入ります。

まとめ

ファーストビューは、訪れた人が読み進めるかどうかを決める最初の画面で、「誰に何を伝えるか」を決めてからビジュアルと配置を選ぶことで、伝わるトップページになります。

• ファーストビューは、スクロールせずに見える最初の範囲。メインビジュアルはその中心の画像・動画、キービジュアルはほかの媒体でも使う会社や商品の象徴
• 載せるのはロゴ、キャッチコピー、メインビジュアル、メニュー、次の行動への入口の5つ。メッセージは1つに絞る
• 表現のパターンは、伝えたいことと用意できる素材から選ぶ
• 背景動画は、短く、軽く、音なしで伝わり、一時停止できるように作る
• 公開後はアクセス解析で確かめ、1か所ずつ改善する

当社のコーポレートサイト制作では、ヒアリングで「誰に何を最初に伝えるか」を言葉にし、キャッチコピーとビジュアルを同じ設計書で決めてからファーストビューを制作します。今のトップページが伝わっているか気になる場合も、お気軽にご相談ください。

関連記事：コーポレートサイトのデザインの決め方／企業ホームページに必要なイメージ素材／Webブランディングとは