ファーストビューで売上の9割は決まる!設計に重要な4ポイント

Pocket

fv01

ファーストビューは辞書の通り「閲覧者の画面にWebページを表示した時に、最初に表示される領域のこと」であるが、あなたが興味があることは、『そのファーストビューでどれくらい多くのユーザーの心をキャッチできるか』ということではないだろうか?

ファーストビューのサイズはもちろん気になるところだろうが、何を入れるかによって、サイトに訪れるユーザーの反応が大きく変わるので、気にしたいのは具体的な内容だ。

基本的にはPCサイトもスマホサイトもファーストビューに入れる内容は一緒だと考えているが、私はスマホサイトのコンサルをしているので、少しスマホ寄りであるが、効果の実感出来るファーストビューについて書いている。

事例を踏まえながら解説をしているので、ぜひあなたのサイトのファーストビューと比べながら参考になる部分があれば実践をしていただきたい。

 

-目次-
1:パソコンとスマホのファーストビューのサイズ
2:ファーストビュー設計で必要な4つの考え方
3:ユーザーの目の動きの理解
4:ファーストビューの5つの事例
5:まとめ

1 パソコンとスマホのファーストビューのサイズ

fv16

サイズだが、PCサイトのファーストビューの推奨サイズは高さ550ピクセル×横1,000ピクセルをおすすめする。

なぜなら、デスクトップやノートパソコン、小型のモバイルタブレット等、画面サイズは様々だが80%以上のユーザーが問題なく閲覧できるからである。

それに対しスマホの場合は、高さ460ピクセル×横320ピクセルがよい。スマホも機種によって画面サイズは違うが現時点ではシェア率の高い「iPhone 5/5s/5c」を基準にして考えている。

ちなみに、スマートフォン市場におけるiPhoneのシェア率は53%だ。(2015年2月末時点)
iPhoneといっても機種は色々あるが、昨年発売された画面サイズの大きい「iPhone 6/6Plus」を基準にしてしまうと、それよりも小さい画面サイズのスマートフォンで見た場合ファーストビューの範囲が異なってしまうので、「iPhone 5/5s/5c」を基準として考えた方が良いだろう。

冒頭でお伝えしたとおり、PCサイトもスマホサイトもファーストビューに入れる内容は一緒だと考えているが、設計はまったく別のものと理解したほうがよいだろう。

2 ファーストビュー設計で必要な4つのポイント

ここからは、効果の得られるファーストビューの設計についてお話していこうと思う。

いきなりテクニックに入ると自社用に応用が効かなくなるので、まずはこれらの考え方を頭に入れて自分で作れるようになってほしい。実際のテクニックや実例については第3章に書いていく。

ファーストビュー設計で確認しておきたいことは以下の4点だ。

  1. ファーストビューの基本的な考え方
  2. 各ページで表示する内容
  3. サイトの種類による違い
  4. 新規・リピーターに対応した作り方

これだけを見ても理解しづらいと思うので、一つ一つ見ていこう。

ポイント1 ファーストビューの基本的な考え方

あなたのサイトに初めて訪問して来たユーザーには3つのことを瞬時に伝える。

  1. 信頼
  2. お得
  3. 求めていたモノが見つかる

初回訪問者が、顧客になるのか、それとも他社サイトに行ってしまうのかはファーストビューで決まると言っても過言ではない。「瞬時」に伝える点が設計上、工夫しないといけないところだ。

ポイント2 各ページで表示する内容

ファーストビューと一口に言っても「トップページ」や「商品一覧ページ」等サイトの各ページごとに優先する要素が変わってくる。

どのページであっても重要であることは間違いないのだが、それぞれのページが持つ意味やユーザーの操作性を考えると優先度を付けて考えたほうがイメージがしやすいと思う。

下記のような表にまとめることが出来る。
fv08

では、それぞれどのような要素を盛り込めばユーザーの心を掴むことが出来るのかお伝えする。

<トップページ>

トップページは、入り口となるページであるため、どのようなサイトであるか伝える必要がある。

「信頼」、「お得、」「欲しい商品&情報」はいずれも優先度が高いだろう。

<商品詳細ページ>

商品詳細ページにはキャンペーンページや商品一覧ページから流入するユーザーが多い。

