thumbnail

ファーストビュー は最初の6秒で決まる?【実践LP制作】

ファーストビュー とは?

ページに訪れた際に、最初に画面に表示される部分をファースト ビューと呼びます。ファーストビューの中には、ロゴ、問合せボタン、キャッチコピー、サブキャッチコピー、商品画像やサービスイメージ画像、背景、申し込みボタンなどの要素が主に入ります。しかし、詰め込みすぎるとごちゃごちゃして伝えたいことも伝わりませんし、反対に少なすぎても「何のページ?」となってしまいます。

最初の6秒

とある調査会社の結果によると、そのホームページを見るか見ないかの判断は、ページが表示されてから平均約6秒でされているという結果があります。さらに他の調査結果では3秒という数字もあります。残念ながら訪問者はじっくりページを読んではくれません。この3秒ないし6秒の中で、いかに興味を持ってもらうか、いかに読みたいと思わせるかが勝負となります。では、ランディングページにおける最適なファーストビューとは一体どんなものかを見て行きましょう!

詳しく見たいと思わせるファーストビュー

最適なファーストビューに必要な要素とは?
・キャッチコピー
・サブキャッチコピー
・商品やサービスの画像
・背景
・色相
・誘導

キャッチコピーとサブキャッチコピー

6秒という短い時間の為、長文でだらだらとしたキャッチコピーは避けたいものです。例えば「○○なあなたにおすすめ!○○成分由来のオイルを贅沢に使った大人の女性の為の化粧水『○○』」長いゆえに全部読まないと何の商品か分かりません。たくさんのことを伝えたいという気持ちは分かりますが、もっと短くしなくては6秒でファーストビューを見て頂けません。

そこで、他の要素と組み合わせる前提でキャッチコピーを考えてみます。他の要素との組み合わせとは、上の例で言えば「○○成分由来のオイルを・・・」「○○なあなたにおすすめ」などをサブキャッチコピーに入れます。あと「化粧水」とわざわざ言わず、商品画像を同じエリアに配置する事で、「化粧水の話なんだ」と視覚的に認識させ、短時間で多くの情報を伝えられます。

キャッチコピー:  「贅沢な大人の女性のための化粧水」
サブキャッチコピー: 〜○○なあなたにおすすめ!話題の○○成分由来オイル配合!〜

すくなくても3秒でキャッチコピーくらいは商品画像と共に見てもらえると思います。

キャッチコピーの作り方はこちらの記事をご覧下さい。
【ランディングページ】 キャッチコピーの作り方

商品やサービス画像

次に重要なのは画像です。これも短い時間の中で理解してもらう為に、分かりやすい画像にしましょう!なんだか分からないごちゃごちゃした画像は逆効果です。商品であれば実物(実寸に近い写真)、サービスであればWeb上のサービスなのか、リアルな店舗などのサービスなのかなどが分かる利用者の様子や利用イメージを採用します。

どうしても文章より画像の方がインパクトもあり伝えやすいが故に、多様してしまいます。画像は視点を奪う効果が文章よりも強い為、注意が散漫になりがちです。出来る限りシンプルに1〜2画像にしましょう。

また、画質には気をつけたいところです。インパクトを求め画面いっぱいの大きな画像を配置すると、もともとの画質の粗が出てしまい、滲んでしまいます。

sampleimg

sampleimg

お分かりいただけましたか・・・?上のデフォルトの画像を大きくすると、真ん中の白のアイコンが滲んでいます。これは小さい画像を大きく表示することで滲みが生じます。こうならない為にもファーストビューに使用する画像は高解像度が良いです。解像度について説明してしまうと、終わらなくなってしまうので、別の機会に解説出来ればと思います。

ここでは「画像の滲みはNG」とだけ覚えておきましょう!

背景と色相

こんな背景は見たくない・・・

「背景がビビットカラーで目がチカチカする」
「はっきりとした風景写真を背景でなんかごちゃごちゃ」
「背景にも文字入れて、もうぐちゃぐちゃ」

なんてことになってませんか?

出来る限り背景はシンプルがオススメです。でも、どうしてもごちゃごちゃしている写真を背景に使いたい場合は、「ぼかし」を入れてあげる事で、あまり気にならなくなります。

bokashi_no

bokashi_no

