悩めるWEB担当者様のための最新ノウハウをお届け

ファーストビューって重要!デザインのポイントとパターン、サイズを教えます!

hands-information-magazine-6053

ファーストビューとは

ファーストビューとは、ユーザーがWebページにアクセスした時に最初に表示される部分スクロールせずに画面に表示される部分のことです。
Above the fold
英語だと「Above the fold」と言うそうです。新聞の折り畳み線(fold)より上が最初に目に入る範囲ということから来ています。
今回はファーストビューについて紹介します!

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

第一印象は3秒で決まるとよく言われますが、ユーザーはWebページにアクセスして3秒

  • ターゲットは誰か
  • 読み進めるメリットはあるか
  • 利益(ベネフィット)は何か

を判断すると言われています。
株式会社LIGのブログによると
ファーストビューを見てページを離脱してしまうユーザーはコーポレートサイトだと40%~60%LPだと70%~90%と言われています。
そのため、ファーストビューが重要なのです。

デザインのポイント

では、制作する際はどんなことに気を付ければ良いでしょうか?

要素を明確に

ファーストビューで伝える要素をリストアップしましょう。

  • ターゲットは誰なのか
  • メッセージは何か
  • ユーザーが欲しい情報は何か(商品名やサービス名など)

方向性を決める

ターゲットが求めるもの」と「ターゲットに与えるもの」に合うキーワードやイメージを抜き出してどんなデザインにするか方向性を決めましょう。

ヘッドコピー

ヘッドコピーとは最初に見せる文章のことです。
以下のポイントに気を付けましょう。

  • ターゲットは自分であると認識させる。
  • 検索キーワードを入れる。
  • ベネフィットを入れる。

1つ目はユーザーが抱えている悩みや疑問などを刺激することで認識させられます。
2つ目はユーザーの「求めている情報があるのか?」という不安を回避するためです。
3つ目は「読み進めるメリットがある」と思わせるためです。

メインビジュアル

ビジュアルは文章よりも短時間で多くの情報を伝えることができます。
ヘッドコピーを反映させた、ベネフィットが伝わるものにしましょう。
この時「ターゲットが求めるもの」と「ターゲットに与えるもの」の両方のイメージから外れないように気を付けましょう。

強みを入れる

ヘッドコピーやメインビジュアルで訴求した内容の補完や裏付けとなる強みを入れましょう。
その時に「第1位」や「90%」など数字による権威付けを王冠やメダルで目立たせると効果的です。
権威付けの例

導線

ユーザーにWebページを読み進めてもらったり、商品を購入して貰うために導線を入れましょう。

読み進めて欲しい場合は、スクロールしたくなるようにファーストビュー内に

  • スクロールするように指示する矢印など
  • コンテンツの一部

を入れましょう。
海遊館の Webサイトがそうなってます。
kaiyukan
スライドショーの中にマウスの図形、と「Scroll」、下向きの矢印のような図形があります。
また、その下に展示紹介の一部が見えるため「何があるのだろう?」と思わせますね。

商品を購入して欲しい場合は、申し込みボタン(CTA(Call To Action 行動喚起)ボタン)を

  • 目立つように
  • クリックできると思わせるように
  • 1つに絞って

入れると良いでしょう。
CELFのLPがそうなってます。
CELF
白と黄緑の中でボタンのみ黄色になっています。黒い影があるので立体感が出て「押せそうだな」と思わせています。

デザインのパターン

ファーストビューのデザインには様々な種類があります。
「何で見せるか」にスポットを当て紹介して行きます。

写真

どんなベネフィットが得られるのかが伝わりやすいです。
ヘーベルハウス アウトドアリビングフェア
hebel_house

イラスト

オリジナリティを出すことができます。
TOKYO MUSIC ODYSSEY
TOKYO MUSIC ODYSSEY 2018
WEBサイト保守業務支援サービス トコトン
tokoton

文字

画像が多く使われている中、文字のみだとインパクトがあります。
NORTH STREET Creative Studio
NORTH STREET • A Creative Studio

動画

動いているため目を引きます。
また断片的な写真と違い、イメージを明確に伝えることができます。
Abema TV リクルートサイト

SABRINA ストッキングLP

アニメーション

イラストと同様にオリジナリティがあり、さらに動いているため目を引きます。
TOKYO ART FLOW

音楽著作権エージェント リトルスター

スライドショー

たくさんのコンテンツを見せられます。記事や商品を扱っているサイトに向いています。
スノーピーク


きもの鈴乃屋フォーマルセレクション

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

現在はWebページを見るのにパソコンやスマホなど様々な画面サイズから見るのでファーストビューのサイズも様々です。
ではどれくらいのサイズで作れば良いでしょうか?
どれくらいの画面サイズが使われているかを知るにはstatcounterのScreen Resolution Statsを見ます。
こちらがその結果です。
StatCounter-resolution-JP-monthly-201704-201804-bar
パソコンは幅1366~1920px・高さ768~1080px
スマホは幅360~375px・高さ640~667px
が主流の画面サイズです。

パソコンからは幅1000px・高さ550px(画面全体でWebページを見る人はいないので少し小さくしています。)
スマホからは幅360px・高さ600px
が良いでしょう。
ただしスマホだと高解像度のディスプレイがあるので2倍、3倍のサイズの画像が必要な場合もあります。

まとめ

ファーストビューはユーザーがそのWebページを読み進めるか判断する重要なものです。
ターゲットが何を求めているか、ターゲットにどんなことを伝えたいかよく考えて、3秒で心を掴むファーストビューを制作しましょう!

DIではWebサイトやLPなどを制作しております。
新規制作やリニューアルをご検討中の方、お気兼ねなくお問い合わせください!

関連記事