その場合はユーザー自身が選んだ商品の情報を求めているので、ファーストビューに商品画像が入っていることが必須だ。

<商品一覧ページ>

既にサイト回遊をしている状態であると考えられる。

そのため、ユーザーにサイトを信頼してもらった上で「このサイトには自分が求めている商品があるかもしれない」と期待している状態だろう。

だから、信頼感やお得感よりもユーザーが欲しいと思っている商品を並べてファーストビューに載せる必要がある。

<その他のページ>

例えばログインページを想定すると、サイトの信頼性などよりも、ログインをするための操作性がファーストビューで優先される。

ログインページでなかなかログイン入力欄が出て来ない設計は正しくない。ログインページに来ているということはすでにある程度はサイトを信頼していると考えるのが自然だ。

会員登録ページも同様に、操作性を優先すべきだろう。

このように、ユーザーがそのページに対して何を求めているかを考えて構成することが最も大切だ。

ポイント3 サイトの種類による違い

fv17TOPページから商品一覧ページへたどるサイトも少なくないだろうが、サイトによってはランディング(流入)先が商品一覧ページや商品詳細ページが多いサイトもあるだろう。

ランディングするというのはユーザーは何かしらの期待を持っている。その期待というのは初回訪問者であればGoogle等の検索結果ページに書かれた文言を読み、「このサイトであれば自分が欲する情報を満たしてくれる」と思っている。

検索結果の「文言」。

つまり、ファーストビューの画面設計としてはtitle、description、keywordで記述した内容とギャップを起こさないようにすることが重要だ。「思っていたサイトと違う」とユーザーが感じてしまったら即離脱してしまう。

広告からの遷移先のランディングページは下記の化粧品販売サイトのように、実物の化粧品をファーストビューに大きく表示するのがよい。理由は、雑誌やTVなどの広告媒体には実物を伝えているので、このページを見た瞬間に「あ!この商品!」とユーザーに伝わるためだ。
fv18

ポイント4 新規・リピーターに対応した作り方

新規リピーターサイトへ来るユーザーは2種類いる。つまり、通りすがりの「新規訪問者」なのか、それとも既に一回以上購入したことがある「リピーター」であるのかだ。

それぞれのユーザーは当然サイトに求めることが違って来るから画面設計時にはどちらのケースも意識する必要があることを忘れてはならない。

購入した商品や購入後のフォローに不満がなければ購入者はまた買おうとサイトへアクセスするが、その導線はメルマガからかもしれないし、ブックマークからかもしれないし、サイト名をGoogle検索して流入してくるかもしれない。

ポイント1で伝えた3つは購入経験があれば信頼はしていることになるし、欲しい商品がある状態であると考えることができる。

お得な情報を訴求するのは新規訪問者、リピーターであっても変わらないが、購入者としてはログインのしやすさやカテゴリメニューへの導線、今行っているキャンペーンページへの導線等、サイトの「操作性」をより求めることになる。

従って新規訪問者向けの信頼等の情報とリピーター向けの操作性を満たす画面設計をファーストビューでは行う必要がある。

3 ユーザーの目の動きの理解

fv04

ところで、ユーザーがファーストビューのどこを見ているかご存知だろうか。

上図のように、見る可能性が高いところと低いところがあるので、ユーザーの目の動きも意識した設計が必要だ。

例えば、最上部は見逃している(見ているようで見ていない)ので、あえてユーザーが意識して見ようとするメニューや情報を配置するのがセオリーである。

ECサイトの場合、ログインやカート、会員登録などがトップページの最上部の右側にあるのは、それらのメニューはユーザー自身が意識して操作して、ログインや会員登録をしようと思っているユーザー専用のメニューだからだ。

以下の写真は「ヒートマップ」というWebサイトの分析結果だ。赤→黄→青の順番でどこをユーザーが見ているかを示している。
fv15

画面一番上の少し下あたりをユーザーは最も見ていることが明白である。

したがって、ここにユーザーの興味を引く情報を盛り込むことで確実に直帰率の低下とCVRの向上に貢献するだろう。

4 ファーストビューの5つの事例

最後に実在するスマホECサイトではどのようなことを意識して設計しているか、サイトごとに見ていきたい。メニューの多いECサイトを紹介するが、基本的な考え方はランディングページであってもブランディング系のサイトであっても変わらないので読んで欲しい。