「キャッチコピー」の文字、どちらが読みやすいですか?また、明るさとコントラストも変えてあげる事で、さらに見やすく邪魔にならない背景を作る事が出来ます。

bokashi_ari_light

一番見てもらいたいものは何なのか?それを考えれば背景の写真が多少ぼやけてようが、何の写真か分からなかろうがかまわないと個人的には考えます。それでも、邪魔する様な場合には、背景を無理に使うのは止めましょう。背景は他の要素より色を薄くしたり、ぼかしして輪郭を消したり、工夫する事でキャッチコピーや画像を引き立てます!

最近では動画を背景にするページも増えてきています。これも画像同様に色合いを単一色にしたり、薄くしたり輪郭をぼやかしたりし、他の要素と喧嘩しないように注意します。動画を使う場合はさらに短いキャッチコピーやシンプルな画像を配置しましょう。

ファーストビューに必要「誘導」とは?

最後は誘導です。ファーストビューにおける必要な誘導は2つあります。1はこのページの目的を伝える役割です。「今すぐ購入」というボタンを設置する事で、「ここのサイトで買えるんだ」と、購入出来る事を伝える事が出来ます。他にも「今すぐ問合せる」も、「いきなり購入するんじゃないのか」「問い合わせなら気楽」などと、身構えた姿勢を軟化させる効果も期待できます。つまり、最終目的は〜です!というのを、ボタンで語る事がポイントです。

また、最後まで見た人の大半は、最初にみた内容を忘れてしまい、トップに戻る傾向があります。その戻ってきた所で、ボタンがある事で、購買・成約になる効果もあります。

2つめは、次のコーナーへの誘導です。ファーストビューに誘導を入れる事で、次のコーナーへ興味を持って頂ける場合があります。誘導と言っても露骨に「〜はこちら!」という訳ではなく、下にもコンテンツがある事が分かれば十分です。

reiauto1 reiauto2

どちらの方が続きがあると認識しやすいか?(すこし露骨過ぎますが・・・)その、ちらっと見えている内容に興味を持てば離脱せずスクロールして頂けると思います。全画面でインパクトのあるファーストビューもいいですが、下部を見せる事での読了率の方が価値があるかと思います。

これらを踏まえたサンプルファーストビュー

sample_fastview

デザインセンスは置いておいて・・・おさらいしていきます。

キャッチコピーは長文ではなく、シンプルに。サブキャッチコピーで情報を補います。数字が入ると尚可!そして商品画像は綺麗な画像を使います。背景は同一系のイメージに合う画像を使用します。また、「注文出来るサイトだよ」と言わんばかりのボタンを配置、ページ下部には気になる情報の「見出し」でスクロール誘導。と、こんな感じになります。

絶対というルールはありませんが、ポイントをおさえる事で、整理されたファーストビューになるかと思いますので、是非参考にしてみて下さい。

まとめ

あれもこれも・・・と詰め込みたくなる場合は、おそらくペルソナやターゲットが明確になっていない事も要因の1つかもしれません。気持ちは分かりますが、しっかりとターゲットを絞る事で、ファーストビューに記載すべき情報も絞れてくると思います。

また、ファーストビューの成果を判断するには、Googleアナリティクスのページ滞在時間をチェックしましょう。これが数十秒と短い場合は、ほとんど下まで見られていない可能性があります。アナリティクスの見方などはまた別の機会に!

 

【PR】少しだけ宣伝させて下さいm(_ _)m
ランディングページの制作ならエスコートLPにお任せ下さい。
詳しくはこちら→https://escort.ecrea.co.jp
運営会社→https://ecrea.co.jp/

少しでも「なるほど」と思ったらシェアお願いします。

Share on facebook
Share on twitter
Share on google
Share on pocket
Share on pinterest

この記事を書いた人

加藤 誠

加藤 誠

マーケティング会社に約10年、Webメディア運営会社に約5年。大手企業から個人事業主まで、多岐にわたる業界・業種のマーケティングの実績を持つ。データを根拠としたマーケティングを最も得意とする。それらの経験から得たノウハウを、当サービス「Escort」に注ぎ、より多くの企業・事業主様のマーケティング活動の支援を目指している。また、自称ノンプログラミングマーケッターとして「Elementor」というWordPressプラグインの使い方を紹介するブログ「Elementor Fan」の運営も行っている。

おすすめの記事

カテゴリー

タグ