ECサイト・・・楽天市場

fv10
トップページのファーストビューで右上に会員登録、ログインがあるのは、会員登録とログインを自らの意思でしようと思っているユーザーのみがタップできればよいメニューだからだろう。

会員登録、ログインは初回訪問者がすぐに操作する必要のあるメニューではない。サイトを気に入ったユーザーが登録したり、すでに登録済のユーザーがログインをするのであるから、あえて右上に配置することで、初回訪問者の誤タップを防止をする配置になっていると思われる。


お得という点では、「30%以上のポイントバック」「今なら+10%」という表記が目に飛び込んでくるので期待感が生まれる。


ナビゲーション、急上昇ワード、フリーワード検索がファーストビューにあり、ユーザーのしたいどの操作であってもファーストビューからすぐに行動できる点を工夫している。

ECサイト・・・ニッセン(総合通販)

fv11

ニッセンの場合はカタログ(紙)を手元に持っているユーザーがスマホから注文することも想定して「カタログからのご注文」メニューを右上の配置し、その導線ユーザー向けのメニューをファーストビューに配置している。


楽天と違う点は「メニュー」というスライド式のショートカットがあることだ。メニューにすべてのメニュー導線があるのだが、その影響でファーストビューはシンプルになっている。ユーザーの年齢層を考えてのことかもしれない。


CM放送中のメニューをファーストビューに出していることにより、TVでCMを見て、その商品が欲しいと思い「ニッセン」と検索したユーザーがサイトにア クセスした時に最初に目に入るようになっている。カタログを持っているユーザー、CMを見ているユーザー等、様々なチャネルからの流入を想定したトップ ページになっており、ユーザーの流入経路を考えた結果のファーストビューだ。

ECサイト・・・トイザらス(玩具)

fv12

トイザらスではナビゲーションが4つになっており、他のサイトに比べて行間がある。だから操作がしやすい。ショッピングカート表示も秀逸で、ページ遷移を発生させずにスライド式でカートを開くことが出来るのは導線を減らすという視点で便利だ。


ベビーザらスへの移動も、すぐに出来るようにリンクを最上部へ配置しているのは便利だ。トイザらスと検索して流入したユーザーがベビーザらスへ遷移することも少なくないと考えられるためだ。


送料無料の告知や50%OFF企画も載せているためメリットを感じた。


売り出し中の商品画像はファーストビューに大きく表示し、おもちゃ販売サイトとしての魅力を伝えている。

ECサイト・・・ケンコーコム(健康食品)

fv13

一見すると悪くないように見えるが、既存ユーザーがログインをしようと思う場合や、履歴を確認する場合は、サイトトップページの下のほうにあるメニューか らしか操作することが出来ないのが若干不便さがある。ファーストビューではランキングを見せることで売れ筋商品は伝えているが、もう少しお得な情報を伝え たほうがユーザーにメリットがあるだろう。


さらにファーストビューに掲載されている商品画像が3商品なのは多少物足りないと思う。少し味気なく感じてしまうし、お得な印象ももっと伝えたほうがよう だろう。何か薬等を探していて、たまたまケンコーコムサイトに訪問して来たユーザーは、離脱してしまうのではないかと感じた。

ECサイト・・・西友(ネットスーパー)

fv14

3章の目の動きのヒートマップでもお伝えした通り、もっとも目のつく位置に ユーザーにとって高い価値である「最短即日配送」「1,980円以上の購入で送料無料」が 記載されていると、このサイトから購入したいという気持ちが高まるだろう。


会員登録やログインはナビゲーションにあることから既存ユーザー向けの操作性を意識していると考えられる。ネットスーパーなので日常的にサイトアクセスし商品を購入して貰いたいので、そのような導線にしているのかもしれない。


季節ごとの特集を大きく表示しているのは、新聞の折り込みチラシのように、ユーザーの目に入るところにユーザーがその時に欲しいものを伝えている。

5 まとめ

ファーストビューの設計についてお伝えしたが、難しく感じる方もいるかもしれない。

しかし、ユーザーの心を掴むファーストビューにすることで大幅な売上アップに繋がるので、ぜひ上記の4つのポイントを踏まえながら設計をして欲しい。

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*